64: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 65: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 66:I[8513,["/_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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollArea"] 67:I[8513,["/_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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 68: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 69:T6898,"use client"; import { useEffect, useLayoutEffect, useRef, type ReactNode } from "react"; // --------------------------------------------------------------------------- // HeroGlyphSilhouettePack — a full-bleed hero where a cloud of monospace // glyph particles is packed to fill an ARBITRARY VECTOR SILHOUETTE, not a // grid or a disc. The silhouette is the constraint the packer solves // against, and the whole point is that the constraint can CHANGE: on a // timer, with no pointer required, the cloud re-solves against a new // silhouette and every particle migrates to a freshly-sampled slot inside // the new shape. That retargeting is the mechanic — masonry-ascii-settle // resolves glyph PITCH into a fixed rectangular tile grid (coarse -> fine, // same lattice throughout) and floret-pack grows glyphs outward along a // fixed golden-angle radial flow from one meristem to one rim — neither ever // asks "which arbitrary shape do these particles belong inside right now," // and neither ever retargets a live population against a second, unrelated // boundary. Here the boundary itself is swapped at runtime and the same // live particles are re-assigned into it. // // SILHOUETTE = ALPHA MASK, SAMPLED, NOT WALKED. Each shape is authored as // simple canvas path data (line/arc segments, or rasterized text for a // wordmark) drawn once into an offscreen canvas; only the alpha channel is // read back, then box-blurred twice for a cheap "distance-ish" edge // falloff (no real distance transform). That blurred field is both the // inside/outside test AND the importance weight for sampling target points: // interior pixels stay near full weight, edge pixels taper, so the packed // cloud naturally thins toward the boundary instead of cutting hard. // // RE-SOLVE, NOT RESHUFFLE. When the active shape changes, new target points // are sampled from the new mask and assigned back to the CURRENT live // particles by sorting both sets on x and pairing in order — a cheap // approximate nearest-matching that keeps flight paths short and coherent // (an O(n log n) alternative to real assignment, deliberately not exact). // Each particle's flight is staggered, eased, and bulges off the straight // line toward its target — visible migration, not a snap. Breathing (a // small continuous per-particle wobble) and pointer repulsion apply on top // of the current interpolated position at every phase, resting or // migrating, so the cloud is never motionless and never fully static. // --------------------------------------------------------------------------- export type SilhouetteId = "wordmark" | "star" | "orbit"; export interface HeroGlyphSilhouettePackProps { /** Sequence of silhouettes the cloud cycles through and re-solves against, in order. */ shapes?: SilhouetteId[]; /** Text rasterized for the "wordmark" silhouette. */ wordmarkText?: string; /** Live particle count. Derived from the container's smaller dimension when omitted. */ particleCount?: number; /** Glyph charset particles are drawn from, one glyph assigned per particle for its lifetime. */ glyphs?: string; /** How long a shape holds, fully packed, before the next re-solve begins. */ holdMs?: number; /** Flight duration of the slowest-staggered particle during a re-solve. */ migrateMs?: number; /** Content rendered as real DOM above the canvas — headline, eyebrow, CTA. */ children?: ReactNode; className?: string; } const DEFAULT_SHAPES: SilhouetteId[] = ["wordmark", "star", "orbit"]; const DEFAULT_GLYPHS = "+x*.oO"; const MASK_LONG_SIDE = 220; // offscreen mask resolution, px, long edge const MASK_THRESHOLD = 0.05; // blurred-alpha cutoff below which a mask pixel carries no sampling weight const MAX_DPR = 1.5; // full-bleed loud cap per showpiece-recipe const MIN_PARTICLES = 180; const MAX_PARTICLES = 700; const ALPHA_BUCKETS = 6; // color-blend buckets, batched draw per bucket const MIGRATE_STAGGER_MS = 420; // spread of per-particle flight start times const ARC_BULGE = 0.17; // perpendicular bulge as a fraction of flight distance // Amplitude/frequency chosen so the hold phase (default 2600ms) alone // crosses a visible fraction of the sine's swing, not just the re-solve — // a first pass at 2.4px/0.65rad-s-ish sat under the perceptual floor for // the whole hold, so t0-vs-2.5s differences were carried entirely by the // migration rather than by breathing at rest. const WOBBLE_AMP_PX = 4.2; // idle breathing amplitude const WOBBLE_FREQ = 1.15; // rad/s-ish const REPEL_RADIUS_PX = 68; const REPEL_STRENGTH_PX = 40; const REPEL_EASE = 0.22; interface Tokens { fg: string; muted: string; } function readTokens(el: HTMLElement): Tokens { const cs = getComputedStyle(el); return { fg: cs.getPropertyValue("--foreground").trim(), muted: cs.getPropertyValue("--ns-muted").trim() }; } function parseHex(raw: string): { r: number; g: number; b: number } | null { const m = /^#?([0-9a-f]{6})$/i.exec(raw.trim()); if (!m || !m[1]) return null; const int = parseInt(m[1], 16); return { r: (int >> 16) & 255, g: (int >> 8) & 255, b: int & 255 }; } function lerpChannel(a: number, b: number, t: number): number { return Math.round(a + (b - a) * t); } // Precomputed muted -> foreground stops for the alpha-bucket draw batching // below (rule: never arithmetic on raw token strings at draw time — derive // the ramp once per token read, same idiom floret-pack uses for its // young -> mature stops). If a token hasn't resolved to a parseable value // yet, this is a no-op that keeps whatever ramp was already built rather // than substituting a literal grey — callers only ever invoke this after // tokens have been read in useLayoutEffect, so in practice it always has a // real value the first time it runs. function buildStops(tokens: Tokens, count: number, prev: string[]): string[] { const muted = parseHex(tokens.muted); const fg = parseHex(tokens.fg); if (!muted || !fg) return prev; const stops: string[] = []; for (let i = 0; i < count; i++) { const t = count === 1 ? 1 : i / (count - 1); stops.push(`rgb(${lerpChannel(muted.r, fg.r, t)},${lerpChannel(muted.g, fg.g, t)},${lerpChannel(muted.b, fg.b, t)})`); } return stops; } function mulberry32(seed: number): () => number { let a = seed >>> 0 || 1; return () => { a = (a + 0x6d2b79f5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } function easeInOutCubic(t: number): number { const c = t < 0 ? 0 : t > 1 ? 1 : t; return c < 0.5 ? 4 * c * c * c : 1 - Math.pow(-2 * c + 2, 3) / 2; } interface Mask { data: Float32Array; w: number; h: number; } function boxBlur(src: Float32Array, w: number, h: number): Float32Array { const out = new Float32Array(w * h); for (let y = 0; y < h; y++) { for (let x = 0; x < w; x++) { let sum = 0; let n = 0; for (let dy = -1; dy <= 1; dy++) { const yy = y + dy; if (yy < 0 || yy >= h) continue; for (let dx = -1; dx <= 1; dx++) { const xx = x + dx; if (xx < 0 || xx >= w) continue; sum += src[yy * w + xx] ?? 0; n++; } } out[y * w + x] = n ? sum / n : 0; } } return out; } // All path data authored here directly — no image assets, no SVG file. The // offscreen canvas this draws into is read back for its ALPHA CHANNEL only // (see rasterizeMask) and never composited to a visible surface, but `ink` // is still threaded in from the live --foreground read rather than any // literal — an opaque fill of any value would work for the mask itself, // this just means there is no second color source to keep straight. function drawSilhouettePath( ctx: CanvasRenderingContext2D, id: SilhouetteId, w: number, h: number, text: string, ink: string ) { ctx.fillStyle = ink; if (id === "wordmark") { let fontSize = Math.floor(h * 0.64); ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.font = `700 ${fontSize}px "GeistMono", ui-monospace, monospace`; while (fontSize > 8 && ctx.measureText(text).width > w * 0.86) { fontSize -= 2; ctx.font = `700 ${fontSize}px "GeistMono", ui-monospace, monospace`; } ctx.fillText(text, w / 2, h / 2 + fontSize * 0.03); return; } if (id === "star") { const cx = w / 2; const cy = h / 2; const outer = Math.min(w, h) * 0.46; const inner = outer * 0.42; ctx.beginPath(); for (let i = 0; i < 10; i++) { const r = i % 2 === 0 ? outer : inner; const a = -Math.PI / 2 + (i * Math.PI) / 5; const x = cx + r * Math.cos(a); const y = cy + r * Math.sin(a); if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.closePath(); ctx.fill(); return; } // "orbit" — a simple interlocked icon pair: two ring annuli, drawn with // even-odd fill so each ring's own centre stays hollow. const cy = h / 2; const r = Math.min(w, h) * 0.3; const ringW = r * 0.34; for (const cx of [w * 0.38, w * 0.62]) { ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.arc(cx, cy, r - ringW, 0, Math.PI * 2, true); ctx.fill("evenodd"); } } function rasterizeMask(id: SilhouetteId, aspect: number, text: string, ink: string): Mask { const long = MASK_LONG_SIDE; const w = aspect >= 1 ? long : Math.max(24, Math.round(long * aspect)); const h = aspect >= 1 ? Math.max(24, Math.round(long / aspect)) : long; const off = document.createElement("canvas"); off.width = w; off.height = h; const octx = off.getContext("2d"); if (!octx) return { data: new Float32Array(w * h), w, h }; octx.clearRect(0, 0, w, h); drawSilhouettePath(octx, id, w, h, text, ink); const img = octx.getImageData(0, 0, w, h).data; const raw = new Float32Array(w * h); for (let i = 0; i < w * h; i++) raw[i] = (img[i * 4 + 3] ?? 0) / 255; return { data: boxBlur(boxBlur(raw, w, h), w, h), w, h }; } // Weighted importance-sample of `count` target points from the mask, // returned in container-NORMALIZED [0,1] space so a later resize just // rescales the draw, no resampling needed. function sampleTargets(mask: Mask, count: number, rand: () => number): Float32Array { const { data, w, h } = mask; const cum = new Float32Array(w * h); let total = 0; for (let i = 0; i < w * h; i++) { const v = (data[i] ?? 0) > MASK_THRESHOLD ? (data[i] ?? 0) : 0; total += v; cum[i] = total; } const out = new Float32Array(count * 2); if (total <= 0) { // degenerate mask (nothing rasterized, e.g. empty text): scatter rather // than collapse to a corner, so the frame is never emptier than "cloud". for (let i = 0; i < count; i++) { out[i * 2] = rand(); out[i * 2 + 1] = rand(); } return out; } for (let i = 0; i < count; i++) { const r = rand() * total; let lo = 0; let hi = w * h - 1; while (lo < hi) { const mid = (lo + hi) >> 1; if ((cum[mid] ?? 0) < r) lo = mid + 1; else hi = mid; } const px = lo % w; const py = Math.floor(lo / w); const jx = (rand() - 0.5) / w; const jy = (rand() - 0.5) / h; out[i * 2] = (px + 0.5) / w + jx; out[i * 2 + 1] = (py + 0.5) / h + jy; } return out; } // Cheap approximate nearest-matching: pair particles and targets by their // rank along x. Keeps re-solve flight paths short and mostly non-crossing // without real O(n^2) assignment. function assignByXOrder(curU: Float32Array, targets: Float32Array, n: number, outU: Float32Array, outV: Float32Array) { const order = Array.from({ length: n }, (_, i) => i).sort((a, b) => (curU[a] ?? 0) - (curU[b] ?? 0)); const tOrder = Array.from({ length: n }, (_, i) => i).sort((a, b) => (targets[a * 2] ?? 0) - (targets[b * 2] ?? 0)); for (let k = 0; k < n; k++) { const particleIdx = order[k]!; const targetIdx = tOrder[k]!; outU[particleIdx] = targets[targetIdx * 2] ?? 0; outV[particleIdx] = targets[targetIdx * 2 + 1] ?? 0; } } export function HeroGlyphSilhouettePack({ shapes = DEFAULT_SHAPES, wordmarkText = "NS", particleCount, glyphs = DEFAULT_GLYPHS, holdMs = 2600, migrateMs = 1600, children, className = "", }: HeroGlyphSilhouettePackProps) { const rootRef = useRef(null); const canvasRef = useRef(null); useLayoutEffect(() => { const root = rootRef.current; const canvas = canvasRef.current; if (!root || !canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const shapeList = shapes.length > 0 ? shapes : DEFAULT_SHAPES; const glyphChars = glyphs.length > 0 ? Array.from(glyphs) : Array.from(DEFAULT_GLYPHS); const rand = mulberry32(0xa17b3e91); let tokens = readTokens(root); let stops: string[] = []; stops = buildStops(tokens, ALPHA_BUCKETS, stops); let cssW = 0; let cssH = 0; let dpr = 1; let glyphPx = 12; let n = 0; let masks: Mask[] = []; let sized = false; let disposed = false; let visible = true; // Particle state, one flight record per particle: prevU/V is where the // active (or most recently completed) flight started, toU/V is its // destination. Between re-solves prevU/V===toU/V and eased sits at 1, // i.e. "resting" is simply a completed flight, not a separate state. let prevU = new Float32Array(0); let prevV = new Float32Array(0); let toU = new Float32Array(0); let toV = new Float32Array(0); let startAt = new Float32Array(0); let duration = new Float32Array(0); let phase = new Float32Array(0); let bulgeSign = new Float32Array(0); let glyphIdx = new Uint8Array(0); // scratch, reused every frame: no per-frame allocation on the hot path let drawX = new Float32Array(0); let drawY = new Float32Array(0); let bucketOf = new Uint8Array(0); let bucketOrder = new Int32Array(0); let repelX = new Float32Array(0); let repelY = new Float32Array(0); // counting-sort scratch for the alpha-bucket draw batch — fixed size // (ALPHA_BUCKETS never changes), allocated once, reused and zeroed // every frame rather than reallocated const bucketCounts = new Int32Array(ALPHA_BUCKETS + 1); const bucketCursor = new Int32Array(ALPHA_BUCKETS); let shapeIndex = -1; let nextRetargetAt = 0; let raf = 0; let last = 0; let t = 0; const pointer = { x: -1e5, y: -1e5, active: false }; const flightWindowMs = () => migrateMs + MIGRATE_STAGGER_MS; const computeParticleCount = () => { // Glyph size derives from the container's smaller dimension // regardless of whether particleCount is explicit or auto — an // explicit count still needs the right glyph size for its container. const minDim = Math.max(1, Math.min(cssW, cssH)); glyphPx = Math.min(20, Math.max(9, Math.round(minDim / 34))); if (particleCount) return particleCount; const cellArea = glyphPx * glyphPx * 8.5; const estimate = Math.round((cssW * cssH) / cellArea); return Math.min(MAX_PARTICLES, Math.max(MIN_PARTICLES, estimate)); }; const buildMasks = () => { const aspect = cssW > 0 && cssH > 0 ? cssW / cssH : 1; // tokens.fg is read in useLayoutEffect before this can run, so it is // always a real value here; an invalid/empty fillStyle assignment is // simply ignored by the canvas 2D context (no source literal needed // as a stand-in — this mask only feeds an alpha test, never a screen). masks = shapeList.map((id) => rasterizeMask(id, aspect, wordmarkText, tokens.fg)); }; const allocateParticles = (count: number) => { n = count; prevU = new Float32Array(n); prevV = new Float32Array(n); toU = new Float32Array(n); toV = new Float32Array(n); startAt = new Float32Array(n); duration = new Float32Array(n); phase = new Float32Array(n); bulgeSign = new Float32Array(n); glyphIdx = new Uint8Array(n); drawX = new Float32Array(n); drawY = new Float32Array(n); bucketOf = new Uint8Array(n); bucketOrder = new Int32Array(n); repelX = new Float32Array(n); repelY = new Float32Array(n); for (let i = 0; i < n; i++) { // scattered birth state: cloud starts formless and condenses into // shapes[0] on the first retarget, rather than popping in solved. prevU[i] = rand(); prevV[i] = rand(); toU[i] = prevU[i]!; toV[i] = prevV[i]!; startAt[i] = -1e9; duration[i] = migrateMs; phase[i] = rand() * Math.PI * 2; bulgeSign[i] = rand() < 0.5 ? -1 : 1; glyphIdx[i] = Math.floor(rand() * glyphChars.length); } }; const retarget = (index: number, now: number) => { shapeIndex = ((index % shapeList.length) + shapeList.length) % shapeList.length; const mask = masks[shapeIndex]; if (!mask) return; const targets = sampleTargets(mask, n, rand); const nextU = new Float32Array(n); const nextV = new Float32Array(n); assignByXOrder(toU, targets, n, nextU, nextV); for (let i = 0; i < n; i++) { prevU[i] = toU[i]!; prevV[i] = toV[i]!; toU[i] = nextU[i]!; toV[i] = nextV[i]!; startAt[i] = now + rand() * MIGRATE_STAGGER_MS; duration[i] = migrateMs * (0.85 + rand() * 0.3); } nextRetargetAt = now + holdMs + flightWindowMs(); }; const measure = () => { const rect = root!.getBoundingClientRect(); cssW = rect.width; cssH = rect.height; if (cssW < 4 || cssH < 4) { sized = false; return; } dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR); canvas.width = Math.max(1, Math.round(cssW * dpr)); canvas.height = Math.max(1, Math.round(cssH * dpr)); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const count = computeParticleCount(); if (count !== n) allocateParticles(count); buildMasks(); ctx.font = `${glyphPx}px "GeistMono", ui-monospace, monospace`; ctx.textAlign = "center"; ctx.textBaseline = "middle"; sized = true; }; const draw = () => { if (!sized) return; ctx.clearRect(0, 0, cssW, cssH); for (let i = 0; i < n; i++) { const elapsed = t * 1000 - (startAt[i] ?? 0); const dur = duration[i] ?? migrateMs; let eased: number; if (reduced) { eased = 1; } else if (elapsed <= 0) { eased = 0; } else { eased = easeInOutCubic(Math.min(1, elapsed / dur)); } const fu = prevU[i] ?? 0; const fv = prevV[i] ?? 0; const tu = toU[i] ?? 0; const tv = toV[i] ?? 0; let bu = fu + (tu - fu) * eased; let bv = fv + (tv - fv) * eased; if (!reduced) { // perpendicular bulge, peaks mid-flight, zero at both ends — the // migration reads as a flight, not a straight tween. const bulge = Math.sin(eased * Math.PI) * ARC_BULGE * (bulgeSign[i] ?? 1); const ddx = tu - fu; const ddy = tv - fv; const len = Math.hypot(ddx, ddy) || 1; bu += (-ddy / len) * bulge * (Math.hypot(ddx, ddy) || 0.02); bv += (ddx / len) * bulge * (Math.hypot(ddx, ddy) || 0.02); } let px = bu * cssW; let py = bv * cssH; if (!reduced) { const wobbleScale = 0.4 + 0.6 * eased; const ph = phase[i] ?? 0; px += Math.sin(t * WOBBLE_FREQ + ph) * WOBBLE_AMP_PX * wobbleScale; py += Math.cos(t * WOBBLE_FREQ * 0.83 + ph * 1.3) * WOBBLE_AMP_PX * wobbleScale; if (pointer.active) { const dx = px - pointer.x; const dy = py - pointer.y; const d = Math.hypot(dx, dy); if (d < REPEL_RADIUS_PX) { const falloff = 1 - d / REPEL_RADIUS_PX; const mag = falloff * falloff * REPEL_STRENGTH_PX; const inv = d > 0.001 ? 1 / d : 0; repelX[i] = (repelX[i] ?? 0) + ((dx * inv * mag) - (repelX[i] ?? 0)) * REPEL_EASE; repelY[i] = (repelY[i] ?? 0) + ((dy * inv * mag) - (repelY[i] ?? 0)) * REPEL_EASE; } else { repelX[i] = (repelX[i] ?? 0) * (1 - REPEL_EASE); repelY[i] = (repelY[i] ?? 0) * (1 - REPEL_EASE); } } else { repelX[i] = (repelX[i] ?? 0) * (1 - REPEL_EASE); repelY[i] = (repelY[i] ?? 0) * (1 - REPEL_EASE); } px += repelX[i] ?? 0; py += repelY[i] ?? 0; } drawX[i] = px; drawY[i] = py; const bucket = Math.min(ALPHA_BUCKETS - 1, Math.floor(eased * ALPHA_BUCKETS)); bucketOf[i] = bucket; } // counting sort into bucketOrder so the draw pass below sets // ctx.fillStyle only ALPHA_BUCKETS times total, not once per particle // — bucketCounts/bucketCursor are pre-sized scratch, zeroed in place bucketCounts.fill(0); for (let i = 0; i < n; i++) bucketCounts[(bucketOf[i] ?? 0) + 1]!++; for (let b = 0; b < ALPHA_BUCKETS; b++) bucketCounts[b + 1]! += bucketCounts[b]!; bucketCursor.set(bucketCounts.subarray(0, ALPHA_BUCKETS)); for (let i = 0; i < n; i++) { const b = bucketOf[i] ?? 0; bucketOrder[bucketCursor[b]!] = i; bucketCursor[b]!++; } for (let b = 0; b < ALPHA_BUCKETS; b++) { ctx.fillStyle = stops[b] ?? stops[stops.length - 1] ?? tokens.fg; const start = bucketCounts[b]!; const end = bucketCounts[b + 1]!; for (let k = start; k < end; k++) { const idx = bucketOrder[k]!; const ch = glyphChars[glyphIdx[idx] ?? 0] ?? glyphChars[0] ?? "+"; ctx.fillText(ch, drawX[idx] ?? 0, drawY[idx] ?? 0); } } }; const loop = (now: number) => { const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60; last = now; t += dt; const nowMs = t * 1000; if (!reduced && shapeIndex < 0) retarget(0, nowMs); else if (!reduced && nowMs >= nextRetargetAt) retarget(shapeIndex + 1, nowMs); draw(); if (!document.hidden && visible) raf = requestAnimationFrame(loop); }; const wake = () => { if (reduced || raf || document.hidden || !visible) return; last = 0; raf = requestAnimationFrame(loop); }; const onPointerMove = (e: PointerEvent) => { const rect = root!.getBoundingClientRect(); pointer.x = e.clientX - rect.left; pointer.y = e.clientY - rect.top; pointer.active = true; }; const onPointerLeave = () => { pointer.active = false; }; let resizeTimer: ReturnType | null = null; const onResize = () => { if (resizeTimer) clearTimeout(resizeTimer); resizeTimer = setTimeout(() => { resizeTimer = null; measure(); if (!sized) return; if (reduced) { // A resize can reallocate the particle pool (count derives from // the container's smaller dimension), which reseeds every // particle at a scattered birth position — always re-solve back // onto the current (or first) shape so the frozen frame never // regresses to scatter. retarget(shapeIndex < 0 ? 0 : shapeIndex, 0); for (let i = 0; i < n; i++) { prevU[i] = toU[i]!; prevV[i] = toV[i]!; } draw(); } else if (shapeIndex < 0) { retarget(0, t * 1000); } }, 120); }; const ro = new ResizeObserver(onResize); ro.observe(root); const io = new IntersectionObserver( (entries) => { visible = (entries[0]?.isIntersecting ?? true) as boolean; if (visible) wake(); }, { threshold: 0 } ); io.observe(root); const onVisibility = () => { if (!document.hidden) wake(); }; document.addEventListener("visibilitychange", onVisibility); const mo = new MutationObserver(() => { tokens = readTokens(root!); stops = buildStops(tokens, ALPHA_BUCKETS, stops); if (reduced) draw(); }); mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); document.fonts.ready.then(() => { if (disposed) return; tokens = readTokens(root!); stops = buildStops(tokens, ALPHA_BUCKETS, stops); measure(); if (!sized) return; if (reduced) { // Freeze on the first silhouette fully solved — a chosen non-t0 // structured frame, never a mid-flight or scattered one. No rAF // loop, no wobble, no repulsion: nothing in this branch reads a // clock after this point. retarget(0, 0); for (let i = 0; i < n; i++) { prevU[i] = toU[i]!; prevV[i] = toV[i]!; } draw(); } else { root!.addEventListener("pointermove", onPointerMove); root!.addEventListener("pointerleave", onPointerLeave); raf = requestAnimationFrame(loop); } }); return () => { disposed = true; cancelAnimationFrame(raf); if (resizeTimer) clearTimeout(resizeTimer); ro.disconnect(); io.disconnect(); mo.disconnect(); document.removeEventListener("visibilitychange", onVisibility); root!.removeEventListener("pointermove", onPointerMove); root!.removeEventListener("pointerleave", onPointerLeave); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [shapes, wordmarkText, particleCount, glyphs, holdMs, migrateMs]); return (

); } 63:["$","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":[null,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/loud/hero-glyph-silhouette-pack/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/hero-glyph-silhouette-pack.tsx"}],"className":"h-[70svh] min-h-80"}]]}]