50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 52:T2c6c,"use client"; import { useEffect, useRef, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export interface LanyardProps { /** Name printed on the badge. */ name?: string; /** Role printed under the name. */ role?: string; /** Photo URL for the badge. */ image?: string; /** Replace the default badge face entirely. */ children?: ReactNode; /** Strap color. */ strapColor?: string; /** Strap length in px. */ ropeLength?: number; /** Badge width in px (height follows a 1:1.45 ratio). */ badgeWidth?: number; /** Gravity multiplier. */ gravity?: number; className?: string; } type P = { x: number; y: number; px: number; py: number }; const SEGMENTS = 14; const ITERATIONS = 14; export function Lanyard({ name = "Ada Park", role = "Design Engineer", image, children, strapColor = "#c6f24e", ropeLength = 170, badgeWidth = 180, gravity = 1, className, }: LanyardProps) { const rootRef = useRef(null); const canvasRef = useRef(null); const badgeRef = useRef(null); const cfg = useRef({ strapColor, gravity }); useEffect(() => { cfg.current = { strapColor, gravity }; }, [strapColor, gravity]); const badgeHeight = badgeWidth * 1.45; useEffect(() => { const root = rootRef.current!; const canvas = canvasRef.current!; const badge = badgeRef.current!; const ctx = canvas.getContext("2d")!; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const seg = ropeLength / SEGMENTS; let w = root.clientWidth; let h = root.clientHeight; const anchor = () => ({ x: w / 2, y: -8 }); // Rope nodes; the last node is the badge clip. `tail` is the badge bottom. const a0 = anchor(); // Start tilted to one side so it swings in on mount. const phi = reduced ? 0 : 0.75; const [sx, sy] = [Math.sin(phi), Math.cos(phi)]; const pts: P[] = Array.from({ length: SEGMENTS + 1 }, (_, i) => { const x = a0.x + sx * seg * i; const y = a0.y + sy * seg * i; return { x, y, px: x, py: y }; }); const clip = pts[SEGMENTS]; const tx = clip.x + sx * badgeHeight; const ty = clip.y + sy * badgeHeight; const tail: P = { x: tx, y: ty, px: tx, py: ty }; let grab: { f: number; x: number; y: number } | null = null; let raf = 0; let visible = true; let last = performance.now(); let acc = 0; const dist = (a: P, b: P, len: number, wa: number, wb: number) => { const dx = b.x - a.x; const dy = b.y - a.y; const d = Math.hypot(dx, dy) || 1e-6; const diff = (d - len) / d / (wa + wb); a.x += dx * diff * wa; a.y += dy * diff * wa; b.x -= dx * diff * wb; b.y -= dy * diff * wb; }; const step = (dt: number) => { const g = 2200 * cfg.current.gravity * dt * dt; for (const p of [...pts, tail]) { const vx = (p.x - p.px) * 0.985; const vy = (p.y - p.py) * 0.985; p.px = p.x; p.py = p.y; p.x += vx; p.y += vy + g; } const a = anchor(); for (let k = 0; k < ITERATIONS; k++) { pts[0].x = a.x; pts[0].y = a.y; for (let i = 0; i < SEGMENTS; i++) dist(pts[i], pts[i + 1], seg, i === 0 ? 0 : 1, i + 1 === SEGMENTS ? 0.35 : 1); dist(clip, tail, badgeHeight, 1, 1); if (grab) { // Move the grabbed point on the badge to the pointer, split between both ends. const f = grab.f; const cx = grab.x - (clip.x + (tail.x - clip.x) * f); const cy = grab.y - (clip.y + (tail.y - clip.y) * f); const s = (1 - f) * (1 - f) + f * f; clip.x += (cx * (1 - f)) / s; clip.y += (cy * (1 - f)) / s; tail.x += (cx * f) / s; tail.y += (cy * f) / s; } } pts[0].x = a.x; pts[0].y = a.y; }; const draw = () => { ctx.clearRect(0, 0, w, h); const trace = () => { ctx.beginPath(); ctx.moveTo(pts[0].x, pts[0].y); for (let i = 1; i < SEGMENTS; i++) { const mx = (pts[i].x + pts[i + 1].x) / 2; const my = (pts[i].y + pts[i + 1].y) / 2; ctx.quadraticCurveTo(pts[i].x, pts[i].y, mx, my); } ctx.lineTo(clip.x, clip.y); }; ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.save(); ctx.shadowColor = "rgba(0,0,0,.45)"; ctx.shadowBlur = 14; ctx.shadowOffsetY = 6; trace(); ctx.strokeStyle = cfg.current.strapColor; ctx.lineWidth = 14; ctx.stroke(); ctx.restore(); // Woven look: darker edges and a stitched center line. trace(); ctx.strokeStyle = "rgba(0,0,0,.18)"; ctx.lineWidth = 14; ctx.setLineDash([2, 3]); ctx.stroke(); trace(); ctx.strokeStyle = cfg.current.strapColor; ctx.lineWidth = 9; ctx.setLineDash([]); ctx.stroke(); trace(); ctx.strokeStyle = "rgba(255,255,255,.35)"; ctx.lineWidth = 1.2; ctx.setLineDash([5, 4]); ctx.stroke(); ctx.setLineDash([]); const ang = Math.atan2(tail.x - clip.x, tail.y - clip.y); const vx = clip.x - clip.px; const flip = Math.max(-35, Math.min(35, vx * 2.2)); badge.style.transform = `translate3d(${clip.x - badgeWidth / 2}px, ${clip.y - 10}px, 0) rotate(${-ang}rad) rotateY(${flip}deg)`; }; const frame = (now: number) => { acc += Math.min(0.05, (now - last) / 1000); last = now; const dt = 1 / 120; while (acc >= dt) { step(dt); acc -= dt; } draw(); raf = visible ? requestAnimationFrame(frame) : 0; }; const start = () => { if (raf || !visible) return; last = performance.now(); raf = requestAnimationFrame(frame); }; const resize = () => { const dpr = Math.min(window.devicePixelRatio || 1, 2); w = root.clientWidth; h = root.clientHeight; canvas.width = w * dpr; canvas.height = h * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); draw(); }; const local = (e: PointerEvent) => { const r = root.getBoundingClientRect(); return { x: e.clientX - r.left, y: e.clientY - r.top }; }; const onDown = (e: PointerEvent) => { badge.setPointerCapture(e.pointerId); const p = local(e); // Project the pointer onto the badge axis to find where it was grabbed. const ax = tail.x - clip.x; const ay = tail.y - clip.y; const f = Math.max(0.05, Math.min(0.95, ((p.x - clip.x) * ax + (p.y - clip.y) * ay) / (ax * ax + ay * ay))); grab = { f, ...p }; }; const onMove = (e: PointerEvent) => { if (grab) Object.assign(grab, local(e)); }; const onUp = () => { grab = null; }; const onKey = (e: KeyboardEvent) => { const push: Record = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1], Enter: [1, -0.4], " ": [-1, -0.4] }; const d = push[e.key]; if (!d) return; e.preventDefault(); // Nudge by faking velocity: shift the previous positions backwards. for (const p of [tail, clip]) { p.px -= d[0] * 14; p.py -= d[1] * 14; } }; const ro = new ResizeObserver(resize); const io = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; if (visible) start(); }); ro.observe(root); io.observe(root); badge.addEventListener("pointerdown", onDown); badge.addEventListener("pointermove", onMove); badge.addEventListener("pointerup", onUp); badge.addEventListener("pointercancel", onUp); badge.addEventListener("keydown", onKey); resize(); start(); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); badge.removeEventListener("pointerdown", onDown); badge.removeEventListener("pointermove", onMove); badge.removeEventListener("pointerup", onUp); badge.removeEventListener("pointercancel", onUp); badge.removeEventListener("keydown", onKey); }; }, [ropeLength, badgeWidth, badgeHeight]); return (

); } 4f:["$","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,["$","$L50",null,{"namespace":"@glint-ui","registryDependencies":["utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ui/lanyard.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]