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:T31a2,"use client"; import { useEffect, useRef } from "react"; // --------------------------------------------------------------------------- // StringEnvelope — a hero whose backdrop is pure string art. A few hundred // STRAIGHT chords are drawn across a circle under the map i -> k*i; nothing // ever plots a curve, yet the chords bunch along an epicycloid with (k - 1) // cusps and that caustic is the only bright thing in the frame. k = 3 is the // nephroid (two cusps), k = 2 the cardioid, k = 5 four cusps. // // k is a REAL number here, not the integer of the classic modular-multiplication // string art (no mod, no rounding), so the family morphs continuously: the // pointer's horizontal position drives k through a damped spring and the cusps // visibly split and travel around the circle. Vertical position skews the // generating circle's aspect, tilting the caustic. // // Plain SVG on purpose. Every stroke is a presentation attribute reading a // custom property directly (stroke="var(--foreground)"), so both themes repaint // through the cascade with NO getComputedStyle and NO MutationObserver — the // correct strategy when the primitive is a DOM element rather than a canvas. // Geometry is written straight onto the existing nodes via refs on a // throttled rAF accumulator: never React state on the hot path, never a // re-mount of the node list. // --------------------------------------------------------------------------- const POINTS = 240; // nodes on the circle == chords drawn const RADIUS_FRAC = 0.42; // R = 0.42 * min(w, h) const CHORD_OPACITY = 0.26; // 1px hairlines; density alone makes the envelope bright const FRAME_INTERVAL = 1000 / 24; // ~24fps redraw — 240 closed-form sin/cos pairs is trivial const K_CENTER = 3; // nephroid at rest const K_BREATH_A = 0.35; // slow calm breathing amplitude const K_BREATH_MS_A = 18000; const K_BREATH_B = 0.08; // small incommensurate jitter so cusps never hold a dead pose const K_BREATH_MS_B = 6700; const K_POINTER_RANGE = 1.1; // +/- k swing across the hero's width const ASPECT_A = 0.06; // ambient y-squash of the generating circle const ASPECT_MS = 25000; const ASPECT_POINTER = 0.18; // extra tilt from pointer height const SPRING_K = 90; const SPRING_ZETA = 0.85; export interface StringEnvelopeCta { label: string; href?: string; onClick?: () => void; } export interface StringEnvelopeProps { /** mono eyebrow label above the headline */ eyebrow?: string; /** headline text; an array renders one line per entry */ headline?: string | string[]; /** supporting copy under the headline */ subcopy?: string; /** required primary CTA button/link */ primaryCta: StringEnvelopeCta; /** optional secondary CTA rendered beside the primary one */ secondaryCta?: StringEnvelopeCta; /** number of nodes on the circle, one chord each. default 240 */ points?: number; /** resting multiplier the ambient breathing is centered on. default 3 (nephroid) */ multiplier?: number; /** extra classes merged onto the rendered root element */ className?: string; } export function StringEnvelope({ eyebrow, headline = "Straight lines only", subcopy, primaryCta, secondaryCta, points = POINTS, multiplier = K_CENTER, className = "", }: StringEnvelopeProps) { const rootRef = useRef(null); const svgRef = useRef(null); const ringRef = useRef(null); const lineRefs = useRef<(SVGLineElement | null)[]>([]); const dimsRef = useRef({ w: 0, h: 0 }); const headlineLines = Array.isArray(headline) ? headline : [headline]; useEffect(() => { const root = rootRef.current; const svg = svgRef.current; if (!root || !svg) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const measure = () => { const rect = root.getBoundingClientRect(); const w = Math.max(1, rect.width); const h = Math.max(1, rect.height); dimsRef.current = { w, h }; svg.setAttribute("viewBox", `0 0 ${w} ${h}`); }; measure(); // -- geometry --------------------------------------------------------- // Node i sits at theta_i = 2*pi*i/N on a circle of radius R (squashed by // `aspect` on y). Chord i is the straight segment theta_i -> k*theta_i. // That is the whole construction; the epicycloid is never computed. const draw = (k: number, aspect: number) => { const { w, h } = dimsRef.current; const cx = w / 2; const cy = h / 2; const R = RADIUS_FRAC * Math.min(w, h); const ry = R * aspect; const ring = ringRef.current; if (ring) { ring.setAttribute("cx", cx.toFixed(1)); ring.setAttribute("cy", cy.toFixed(1)); ring.setAttribute("rx", R.toFixed(1)); ring.setAttribute("ry", ry.toFixed(1)); } const step = (Math.PI * 2) / points; for (let i = 0; i < points; i++) { const el = lineRefs.current[i]; if (!el) continue; const t0 = i * step; const t1 = k * t0; el.setAttribute("x1", (cx + R * Math.cos(t0)).toFixed(1)); el.setAttribute("y1", (cy + ry * Math.sin(t0)).toFixed(1)); el.setAttribute("x2", (cx + R * Math.cos(t1)).toFixed(1)); el.setAttribute("y2", (cy + ry * Math.sin(t1)).toFixed(1)); } }; if (reduced) { // One frozen frame at t = 0, k = multiplier, aspect = 1. No rAF loop and // no pointer tracking at all — the caustic alone still carries the hero, // because the structure is geometric, not animated. draw(multiplier, 1); const ro = new ResizeObserver(() => { measure(); draw(multiplier, 1); }); ro.observe(root); return () => ro.disconnect(); } // -- loop ------------------------------------------------------------- let raf = 0; let elVisible = true; let pageVisible = document.visibilityState === "visible"; let visible = elVisible && pageVisible; let startTime = 0; let lastTick = 0; let lastDraw = 0; let k = multiplier; let kVel = 0; let aspect = 1; let aspectVel = 0; let pointerActive = false; let normX = 0.5; let normY = 0.5; const tick = (now: number) => { if (!startTime) startTime = now; const dt = lastTick ? Math.min(0.05, (now - lastTick) / 1000) : 1 / 60; lastTick = now; const el = now - startTime; // Calm resting pulse around the nephroid, plus a small incommensurate // jitter term so cusps sharpen and soften instead of holding a pose. const kBase = multiplier + K_BREATH_A * Math.sin((el / K_BREATH_MS_A) * Math.PI * 2) + K_BREATH_B * Math.sin((el / K_BREATH_MS_B) * Math.PI * 2); const aspectBase = 1 + ASPECT_A * Math.sin((el / ASPECT_MS) * Math.PI * 2); const kTarget = pointerActive ? kBase + K_POINTER_RANGE * (2 * normX - 1) : kBase; const aspectTarget = pointerActive ? aspectBase + ASPECT_POINTER * (2 * normY - 1) : aspectBase; const c = 2 * SPRING_ZETA * Math.sqrt(SPRING_K); kVel += (-SPRING_K * (k - kTarget) - c * kVel) * dt; k += kVel * dt; aspectVel += (-SPRING_K * (aspect - aspectTarget) - c * aspectVel) * dt; aspect += aspectVel * dt; if (now - lastDraw >= FRAME_INTERVAL) { lastDraw = now; draw(k, aspect); } raf = visible ? requestAnimationFrame(tick) : 0; }; const wake = () => { if (!raf && visible) raf = requestAnimationFrame(tick); }; // Pointer is bound to the hero section, mouse/pen only — touch has no // hover state and a move-during-scroll would read as a jump in k. const onMove = (e: PointerEvent) => { if (e.pointerType === "touch") return; const rect = root.getBoundingClientRect(); if (rect.width < 1 || rect.height < 1) return; normX = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width)); normY = Math.min(1, Math.max(0, (e.clientY - rect.top) / rect.height)); pointerActive = true; wake(); }; const onLeave = (e: PointerEvent) => { if (e.pointerType === "touch") return; pointerActive = false; wake(); }; root.addEventListener("pointermove", onMove); root.addEventListener("pointerleave", onLeave); const ro = new ResizeObserver(() => { measure(); draw(k, aspect); }); ro.observe(root); const io = new IntersectionObserver((entries) => { elVisible = entries[0]?.isIntersecting ?? true; visible = elVisible && pageVisible; wake(); }); io.observe(root); const onVisibility = () => { pageVisible = document.visibilityState === "visible"; visible = elVisible && pageVisible; wake(); }; document.addEventListener("visibilitychange", onVisibility); draw(k, aspect); wake(); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", onVisibility); root.removeEventListener("pointermove", onMove); root.removeEventListener("pointerleave", onLeave); }; }, [points, multiplier]); const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ns-accent"; return (

{eyebrow ? (

{eyebrow}

) : null}

{headlineLines.map((line, i) => ( {line} ))}

{subcopy ? (

{subcopy}

) : null}

{primaryCta.href ? ( {primaryCta.label} ) : ( )} {secondaryCta ? ( secondaryCta.href ? ( {secondaryCta.label} ) : ( ) ) : null}

); } 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"}]]}],["$","div","ns-accent",{"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-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$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)"}]]}],["$","div","color-ns-accent",{"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-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/loud/hero-string-envelope/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/hero-string-envelope.tsx"}],"className":"h-[70svh] min-h-80"}]]}]