4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:T5e78,"use client"; import { useEffect, useId, useRef, useState } from "react"; import { useReducedMotion } from "motion/react"; import * as THREE from "three"; export type ProceduralProductViewerProps = { productName?: string; detailLabel?: string; labels?: Partial<{ interactiveViewer: string; staticPreview: string; objectStudy: string; dragToTurn: string; staticBadge: string; activateInteractive: string; detailDescription: string; resetView: string; }>; accent?: string; activation?: "intent" | "auto"; className?: string; }; type RotationState = { x: number; y: number; targetX: number; targetY: number; velocityX: number; velocityY: number; dragging: boolean; pointerId: number | null; lastX: number; lastY: number; lastTime: number; }; const LIMIT_X = 0.32; const LIMIT_Y = 0.72; const INITIALIZE_TIMEOUT_MS = 400; function clamp(value: number, min: number, max: number) { return Math.min(max, Math.max(min, value)); } const yieldToMain = () => new Promise((resolve) => window.setTimeout(resolve, 0)); async function precompileMaterialStages( renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.Camera, cancelled: () => boolean, ) { const renderables: Array<{ object: THREE.Object3D; visible: boolean; materialTypes: readonly string[] }> = []; scene.traverse((object) => { const material = "material" in object ? (object as THREE.Mesh).material : undefined; if (!material) return; const materials = Array.isArray(material) ? material : [material]; renderables.push({ object, visible: object.visible, materialTypes: materials.map((entry) => entry.type), }); }); const materialTypes = [...new Set(renderables.flatMap((entry) => entry.materialTypes))]; for (const materialType of materialTypes) { await yieldToMain(); if (cancelled()) return; for (const entry of renderables) { entry.object.visible = entry.visible && entry.materialTypes.includes(materialType); } renderer.compile(scene, camera); } for (const entry of renderables) entry.object.visible = entry.visible; } function makeProduct( accent: THREE.ColorRepresentation, resources: Set<{ dispose: () => void }>, ) { const group = new THREE.Group(); const track = void }>(resource: T) => { resources.add(resource); return resource; }; const shell = track( new THREE.MeshBasicMaterial({ color: 0x262823, }), ); const dark = track( new THREE.MeshBasicMaterial({ color: 0x0b0d0c, }), ); const accentMaterial = track( new THREE.MeshBasicMaterial({ color: accent, }), ); const glass = track( new THREE.MeshBasicMaterial({ color: 0xb6d7d5, transparent: true, opacity: 0.84, }), ); const bodyShape = new THREE.Shape(); const width = 1.18; const height = 1.52; const radius = 0.16; const left = -width / 2; const bottom = -height / 2; bodyShape.moveTo(left + radius, bottom); bodyShape.lineTo(left + width - radius, bottom); bodyShape.quadraticCurveTo(left + width, bottom, left + width, bottom + radius); bodyShape.lineTo(left + width, bottom + height - radius); bodyShape.quadraticCurveTo(left + width, bottom + height, left + width - radius, bottom + height); bodyShape.lineTo(left + radius, bottom + height); bodyShape.quadraticCurveTo(left, bottom + height, left, bottom + height - radius); bodyShape.lineTo(left, bottom + radius); bodyShape.quadraticCurveTo(left, bottom, left + radius, bottom); const bodyGeometry = track( new THREE.ExtrudeGeometry(bodyShape, { depth: 0.38, bevelEnabled: true, bevelSegments: 2, bevelSize: 0.035, bevelThickness: 0.035, curveSegments: 6, steps: 1, }), ); bodyGeometry.center(); const body = new THREE.Mesh(bodyGeometry, shell); body.castShadow = true; body.receiveShadow = true; group.add(body); const glassGeometry = track(new THREE.BoxGeometry(0.93, 0.76, 0.035)); const face = new THREE.Mesh(glassGeometry, glass); face.position.set(0, 0.24, 0.249); face.castShadow = true; group.add(face); const displayGeometry = track(new THREE.PlaneGeometry(0.72, 0.5)); const displayMaterial = track( new THREE.MeshBasicMaterial({ color: 0x09110f, transparent: true, opacity: 0.96 }), ); const display = new THREE.Mesh(displayGeometry, displayMaterial); display.position.set(0, 0.25, 0.27); group.add(display); const barGeometry = track(new THREE.BoxGeometry(0.42, 0.035, 0.018)); const bar = new THREE.Mesh(barGeometry, accentMaterial); bar.position.set(-0.1, 0.28, 0.286); group.add(bar); const shortBarGeometry = track(new THREE.BoxGeometry(0.2, 0.025, 0.018)); const shortBar = new THREE.Mesh(shortBarGeometry, shell); shortBar.position.set(-0.21, 0.18, 0.286); group.add(shortBar); const dialGeometry = track(new THREE.CylinderGeometry(0.145, 0.145, 0.09, 24)); const dial = new THREE.Mesh(dialGeometry, dark); dial.rotation.x = Math.PI / 2; dial.position.set(0.3, -0.42, 0.27); dial.castShadow = true; group.add(dial); const ringGeometry = track(new THREE.TorusGeometry(0.2, 0.025, 8, 24)); const ring = new THREE.Mesh(ringGeometry, accentMaterial); ring.position.set(-0.27, -0.41, 0.282); group.add(ring); const footGeometry = track(new THREE.CylinderGeometry(0.44, 0.52, 0.09, 24)); const foot = new THREE.Mesh(footGeometry, dark); foot.position.y = -0.81; foot.castShadow = true; group.add(foot); const edgeGeometry = track(new THREE.EdgesGeometry(bodyGeometry, 35)); const edgeMaterial = track( new THREE.LineBasicMaterial({ color: 0xf3d9af, transparent: true, opacity: 0.22 }), ); group.add(new THREE.LineSegments(edgeGeometry, edgeMaterial)); group.rotation.x = -0.08; return group; } export function ProceduralProductViewer({ productName = "Arc One", detailLabel = "Tactile dial", labels, accent = "#dc774a", activation = "intent", className = "", }: ProceduralProductViewerProps) { const copy = { interactiveViewer: "Interactive 3D viewer. Drag or use arrow keys to rotate.", staticPreview: "Static product preview.", objectStudy: "Object study", dragToTurn: "DRAG TO TURN", staticBadge: "STATIC PREVIEW", activateInteractive: "Explore 3D", detailDescription: "Machined control with a quiet detent.", resetView: "Reset view", ...labels, }; const mountRef = useRef(null); const detailId = useId(); const groupRef = useRef(null); const rendererRef = useRef(null); const cameraRef = useRef(null); const sceneRef = useRef(null); const frameRef = useRef(null); const requestFrameRef = useRef<() => void>(() => undefined); const focusAfterActivationRef = useRef(false); const visibleRef = useRef(true); const reduced = useReducedMotion() === true; const reducedRef = useRef(reduced); reducedRef.current = reduced; const rotation = useRef({ x: -0.08, y: 0, targetX: -0.08, targetY: 0, velocityX: 0, velocityY: 0, dragging: false, pointerId: null, lastX: 0, lastY: 0, lastTime: 0, }); const [detailOpen, setDetailOpen] = useState(false); const [activationRequested, setActivationRequested] = useState(activation === "auto"); const [rendererReady, setRendererReady] = useState(false); const [renderRequest, setRenderRequest] = useState<{ accent: string; version: number } | null>(null); const renderVersionRef = useRef(0); const draw = () => { const renderer = rendererRef.current; const scene = sceneRef.current; const camera = cameraRef.current; if (renderer && scene && camera) renderer.render(scene, camera); }; const animate = () => { frameRef.current = null; if (!visibleRef.current) return; const model = groupRef.current; const state = rotation.current; if (!model) return; if (!reducedRef.current) { if (!state.dragging) { state.targetX += state.velocityX; state.targetY += state.velocityY; state.velocityX *= 0.84; state.velocityY *= 0.84; state.targetX += (-0.08 - state.targetX) * 0.025; state.targetY += (0 - state.targetY) * 0.025; } state.targetX = clamp(state.targetX, -LIMIT_X, LIMIT_X); state.targetY = clamp(state.targetY, -LIMIT_Y, LIMIT_Y); state.x += (state.targetX - state.x) * 0.2; state.y += (state.targetY - state.y) * 0.2; model.rotation.set(state.x, state.y, 0); draw(); const moving = state.dragging || Math.abs(state.targetX - state.x) > 0.0005 || Math.abs(state.targetY - state.y) > 0.0005 || Math.abs(state.velocityX) > 0.0001 || Math.abs(state.velocityY) > 0.0001; if (moving) frameRef.current = requestAnimationFrame(animate); } else { model.rotation.set(state.targetX, state.targetY, 0); draw(); } }; const requestFrame = () => { if (frameRef.current === null && visibleRef.current) { frameRef.current = requestAnimationFrame(animate); } }; requestFrameRef.current = requestFrame; useEffect(() => { if (activation === "auto") setActivationRequested(true); }, [activation]); useEffect(() => { setRendererReady(false); if (!activationRequested) return; const initialize = () => { renderVersionRef.current += 1; setRenderRequest({ accent, version: renderVersionRef.current }); }; if (typeof window.requestIdleCallback === "function") { const idleId = window.requestIdleCallback(initialize, { timeout: INITIALIZE_TIMEOUT_MS }); return () => window.cancelIdleCallback?.(idleId); } const timeoutId = window.setTimeout(initialize, 16); return () => window.clearTimeout(timeoutId); }, [accent, activationRequested]); useEffect(() => { const mount = mountRef.current; if (!mount || !renderRequest) return; let cancelled = false; const resources = new Set<{ dispose: () => void }>(); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(31, 1, 0.1, 100); camera.position.set(0, 0.08, 4.35); let renderer: THREE.WebGLRenderer; try { renderer = new THREE.WebGLRenderer({ alpha: true, antialias: false, powerPreference: "high-performance", }); } catch { setRendererReady(false); if (activation === "intent") setActivationRequested(false); return; } renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.shadowMap.enabled = false; renderer.setClearColor(0x000000, 0); renderer.domElement.setAttribute("aria-hidden", "true"); renderer.domElement.style.width = "100%"; renderer.domElement.style.height = "100%"; renderer.domElement.style.display = "block"; mount.prepend(renderer.domElement); const onContextLost = (event: Event) => { event.preventDefault(); const state = rotation.current; if (state.pointerId !== null && mount.hasPointerCapture(state.pointerId)) { mount.releasePointerCapture(state.pointerId); } state.dragging = false; state.pointerId = null; state.velocityX = 0; state.velocityY = 0; if (frameRef.current !== null) cancelAnimationFrame(frameRef.current); frameRef.current = null; setRendererReady(false); }; const onContextRestored = () => { setRendererReady(true); requestFrameRef.current(); }; renderer.domElement.addEventListener("webglcontextlost", onContextLost); renderer.domElement.addEventListener("webglcontextrestored", onContextRestored); const product = makeProduct(renderRequest.accent, resources); scene.add(product); const groundGeometry = new THREE.CircleGeometry(1.12, 32); const groundMaterial = new THREE.MeshBasicMaterial({ color: 0x292929, transparent: true, opacity: 0.08, depthWrite: false, }); resources.add(groundGeometry); resources.add(groundMaterial); const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = -Math.PI / 2; ground.position.set(0, -0.89, 0); scene.add(ground); rendererRef.current = renderer; cameraRef.current = camera; sceneRef.current = scene; groupRef.current = product; const resize = new ResizeObserver(([entry]) => { const width = Math.max(1, entry.contentRect.width); const height = Math.max(1, entry.contentRect.height); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.35)); renderer.setSize(width, height, false); camera.aspect = width / height; camera.updateProjectionMatrix(); requestFrameRef.current(); }); resize.observe(mount); let intersecting = true; const intersection = new IntersectionObserver(([entry]) => { intersecting = entry.isIntersecting; visibleRef.current = intersecting && !document.hidden; if (visibleRef.current) requestFrameRef.current(); else if (frameRef.current !== null) { cancelAnimationFrame(frameRef.current); frameRef.current = null; } }); const onVisibility = () => { visibleRef.current = intersecting && !document.hidden; if (visibleRef.current) requestFrameRef.current(); else if (frameRef.current !== null) { cancelAnimationFrame(frameRef.current); frameRef.current = null; } }; intersection.observe(mount); document.addEventListener("visibilitychange", onVisibility); void precompileMaterialStages(renderer, scene, camera, () => cancelled).then(() => { if (cancelled) return; setRendererReady(true); requestFrameRef.current(); }); return () => { cancelled = true; renderer.domElement.removeEventListener("webglcontextlost", onContextLost); renderer.domElement.removeEventListener("webglcontextrestored", onContextRestored); resize.disconnect(); intersection.disconnect(); document.removeEventListener("visibilitychange", onVisibility); if (frameRef.current !== null) cancelAnimationFrame(frameRef.current); resources.forEach((resource) => resource.dispose()); renderer.dispose(); renderer.forceContextLoss(); renderer.domElement.remove(); rendererRef.current = null; cameraRef.current = null; sceneRef.current = null; groupRef.current = null; frameRef.current = null; }; }, [activation, renderRequest]); useEffect(() => { requestFrameRef.current(); }, [reduced]); useEffect(() => { if (!rendererReady || !focusAfterActivationRef.current) return; focusAfterActivationRef.current = false; mountRef.current?.focus({ preventScroll: true }); }, [rendererReady]); const reset = () => { const state = rotation.current; state.targetX = -0.08; state.targetY = 0; state.velocityX = 0; state.velocityY = 0; requestFrame(); }; return (

{ if (!rendererReady || !(event.target instanceof HTMLCanvasElement)) return; const state = rotation.current; state.dragging = true; state.pointerId = event.pointerId; state.lastX = event.clientX; state.lastY = event.clientY; state.lastTime = performance.now(); event.currentTarget.setPointerCapture(event.pointerId); event.currentTarget.focus({ preventScroll: true }); }} onPointerMove={(event) => { if (!rendererReady) return; const state = rotation.current; if (!state.dragging || state.pointerId !== event.pointerId) return; const now = performance.now(); const elapsed = Math.max(8, now - state.lastTime); const dx = event.clientX - state.lastX; const dy = event.clientY - state.lastY; state.targetY = clamp(state.targetY + dx * 0.008, -LIMIT_Y, LIMIT_Y); state.targetX = clamp(state.targetX + dy * 0.006, -LIMIT_X, LIMIT_X); state.velocityY = reduced ? 0 : (dx / elapsed) * 0.026; state.velocityX = reduced ? 0 : (dy / elapsed) * 0.018; state.lastX = event.clientX; state.lastY = event.clientY; state.lastTime = now; requestFrame(); }} onPointerUp={(event) => { if (!rendererReady) return; const state = rotation.current; if (state.pointerId !== event.pointerId) return; state.dragging = false; state.pointerId = null; event.currentTarget.releasePointerCapture?.(event.pointerId); requestFrame(); }} onPointerCancel={() => { if (!rendererReady) return; rotation.current.dragging = false; rotation.current.pointerId = null; rotation.current.velocityX = 0; rotation.current.velocityY = 0; }} onLostPointerCapture={(event) => { const state = rotation.current; if (!state.dragging || state.pointerId !== event.pointerId) return; state.dragging = false; state.pointerId = null; state.velocityX = 0; state.velocityY = 0; }} onKeyDown={ rendererReady ? (event) => { const state = rotation.current; const step = event.shiftKey ? 0.2 : 0.1; if (event.key === "ArrowLeft") state.targetY -= step; else if (event.key === "ArrowRight") state.targetY += step; else if (event.key === "ArrowUp") state.targetX -= step; else if (event.key === "ArrowDown") state.targetX += step; else if (event.key === "Home") reset(); else return; state.targetX = clamp(state.targetX, -LIMIT_X, LIMIT_X); state.targetY = clamp(state.targetY, -LIMIT_Y, LIMIT_Y); event.preventDefault(); requestFrame(); } : undefined } className={`relative isolate min-h-[250px] w-full overflow-hidden rounded-[18px] border border-[#f4d5a8]/20 bg-[#11140f] outline-none focus-visible:ring-2 focus-visible:ring-[#8eb9ff] focus-visible:ring-offset-2 focus-visible:ring-offset-[#11140f] ${rendererReady ? "cursor-grab touch-none active:cursor-grabbing" : "touch-pan-y"} ${className}`} >

{!rendererReady && activation === "intent" ? ( ) : null}

{copy.objectStudy} {productName} {rendererReady ? copy.dragToTurn : copy.staticBadge}

{detailLabel} {copy.detailDescription}

{rendererReady ? ( ) : null}

); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"motion"}]]}]}],["$","li","three",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/three","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"three"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://motion-lexicon.pages.dev/r/procedural-product-viewer.json","proxyUrl":"https://shadcnregistry.com/r/motion-lexicon/procedural-product-viewer","itemId":"@motion-lexicon/procedural-product-viewer"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"src/registry/components/procedural-product-viewer.tsx","content":"$52","type":"registry:ui","target":"components/motion-lexicon/procedural-product-viewer.tsx"}]}]]}],"$L53"]}]

3D Product Viewer

Installation

Files

components

Styles