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/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.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/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.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/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T67e,.card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; } .card > header { display: flex; align-items: baseline; gap: .8rem; padding: 1.1rem 1.2rem .9rem; border-bottom: 1px solid var(--line); } .card .num { font-family: var(--mono); color: var(--acc); font-size: 1.05rem; } .card h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; flex: 1; } .tags { display: flex; gap: .35rem; } .tags i { font: 400 .62rem/1 var(--mono); font-style: normal; color: var(--dim); border: 1px solid var(--line); border-radius: 99px; padding: .28em .6em; white-space: nowrap; } .demo { min-height: 250px; position: relative; display: flex; align-items: center; justify-content: center; background: var(--bg2); overflow: hidden; flex: 1; } .order { padding: .85rem 1.2rem; font-family: var(--mono); font-size: .72rem; color: var(--dim); border-top: 1px solid var(--line); } .order b { color: var(--txt); font-weight: 500; } .demo .btn.corner { position: absolute; top: 12px; right: 12px; padding: .55em 1em; font-size: .68rem; z-index: 5; } .demo-hint { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font: 400 .65rem var(--mono); color: var(--dim); pointer-events: none; z-index: 4; } .ai-card .num { color: var(--acc2) !important; } /* ---------- Section Z · next wave vol. 2 ---------- */ .shatter-canvas, .phys-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; }53:T1324,// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS. "use client"; // voronoi shatter — Motion Menu // Calls the Motion Menu shared runtime (webglDemo / canvas2dDemo / art helpers). // Install `motion-menu-runtime` and mount it once at the app root, or the effect // below throws ReferenceError on first paint. import { useEffect, useRef } from "react"; const MARKUP = "

Voronoi shatter

canvas

React \u2197 See the code \u2192

click the image \u2014 it breaks where you strike

Say: \"transitions break with 159\" \u2014 imagery fractures into shards from your click point, then heals.

"; export function VoronoiShatter() { const hostRef = useRef(null); useEffect(() => { const host = hostRef.current; if (!host) return; const $ = (s: string) => host.querySelector(s) as HTMLElement | null; let disposed = false; const cleanup: Array<() => void> = []; (async () => { if (disposed) return; try { /* ---- 159 · voronoi shatter ---- */ canvas2dDemo('shatter-canvas', (d) => { let art = null, artFor = ''; let shards = null, shatterT = 0; d.canvas.addEventListener('pointerdown', (e) => { if (shards || !d.w) return; const r = d.canvas.getBoundingClientRect(); const ix = e.clientX - r.left, iy = e.clientY - r.top; shards = []; shatterT = 0; const SPOKES = 9, RINGS = [0, 46, 120, Math.hypot(d.w, d.h)]; const angles = Array.from({ length: SPOKES }, (_, i) => (i / SPOKES) * Math.PI * 2 + Math.random() * 0.4); for (let s = 0; s < SPOKES; s++) { for (let ri = 0; ri < RINGS.length - 1; ri++) { const a0 = angles[s], a1 = angles[(s + 1) % SPOKES] + (s === SPOKES - 1 ? Math.PI * 2 : 0); const r0 = RINGS[ri] * (0.85 + Math.random() * 0.3), r1 = RINGS[ri + 1]; const poly = [ [ix + Math.cos(a0) * r0, iy + Math.sin(a0) * r0], [ix + Math.cos(a1) * r0, iy + Math.sin(a1) * r0], [ix + Math.cos(a1) * r1, iy + Math.sin(a1) * r1], [ix + Math.cos(a0) * r1, iy + Math.sin(a0) * r1], ]; const cx = poly.reduce((s2, p) => s2 + p[0], 0) / 4, cy = poly.reduce((s2, p) => s2 + p[1], 0) / 4; const da = Math.atan2(cy - iy, cx - ix); const dist = Math.hypot(cx - ix, cy - iy); const speed = 340 / (1 + dist * 0.02); shards.push({ poly, cx, cy, x: 0, y: 0, vx: Math.cos(da) * speed, vy: Math.sin(da) * speed - 60, rot: 0, vr: (Math.random() - 0.5) * 4 }); } } }); return (t, delta) => { const key = d.w + 'x' + d.h; if (key !== artFor && d.w) { artFor = key; art = makeArtCanvas(17); } if (!art) return; const { ctx, w, h } = d; ctx.clearRect(0, 0, w, h); if (!shards) { ctx.drawImage(art, 0, 0, w, h); return; } shatterT += delta; let alive = false; shards.forEach((s) => { s.vy += 900 * delta; s.x += s.vx * delta; s.y += s.vy * delta; s.rot += s.vr * delta; const alpha = Math.max(0, 1 - shatterT / 1.7); if (alpha > 0) alive = true; ctx.save(); ctx.globalAlpha = alpha; ctx.translate(s.cx + s.x, s.cy + s.y); ctx.rotate(s.rot); ctx.translate(-s.cx, -s.cy); ctx.beginPath(); s.poly.forEach(([px, py], i) => (i ? ctx.lineTo(px, py) : ctx.moveTo(px, py))); ctx.closePath(); ctx.clip(); ctx.drawImage(art, 0, 0, w, h); ctx.restore(); }); if (!alive) shards = null; // heal }; }); } catch (err: any) { console.warn("[motion-menu] voronoi-shatter failed to start:", err); } })(); return () => { disposed = true; cleanup.forEach((fn) => { try { fn(); } catch (_) {} }); }; }, []); return

; } export default VoronoiShatter; 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":[]}],["$","$L4f",null,{"registryDependencies":["@motionmenu/motion-menu-runtime"]}]]}],["$","$L50",null,{"sourceUrl":"https://motion-menu-two.vercel.app/r/voronoi-shatter.json","proxyUrl":"https://shadcnregistry.com/r/motion-menu/voronoi-shatter","itemId":"@motion-menu/voronoi-shatter"}],["$","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":"motion-menu/voronoi-shatter.html","content":"

159

Voronoi shatter

canvas

React ↗See the code →

click the image — it breaks where you strike

Say: \"transitions break with 159\" — imagery fractures into shards from your click point, then heals.

","type":"registry:file","target":"motion-menu/voronoi-shatter.html"},{"path":"motion-menu/voronoi-shatter.css","content":"$52","type":"registry:file","target":"motion-menu/voronoi-shatter.css"},{"path":"components/motion-menu/voronoi-shatter.tsx","content":"$53","type":"registry:component"}]}]]}],"$L54"]}]

Voronoi Shatter

Installation

Files

motion-menu

components

Styles