50: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"] 51: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"] 52: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"] 53:T682,.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 M · heavy hitters ---------- */ .fluid-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; } .demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; }54:T1619,// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS. "use client"; // fluid ink (grid advection, own mini-runtime) — Motion Menu import { useEffect, useRef } from "react"; const MARKUP = "

Fluid ink

simulation

React \u2197

stir it with your cursor

Say: \"hero is 91\" \u2014 ink that swirls and settles like liquid. (Full GPU Navier-Stokes = the WebGPU upgrade on radar.)

"; export function FluidInkGridAdvectionOwn() { 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 { /* ---- 91 · fluid ink (grid advection, own mini-runtime) ---- */ { const canvas = document.getElementById('fluid-canvas'); const W = 144, H = 84; canvas.width = W; canvas.height = H; const ctx = canvas.getContext('2d'); const img = ctx.createImageData(W, H); const vx = new Float32Array(W * H), vy = new Float32Array(W * H), dye = new Float32Array(W * H); const idx = (x, y) => y * W + x; const sample = (arr, x, y) => { x = Math.max(0, Math.min(W - 1.001, x)); y = Math.max(0, Math.min(H - 1.001, y)); const x0 = x | 0, y0 = y | 0, fx = x - x0, fy = y - y0; return arr[idx(x0, y0)] * (1 - fx) * (1 - fy) + arr[idx(x0 + 1, y0)] * fx * (1 - fy) + arr[idx(x0, y0 + 1)] * (1 - fx) * fy + arr[idx(x0 + 1, y0 + 1)] * fx * fy; }; let last = null; canvas.addEventListener('pointermove', (e) => { const r = canvas.getBoundingClientRect(); const gx = (e.clientX - r.left) / r.width * W; const gy = (e.clientY - r.top) / r.height * H; const dx = last ? gx - last.x : 0, dy = last ? gy - last.y : 0; last = { x: gx, y: gy }; for (let oy = -3; oy <= 3; oy++) for (let ox = -3; ox <= 3; ox++) { const px = (gx + ox) | 0, py = (gy + oy) | 0; if (px < 0 || px >= W || py < 0 || py >= H) continue; const fall = Math.max(0, 1 - Math.hypot(ox, oy) / 3.5); const i = idx(px, py); vx[i] += dx * fall * 1.6; vy[i] += dy * fall * 1.6; dye[i] = Math.min(1, dye[i] + fall * 0.5); } }); canvas.addEventListener('pointerleave', () => (last = null)); let fluidActive = false; new IntersectionObserver((es) => (fluidActive = es[0].isIntersecting), { rootMargin: '100px' }).observe(canvas); const nvx = new Float32Array(W * H), nvy = new Float32Array(W * H), ndye = new Float32Array(W * H); let lastPointer = -9999; canvas.addEventListener('pointermove', () => (lastPointer = performance.now())); function autoStir(t) { // an invisible finger draws slow lissajous curves while nobody is touching it const gx = W * (0.5 + 0.34 * Math.sin(t * 0.7)), gy = H * (0.5 + 0.3 * Math.sin(t * 1.13 + 1.7)); const dx = Math.cos(t * 0.7) * 1.6, dy = Math.cos(t * 1.13 + 1.7) * 1.4; for (let oy = -2; oy <= 2; oy++) for (let ox = -2; ox <= 2; ox++) { const px = (gx + ox) | 0, py = (gy + oy) | 0; if (px < 0 || px >= W || py < 0 || py >= H) continue; const fall = Math.max(0, 1 - Math.hypot(ox, oy) / 2.5); const i = idx(px, py); vx[i] += dx * fall; vy[i] += dy * fall; dye[i] = Math.min(1, dye[i] + fall * 0.2); } } gsap.ticker.add((time, deltaMS) => { if (!fluidActive) return; if (performance.now() - lastPointer > 2000) autoStir(time); const dt = Math.min(deltaMS / 1000, 0.04) * 34; for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) { const i = idx(x, y); const sx = x - vx[i] * dt, sy = y - vy[i] * dt; nvx[i] = sample(vx, sx, sy) * 0.985; nvy[i] = sample(vy, sx, sy) * 0.985; ndye[i] = sample(dye, sx, sy) * 0.988; } vx.set(nvx); vy.set(nvy); dye.set(ndye); const d = img.data; for (let i = 0; i < W * H; i++) { const v = dye[i]; const p = i * 4; d[p] = 16 + v * (v > 0.5 ? 183 : 122) * v; d[p + 1] = 16 + v * 255 * v * v; d[p + 2] = 24 + v * 140 * (1 - v); d[p + 3] = 255; } ctx.putImageData(img, 0, 0); }); } } catch (err: any) { console.warn("[motion-menu] fluid-ink-grid-advection-own failed to start:", err); } })(); return () => { disposed = true; cleanup.forEach((fn) => { try { fn(); } catch (_) {} }); }; }, []); return

; } export default FluidInkGridAdvectionOwn; 4c:["$","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","gsap",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","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":"gsap"}]]}]}]]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://motion-menu-two.vercel.app/r/fluid-ink-grid-advection-own.json","proxyUrl":"https://shadcnregistry.com/r/motion-menu/fluid-ink-grid-advection-own","itemId":"@motion-menu/fluid-ink-grid-advection-own"}],["$","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"}],["$","$L52",null,{"files":[{"path":"motion-menu/fluid-ink-grid-advection-own.html","content":"

Fluid ink

simulation

React ↗

stir it with your cursor

Say: \"hero is 91\" — ink that swirls and settles like liquid. (Full GPU Navier-Stokes = the WebGPU upgrade on radar.)

","type":"registry:file","target":"motion-menu/fluid-ink-grid-advection-own.html"},{"path":"motion-menu/fluid-ink-grid-advection-own.css","content":"$53","type":"registry:file","target":"motion-menu/fluid-ink-grid-advection-own.css"},{"path":"components/motion-menu/fluid-ink-grid-advection-own.tsx","content":"$54","type":"registry:component"}]}]]}],"$L55"]}]

Fluid Ink (grid Advection, Own Mini Runtime)

Installation

Files

motion-menu

components

Styles