4d: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"] 4e: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"] 4f:T1277,/** * Static dataset for the stat reel. * * The gradient and the stat are declared together so the 1:1 pairing between a * figure and its colour triad cannot drift apart: there is no second array to * keep in sync. */ const GRAD_SIZE = "95% 95%"; const GRAD_POS = { x: 50, y: 110 } as const; const GRAD_BASE = "#2a2e36"; type Triad = readonly [string, string, string]; const gradientFrom = ([c0, c1, c2]: Triad) => `radial-gradient(${GRAD_SIZE} at ${GRAD_POS.x}% ${GRAD_POS.y}%, ${c0} 0%, rgba(${c1},0.669) 34.13%, rgba(${c2},0.5) 65.38%, rgba(158,144,96,0) 100%), linear-gradient(${GRAD_BASE}, ${GRAD_BASE})`; interface RawStat { readonly prefix?: string; readonly value: string; readonly label: string; readonly triad: Triad; } export interface Stat { readonly prefix?: string; readonly value: string; readonly label: string; /** Ready-to-paint `background-image` for the transparent-text figure. */ readonly gradient: string; } const RAW = [ { label: "Depth of the Challenger Deep", prefix: "Down to", triad: ["#d7be68", "215,50,154", "84,109,208"], value: "10,935m", }, { label: "Pressure at the trench floor", triad: ["#78ec81", "50,215,193", "208,84,177"], value: "1,100×", }, { label: "Water at two kilometres down", triad: ["#ecbf78", "215,50,66", "84,88,208"], value: "4°C", }, { label: "Light in the midnight zone", triad: ["#78c8ec", "120,84,236", "236,84,140"], value: "0%", }, { label: "Of seafloor mapped in detail", prefix: "Under", triad: ["#c8ec78", "50,200,120", "90,84,208"], value: "1%", }, { label: "Top of the twilight zone", triad: ["#ecae78", "236,130,50", "150,84,208"], value: "200m", }, { label: "Of deep-sea life that glows", triad: ["#78ece4", "84,140,236", "208,84,200"], value: "76%", }, { label: "Round trip for a crewed dive", triad: ["#ec78b4", "236,84,150", "84,120,208"], value: "11h", }, { label: "New marine species each year", prefix: "Over", triad: ["#ece078", "150,215,50", "50,200,193"], value: "2,000", }, { label: "Average depth of the ocean", triad: ["#b478ec", "208,84,200", "236,180,84"], value: "3.7km", }, { label: "Of Earth's water is ocean", triad: ["#78ecc8", "50,200,215", "120,84,236"], value: "97%", }, { label: "Speed of sound in seawater", triad: ["#ec8878", "236,84,84", "150,84,236"], value: "1,500m/s", }, { label: "Abyssal sediment per 1,000yr", triad: ["#9aecb0", "50,215,180", "84,120,236"], value: "1cm", }, { label: "Lifespan of Greenland shark", prefix: "Up to", triad: ["#a8a8ec", "84,120,236", "236,84,180"], value: "400yr", }, { label: "Deepest fish ever filmed", triad: ["#ecc878", "236,84,180", "50,200,200"], value: "8,336m", }, { label: "Freezing point of seawater", triad: ["#a8ec78", "150,215,50", "84,100,236"], value: "−1.8°C", }, { label: "Known hydrothermal vents", prefix: "Over", triad: ["#ec9ab0", "236,84,140", "100,84,236"], value: "600", }, { label: "Hottest water microbes take", triad: ["#78ecd0", "50,215,140", "215,84,200"], value: "121°C", }, { label: "Added pressure per 10 metres", triad: ["#ecd278", "236,160,50", "84,110,236"], value: "1atm", }, { label: "Between two high tides", triad: ["#90a8ec", "140,84,236", "236,90,150"], value: "12h25m", }, { label: "Carbon absorbed each year", prefix: "Roughly", triad: ["#78ecb8", "50,200,200", "160,84,236"], value: "2.5Gt", }, { label: "Where the hadal zone begins", triad: ["#eca090", "236,110,84", "84,130,236"], value: "6,000m", }, { label: "Of your oxygen from plankton", prefix: "Nearly", triad: ["#d0ec78", "80,210,110", "215,84,190"], value: "50%", }, { label: "One global conveyor cycle", triad: ["#9ad8ec", "84,150,236", "215,84,180"], value: "1,000yr", }, ] as const satisfies readonly [RawStat, ...RawStat[]]; const toStat = (raw: RawStat): Stat => ({ gradient: gradientFrom(raw.triad), label: raw.label, prefix: raw.prefix, value: raw.value, }); const [FIRST, ...REST] = RAW; /** * Non-empty by construction, so `STATS[0]` is a safe fallback under * `noUncheckedIndexedAccess`. */ export const STATS: readonly [Stat, ...Stat[]] = [toStat(FIRST), ...REST.map(toStat)]; export const N = STATS.length; /** Wraps any integer (including negatives) into a defined stat. */ export const statAt = (index: number): Stat => { const wrapped = ((Math.trunc(index) % N) + N) % N; return STATS[wrapped] ?? STATS[0]; }; 50:T50c4,"use client"; import type { CSSProperties, FC } from "react"; import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react"; import { gsap } from "gsap"; import { N, STATS, statAt } from "./stat-reel-data"; const DESKTOP = { font: 26, itemH: 62 }; const MOBILE = { font: 19, itemH: 46 }; /** * Gates the first auto-step behind the entrance timeline. Floor is ~250ms: * below that the per-focus figure pop (overwrite: true) fires while the * entrance still owns the figure and kills the cold open. */ const START_DELAY_MS = 600; const BREAKPOINT = 900; const TOUCH_GAIN = 1.2; const ROW_COUNT = N * 2; /** * Wheel deltas arrive in three units (`WheelEvent.deltaMode`): pixels (0), * lines (1) and pages (2). Chrome and Safari only ever report pixels, but * Firefox on Windows/Linux reports lines, so the accumulator has to convert * to pixels before comparing against `CFG.wheelStep`. This nominal line * height only has to be in the right order of magnitude. */ const WHEEL_LINE_PX = 16; /** * A wheel or touch gesture delivers events milliseconds apart, so a gap this * long means the gesture ended and any sub-threshold residue in the * accumulator is stale. Without expiry, 44px of ignored input waits * indefinitely for an unrelated flick minutes later to top it over * `CFG.wheelStep` and steal a row. Not a feel constant: every value well above * a frame and well below human re-engagement behaves identically for real * gestures. */ const GESTURE_IDLE_MS = 500; const COLOR_REST = "#636365"; const COLOR_FOCUS = "#010102"; /** * Declared locally: the host app never defines `--font-sans`, so Tailwind's * `font-sans` resolves to a cycle and falls back to Times. */ const SANS = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'; const CFG = { centerScale: 1.68, dwell: 0.6, falloff: 270, falloffMobile: 150, farScale: 0.7, manualStep: 1.2, numScale: 1.05, resume: 4, step: 0.8, wheelStep: 45, }; /** Scale a fully-defocused row shrinks to, relative to the focused row. */ const FAR_RATIO = CFG.farScale / CFG.centerScale; const clamp01 = (v: number) => (v < 0 ? 0 : Math.min(1, v)); const lerp = (a: number, b: number, t: number) => a + (b - a) * t; const smoothstep = (t: number) => t * t * (3 - 2 * t); const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect; /** `CSSProperties` widened to accept custom properties without a type assertion. */ interface CSSVarProperties extends CSSProperties { [key: `--${string}`]: string | number | undefined; } const PANEL_MASK = "linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%)"; const SECTION_STYLE: CSSProperties = { fontFamily: SANS, }; const PANEL_STYLE: CSSProperties = { WebkitMaskImage: PANEL_MASK, maskImage: PANEL_MASK, }; const ROW_STYLE: CSSProperties = { fontSize: "calc(var(--bm-base-font) * var(--center-scale))", height: "var(--bm-item-h)", }; /** Breathing room kept between the widest figure and the column's inner edge. */ const FIT_GUTTER_PX = 10; /** Smallest fraction of its natural size the figure may be shrunk to. */ const FIT_FLOOR = 0.4; /** * Shrinks the figure until it fits the left column, down to a 40% floor. * Writes `--bm-num-fit`, which the font-size `calc()` multiplies in. */ const applyFit = (num: HTMLElement, col: HTMLElement) => { num.style.setProperty("--bm-num-fit", "1"); const natural = num.scrollWidth; const cs = window.getComputedStyle(col); // oxlint-disable-next-line unicorn/prefer-number-coercion -- computed padding carries a px unit, which Number() rejects const padL = Number.parseFloat(cs.paddingLeft) || 0; // oxlint-disable-next-line unicorn/prefer-number-coercion -- computed padding carries a px unit, which Number() rejects const padR = Number.parseFloat(cs.paddingRight) || 0; const available = col.clientWidth - padL - padR - FIT_GUTTER_PX; // A 0-wide column (hidden panel, freshly-mounted iframe) makes `available` // negative, which the 0.4 floor would silently absorb into a real-looking // shrink. Keep the `1` written above until there is something to fit into. if (available <= 0) { return; } if (natural > 0 && natural > available) { num.style.setProperty("--bm-num-fit", String(Math.max(FIT_FLOOR, available / natural))); } }; interface RowsProps { register: (index: number, el: HTMLDivElement | null) => void; } const RowsBase: FC = ({ register }) => ( <> {Array.from({ length: ROW_COUNT }, (_, j) => (

register(j, el)} style={ROW_STYLE} className="pointer-events-none absolute top-0 right-0 left-[clamp(32px,5vw,80px)] flex origin-left items-center leading-[1.05] font-medium whitespace-nowrap text-[#636365] [will-change:transform]" > {statAt(j).label}

))} ); const Rows = memo(RowsBase); Rows.displayName = "StatReelRows"; export const StatReel: FC = () => { const [focusedIndex, setFocusedIndex] = useState(0); const sectionRef = useRef(null); const leftRef = useRef(null); const figureRef = useRef(null); const numberRef = useRef(null); const panelRef = useRef(null); const rowsRef = useRef<(HTMLDivElement | null)[]>([]); /** The single scalar every tween drives; the rAF loop paints from it. */ const proxy = useRef({ idx: 0 }); const targetRef = useRef(0); const modeRef = useRef<"auto" | "user">("auto"); const focusedRef = useRef(0); const accumRef = useRef(0); const reducedRef = useRef(false); const firstFigure = useRef(true); const sizeRef = useRef({ cy: 0, falloff: CFG.falloff, itemH: DESKTOP.itemH, panelH: 0, }); const register = useCallback((index: number, el: HTMLDivElement | null) => { rowsRef.current[index] = el; }, []); useEffect(() => { const section = sectionRef.current; const figure = figureRef.current; const panel = panelRef.current; if (!section || !figure || !panel) { return; } let disposed = false; const proxyState = proxy.current; const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); reducedRef.current = mq.matches; const onMq = (e: MediaQueryListEvent) => { reducedRef.current = e.matches; }; mq.addEventListener("change", onMq); const isReduced = () => reducedRef.current; const measure = () => { const mobile = window.innerWidth < BREAKPOINT; const base = mobile ? MOBILE : DESKTOP; const panelH = panel.clientHeight; sizeRef.current = { cy: panelH / 2, falloff: mobile ? CFG.falloffMobile : CFG.falloff, itemH: base.itemH, panelH, }; section.style.setProperty("--bm-item-h", `${base.itemH}px`); section.style.setProperty("--bm-base-font", `${base.font}px`); section.style.setProperty("--center-scale", String(CFG.centerScale)); if (numberRef.current && leftRef.current) { applyFit(numberRef.current, leftRef.current); } }; measure(); window.addEventListener("resize", measure); // The gallery resizes the frame without ever firing a window resize. const ro = new ResizeObserver(() => { // A freshly-mounted iframe reports 0x0 on the first callback. if (section.clientWidth === 0 || section.clientHeight === 0) { return; } measure(); }); ro.observe(section); // Fonts swap in after first paint; the initial applyFit measured fallbacks. const refitAfterFonts = async () => { await document.fonts.ready; if (!disposed) { measure(); } }; void refitAfterFonts(); let dwellTimer: ReturnType | null = null; let resumeTimer: ReturnType | null = null; let startTimer: ReturnType | null = null; const tweenTo = (t: number, duration: number, ease: string, onComplete: () => void) => { gsap.to(proxyState, { duration: isReduced() ? 0 : duration, ease, idx: t, onComplete, overwrite: true, }); }; /** * In auto mode, queues the next advance one dwell from now; every tween * hands back here on completion, so the reel keeps stepping until the * mode changes. */ const queueAutoStep = () => { if (modeRef.current !== "auto" || isReduced()) { return; } dwellTimer = setTimeout(() => { targetRef.current += 1; tweenTo(targetRef.current, CFG.step, "expo.inOut", queueAutoStep); }, CFG.dwell * 1000); }; const startAuto = () => { if (isReduced()) { return; } modeRef.current = "auto"; targetRef.current = Math.round(proxyState.idx); if (dwellTimer) { clearTimeout(dwellTimer); } queueAutoStep(); }; const stepManual = (dir: number) => { if (startTimer) { clearTimeout(startTimer); } if (dwellTimer) { clearTimeout(dwellTimer); } if (resumeTimer) { clearTimeout(resumeTimer); } modeRef.current = "user"; targetRef.current += dir; tweenTo(targetRef.current, CFG.manualStep, "expo.out", queueAutoStep); resumeTimer = setTimeout(startAuto, CFG.resume * 1000); }; /** Input accumulates continuously but only advances in whole rows. */ const drain = () => { while (Math.abs(accumRef.current) >= CFG.wheelStep) { const d = Math.sign(accumRef.current); accumRef.current -= d * CFG.wheelStep; stepManual(d); } }; let idleTimer: ReturnType | null = null; /** * The single entry point for wheel and touch alike: both feed pixels in, * whole rows come out, and the remainder is dropped once the gesture ends. */ const accumulate = (deltaPx: number) => { accumRef.current += deltaPx; drain(); if (idleTimer) { clearTimeout(idleTimer); } idleTimer = setTimeout(() => { accumRef.current = 0; }, GESTURE_IDLE_MS); }; let rafId = 0; let prevNearest: HTMLDivElement | null = null; const render = () => { const { itemH, falloff, panelH, cy } = sizeRef.current; // Skip painting until the panel has a real height, or every row would // land offscreen for a frame inside a freshly-mounted iframe. if (panelH > 0) { const { idx } = proxyState; const rows = rowsRef.current; const windowH = ROW_COUNT * itemH; const halfWin = windowH / 2; let nearestEl: HTMLDivElement | null = null; let nearestAbs = Infinity; for (let j = 0; j < ROW_COUNT; j += 1) { const row = rows[j]; if (!row) { continue; } let off = (j - idx) * itemH; // Wrap into (-halfWin, halfWin] so the reel never ends. off = ((((off + halfWin) % windowH) + windowH) % windowH) - halfWin; const screenY = cy + off; if (screenY < -itemH || screenY > panelH + itemH) { if (row.style.opacity !== "0") { row.style.opacity = "0"; } continue; } const s = smoothstep(clamp01(Math.abs(off) / falloff)); if (row.style.opacity !== "1") { row.style.opacity = "1"; } row.style.transform = `translateY(${screenY - itemH / 2}px) scale(${lerp(1, FAR_RATIO, s)})`; const a = Math.abs(off); if (a < nearestAbs) { nearestAbs = a; nearestEl = row; } } // Only touch color when the centre row actually changes. if (nearestEl !== prevNearest) { if (prevNearest) { prevNearest.style.color = COLOR_REST; } if (nearestEl) { nearestEl.style.color = COLOR_FOCUS; } prevNearest = nearestEl; } const focused = ((Math.round(idx) % N) + N) % N; if (focused !== focusedRef.current) { focusedRef.current = focused; setFocusedIndex(focused); } } rafId = requestAnimationFrame(render); }; rafId = requestAnimationFrame(render); const onWheel = (e: WheelEvent) => { e.preventDefault(); let unit = 1; if (e.deltaMode === 1) { unit = WHEEL_LINE_PX; } else if (e.deltaMode === 2) { unit = sizeRef.current.panelH; } accumulate(e.deltaY * unit); }; /** * The reel tracks exactly one finger, latched by identifier. Reading * `touches[0]` instead would silently re-anchor onto a different contact * the moment the tracked finger lifts out of a multi-touch gesture, * turning the next 2px move into a jump of a dozen rows. */ let activeTouch: number | null = null; let touchY = 0; const findTouch = (list: TouchList, id: number): Touch | null => { for (const t of list) { if (t.identifier === id) { return t; } } return null; }; const onTouchStart = (e: TouchEvent) => { if (activeTouch !== null) { return; } const [t] = e.changedTouches; if (!t) { return; } activeTouch = t.identifier; touchY = t.clientY; }; const onTouchMove = (e: TouchEvent) => { if (activeTouch === null) { return; } const t = findTouch(e.touches, activeTouch); if (!t) { return; } const dy = touchY - t.clientY; touchY = t.clientY; e.preventDefault(); accumulate(dy * TOUCH_GAIN); }; const onTouchEnd = (e: TouchEvent) => { if (activeTouch === null) { return; } if (!findTouch(e.changedTouches, activeTouch)) { return; } // Hand tracking to a finger that is still down rather than going dead // until the next touchstart. Re-anchoring `touchY` to its current // position is what keeps the handover from registering as a jump. const [next] = e.touches; activeTouch = next ? next.identifier : null; if (next) { touchY = next.clientY; } }; const onKeyDown = (e: KeyboardEvent) => { let dir = 0; if (e.key === "ArrowDown") { dir = 1; } else if (e.key === "ArrowUp") { dir = -1; } if (dir === 0) { return; } e.preventDefault(); stepManual(dir); }; section.addEventListener("wheel", onWheel, { passive: false }); section.addEventListener("touchstart", onTouchStart, { passive: true }); section.addEventListener("touchmove", onTouchMove, { passive: false }); section.addEventListener("touchend", onTouchEnd, { passive: true }); section.addEventListener("touchcancel", onTouchEnd, { passive: true }); section.addEventListener("keydown", onKeyDown); const groups = [figure, panel]; let intro: gsap.core.Timeline | null = null; if (isReduced()) { gsap.set(groups, { opacity: 1, scale: 1, y: 0 }); firstFigure.current = false; } else { const tl = gsap.timeline({ delay: 0.12, onComplete: () => { firstFigure.current = false; }, }); tl.fromTo( groups, { opacity: 0, scale: 0.96, y: 26 }, { duration: 1, ease: "power4.out", opacity: 1, scale: 1, stagger: 0.12, y: 0, }, ); intro = tl; startTimer = setTimeout(startAuto, START_DELAY_MS); } return () => { disposed = true; cancelAnimationFrame(rafId); ro.disconnect(); window.removeEventListener("resize", measure); mq.removeEventListener("change", onMq); section.removeEventListener("wheel", onWheel); section.removeEventListener("touchstart", onTouchStart); section.removeEventListener("touchmove", onTouchMove); section.removeEventListener("touchend", onTouchEnd); section.removeEventListener("touchcancel", onTouchEnd); section.removeEventListener("keydown", onKeyDown); if (dwellTimer) { clearTimeout(dwellTimer); } if (resumeTimer) { clearTimeout(resumeTimer); } if (startTimer) { clearTimeout(startTimer); } if (idleTimer) { clearTimeout(idleTimer); } gsap.killTweensOf(proxyState); gsap.killTweensOf(groups); // Killing only the child tween would leave the timeline on the ticker, // where it completes and fires `onComplete` after the reset below. intro?.kill(); // StrictMode remounts: every latch must return to its mount-time value // or the second mount skips the cold open. firstFigure.current = true; modeRef.current = "auto"; proxyState.idx = 0; targetRef.current = 0; focusedRef.current = 0; accumRef.current = 0; }; }, []); // Both halves of a focus change: pop the incoming figure in, then refit it to // the left column now that its digits — and so its natural width — differ. // The entrance timeline owns the figure until it completes, so the pop stays // latched off for the cold open while the fit still has to run. useIsoLayoutEffect(() => { const figure = figureRef.current; if (figure && !firstFigure.current) { if (reducedRef.current) { gsap.set(figure, { opacity: 1, scale: 1, y: 0 }); } else { gsap.fromTo( figure, { opacity: 0, scale: 0.95, y: 14 }, { duration: Math.max(0.32, CFG.step * 0.7), ease: "expo.out", opacity: 1, overwrite: true, scale: 1, y: 0, }, ); } } if (numberRef.current && leftRef.current) { applyFit(numberRef.current, leftRef.current); } }, [focusedIndex]); const current = statAt(focusedIndex); const numberStyle: CSSVarProperties = { "--bm-num-scale": String(CFG.numScale), backgroundImage: current.gradient, }; return (

{current.prefix ?? " "}

{current.value}

{`${stat.prefix ? `${stat.prefix} ` : ""}${stat.value} — ${stat.label}`}

); }; 4c:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","gsap",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"gsap"}]]}]}]]}],["$","$L4d",null,{"namespace":"@uicapsule","registryDependencies":[]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"/preview.tsx","content":"\"use client\";\n\nimport { StatReel } from \"./stat-reel\";\n\nconst Preview = () => ;\n\nexport default Preview;\n","type":"registry:file","target":"uicapsule/stat-reel/preview.tsx"},{"path":"/stat-reel-data.ts","content":"$4f","type":"registry:file","target":"uicapsule/stat-reel/stat-reel-data.ts"},{"path":"/stat-reel.tsx","content":"$50","type":"registry:file","target":"uicapsule/stat-reel/stat-reel.tsx"}],"className":"h-[70svh] min-h-80"}]]}]