52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T1614,"use client" import * as React from "react" import { useFrame } from "@react-three/fiber" import * as THREE from "three" import { SceneContainer, type SceneContainerProps, } from "@/components/threecn/scene-container" import { useShadcnTheme, type ThemeMode, } from "@/components/hooks/use-shadcn-theme" // Aizawa attractor coefficients — a classic set that traces a spindle wrapped // in orbiting loops. const A = 0.95 const B = 0.7 const C = 0.6 const D = 3.5 const E = 0.25 const F = 0.1 /** Integrate the attractor into a centered, ~4-unit point path (run once). */ function traceAttractor(points: number) { const path = new Float32Array(points * 3) let x = 0.1 let y = 0 let z = 0 const dt = 0.006 let minX = Infinity let maxX = -Infinity let minY = Infinity let maxY = -Infinity let minZ = Infinity let maxZ = -Infinity for (let i = 0; i < points; i++) { const dx = (z - B) * x - D * y const dy = D * x + (z - B) * y const dz = C + A * z - (z * z * z) / 3 - (x * x + y * y) * (1 + E * z) + F * z * x * x * x x += dx * dt y += dy * dt z += dz * dt path[i * 3] = x path[i * 3 + 1] = y path[i * 3 + 2] = z if (x < minX) minX = x if (x > maxX) maxX = x if (y < minY) minY = y if (y > maxY) maxY = y if (z < minZ) minZ = z if (z > maxZ) maxZ = z } const cx = (minX + maxX) / 2 const cy = (minY + maxY) / 2 const cz = (minZ + maxZ) / 2 const span = Math.max(maxX - minX, maxY - minY, maxZ - minZ) || 1 const scale = 4 / span for (let i = 0; i < points; i++) { path[i * 3] = (path[i * 3] - cx) * scale path[i * 3 + 1] = (path[i * 3 + 1] - cy) * scale path[i * 3 + 2] = (path[i * 3 + 2] - cz) * scale } return path } /** Expand the point path into consecutive line segments for . */ function toSegments(path: Float32Array) { const n = path.length / 3 const seg = new Float32Array((n - 1) * 2 * 3) let o = 0 for (let i = 0; i < n - 1; i++) { seg[o++] = path[i * 3] seg[o++] = path[i * 3 + 1] seg[o++] = path[i * 3 + 2] seg[o++] = path[(i + 1) * 3] seg[o++] = path[(i + 1) * 3 + 1] seg[o++] = path[(i + 1) * 3 + 2] } return seg } function Attractor({ points, speed, theme, }: { points: number speed: number theme: ThemeMode }) { const { primaryColor, accentColor, isDark } = useShadcnTheme(theme) const geoRef = React.useRef(null) const groupRef = React.useRef(null) const headRef = React.useRef(null) const head = React.useRef(0) const path = React.useMemo(() => traceAttractor(points), [points]) const segPositions = React.useMemo(() => toSegments(path), [path]) const segColors = React.useMemo( () => new Float32Array(segPositions.length), [segPositions] ) // Gradient --primary → --accent along the orbit; re-run on theme change. React.useLayoutEffect(() => { const attr = geoRef.current?.getAttribute("color") as | THREE.BufferAttribute | undefined if (!attr) return const arr = attr.array as Float32Array const segCount = arr.length / 6 const c = new THREE.Color() for (let i = 0; i < segCount; i++) { c.copy(primaryColor).lerp(accentColor, i / segCount) const o = i * 6 arr[o] = c.r arr[o + 1] = c.g arr[o + 2] = c.b arr[o + 3] = c.r arr[o + 4] = c.g arr[o + 5] = c.b } attr.needsUpdate = true }, [segPositions, primaryColor, accentColor]) useFrame((_, delta) => { if (groupRef.current) groupRef.current.rotation.y += delta * 0.25 * speed // A glowing head sweeps continuously along the traced path. const n = path.length / 3 head.current = (head.current + delta * 120 * speed) % n const idx = Math.floor(head.current) * 3 if (headRef.current) { headRef.current.position.set(path[idx], path[idx + 1], path[idx + 2]) } }) return ( ) } export type StrangeAttractorProps = { /** Number of integration steps traced (path detail). */ points?: number /** Rotation and head speed multiplier. */ speed?: number className?: string theme?: ThemeMode environment?: SceneContainerProps["environment"] } /** * The Aizawa strange attractor, integrated live and drawn as a single glowing * orbit that never quite repeats. A bright head sweeps the path while the whole * form turns. Colored `--primary` → `--accent`; additive glow in dark mode. */ export function StrangeAttractor({ points = 6000, speed = 1, className, theme = "auto", environment = "night", }: StrangeAttractorProps) { return ( ) } 55:T17ce,"use client" import * as React from "react" import { Canvas } from "@react-three/fiber" import { OrbitControls } from "@react-three/drei" import { cn } from "@/lib/utils" import { useShadcnTheme, type ThemeMode, } from "@/components/hooks/use-shadcn-theme" export type EnvironmentPreset = "studio" | "city" | "dawn" | "night" type LightRig = { ambient: { color: string; intensity: number } key: { color: string; intensity: number; position: [number, number, number] } fill: { color: string; intensity: number; position: [number, number, number] } rim: { color: string; intensity: number; position: [number, number, number] } } /** * Offline lighting rigs. We avoid drei's because it * fetches HDRIs from a CDN — scenes must work with zero external assets. */ const RIGS: Record = { studio: { ambient: { color: "#ffffff", intensity: 0.6 }, key: { color: "#ffffff", intensity: 2.2, position: [5, 6, 5] }, fill: { color: "#dfe3ff", intensity: 0.8, position: [-6, 2, 4] }, rim: { color: "#ffffff", intensity: 1.4, position: [0, 4, -6] }, }, city: { ambient: { color: "#c7d2fe", intensity: 0.7 }, key: { color: "#e0e7ff", intensity: 1.8, position: [4, 7, 4] }, fill: { color: "#a5b4fc", intensity: 0.9, position: [-5, 1, 5] }, rim: { color: "#818cf8", intensity: 1.2, position: [-2, 3, -6] }, }, dawn: { ambient: { color: "#fde2c8", intensity: 0.5 }, key: { color: "#ffb27a", intensity: 2.0, position: [6, 4, 4] }, fill: { color: "#9fb4ff", intensity: 0.7, position: [-5, 2, 4] }, rim: { color: "#ffd9a8", intensity: 1.0, position: [0, 5, -5] }, }, night: { ambient: { color: "#1e1b4b", intensity: 0.4 }, key: { color: "#a78bfa", intensity: 1.6, position: [4, 5, 4] }, fill: { color: "#4338ca", intensity: 0.6, position: [-5, 1, 4] }, rim: { color: "#7c3aed", intensity: 1.6, position: [-2, 3, -6] }, }, } function Rig({ preset, fog, theme, }: { preset: EnvironmentPreset fog: boolean theme: ThemeMode }) { const { bgColor } = useShadcnTheme(theme) const rig = RIGS[preset] return ( <> {fog ? : null} ) } /** * Track whether an element is near the viewport. WebGL contexts are a scarce * resource (browsers cap them at ~8-16), so scenes only hold one while they are * on (or close to) screen. The generous `rootMargin` pre-mounts a scene just * before it scrolls into view, avoiding a blank first frame. */ function useInView( ref: React.RefObject, rootMargin: string ): boolean { const [inView, setInView] = React.useState(false) React.useEffect(() => { const el = ref.current if (!el) return if (typeof IntersectionObserver === "undefined") { // No observer available: render eagerly rather than never mounting. // eslint-disable-next-line react-hooks/set-state-in-effect setInView(true) return } const observer = new IntersectionObserver( ([entry]) => setInView(entry.isIntersecting), { rootMargin } ) observer.observe(el) return () => observer.disconnect() }, [ref, rootMargin]) return inView } export type SceneContainerProps = { className?: string theme?: ThemeMode environment?: EnvironmentPreset fog?: boolean /** Camera position, defaults to a gentle 3/4 view. */ camera?: [number, number, number] /** Vertical field of view. */ fov?: number children?: React.ReactNode /** Rendered as an HTML overlay above the canvas (not inside the 3D scene). */ overlay?: React.ReactNode /** * Drag to orbit the camera (rotate only — zoom and pan disabled). Defaults to * true. Set false if the scene provides its own controls. */ orbit?: boolean /** * Mount the WebGL canvas only while it is near the viewport, and tear it down * once it scrolls away. Keeps a grid of many scenes from exhausting the * browser's WebGL context limit and stops `useFrame` from running offscreen. * Defaults to true. Set false for a scene that must always render (e.g. a * persistent hero background). */ lazy?: boolean } /** * The canvas wrapper every threecn scene builds on. Sets up a transparent * canvas (so your CSS background shows through), responsive DPR, a themed * lighting rig and optional fog. */ export function SceneContainer({ className, theme = "auto", environment = "studio", fog = false, camera = [0, 0, 6], fov = 45, children, overlay, orbit = true, lazy = true, }: SceneContainerProps) { const wrapRef = React.useRef(null) const inView = useInView(wrapRef, "300px") const active = lazy ? inView : true return (

{active ? (

) : null} {overlay ?

{overlay}

: null}

) } 56:T1eb5,"use client" import * as React from "react" import { Color } from "three" /** * The set of theme-derived colors exposed to R3F scenes. * Every value is a live `THREE.Color`, ready to assign to a material. */ export type ShadcnThemeColors = { primaryColor: Color primaryForegroundColor: Color bgColor: Color foregroundColor: Color borderColor: Color mutedColor: Color accentColor: Color isDark: boolean } /** CSS custom properties read from `:root` / `.dark`. */ const CSS_VARS = { primaryColor: "--primary", primaryForegroundColor: "--primary-foreground", bgColor: "--background", foregroundColor: "--foreground", borderColor: "--border", mutedColor: "--muted-foreground", accentColor: "--accent", } as const /** * Neutral SSR defaults (a dark-ish indigo palette) used before the DOM is * available, so the first paint is never a flash of pure black. */ function createDefaults(): ShadcnThemeColors { return { primaryColor: new Color().setHSL(263 / 360, 0.7, 0.6), primaryForegroundColor: new Color().setHSL(0, 0, 0.98), bgColor: new Color().setHSL(240 / 360, 0.1, 0.039), foregroundColor: new Color().setHSL(0, 0, 0.98), borderColor: new Color().setHSL(240 / 360, 0.037, 0.159), mutedColor: new Color().setHSL(240 / 360, 0.05, 0.649), accentColor: new Color().setHSL(240 / 360, 0.037, 0.159), isDark: true, } } /** Matches a bare shadcn HSL triplet, e.g. "263 70% 50%" (optional "/ alpha"). */ const HSL_TRIPLET = /^-?[\d.]+\s+-?[\d.]+%\s+-?[\d.]+%(\s*\/\s*[\d.]+%?)?$/ /** * A lazily-created 1x1 canvas 2D context used to normalise arbitrary CSS * colors. The browser's own color parser resolves ANY format the CSS spec * supports — including `oklch()` (Tailwind v4 / recent shadcn), `color()`, * `hsl()`, `rgb()`, hex and named colors — and serialises the result back as * `#rrggbb` / `rgba(...)`, which `THREE.Color.setStyle` understands. */ let probeCtx: CanvasRenderingContext2D | null | undefined function getProbeCtx(): CanvasRenderingContext2D | null { if (probeCtx !== undefined) return probeCtx if (typeof document === "undefined") return (probeCtx = null) probeCtx = document.createElement("canvas").getContext("2d") return probeCtx } /** * Normalise any CSS color string to a form THREE can parse (or `null` if the * browser rejects it). Assigning an invalid color to `fillStyle` is a no-op, so * we probe with two different sentinels: if the result differs, the input was * valid and both reflect its normalised value; if it "sticks" to a sentinel, * the input was invalid. */ function normalizeColor(input: string): string | null { const ctx = getProbeCtx() if (!ctx) return null ctx.fillStyle = "#000" ctx.fillStyle = input const a = ctx.fillStyle ctx.fillStyle = "#fff" ctx.fillStyle = input const b = ctx.fillStyle return a === b ? a : null } /** * Parse a raw CSS color (as read from a custom property) into a `THREE.Color`. * * shadcn ships colors as bare HSL triplets ("263 70% 50%"), which we wrap in * `hsl(...)`. Everything else — `oklch()`, `rgb()`, `#hex`, `hsl()`, named — is * handed to the browser's parser via a canvas probe, so modern oklch-based * themes resolve correctly instead of silently falling back to the default. */ function parseColor(raw: string, target: Color): Color { const value = raw.trim() if (!value) return target const candidate = HSL_TRIPLET.test(value) ? `hsl(${value})` : value // Preferred path: let the browser resolve any CSS color format. const normalized = normalizeColor(candidate) if (normalized) { try { return target.setStyle(normalized) } catch { /* fall through to the manual paths below */ } } // Fallbacks for environments without a canvas (e.g. exotic SSR shims). const triplet = value.match(/^(-?[\d.]+)\s+(-?[\d.]+)%\s+(-?[\d.]+)%/) if (triplet) { const h = parseFloat(triplet[1]) / 360 const s = parseFloat(triplet[2]) / 100 const l = parseFloat(triplet[3]) / 100 return target.setHSL(h, s, l) } try { return target.setStyle(value) } catch { return target } } function readColors(previous?: ShadcnThemeColors): ShadcnThemeColors { if (typeof window === "undefined" || typeof document === "undefined") { return previous ?? createDefaults() } const root = document.documentElement const styles = getComputedStyle(root) const base = previous ?? createDefaults() const next: ShadcnThemeColors = { ...base, primaryColor: parseColor( styles.getPropertyValue(CSS_VARS.primaryColor), base.primaryColor.clone() ), primaryForegroundColor: parseColor( styles.getPropertyValue(CSS_VARS.primaryForegroundColor), base.primaryForegroundColor.clone() ), bgColor: parseColor( styles.getPropertyValue(CSS_VARS.bgColor), base.bgColor.clone() ), foregroundColor: parseColor( styles.getPropertyValue(CSS_VARS.foregroundColor), base.foregroundColor.clone() ), borderColor: parseColor( styles.getPropertyValue(CSS_VARS.borderColor), base.borderColor.clone() ), mutedColor: parseColor( styles.getPropertyValue(CSS_VARS.mutedColor), base.mutedColor.clone() ), accentColor: parseColor( styles.getPropertyValue(CSS_VARS.accentColor), base.accentColor.clone() ), isDark: root.classList.contains("dark"), } return next } export type ThemeMode = "auto" | "light" | "dark" /** * Bridges your shadcn/ui CSS variables into Three.js. * * - Reads `--primary`, `--background`, `--border`, ... on mount. * - Watches `` with a MutationObserver and re-reads on dark-mode * toggles (works with next-themes, which flips the `.dark` class). * - SSR-safe: returns neutral defaults until the DOM is ready. * * @param mode `"auto"` (default) tracks the document theme. `"light"` / `"dark"` * force a palette by temporarily toggling a detached probe element. */ export function useShadcnTheme(mode: ThemeMode = "auto"): ShadcnThemeColors { const [colors, setColors] = React.useState(() => createDefaults() ) React.useEffect(() => { if (typeof window === "undefined") return // These reads pull the live values out of an external system (the DOM's // computed CSS variables), which is a legitimate effect → state sync. if (mode !== "auto") { // eslint-disable-next-line react-hooks/set-state-in-effect setColors((prev) => readForcedMode(mode, prev)) return } // Initial read once mounted (handles hydration + system theme). setColors((prev) => readColors(prev)) const root = document.documentElement const observer = new MutationObserver(() => { setColors((prev) => readColors(prev)) }) observer.observe(root, { attributes: true, attributeFilter: ["class", "style", "data-theme"], }) return () => observer.disconnect() }, [mode]) return colors } /** * Read the palette as it would appear under a forced light/dark mode. * We synchronously toggle the `.dark` class on ``, read the computed * variables, then restore the original class in the same synchronous block. * getComputedStyle forces a style flush, so the values are accurate and the * browser never paints the intermediate state (no flicker). */ function readForcedMode( mode: "light" | "dark", previous: ShadcnThemeColors ): ShadcnThemeColors { if (typeof document === "undefined") return previous const root = document.documentElement const wasDark = root.classList.contains("dark") const wantDark = mode === "dark" if (wantDark !== wasDark) root.classList.toggle("dark", wantDark) const result = readColors(previous) if (wantDark !== wasDark) root.classList.toggle("dark", wasDark) return result } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","three",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/three","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"three"}]]}]}],["$","li","@react-three/fiber",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Ffiber","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@react-three/fiber"}]]}]}],["$","li","@react-three/drei",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Fdrei","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@react-three/drei"}]]}]}]]}],["$","$L52",null,{"namespace":"@threecn","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/threecn/strange-attractor.tsx","content":"$54","type":"registry:ui"},{"path":"components/threecn/scene-container.tsx","content":"$55","type":"registry:ui"},{"path":"components/hooks/use-shadcn-theme.ts","content":"$56","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]