51: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"] 52: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"] 53:T2738,"use client"; import * as React from "react"; import { motion, useMotionValueEvent, useReducedMotion, useScroll, useSpring, useTransform, type MotionValue, } from "motion/react"; import { cn } from "@/lib/utils"; /* ───────────────────────────────────────────────────────── * ARC SCROLL STORYBOARD (driven by scroll progress, not time) * * 0% section pins; card 0 at top center, the rest fanned * down the right side of the arc * 0→100% wheel turns counter-clockwise, `spacing`° per card * cards rise from bottom-right → peak at top center → * fall away to bottom-left * at the top: scale 1, upright, highest z-index * near the top: neighbors spread apart so they never * overlap while trading places (apexGap) * toward edges: scale → ARC.edgeScale, tilted along the curve * past visibleArc: fade out over ARC.fadeArc degrees * 100% last card at top center; section unpins * ───────────────────────────────────────────────────────── */ const ARC = { spacing: 18, // degrees between neighboring cards visibleArc: 80, // cards stay fully visible within ±this angle of the top fadeArc: 10, // degrees over which a card fades out past visibleArc edgeScale: 0.85, // scale of a card at the edge of the visible arc apex: 0.4, // center of the top card, as a fraction of the stage height radiusRatio: 0.75, // auto radius, as a fraction of the stage width maxRadius: 900, // cap for the auto radius, in px apexGap: 16, // min px between neighbors as they swap at the top maxSwapRatio: 0.95, // caps the spread when cards are wide for the arc }; const SCROLL_SPRING = { stiffness: 120, damping: 30, mass: 0.4 }; const DEG = Math.PI / 180; export interface ArcScrollProps extends React.HTMLAttributes { /** Degrees between neighboring cards along the arc. */ spacing?: number; /** Arc radius in px. Defaults to a fraction of the stage width. */ radius?: number; /** Pixels of scroll it takes to move one card along the arc. */ scrollPerCard?: number; /** Rotate each card to follow the curve. */ tilt?: boolean; /** * Scroll container to track. Defaults to the window. The container must be * positioned (e.g. `relative`), or scroll progress is measured from the page. */ containerRef?: React.RefObject; /** Classes for the pinned stage. Set its height here. */ stageClassName?: string; /** Classes for the wrapper around every card. */ cardClassName?: string; /** * Minimum gap in px between two cards as they trade places at the top. * Cards spread apart near the top to make room, then settle back to * `spacing` toward the edges. */ apexGap?: number; /** * Content pinned inside the stage, behind the cards: headlines, captions, * progress. Position it with `absolute` classes. */ overlay?: React.ReactNode; /** Called with the index of the card nearest the top whenever it changes. */ onActiveChange?: (index: number) => void; } export function ArcScroll({ spacing = ARC.spacing, radius, scrollPerCard = 320, tilt = true, containerRef, stageClassName, cardClassName, apexGap = ARC.apexGap, overlay, onActiveChange, className, children, ...props }: ArcScrollProps) { const sectionRef = React.useRef(null); const stageRef = React.useRef(null); const stage = useElementSize(stageRef); const reduceMotion = useReducedMotion(); const cards = React.Children.toArray(children); const count = cards.length; const card = useLargestCard(stageRef, count); const { scrollYProgress } = useScroll({ target: sectionRef, container: containerRef, offset: ["start start", "end end"], }); const smoothProgress = useSpring(scrollYProgress, SCROLL_SPRING); const progress = reduceMotion ? scrollYProgress : smoothProgress; // How far the wheel has turned, in degrees. Card i sits at i * spacing // minus this, so 0° is the top and positive angles are on the right. const turn = useTransform(progress, (p) => p * Math.max(count - 1, 0) * spacing); // The card nearest the top. Read from the smoothed turn, so it matches what's // on screen rather than the raw scroll position. const activeRef = React.useRef(0); useMotionValueEvent(turn, "change", (t) => { if (!onActiveChange || spacing <= 0) return; const index = Math.min(Math.max(Math.round(t / spacing), 0), Math.max(count - 1, 0)); if (index === activeRef.current) return; activeRef.current = index; onActiveChange(index); }); const arcRadius = radius ?? Math.min(stage.width * ARC.radiusRatio, ARC.maxRadius); const tilted = tilt && !reduceMotion; const spread = apexSpread({ spacing, radius: arcRadius, card, gap: apexGap, tilt: tilted }); return (

{/* Scroll runway: the stage stays pinned while this scrolls past. */}

); } /** * Two neighbors trade places (and z-index) when they're equally far from the * top. If they overlap at that moment, the overlap flips from one card to the * other in a single frame. To avoid it, cards are pushed apart near the top by * `spread * tanh(a / spacing)` degrees: wide enough there that the pair clears, * fading to a constant offset toward the edges so `spacing` holds again. */ function apexSpread({ spacing, radius, card, gap, tilt, }: { spacing: number; radius: number; card: { width: number; height: number }; gap: number; tilt: boolean; }) { if (!card.width || spacing <= 0 || radius <= 0) return 0; // Tilted cards fan inward, so their bottom corners meet first. const reach = tilt ? radius - card.height / 2 : radius; const ratio = reach > 0 ? (card.width + gap) / (2 * reach) : 1; const needed = (2 * Math.asin(Math.min(ratio, ARC.maxSwapRatio))) / DEG; // At the swap each card sits at ±spacing/2, pushed out by spread * tanh(0.5). return Math.max(0, (needed - spacing) / (2 * Math.tanh(0.5))); } function ArcCard({ baseAngle, spacing, spread, turn, radius, apexY, tilt, className, children, }: { baseAngle: number; spacing: number; spread: number; turn: MotionValue; radius: number; apexY: number; tilt: boolean; className?: string; children: React.ReactNode; }) { const angle = useTransform(turn, (t) => { const a = baseAngle - t; return spread ? a + spread * Math.tanh(a / spacing) : a; }); const x = useTransform(angle, (a) => radius * Math.sin(a * DEG)); const y = useTransform(angle, (a) => apexY + radius * (1 - Math.cos(a * DEG))); const rotate = useTransform(angle, (a) => (tilt ? a : 0)); const scale = useTransform(angle, (a) => { const t = Math.min(Math.abs(a) / ARC.visibleArc, 1); return 1 - (1 - ARC.edgeScale) * t; }); const opacity = useTransform(angle, (a) => { const past = Math.abs(a) - ARC.visibleArc; return past <= 0 ? 1 : Math.max(0, 1 - past / ARC.fadeArc); }); const zIndex = useTransform(angle, (a) => Math.round(1000 - Math.abs(a) * 10)); const visibility = useTransform(opacity, (o) => (o === 0 ? "hidden" : "visible")); // A zero-size anchor rides the arc; the card is centered on it, so it // rotates and scales around its own center. return (

{children}

); } function useElementSize(ref: React.RefObject) { const [size, setSize] = React.useState({ width: 0, height: 0 }); React.useLayoutEffect(() => { const el = ref.current; if (!el) return; const update = () => setSize({ width: el.clientWidth, height: el.clientHeight }); update(); const observer = new ResizeObserver(update); observer.observe(el); return () => observer.disconnect(); }, [ref]); return size; } /** Size of the widest and tallest card, unaffected by the arc's transforms. */ function useLargestCard(stageRef: React.RefObject, count: number) { const [size, setSize] = React.useState({ width: 0, height: 0 }); React.useLayoutEffect(() => { const stage = stageRef.current; if (!stage) return; const cards = Array.from(stage.querySelectorAll("[data-arc-card]")); const update = () => setSize({ width: Math.max(0, ...cards.map((card) => card.offsetWidth)), height: Math.max(0, ...cards.map((card) => card.offsetHeight)), }); update(); const observer = new ResizeObserver(update); cards.forEach((card) => observer.observe(card)); return () => observer.disconnect(); }, [stageRef, count]); return size; } 50:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L51",null,{"namespace":"@keyframeui","registryDependencies":["utils"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/ui/arc-scroll.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]