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:T3b71,"use client" import * as React from "react" import type * as THREE from "three" import { cn } from "@/lib/utils" import { shapeData } from "@/lib/cojeev/shape-data" import { signatureShapePaths, type SignatureShapeName } from "@/lib/cojeev/signature-shapes" import { sculptureMaterial, type SculptureMaterial } from "@/lib/cojeev/sculpture-material" import { Shape } from "@/components/ui/shape" import { getServerSettingsSnapshot, getSettingsSnapshot, subscribeSettings } from "@/lib/cojeev-motion/settings" import { useReducedMotion } from "@/lib/cojeev-motion/use-reduced-motion" export type SceneShape = "star-4" | "blob-4" | "heart" | "crescent" | SignatureShapeName export type { SculptureMaterial } export type ShapeSceneProps = React.ComponentProps<"div"> & { palette?: "cojeev" | "warm" | "cool" shapes?: readonly SceneShape[] density?: "sparse" | "balanced" | "full" interactive?: boolean animate?: boolean /** Tactile procedural surfaces, including an animated ripple shader. */ material?: SculptureMaterial } const defaults: readonly SceneShape[] = ["clover-soft", "pebble-soft", "cushion", "ribbon-soft", "petal-7", "heart"] const supported: readonly string[] = ["star-4", "blob-4", "heart", "crescent", ...Object.keys(signatureShapePaths)] const colors = { cojeev: ["#F5B8DB", "#9AAB63", "#B6CAEB", "#F5D867"], warm: ["#F5B8DB", "#F5D867", "#E1CDB2", "#9AAB63"], cool: ["#B6CAEB", "#9AAB63", "#F5B8DB", "#D5DFEC"] } const placements = [ { x: -1.1, y: .8, z: .18, size: 1.2, rx: .18, ry: -.28, rz: -.16 }, { x: 1.04, y: .68, z: -.12, size: .94, rx: -.2, ry: .32, rz: .2 }, { x: -.95, y: -1.14, z: .26, size: .9, rx: .2, ry: .3, rz: .18 }, { x: 1.12, y: -1.13, z: .38, size: 1.05, rx: -.18, ry: -.28, rz: -.28 }, { x: -.14, y: 1.72, z: -.8, size: .34, rx: .2, ry: .3, rz: .4 }, { x: .08, y: -2.04, z: -.5, size: .3, rx: -.2, ry: .2, rz: -.1 }, ] type MotionOptions = { animate: boolean; interactive: boolean; quiet: boolean } type SceneControl = { configure: (options: MotionOptions) => void } /** An optional, lazily loaded WebGL sculpture with an authored static fallback. */ export function ShapeScene({ palette = "cojeev", shapes = defaults, density = "balanced", interactive = true, animate = true, material = "mixed", className, ref, children, ...props }: ShapeSceneProps) { const host = React.useRef(null) const surface = React.useRef(null) const control = React.useRef(null) const reduced = useReducedMotion() const settings = React.useSyncExternalStore(subscribeSettings, getSettingsSnapshot, getServerSettingsSnapshot) const quiet = reduced || settings.motion.mode === "off" const shapeKey = (shapes.length ? shapes : defaults).filter(name => supported.includes(name)).join(",") || defaults.join(",") const names = shapeKey.split(",") as SceneShape[] const count = density === "full" ? 6 : density === "sparse" ? 3 : 4 const sceneKey = `${palette}:${count}:${shapeKey}:${material}` const [rendered, setRendered] = React.useState<{ key: string; kind: "webgl" | "fallback" } | null>(null) const rendererState = rendered?.key === sceneKey ? rendered.kind : "pending" // Options are updated separately so a preference change never rebuilds a WebGL context. const options = React.useRef({ animate, interactive, quiet }) React.useEffect(() => { options.current = { animate, interactive, quiet } control.current?.configure(options.current) }, [animate, interactive, quiet]) React.useEffect(() => { const element = host.current, mount = surface.current if (!element || !mount) return let disposed = false, started = false, visible = false, painted = false, frame = 0, previousTime = 0, elapsed = 0 let renderer: THREE.WebGLRenderer | undefined let scene: THREE.Scene | undefined let camera: THREE.OrthographicCamera | undefined let group: THREE.Group | undefined let currentOptions = options.current const hoverPointer = window.matchMedia("(any-hover: hover) and (any-pointer: fine)") let targetX = 0, targetY = 0 let width = 0, height = 0 const geometries = new Set() const materials = new Set() const lights: THREE.DirectionalLight[] = [] const pieces: THREE.Mesh[] = [] const clock = { value: 0 } const sceneColors = () => palette === "cojeev" ? ["pink", "olive", "blue", "yellow"].map(tone => getComputedStyle(element!).getPropertyValue(`--v-${tone}`).trim() || colors.cojeev[0]) : colors[palette] const repaint = () => { const next = sceneColors(); pieces.forEach((piece, i) => (piece.material as THREE.MeshStandardMaterial).color.set(next[i % 4])); requestRender() } const cleanups: (() => void)[] = [] const selected = shapeKey.split(",") as SceneShape[] function cancel() { if (frame) cancelAnimationFrame(frame); frame = 0; previousTime = 0 } function canRender() { return !disposed && visible && !document.hidden && !!renderer } function requestRender() { if (canRender() && !frame) frame = requestAnimationFrame(draw) } function draw(time: number) { frame = 0 if (!canRender() || !renderer || !scene || !camera || !group) return const delta = previousTime ? Math.min((time - previousTime) / 1000, .05) : 0 previousTime = time const moving = currentOptions.animate && !currentOptions.quiet if (moving) elapsed += delta clock.value = currentOptions.quiet ? 0 : elapsed const allowPointer = currentOptions.interactive && !currentOptions.quiet const x = allowPointer ? targetX : 0, y = allowPointer ? targetY : 0 const damping = 1 - Math.exp(-Math.max(delta, 1 / 60) * 18) group.rotation.x += (x - group.rotation.x) * damping group.rotation.y += (y - group.rotation.y) * damping pieces.forEach((piece, index) => { const placement = placements[index] piece.position.y = placement.y + (moving ? Math.sin(elapsed * .65 + index * 1.8) * .07 : 0) piece.rotation.z = placement.rz + (moving ? Math.sin(elapsed * .4 + index) * .035 : 0) }) renderer.render(scene, camera) if (!painted) { painted = true; setRendered({ key: sceneKey, kind: "webgl" }) } if (moving || Math.abs(group.rotation.x - x) + Math.abs(group.rotation.y - y) > .0005) requestRender() else previousTime = 0 } function resize() { if (!renderer || !camera) return const rect = element!.getBoundingClientRect() if (rect.width <= 0 || rect.height <= 0) return width = rect.width; height = rect.height renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.5)) renderer.setSize(width, height, false) const aspect = width / height const halfHeight = Math.max(3.05, 3.05 / aspect) camera.left = -halfHeight * aspect; camera.right = halfHeight * aspect camera.top = halfHeight; camera.bottom = -halfHeight camera.updateProjectionMatrix() requestRender() } function release() { cancel() cleanups.splice(0).forEach(cleanup => cleanup()) geometries.forEach(geometry => geometry.dispose()); geometries.clear() materials.forEach(material => material.dispose()); materials.clear() lights.forEach(light => light.shadow.map?.dispose()) if (renderer) { renderer.dispose(); renderer.forceContextLoss(); renderer.domElement.remove(); renderer = undefined } } function fallback() { if (disposed) return release() setRendered({ key: sceneKey, kind: "fallback" }) } async function initialize() { if (started || disposed) return started = true try { const [three, { SVGLoader }, { toCreasedNormals }] = await Promise.all([import("three"), import("three/addons/loaders/SVGLoader.js"), import("three/addons/utils/BufferGeometryUtils.js")]) if (disposed) return renderer = new three.WebGLRenderer({ alpha: true, antialias: true, powerPreference: "low-power" }) renderer.setClearColor(0x000000, 0) renderer.outputColorSpace = three.SRGBColorSpace renderer.toneMapping = three.ACESFilmicToneMapping renderer.toneMappingExposure = 1.05 renderer.shadowMap.enabled = true renderer.shadowMap.type = three.PCFShadowMap renderer.domElement.setAttribute("aria-hidden", "true") renderer.domElement.dataset.slot = "shape-scene-canvas" mount!.append(renderer.domElement) scene = new three.Scene() camera = new three.OrthographicCamera(-4, 4, 3, -3, .1, 50) camera.position.set(0, 0, 12) group = new three.Group(); scene.add(group) scene.add(new three.HemisphereLight(0xffffff, 0x9f8a7a, 1.8)) const key = new three.DirectionalLight(0xfff6e8, 3) key.position.set(-3, 5, 8); key.castShadow = true key.shadow.mapSize.set(1024, 1024) key.shadow.camera.left = -5; key.shadow.camera.right = 5 key.shadow.camera.top = 5; key.shadow.camera.bottom = -5 key.shadow.normalBias = .03; key.shadow.bias = -.0005 key.shadow.radius = 4 lights.push(key); scene.add(key) const fill = new three.DirectionalLight(0xc9daff, 1) fill.position.set(4, -2, 5); scene.add(fill) const loader = new SVGLoader() for (let index = 0; index < count; index++) { const name = selected[index % selected.length] const data = shapeData[name] const svg = decodeURIComponent(data.slice(data.indexOf(",") + 1, data.lastIndexOf('"'))) const paths = loader.parse(svg).paths.flatMap(path => path.toShapes()) const extruded = new three.ExtrudeGeometry(paths, { depth: 18, bevelEnabled: true, bevelSegments: 5, steps: 1, bevelSize: 2.4, bevelThickness: 6, curveSegments: 8 }) const geometry = toCreasedNormals(extruded, Math.PI / 3) if (geometry !== extruded) extruded.dispose() geometry.center(); geometry.rotateX(Math.PI); geometry.scale(.018, .018, .018) geometries.add(geometry) const kind = material === "mixed" ? (["grain", "glazed", "ripple", "clay"] as const)[index % 4] : material const face = sculptureMaterial(three, sceneColors()[index % 4], kind, clock) materials.add(face) const piece = new three.Mesh(geometry, face) const placement = placements[index] piece.position.set(placement.x, placement.y, placement.z) piece.rotation.set(placement.rx, placement.ry, placement.rz) piece.scale.setScalar(placement.size) piece.castShadow = true; piece.receiveShadow = true pieces.push(piece); group.add(piece) } const backGeometry = new three.PlaneGeometry(24, 24) const backMaterial = new three.ShadowMaterial({ color: 0x4b3a43, opacity: .12 }) geometries.add(backGeometry); materials.add(backMaterial) const back = new three.Mesh(backGeometry, backMaterial) back.position.z = -1.35; back.receiveShadow = true; scene.add(back) const onLost = (event: Event) => { event.preventDefault(); fallback() } renderer.domElement.addEventListener("webglcontextlost", onLost) const canvas = renderer.domElement cleanups.push(() => canvas.removeEventListener("webglcontextlost", onLost)) resize() // The fallback stays visible until an onscreen frame has completed. requestRender() } catch { fallback() } } const sceneControl: SceneControl = { configure(next) { currentOptions = next if (next.quiet || !next.interactive) { targetX = 0; targetY = 0 if (group) group.rotation.set(0, 0, 0) } cancel(); requestRender() } } control.current = sceneControl const onPointer = (event: PointerEvent) => { // Touch browsers can emit compatibility mouse events after a tap. // Only a real hover-capable input should tilt the sculpture. if (!hoverPointer.matches || !currentOptions.interactive || currentOptions.quiet || event.pointerType === "touch") return const rect = element.getBoundingClientRect() targetY = Math.max(-1, Math.min(1, (event.clientX - rect.left) / rect.width * 2 - 1)) * .16 targetX = Math.max(-1, Math.min(1, (event.clientY - rect.top) / rect.height * 2 - 1)) * .1 requestRender() } const onLeave = (event: PointerEvent) => { if (!hoverPointer.matches || event.pointerType === "touch") return; targetX = 0; targetY = 0; if (currentOptions.interactive && !currentOptions.quiet) requestRender() } const onHoverCapability = () => { if (!hoverPointer.matches) { targetX = 0; targetY = 0; if (group) group.rotation.set(0, 0, 0); requestRender() } } const onVisibility = () => { if (document.hidden) cancel(); else requestRender() } element.addEventListener("pointermove", onPointer) element.addEventListener("pointerleave", onLeave) hoverPointer.addEventListener("change", onHoverCapability) document.addEventListener("visibilitychange", onVisibility) window.addEventListener("cojeev:appearancechange", repaint) const resizeObserver = new ResizeObserver(resize); resizeObserver.observe(element) const intersection = new IntersectionObserver(entries => { visible = entries[0]?.isIntersecting ?? false if (visible) { void initialize(); requestRender() } else cancel() }) intersection.observe(element) return () => { disposed = true if (control.current === sceneControl) control.current = null intersection.disconnect(); resizeObserver.disconnect() element.removeEventListener("pointermove", onPointer); element.removeEventListener("pointerleave", onLeave) hoverPointer.removeEventListener("change", onHoverCapability) document.removeEventListener("visibilitychange", onVisibility) window.removeEventListener("cojeev:appearancechange", repaint) release() } }, [shapeKey, palette, count, sceneKey, material]) return (

{ host.current = node; if (typeof ref === "function") return ref(node); if (ref) ref.current = node }, [ref])} data-slot="shape-scene" data-renderer={rendererState} data-palette={palette} data-material={material} className={cn("v-shape-scene", className)} aria-description={rendererState === "fallback" ? "3D is unavailable. Showing the static composition." : undefined} role="img" aria-label="A tactile composition of softly sculpted Cojeev shapes" {...props}> ) } 52:T7f1,import type * as THREE from "three"; export type SculptureMaterial = "clay" | "glazed" | "grain" | "ripple" | "mixed"; /** Authored object-space textures. No downloaded bitmap or additional render pass. * The material keeps Three's lighting, colour management and shadow pipeline. */ export function sculptureMaterial(three: typeof THREE, color: string, kind: Exclude, clock: { value: number }) { const material = new three.MeshPhysicalMaterial({ color, roughness: kind === "glazed" ? .22 : kind === "grain" ? .82 : .55, metalness: 0, clearcoat: kind === "glazed" ? .85 : .08, clearcoatRoughness: .3 }); material.onBeforeCompile = shader => { shader.uniforms.uSahaTime = clock; shader.vertexShader = "varying vec3 vSahaPosition;\n" + shader.vertexShader; shader.vertexShader = shader.vertexShader.replace("#include ", "#include \nvSahaPosition = position;"); shader.fragmentShader = `varying vec3 vSahaPosition; uniform float uSahaTime; float sahaNoise(vec3 p) { return fract(sin(dot(p, vec3(12.9898, 78.233, 37.719))) * 43758.5453); } ` + shader.fragmentShader; const texture = kind === "grain" ? "float speck = smoothstep(.87, .98, sahaNoise(floor(vSahaPosition * 125.0))); diffuseColor.rgb *= 1.0 - speck * .22;" : kind === "ripple" ? "float contour = sin(vSahaPosition.x * 21.0 + sin(vSahaPosition.y * 9.0 + uSahaTime * .35) * 2.4 + vSahaPosition.z * 7.0); float band = smoothstep(.45, .92, contour); diffuseColor.rgb *= .80 + band * .20;" : kind === "clay" ? "float clay = sahaNoise(floor(vSahaPosition * 180.0)); diffuseColor.rgb *= .94 + clay * .06;" : "float wash = .5 + .5 * sin(vSahaPosition.y * 5.0 + sin(vSahaPosition.x * 3.0)); diffuseColor.rgb *= .90 + wash * .10;"; shader.fragmentShader = shader.fragmentShader.replace("#include ", "#include \n" + texture); }; material.customProgramCacheKey = () => `cojeev-sculpture-${kind}-1`; return material; } 53:T9c3,@layer cojeev-states { @layer cojeev-components { [data-slot="shape-scene"] { position: relative; isolation: isolate; width: 100%; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-card, 32px); background: radial-gradient(ellipse at 36% 22%, var(--v-paper), var(--v-beige)); } [data-slot="shape-scene"][data-palette="cool"] { background: radial-gradient(ellipse at 36% 22%, #f0f3fd, #dce4f1 65%, #cbd4e5); } [data-slot="shape-scene"] [data-slot="shape-scene-surface"], [data-slot="shape-scene"] [data-slot="shape-scene-fallback"] { position: absolute; inset: 0; } [data-slot="shape-scene"] [data-slot="shape-scene-canvas"] { display: block; width: 100%; height: 100%; } [data-slot="shape-scene"] [data-slot="shape-scene-fallback"] { pointer-events: none; } [data-slot="shape-scene"][data-renderer="webgl"] [data-slot="shape-scene-fallback"] { visibility: hidden; } [data-slot="shape-scene"] [data-slot="shape-scene-fallback"] > span { position: absolute; width: 25%; aspect-ratio: 1; filter: drop-shadow(6px 12px 9px #6c48552b); } [data-slot="shape-scene"] [data-slot="shape-scene-fallback"] [data-slot="shape"] { width: 100%; height: 100%; background: linear-gradient(145deg, color-mix(in srgb, var(--scene-color) 65%, white), var(--scene-color) 60%, color-mix(in srgb, var(--scene-color) 75%, #79615c)); } [data-slot="shape-scene"] [data-slot="shape-scene-fallback"] > :nth-child(1) { left: 22%; top: 20%; transform: rotate(-12deg); } [data-slot="shape-scene"] [data-slot="shape-scene-fallback"] > :nth-child(2) { left: 52%; top: 20%; transform: rotate(16deg) scale(.9); } [data-slot="shape-scene"] [data-slot="shape-scene-fallback"] > :nth-child(3) { left: 25%; top: 53%; transform: rotate(12deg) scale(.85); } [data-slot="shape-scene"] [data-slot="shape-scene-fallback"] > :nth-child(4) { left: 53%; top: 50%; transform: rotate(-18deg); } [data-slot="shape-scene"] [data-slot="shape-scene-fallback"] > :nth-child(5) { left: 39%; top: 9%; transform: scale(.3); } [data-slot="shape-scene"] [data-slot="shape-scene-fallback"] > :nth-child(6) { left: 40%; top: 67%; transform: scale(.25); } [data-slot="shape-scene"] [data-slot="shape-scene-status"] { position: absolute; left: 16px; right: 16px; bottom: 12px; color: var(--v-text-2); font: 12px/1.4 var(--font-text, sans-serif); text-align: center; } @media (max-width: 480px) { [data-slot="shape-scene"] { aspect-ratio: 1; border-radius: 24px; } } } } 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","three@0.185.1",{"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@0.185.1"}]]}]}]]}],["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/shape.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/shape-scene.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/shape-scene.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/lib/sculpture-material.tsx","content":"$52","type":"registry:lib","target":"lib/cojeev/sculpture-material.tsx"},{"path":"registry/cojeev/styles/shape-scene.css","content":"$53","type":"registry:file","target":"styles/cojeev/shape-scene.css"}],"className":"h-[70svh] min-h-80"}]]}]