51: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"] 52: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"] 53:T1b03,"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" const RADIUS = 1.6 const THICKNESS = 0.34 type Vec = [number, number, number] type Shard = { geometry: THREE.BufferGeometry centroid: THREE.Vector3 axis: THREE.Vector3 spin: number } /** Evenly spread N points on a sphere (Fibonacci lattice) as fracture sites. */ function fibonacciSites(n: number) { const sites: THREE.Vector3[] = [] const golden = Math.PI * (3 - Math.sqrt(5)) for (let i = 0; i < n; i++) { const y = n === 1 ? 0 : 1 - (i / (n - 1)) * 2 const r = Math.sqrt(Math.max(0, 1 - y * y)) const t = golden * i sites.push(new THREE.Vector3(Math.cos(t) * r, y, Math.sin(t) * r)) } return sites } function pushTri(out: number[], a: Vec, b: Vec, c: Vec) { out.push(a[0], a[1], a[2], b[0], b[1], b[2], c[0], c[1], c[2]) } /** * Break an icosphere into Voronoi shards (faces assigned to their nearest * site), then give every shard real thickness by extruding it toward the * center — so each fragment reads as a solid chunk, not a paper-thin shell. */ function buildShards(count: number): Shard[] { const base = new THREE.IcosahedronGeometry(RADIUS, 3) const nonIndexed = base.toNonIndexed() base.dispose() const arr = (nonIndexed.getAttribute("position") as THREE.BufferAttribute) .array as Float32Array const sites = fibonacciSites(count) const buckets: number[][] = Array.from({ length: count }, () => []) const f = (RADIUS - THICKNESS) / RADIUS const c = new THREE.Vector3() for (let i = 0; i < arr.length; i += 9) { // Nearest fracture site for this face (by its normalized centroid). c.set( (arr[i] + arr[i + 3] + arr[i + 6]) / 3, (arr[i + 1] + arr[i + 4] + arr[i + 7]) / 3, (arr[i + 2] + arr[i + 5] + arr[i + 8]) / 3 ).normalize() let best = 0 let bestDot = -Infinity for (let s = 0; s < sites.length; s++) { const d = c.dot(sites[s]) if (d > bestDot) { bestDot = d best = s } } const out = buckets[best] // Outer triangle (on the sphere) and its inward-extruded copy. const p: Vec[] = [ [arr[i], arr[i + 1], arr[i + 2]], [arr[i + 3], arr[i + 4], arr[i + 5]], [arr[i + 6], arr[i + 7], arr[i + 8]], ] const q: Vec[] = p.map((v) => [v[0] * f, v[1] * f, v[2] * f]) pushTri(out, p[0], p[1], p[2]) // outer face pushTri(out, q[0], q[2], q[1]) // inner face (reversed winding) // Side walls around the three edges. const edges: [number, number][] = [ [0, 1], [1, 2], [2, 0], ] for (const [a, b] of edges) { pushTri(out, p[a], p[b], q[b]) pushTri(out, p[a], q[b], q[a]) } } nonIndexed.dispose() const shards: Shard[] = [] for (const verts of buckets) { if (verts.length === 0) continue const data = Float32Array.from(verts) const centroid = new THREE.Vector3() for (let i = 0; i < data.length; i += 3) { centroid.x += data[i] centroid.y += data[i + 1] centroid.z += data[i + 2] } centroid.multiplyScalar(3 / data.length) // Recenter geometry on its centroid so the mesh can be positioned and // rotated about its own middle. for (let i = 0; i < data.length; i += 3) { data[i] -= centroid.x data[i + 1] -= centroid.y data[i + 2] -= centroid.z } const geometry = new THREE.BufferGeometry() geometry.setAttribute("position", new THREE.BufferAttribute(data, 3)) geometry.computeVertexNormals() shards.push({ geometry, centroid, axis: new THREE.Vector3( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize(), spin: 0.5 + Math.random() * 1.1, }) } return shards } function Shatter({ shards: shardCount, speed, spread, theme, }: { shards: number speed: number spread: number theme: ThemeMode }) { const { primaryColor, accentColor } = useShadcnTheme(theme) const groupRef = React.useRef(null) const shards = React.useMemo(() => buildShards(shardCount), [shardCount]) React.useEffect(() => { // Free GPU geometry when the shard set is rebuilt or unmounted. const current = shards return () => current.forEach((s) => s.geometry.dispose()) }, [shards]) useFrame(({ clock }) => { const group = groupRef.current if (!group) return const t = clock.getElapsedTime() * speed // Breathe from fully assembled (0) to exploded (1) and back. The easing // lingers on the assembled sphere so the shatter reads clearly. const e = (Math.sin(t * 0.8) * 0.5 + 0.5) ** 1.6 group.rotation.y = t * 0.12 for (let i = 0; i < shards.length; i++) { const child = group.children[i] as THREE.Mesh | undefined if (!child) continue const s = shards[i] const grow = 1 + e * spread child.position.set( s.centroid.x * grow, s.centroid.y * grow, s.centroid.z * grow ) // Absolute (not accumulated) rotation → identity when assembled. child.quaternion.setFromAxisAngle(s.axis, e * s.spin) const mat = child.material as THREE.MeshStandardMaterial mat.color .copy(accentColor) .lerp(primaryColor, s.centroid.y / (RADIUS * 2) + 0.5) } }) return ( {shards.map((s, i) => ( ))} ) } export type VoronoiShatterProps = { /** Number of Voronoi fragments. */ shards?: number /** Explode/reassemble speed multiplier. */ speed?: number /** How far the shards fly apart. */ spread?: number className?: string theme?: ThemeMode environment?: SceneContainerProps["environment"] } /** * A solid sphere fractured into Voronoi shards that drift apart and snap back * together in a slow breath. Each fragment has real thickness, tumbles in * place, and shades from `--accent` to `--primary` by height. */ export function VoronoiShatter({ shards = 24, speed = 1, spread = 0.7, className, theme = "auto", environment = "studio", }: VoronoiShatterProps) { return ( ) } 54: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}

) } 55: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 } 50:["$","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@threecn","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/threecn/voronoi-shatter.tsx","content":"$53","type":"registry:ui"},{"path":"components/threecn/scene-container.tsx","content":"$54","type":"registry:ui"},{"path":"components/hooks/use-shadcn-theme.ts","content":"$55","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]