4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[544296,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f:I[34002,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 50: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T2a07,"use client"; import * as React from "react"; import { animate, motion, useMotionValue, useScroll, useSpring, useTransform, type MotionValue } from "motion/react"; import { cn } from "@/lib/utils"; import { assignMotionRef } from "@/lib/cojeev-motion/refs"; import { motionTokens, trackMotion, useChoreography } from "@/lib/cojeev-motion/choreography"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; export type DepthBackgroundVariant = "pollen" | "contour" | "orbital"; export type DepthBackgroundProps = Omit, "children"> & { variant?: DepthBackgroundVariant; /** Relative piece count, bounded to .35–2. */ density?: number; /** Motion strength, bounded to 0–2; zero preserves the still artwork. */ intensity?: number; seed?: number | string; }; type DepthPiece = { x: number; y: number; size: number; layer: number; color: number; angle: number; phase: number; shape: number }; const palette = ["var(--v-pink)", "var(--v-olive)", "var(--v-blue)", "var(--v-yellow)"]; const planes = [ { name: "far", z: -340, speed: .36, opacity: .22 }, { name: "middle", z: -70, speed: .68, opacity: .34 }, { name: "near", z: 145, speed: 1, opacity: .32 }, ]; const bounded = (value: number, minimum: number, maximum: number, fallback: number) => Number.isFinite(value) ? Math.max(minimum, Math.min(maximum, value)) : fallback; /** Stable geometry for SSR, hydration and consumer screenshots. No render-time randomness. */ export function depthBackgroundPoints(variant: DepthBackgroundVariant, density = 1, seed: number | string = "cojeev") { let hash = 2166136261; for (const char of String(seed)) hash = Math.imul(hash ^ char.charCodeAt(0), 16777619); const next = () => { hash = (hash + 0x6d2b79f5) | 0; let value = Math.imul(hash ^ hash >>> 15, 1 | hash); value ^= value + Math.imul(value ^ value >>> 7, 61 | value); return ((value ^ value >>> 14) >>> 0) / 4294967296; }; const count = variant === "contour" ? Math.max(3, Math.round(3 * bounded(density, .35, 2, 1)) + 1) : Math.round((variant === "pollen" ? 42 : 24) * bounded(density, .35, 2, 1)); return Array.from({ length: count }, (_, index): DepthPiece => { const layer = index % 3; let x = next() * 100, y = next() * 100; // Keep the reading centre clear through composition, rather than a gradient cloud. if (x > 22 && x < 78 && y > 18 && y < 84) x = x < 50 ? 5 + next() * 17 : 78 + next() * 17; if (variant === "contour") { x = index % 2 ? 103 + next() * 10 : -12 + next() * 10; y = 12 + (index % 3) * 37 + next() * 14; } return { x, y, layer, color: index % palette.length, size: variant === "contour" ? 68 + next() * 25 : variant === "pollen" ? [5, 11, 25][layer] + next() * [5, 8, 17][layer] : [15, 28, 44][layer] + next() * 10, angle: next() * 360, phase: next() * Math.PI * 2, shape: index % 4, }; }); } const contour = "M315 54C398 35 486 86 513 163C541 243 514 267 541 327C570 393 516 494 433 503C359 511 346 555 268 535C186 514 209 472 135 458C64 444 38 370 68 306C99 242 41 201 93 130C141 63 226 75 315 54Z"; function ContourGraphic({ shape }: { shape: number }) { return ; } function OrbitalGraphic({ shape }: { shape: number }) { return ; } type FieldMotion = { phase: MotionValue; scroll: MotionValue; pointerX: MotionValue; pointerY: MotionValue; width: MotionValue; height: MotionValue; active: boolean; intensity: number }; function Piece({ piece, variant, field }: { piece: DepthPiece; variant: DepthBackgroundVariant; field: FieldMotion }) { const plane = planes[piece.layer]; const position = useTransform(() => { if (!field.active) return { x: 0, y: 0, rotation: piece.angle }; const phase = field.phase.get() * Math.PI * 2 + piece.phase; const px = piece.x / 100 * field.width.get(), py = piece.y / 100 * field.height.get(); const dx = px - field.pointerX.get(), dy = py - field.pointerY.get(), distance = Math.hypot(dx, dy); const force = Math.max(0, 1 - distance / 190) ** 2 * 38 * plane.speed; const repelX = distance > 1 ? dx / distance * force : Math.cos(piece.phase) * force; const repelY = distance > 1 ? dy / distance * force : Math.sin(piece.phase) * force; const amplitude = variant === "contour" ? 17 : variant === "orbital" ? 9 : 13; return { x: (Math.sin(phase) * amplitude * plane.speed + repelX) * field.intensity, y: (Math.cos(phase * 2) * amplitude * .65 * plane.speed + (field.scroll.get() - .5) * -100 * plane.speed + repelY) * field.intensity, rotation: piece.angle + Math.sin(phase) * (variant === "orbital" ? 12 : 3) * field.intensity, }; }); const x = useTransform(position, value => value.x), y = useTransform(position, value => value.y), rotate = useTransform(position, value => value.rotation); const blur = variant === "pollen" ? [1.6, .2, 4.5][piece.layer] : variant === "contour" ? [1.1, 0, .3][piece.layer] : [.9, 0, .55][piece.layer]; return {variant === "contour" ? : variant === "orbital" ? : } ; } /** A decorative perspective field. Mount inside a positioned section, behind its content. */ export function DepthBackground({ variant = "pollen", density = 1, intensity = 1, seed = "cojeev", className, ref, ...props }: DepthBackgroundProps) { const host = React.useRef(null); const attach = React.useCallback((element: HTMLDivElement | null) => { host.current = element; const release = assignMotionRef(ref, element); return () => { host.current = null; release(); }; }, [ref]); const { quiet } = useChoreography(), { enabled, inView } = useMotionVisibility(host); const strength = bounded(intensity, 0, 2, 1), active = !quiet && enabled && inView && strength > 0; const phase = useMotionValue(0), width = useMotionValue(1000), height = useMotionValue(700); const pointerX = useSpring(-10000, motionTokens.spring.responsive), pointerY = useSpring(-10000, motionTokens.spring.responsive); const { scrollYProgress } = useScroll({ target: host, offset: ["start end", "end start"] }); const scroll = useSpring(.5, motionTokens.spring.gentle); const pieces = React.useMemo(() => depthBackgroundPoints(variant, density, seed), [variant, density, seed]); React.useEffect(() => { const element = host.current; if (!element) return; const measure = () => { width.set(element.clientWidth); height.set(element.clientHeight); }; const observer = new ResizeObserver(measure); observer.observe(element); measure(); return () => observer.disconnect(); }, [width, height]); React.useEffect(() => { if (!active) { scroll.jump(.5); pointerX.jump(-10000); pointerY.jump(-10000); return; } const start = phase.get(); const controls = animate(phase, start + 1, { duration: variant === "contour" ? 48 : 32, ease: "linear", repeat: Infinity }); const release = trackMotion(controls); scroll.set(scrollYProgress.get()); const unsubscribe = scrollYProgress.on("change", value => scroll.set(value)); const pointer = (event: PointerEvent) => { if (event.pointerType === "touch") return; const rect = host.current?.getBoundingClientRect(); if (!rect) return; const x = event.clientX - rect.left, y = event.clientY - rect.top; if (x < 0 || x > rect.width || y < 0 || y > rect.height) { pointerX.set(-10000); pointerY.set(-10000); return; } pointerX.set(x); pointerY.set(y); }; const leave = () => { pointerX.set(-10000); pointerY.set(-10000); }; window.addEventListener("pointermove", pointer, { passive: true }); document.addEventListener("pointerleave", leave); return () => { release(); unsubscribe(); scroll.stop(); pointerX.stop(); pointerY.stop(); window.removeEventListener("pointermove", pointer); document.removeEventListener("pointerleave", leave); }; }, [active, variant, phase, scroll, scrollYProgress, pointerX, pointerY]); const field = { phase, scroll, pointerX, pointerY, width, height, active, intensity: strength }; return ; } 52:T471,@layer cojeev-states { .v-depth-background { position: absolute; inset: 0; overflow: clip; pointer-events: none; user-select: none; border-radius: inherit; isolation: isolate; } .v-depth-background__scene { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 45%; transform-style: preserve-3d; } .v-depth-background__piece { position: absolute; display: block; aspect-ratio: 1; margin: -1% 0 0 -1%; transform-style: preserve-3d; backface-visibility: hidden; } .v-depth-background__piece > svg { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; } .v-depth-background[data-variant="contour"] .v-depth-background__piece { translate: -50% -50%; } .v-depth-background__pollen { mix-blend-mode: normal; } .v-depth-background__orbital { stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 600px) { .v-depth-background__scene { perspective: 700px; } .v-depth-background[data-variant="contour"] .v-depth-background__piece { min-width: 28rem; } .v-depth-background[data-variant="pollen"] [data-depth-layer="near"] { opacity: .24; } } } 4c:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/depth-background.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/depth-background.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/depth-background.css","content":"$52","type":"registry:file","target":"styles/cojeev/depth-background.css"}],"className":"h-[70svh] min-h-80"}]]}]