63: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"] 64: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"] 65:T3116,"use client"; import { AnimatePresence, animate, motion, useMotionValue, useTransform } from "motion/react"; import { useEffect, useId, useRef, useState, type CSSProperties, type PointerEvent as ReactPointerEvent } from "react"; import { createPortal } from "react-dom"; import { SlideFace } from "./CarouselSlideCard"; import { useIsoLayoutEffect } from "./engine/useCarouselEngine"; import { useFocusTrap } from "./hooks/useFocusTrap"; import { useScrollLock } from "./hooks/useScrollLock"; import { copyVars } from "./portal-vars"; import type { CarouselSlide, RenderImage } from "./types"; /** The morph's spring: a touch softer than the track's snap, so the card visibly travels. */ const MORPH = { type: "spring", stiffness: 210, damping: 28, mass: 1 } as const; const FADE = { duration: 0.2, ease: "easeOut" } as const; const CARD_RADIUS = 20; /** Where an element sits without its own transform (the morph's home), whatever the transform is right now. */ function homeRect(el: HTMLElement | null) { if (!el) return null; const prev = el.style.transform; el.style.transform = "none"; const rect = el.getBoundingClientRect(); el.style.transform = prev; return rect; } const PANEL_RADIUS = 24; export type CarouselDetailProps = { slides: CarouselSlide[]; index: number; aspect: number; accent?: string; reduced: boolean; renderImage?: RenderImage; /** The active card's face on screen (the morph starts and ends there), unscaled by the carousel's dip. */ cardRect: () => DOMRect | null; /** The carousel's root: the view takes its fonts and accent from it. */ varsFrom: () => Element | null; /** Element to focus once the view has closed. */ restoreFocus: () => HTMLElement | null | undefined; onNavigate: (index: number) => void; /** Called when the close animation has finished. */ onClosed: () => void; /** Called when the close animation starts (the carousel behind can start coming back). */ onClosing: () => void; }; function copyFor(s: CarouselSlide) { switch (s.kind) { case "image": case "video": return { tag: s.tag, title: s.title ?? s.alt, text: s.description ?? s.caption, href: s.href, cta: s.cta }; case "statement": return { tag: undefined, title: s.word, text: s.description ?? s.subtitle, href: s.href, cta: s.cta }; case "text": return { tag: undefined, title: s.title, text: s.description ?? s.body, href: s.href, cta: s.cta }; case "stat": return { tag: s.delta, title: `${s.value} ${s.label}`, text: s.description, href: s.href, cta: s.cta }; default: return { tag: undefined, title: s.label ?? "Slide", text: undefined, href: undefined, cta: undefined }; } } const Icon = { close: ( ), prev: ( ), next: ( ), out: ( ), }; /** * The detail view. The active card's face flies out of the carousel into the view (a FLIP: the large copy is * laid out where it belongs, then started from the card's rectangle and sprung home), the copy fades in beside * it, and closing sends it back to whichever card is active by then. ← / → move through the slides inside. */ export function CarouselDetail(props: CarouselDetailProps) { const { slides, index, aspect, accent, reduced, renderImage, cardRect, varsFrom, restoreFocus, onNavigate, onClosed, onClosing } = props; const slide = slides[index]; const count = slides.length; const copy = copyFor(slide); const titleId = useId(); const box = useRef(null); const media = useRef(null); const closeBtn = useRef(null); const [phase, setPhase] = useState<"open" | "closing">("open"); const [dir, setDir] = useState(1); const live = useRef({ closing: false, dragY: 0, pointer: -1, y0: 0, t0: 0 }); // The morph: translate and scale of the media from the card's rectangle to its own, radius kept visually even. const mx = useMotionValue(0); const my = useMotionValue(0); const ms = useMotionValue(1); const backdrop = useMotionValue(0); const dragY = useMotionValue(0); /** The scale the current morph started from: the radius is eased from the card's to the panel's along it. */ const s0 = useMotionValue(1); const radius = useTransform(() => { const s = ms.get(); const span = 1 - s0.get(); const t = Math.abs(span) < 0.001 ? 1 : Math.min(1, Math.max(0, (s - s0.get()) / span)); return `${(CARD_RADIUS + (PANEL_RADIUS - CARD_RADIUS) * t) / s}px`; }); const copyOpacity = useTransform(() => backdrop.get()); useScrollLock(true); useFocusTrap(box, true, { initial: closeBtn, restore: restoreFocus }); // Open: measure both rectangles before the first paint and start the media on the card. useIsoLayoutEffect(() => { copyVars(varsFrom(), box.current); const to = homeRect(media.current); const from = cardRect(); if (reduced || !to || !from || !to.width) { const fade = animate(backdrop, 1, FADE); return () => fade.stop(); } const s = from.width / to.width; s0.jump(s); mx.jump(from.left - to.left); my.jump(from.top - to.top); ms.jump(s); const runs = [animate(mx, 0, MORPH), animate(my, 0, MORPH), animate(ms, 1, MORPH), animate(backdrop, 1, { duration: 0.35, ease: [0.22, 1, 0.36, 1] })]; return () => runs.forEach((r) => r.stop()); // Runs once, when the view opens. }, []); function close() { if (live.current.closing) return; live.current.closing = true; setPhase("closing"); onClosing(); // The media's home includes a swipe-down in progress (the sheet carries it), so it lands where it is dropped. const home = homeRect(media.current); const target = cardRect(); const fadeOut = animate(backdrop, 0, { duration: reduced ? 0.2 : 0.3, ease: "easeOut" }); if (reduced || !home || !target || !home.width) { fadeOut.finished.then(onClosed); return; } const s = target.width / home.width; // Keep the radius formula pointed the same way: card radius at `s`, panel radius at 1. s0.jump(s); const morph = [animate(mx, target.left - home.left, MORPH), animate(my, target.top - home.top, MORPH), animate(ms, s, MORPH)]; Promise.all(morph.map((m) => m.finished)).then(onClosed); } function go(delta: number) { if (live.current.closing) return; setDir(delta); onNavigate((index + delta + count) % count); } // Keys: Esc closes, ← / → move through the slides (with the carousel behind following along). useEffect(() => { const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") { e.preventDefault(); close(); } else if (e.key === "ArrowRight" || e.key === "ArrowLeft") { const t = e.target as HTMLElement | null; if (t?.closest("input, textarea, [contenteditable]")) return; e.preventDefault(); go(e.key === "ArrowRight" ? 1 : -1); } }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }); // Swipe down to close (touch). const onPointerDown = (e: ReactPointerEvent) => { if (e.pointerType !== "touch" || live.current.closing) return; live.current.pointer = e.pointerId; live.current.y0 = e.clientY; live.current.t0 = e.timeStamp; }; const onPointerMove = (e: ReactPointerEvent) => { if (e.pointerId !== live.current.pointer) return; const dy = Math.max(0, e.clientY - live.current.y0); if (box.current && box.current.scrollTop > 0) return; dragY.set(dy * 0.85); backdrop.set(Math.max(0.35, 1 - dy / 600)); }; const onPointerUp = (e: ReactPointerEvent) => { if (e.pointerId !== live.current.pointer) return; live.current.pointer = -1; const dy = dragY.get(); const v = dy / Math.max(1, e.timeStamp - live.current.t0); if (dy > 110 || (dy > 30 && v > 0.6)) close(); else { animate(dragY, 0, MORPH); animate(backdrop, 1, FADE); } }; const style = { "--dc-aspect": aspect, "--dc-aspect-n": aspect, ...(accent ? { "--dc-accent-now": accent } : {}) } as CSSProperties; return createPortal( , document.body, ); } 66:T1607,"use client"; import { motion, useMotionValueEvent, useTransform, type MotionValue } from "motion/react"; import { useRef, type ReactNode, type RefObject } from "react"; import type { AutoplayState } from "./engine/useCarouselEngine"; import { useMagnetic } from "./hooks/useMagnetic"; const pad = (n: number) => String(n).padStart(2, "0"); export type CarouselProgressProps = { count: number; index: MotionValue; progress: MotionValue; autoplayState: MotionValue; labelOf: (i: number) => string; initialIndex: number; showProgress?: boolean; showArrows?: boolean; /** Shows the play / pause button. */ autoplay?: boolean; /** Magnetic icons (fine pointers only). */ magnetic?: boolean; onSelect: (i: number) => void; onPrev: () => void; onNext: () => void; onToggle: () => void; }; function Segment({ i, index, progress, autoplayState, label, current, onSelect }: { i: number; index: MotionValue; progress: MotionValue; autoplayState: MotionValue; label: string; current: boolean; onSelect: (i: number) => void; }) { const ref = useRef(null); // Reads all three every time: a computed value only follows what its first run read. const scaleX = useTransform(() => { const [at, state, p] = [index.get(), autoplayState.get(), progress.get()]; return at === i ? (state === "off" ? 1 : p) : 0; }); useMotionValueEvent(index, "change", (v) => ref.current?.setAttribute("aria-current", String(v === i))); return ( ); } function MagneticButton({ label, area, enabled, onClick, className = "", children, buttonRef }: { label: string; area: RefObject; enabled: boolean; onClick: () => void; className?: string; children: ReactNode; buttonRef?: RefObject; }) { const own = useRef(null); const ref = buttonRef ?? own; const { x, y } = useMagnetic(ref, area, { enabled }); return ( ); } const Chevron = ({ dir }: { dir: 1 | -1 }) => ( ); const Pause = () => ( ); const Play = () => ( ); /** Index, segmented progress, play / pause and the magnetic arrows. Nothing here re-renders while it plays. */ export function CarouselProgress({ count, index, progress, autoplayState, labelOf, initialIndex, showProgress = true, showArrows = true, autoplay = true, magnetic = true, onSelect, onPrev, onNext, onToggle, }: CarouselProgressProps) { const area = useRef(null); const toggle = useRef(null); const current = useTransform(() => pad(index.get() + 1)); useMotionValueEvent(autoplayState, "change", (s) => toggle.current?.setAttribute("aria-label", s === "stopped" ? "Play slideshow" : "Pause slideshow"), ); return (

{current} {pad(count)}

{showProgress ? (

{Array.from({ length: count }, (_, i) => ( ))}

) : ( )}

{autoplay && ( )} {showArrows && ( <> )}

); } 67:T3f56,"use client"; import { animate, motion, useTransform, type MotionValue } from "motion/react"; import { memo, useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react"; import type { CarouselEngine, EngineValues } from "./engine/useCarouselEngine"; import { arc, cssTransformFor, reveal, transformFor, type Geometry } from "./engine/pose"; import { useInViewPlayback } from "./hooks/useInViewPlayback"; import type { CarouselSlide, ImageSlide, RenderImage, StatSlide, VideoSlide } from "./types"; import { clamp, slotPosition } from "./engine/loop"; /** What screen readers and the live region call a slide. */ export function slideLabel(s: CarouselSlide): string { switch (s.kind) { case "image": case "video": return s.title ?? s.alt; case "statement": return s.word; case "text": return s.title; case "stat": return `${s.value} ${s.label}`; default: return s.label ?? "Slide"; } } /** Whether a colour (hex) is light enough that dark ink and a dark hairline belong on it. */ export function isLight(color: string): boolean { const hex = color.trim().replace("#", ""); if (!/^[0-9a-f]{3}([0-9a-f]{3})?$/i.test(hex)) return false; const full = hex.length === 3 ? [...hex].map((c) => c + c).join("") : hex; const [r, g, b] = [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16) / 255); const lin = (c: number) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4); return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b) > 0.36; } const Arrow = () => ( ); /** The motion values a card face reads: its distance from the anchor and the stage's geometry. */ export type FaceMotion = { d: MotionValue; geometry: MotionValue }; function useParallax(m: FaceMotion | undefined, percent: boolean) { return useTransform(() => { if (!m) return percent ? "0%" : "0px"; const g = m.geometry.get(); const d = m.d.get(); const p = g.measured ? g.parallax : 0.5; return percent ? `${clamp(-d * 6 * p, -6.8, 6.8).toFixed(3)}%` : `${(-d * 20 * p).toFixed(2)}px`; }); } /** Shows the picture (fading it in unless it was drawn at once) and retires the blurred plate behind it. */ function loaded(el: HTMLElement) { el.setAttribute("data-loaded", ""); el.setAttribute("data-done", ""); } function Picture({ slide, priority, sizes, renderImage }: { slide: ImageSlide; priority: boolean; sizes: string; renderImage?: RenderImage }) { if (renderImage) return <>{renderImage({ slide, className: "dc-img", sizes, priority })}; return ( // eslint-disable-next-line @next/next/no-img-element -- plain so the component runs anywhere; pass renderImage for next/image {slide.alt}

{ if (el?.complete && el.naturalWidth) loaded(el); }} onLoad={(e) => loaded(e.currentTarget)} // A picture that fails leaves its blurred plate, never the browser's broken-image alt text. onError={(e) => e.currentTarget.setAttribute("data-error", "")} /> ); } function Plate({ blur }: { blur?: string }) { return

; } /** Tag, title and caption over a scrim: on the active card only, rising into place as the card arrives. */ function Caption({ slide, m }: { slide: ImageSlide | VideoSlide; m?: FaceMotion }) { const shown = useTransform(() => (m ? reveal(m.d.get()) : 1)); const rise = useTransform(() => (m ? (1 - reveal(m.d.get())) * 8 : 0)); if (!slide.title && !slide.caption && !slide.tag) return null; return ( <> {slide.tag && ( {slide.tag} )} {(slide.title || slide.caption) && (

{slide.title &&

{slide.title}

} {slide.caption &&

{slide.caption}

}

{slide.href && ( )} )} ); } function ImageFace({ slide, m, priority, sizes, renderImage, panel }: FaceProps & { slide: ImageSlide }) { const x = useParallax(m, true); return ( <>

{!panel && } ); } const SoundOn = () => ( ); const SoundOff = () => ( ); function VideoFace({ slide, m, panel, playing }: FaceProps & { slide: VideoSlide }) { const x = useParallax(m, true); const ref = useRef(null); const [muted, setMuted] = useState(true); const shown = useTransform(() => (m ? reveal(m.d.get()) : 1)); // Card copies play while they are the active card and in view; the detail view's copy plays while it is open. const p = playing; useInViewPlayback(ref, () => (p ? p.isActive() : true), p ? [p.index] : [], p?.inView ?? ALWAYS_IN_VIEW, !!p || !!panel); useEffect(() => { if (ref.current) ref.current.muted = muted; }, [muted]); return ( <>

{!panel && } {slide.sound !== false && ( { e.stopPropagation(); setMuted((v) => !v); }} > {muted ? : } )} ); } const ALWAYS_IN_VIEW = { get: () => 1, on: () => () => {} } as unknown as MotionValue; /** Big words also slide, a little, against their card. */ function useWordShift(m?: FaceMotion) { return useParallax(m, false); } function wordSize(word: string) { return Math.round(clamp(400 / (Math.max(word.length, 1) * 0.62), 72, 140)); } function StatementFace({ slide, m }: FaceProps & { slide: Extract }) { const x = useWordShift(m); return (

{slide.subtitle ?

{slide.subtitle}

: } {slide.word}

); } function TextFace({ slide, m }: FaceProps & { slide: Extract }) { const x = useWordShift(m); const font = slide.titleFont ?? "serif"; return (

{slide.title}

{slide.href ? {slide.body} : slide.body}

); } /** "48%" → { head: "", n: 48, tail: "%", decimals: 0 }; anything without a number is left alone. */ export function parseStat(value: string) { const match = /^(\D*?)(-?\d[\d,]*(?:\.\d+)?)(.*)$/.exec(value); if (!match) return null; const [, head, num, tail] = match; const decimals = num.includes(".") ? num.split(".")[1].length : 0; return { head, n: Number(num.replace(/,/g, "")), tail, decimals, grouped: num.includes(",") }; } function StatFace({ slide, m, reduced }: FaceProps & { slide: StatSlide }) { const valueRef = useRef(null); const x = useWordShift(m); useEffect(() => { const el = valueRef.current; const stat = parseStat(slide.value); if (!m || !el || !stat || reduced) return; const fmt = (v: number) => stat.head + v.toLocaleString("en-US", { minimumFractionDigits: stat.decimals, maximumFractionDigits: stat.decimals, useGrouping: stat.grouped }) + stat.tail; // Counts up from zero once, the first time the card arrives. Until then it shows the real figure, so a // neighbour never reads "0%". let done = false; let run: ReturnType | null = null; const check = (d: number) => { if (done || Math.abs(d) >= 0.5 || !m.geometry.get().measured) return; done = true; run = animate(0, stat.n, { duration: 0.6, ease: [0.22, 1, 0.36, 1], onUpdate: (v) => (el.textContent = fmt(v)) }); }; check(m.d.get()); const off = m.d.on("change", check); return () => { off(); run?.stop(); el.textContent = slide.value; }; }, [m, slide.value, reduced]); const sign = slide.delta?.trim().startsWith("-") || slide.delta?.trim().startsWith("−") ? "-" : "+"; return (

{slide.label}

{slide.delta && ( {slide.delta} )}

{slide.value}

); } type FaceProps = { m?: FaceMotion; priority: boolean; sizes: string; renderImage?: RenderImage; panel?: boolean; reduced?: boolean; playing?: { isActive: () => boolean; index: MotionValue; inView: MotionValue }; }; /** A slide's face: the same component draws the card and the detail view's large copy of it. */ export function SlideFace({ slide, ...p }: FaceProps & { slide: CarouselSlide }) { const tone = "bg" in slide ? (isLight(slide.bg) ? "light" : "dark") : "dark"; const style = "bg" in slide ? ({ "--dc-card-bg": slide.bg, "--dc-card-fg": slide.fg } as CSSProperties) : undefined; let body: ReactNode; switch (slide.kind) { case "image": body = ; break; case "video": body = ; break; case "statement": body = ; break; case "text": body = ; break; case "stat": body = ; break; default: body = slide.render(); } return (

{body} {p.m && }

); } function Dim({ m }: { m: FaceMotion }) { const opacity = useTransform(() => { const g = m.geometry.get(); return arc(m.d.get(), g.measured ? g.depth : 0.55).dim; }); return ; } export type CarouselSlideCardProps = { slide: CarouselSlide; /** Position of this card in the DOM (0 … count × copies − 1). */ slot: number; count: number; /** Cards from the anchor before anything is measured: what the server renders. */ k0: number; values: EngineValues; lean: MotionValue; engine: CarouselEngine; sizes: string; reduced: boolean; /** Load the nearest pictures eagerly with a high fetch priority (the carousel is on the first screen). */ priority: boolean; renderImage?: RenderImage; }; /** One card on the arc: every transform, shadow, dim and reveal is derived from the track's offset. */ export const CarouselSlideCard = memo(function CarouselSlideCard({ slide, slot, count, k0, values, lean, engine, sizes, reduced, priority, renderImage, }: CarouselSlideCardProps) { const { offset, geometry } = values; // Computed motion values subscribe to the values they read on their first run, so each reads all of its inputs // before any early return (the first run happens before the stage is measured). const d = useTransform(() => { const g = geometry.get(); const at = offset.get(); if (!g.measured) return k0; return slotPosition(slot * g.step, at, g.loopLength || undefined) / g.step; }); const transform = useTransform(() => { const g = geometry.get(); const dd = d.get(); const v = lean.get(); if (!g.measured) return cssTransformFor(k0); return transformFor(dd * g.step + g.shift, dd, g.depth, v, g.tilt); }); const visibility = useTransform(() => { const g = geometry.get(); const dd = d.get(); if (!g.measured) return Math.abs(k0) <= 3 ? "visible" : "hidden"; const left = g.stage / 2 + dd * g.step + g.shift - g.card / 2; return left < g.stage + g.card * 0.5 && left + g.card > -g.card * 0.5 ? "visible" : "hidden"; }); const near = useTransform(() => 1 - Math.min(Math.abs(d.get()), 1)); const m = useMemo(() => ({ d, geometry }), [d, geometry]); const index = slot % count; return (

engine.activeSlot() === slot, index: values.index, inView: values.inView }} /> ); }); 68:T799,"use client"; import { motion, type MotionValue } from "motion/react"; import { useEffect, useSyncExternalStore, type RefObject } from "react"; import { createPortal } from "react-dom"; import type { CursorMode } from "./engine/useCarouselEngine"; import { useDragCursor } from "./hooks/useDragCursor"; import { copyVars } from "./portal-vars"; const subscribe = () => () => {}; /** The pill that replaces the pointer over the cards on wide screens with a mouse: "Drag", "← →", "Open". */ export function DragCursor({ values, isEnabled, varsFrom, }: { values: { cursorX: MotionValue; cursorY: MotionValue; cursorMode: MotionValue }; isEnabled: () => boolean; /** The carousel's root, for its fonts. */ varsFrom?: RefObject; }) { const { ref, x, y } = useDragCursor(values, isEnabled); const mounted = useSyncExternalStore(subscribe, () => true, () => false); useEffect(() => copyVars(varsFrom?.current, ref.current), [mounted, varsFrom, ref]); if (!mounted) return null; return createPortal(

Drag Open

, document.body, ); } 69:T235c,"use client"; import { animate, motion, useMotionValue } from "motion/react"; import { forwardRef, useEffect, useImperativeHandle, useRef, useState, type CSSProperties } from "react"; import { CarouselDetail } from "./CarouselDetail"; import { CarouselProgress } from "./CarouselProgress"; import { CarouselSlideCard, slideLabel } from "./CarouselSlideCard"; import { DragCursor } from "./DragCursor"; import { mod } from "./engine/loop"; import { useCarouselEngine, useIsoLayoutEffect } from "./engine/useCarouselEngine"; import { useFinePointer, useReducedMotion } from "./hooks/useReducedMotion"; import type { AutoplayOptions, CarouselSlide, DynamicCarouselHandle, DynamicCarouselProps } from "./types"; import "./styles.css"; const DEFAULT_AUTOPLAY: AutoplayOptions = { interval: 4500, pauseOnHover: true }; /** How far the carousel sinks behind an open detail view. */ const DIP = 0.96; function hrefOf(s: CarouselSlide) { return "href" in s ? s.href : undefined; } /** * An editorial carousel on a shallow 3D arc, driven by its own physics: drag 1:1, flick with weight, land on a * card, loop without a seam. See README.md for the props, the imperative handle and the feel guide. */ export const DynamicCarousel = forwardRef(function DynamicCarousel( { slides, aspect = 8 / 11, cardWidth = 400, gap = 24, loop = true, autoplay = DEFAULT_AUTOPLAY, depth = 0.55, tilt = 0.6, parallax = 0.5, align = "center", showProgress = true, showArrows = true, cursor = "drag-pill", expandOnClick = true, wheel = "hijack", theme = "auto", accent, className, style, label = "Carousel", initialIndex = 0, onChange, onSlideClick, renderImage, priority = true, }, ref, ) { const count = slides.length; const reduced = useReducedMotion(); const fine = useFinePointer(); const [openIndex, setOpenIndex] = useState(null); const openRef = useRef(null); const rootRef = useRef(null); const frameRef = useRef(null); const trackRef = useRef(null); const sizerRef = useRef(null); const liveRef = useRef(null); const dip = useMotionValue(1); const canActivate = (i: number) => { const s = slides[i]; return !!s && (!!onSlideClick || (expandOnClick && s.kind !== "custom") || !!hrefOf(s)); }; const activate = (i: number) => { const s = slides[i]; if (!s || onSlideClick?.(s, i) === false) return; if (expandOnClick && s.kind !== "custom") { values.cursorMode.set("hidden"); openRef.current = i; setOpenIndex(i); } else { const href = hrefOf(s); if (href) window.location.assign(href); } }; const { engine, values, lean, copies, setCopies } = useCarouselEngine({ count, loop, align, initialIndex, cardWidth, gap, depth, tilt, parallax, autoplay, wheel, reduced, canActivate, labelOf: (i) => slideLabel(slides[i]), onIndexChange: (i) => onChange?.(i, slides[i]), onActivate: activate, }); useImperativeHandle( ref, () => ({ next: engine.nextQuiet, prev: () => engine.goToQuiet(mod(engine.getIndex() - 1, count)), goTo: engine.goToQuiet, pause: engine.pause, play: engine.play, getIndex: engine.getIndex, }), [engine, count], ); useEffect(() => { const [root, track, sizer] = [rootRef.current, trackRef.current, sizerRef.current]; if (!root || !track || !sizer) return; return engine.attach({ root, track, sizer, live: liveRef.current }, setCopies); }, [engine, setCopies]); // Anything that changes the stage's geometry re-measures (resizes are the ResizeObserver's job). useIsoLayoutEffect(() => { engine.measure(); }, [engine, count, cardWidth, gap, loop, align, depth, tilt, parallax, reduced, aspect]); // New cards (more copies round the loop) need their roving tabindex and active flag. useIsoLayoutEffect(() => { engine.syncCards(); }, [engine, copies, slides]); useEffect(() => { engine.setPause("detail", openIndex !== null); const root = rootRef.current; if (openIndex === null) return; root?.setAttribute("data-dc-open", ""); const run = animate(dip, DIP, reduced ? { duration: 0 } : { type: "spring", stiffness: 210, damping: 28 }); return () => run.stop(); }, [engine, openIndex, dip, reduced]); const rootStyle = { "--dc-card-w-lg": `${cardWidth}px`, "--dc-gap-lg": `${gap}px`, "--dc-aspect": aspect, "--dc-depth": depth, ...(accent ? { "--dc-accent": accent } : {}), ...style, } as CSSProperties; const total = count * copies; const k0 = (slot: number) => (loop ? mod(slot - initialIndex + Math.floor(count / 2), count) - Math.floor(count / 2) : slot - initialIndex); const sizes = `(min-width: 1024px) ${Math.round(cardWidth * 1.16)}px, (min-width: 640px) min(${Math.round(cardWidth * 1.16)}px, 61vw), min(102vw, 418px)`; const cursorOn = cursor === "drag-pill" && fine && !reduced; /** The active card's face where it would be with the carousel at full size (the morph's start and end). */ const cardRect = () => { const face = trackRef.current?.querySelector("[data-dc-slot][data-active] .dc-face"); const frame = frameRef.current; if (!face || !frame) return null; const prev = frame.style.transform; frame.style.transform = "none"; const rect = face.getBoundingClientRect(); frame.style.transform = prev; return rect; }; return (

{Array.from({ length: total }, (_, slot) => ( ))}

{(showProgress || showArrows || autoplay) && ( slideLabel(slides[i])} initialIndex={initialIndex} showProgress={showProgress} showArrows={showArrows} autoplay={!!autoplay} magnetic={fine && !reduced} onSelect={(i) => engine.goTo(i)} onPrev={engine.prev} onNext={engine.next} onToggle={engine.toggle} /> )} {cursorOn && ( openRef.current === null && values.geometry.get().bp === "lg"} /> )} {openIndex !== null && ( rootRef.current} restoreFocus={() => trackRef.current?.querySelector("[data-dc-slot][data-active]")} onNavigate={(i) => { openRef.current = i; setOpenIndex(i); engine.goTo(i); }} onClosing={() => { animate(dip, 1, reduced ? { duration: 0 } : { type: "spring", stiffness: 210, damping: 28 }); }} onClosed={() => { rootRef.current?.removeAttribute("data-dc-open"); openRef.current = null; setOpenIndex(null); }} /> )}

); }); export default DynamicCarousel; 6a:T938,/** Remainder that is never negative: mod(-1, 5) === 4. */ export function mod(a: number, n: number): number { return ((a % n) + n) % n; } export function clamp(v: number, min: number, max: number): number { return v < min ? min : v > max ? max : v; } /** * Where a card sits relative to the anchor, in px, given the track's offset. * * With `loopLength` the result wraps into [-L/2, L/2): every card moves round the loop on its own, so the loop * has no seam at any offset or speed and nothing is ever cloned or jumped back. Without it the track is straight. */ export function slotPosition(base: number, offset: number, loopLength?: number): number { const x = base - offset; return loopLength ? mod(x + loopLength / 2, loopLength) - loopLength / 2 : x; } /** The slide nearest the anchor at this offset. */ export function indexAt(offset: number, step: number, count: number, loop: boolean): number { const i = Math.round(offset / step); return loop ? mod(i, count) : clamp(i, 0, count - 1); } /** * How many times the slides are laid round the loop. Few slides on a wide screen would leave the loop shorter * than what is visible, and cards would be seen jumping from one end to the other; laying them round twice * (or more) keeps the loop longer than the stage plus a card's worth of margin on each side. */ export function loopCopies(count: number, step: number, stage: number): number { if (count < 1 || step <= 0) return 1; return Math.max(1, Math.ceil((stage + 3 * step) / (count * step))); } /** Offset for a non-looping track that is dragged past an end: the overshoot is resisted, not blocked. */ export function rubberBand(value: number, min: number, max: number, resistance = 0.35): number { if (value < min) return min - (min - value) * resistance; if (value > max) return max + (value - max) * resistance; return value; } /** The offset that brings `index` to the anchor by the shortest way round from `offset`. */ export function offsetForIndex(index: number, offset: number, step: number, count: number, loop: boolean): number { if (!loop) return clamp(index, 0, count - 1) * step; const here = Math.round(offset / step); let delta = mod(index - mod(here, count), count); if (delta > count / 2) delta -= count; return (here + delta) * step; } 6b:Td13,import { clamp, slotPosition } from "./loop"; export type Breakpoint = "sm" | "md" | "lg"; /** Everything the per-frame math needs about the stage. Changes only on resize or when props change. */ export type Geometry = { measured: boolean; bp: Breakpoint; stage: number; card: number; gap: number; step: number; /** Anchor relative to the stage's centre, px (0 when the active card is centred). */ shift: number; /** Length of the loop, px; 0 for a straight track. */ loopLength: number; copies: number; /** Effective strengths, after the breakpoint and reduced-motion factors. */ depth: number; tilt: number; parallax: number; }; export const UNMEASURED: Geometry = { measured: false, bp: "lg", stage: 0, card: 0, gap: 0, step: 1, shift: 0, loopLength: 0, copies: 1, depth: 0, tilt: 0, parallax: 0, }; /** Card `slot`'s distance from the anchor: x in px (from the stage centre) and d in cards. */ export function placement(slot: number, offset: number, g: Geometry) { const pos = slotPosition(slot * g.step, offset, g.loopLength || undefined); const x = pos + g.shift; const left = g.stage / 2 + x - g.card / 2; return { x, d: pos / g.step, visible: left < g.stage + g.card * 0.5 && left + g.card > -g.card * 0.5 }; } /** * The card's resting pose on the arc for distance d (cards from the anchor) and arc strength `depth`: * neighbours turn towards the viewer and step back, so the row reads as a shallow curve, not a coverflow. */ export function arc(d: number, depth: number) { const a = Math.abs(d); return { rotateY: clamp(d, -3, 3) * -9 * depth, z: -Math.min(a, 4) * 90 * depth, scale: 1 - Math.min(a, 3) * 0.045 * depth, dim: Math.min(a, 2) * 0.18 * depth, }; } /** Lean into motion from the track's smoothed velocity (px/s): a turn about Y and a hint of a sweep about Z. */ export function lean(velocity: number, tilt: number) { return { rotateY: clamp(velocity / 2500, -1, 1) * 10 * tilt, rotateZ: clamp(velocity / 6000, -1, 1) * 1.2 * tilt, }; } const r = (v: number, p = 100) => Math.round(v * p) / p; export function transformFor(x: number, d: number, depth: number, velocity: number, tilt: number): string { const p = arc(d, depth); const l = lean(velocity, tilt); return `translate3d(${r(x)}px,0,${r(p.z)}px) rotateY(${r(p.rotateY + l.rotateY, 1000)}deg) rotateZ(${r(l.rotateZ, 1000)}deg) scale(${r(p.scale, 10000)})`; } /** * The same pose written with the stylesheet's own variables, for the first paint: the server does not know the * stage's width, but CSS does, so the arc is right before any script runs and nothing moves when it does. */ export function cssTransformFor(k: number) { const a = Math.abs(k); return ( `translate3d(calc(${k} * var(--dc-step) + var(--dc-shift)),0,calc(${r(-Math.min(a, 4) * 90)}px * var(--dc-depth-eff))) ` + `rotateY(calc(${r(clamp(k, -3, 3) * -9)}deg * var(--dc-depth-eff))) ` + `scale(calc(1 - ${r(Math.min(a, 3) * 0.045, 1000)} * var(--dc-depth-eff)))` ); } /** 0 → 1 as a card arrives at the anchor (its caption's reveal), eased out. */ export function reveal(d: number): number { const t = clamp(1 - Math.abs(d) / 0.55, 0, 1); return 1 - (1 - t) ** 3; } 6c:T6e9,import { clamp } from "./loop"; import { projectDistance } from "./velocity"; export type SnapInput = { /** Track offset at release, px. */ offset: number; /** Track offset when the gesture began, px. */ startOffset: number; /** Track velocity at release, px/ms (positive moves towards later slides). */ velocity: number; step: number; count: number; loop: boolean; }; /** Below this release speed (px/ms) a gesture is a placement, not a flick. */ export const FLICK_SPEED = 0.3; /** * Where a released gesture comes to rest: the projected landing point, snapped to the nearest card boundary. * A flick never travels more than half the slides from where the gesture began, and a quick flick that would * round back to its own card moves one card in the direction it was thrown. */ export function snapTarget({ offset, startOffset, velocity, step, count, loop }: SnapInput): number { const start = Math.round(startOffset / step); let target = Math.round((offset + projectDistance(velocity)) / step); const cap = Math.max(1, Math.floor(count / 2)); target = clamp(target, start - cap, start + cap); if (target === start && Math.abs(velocity) > FLICK_SPEED && Math.sign(offset - startOffset) === Math.sign(velocity)) { target = start + Math.sign(velocity); } if (!loop) target = clamp(target, 0, count - 1); return target * step || 0; // never -0 } /** Nearest card boundary, leaning a little in the direction of travel (used where a wheel gesture stops). */ export function nearest(offset: number, step: number, count: number, loop: boolean, lean = 0): number { const target = Math.round((offset + lean) / step); return (loop ? target : clamp(target, 0, count - 1)) * step || 0; } 6d:T64e2,"use client"; import { animate, useMotionValue, useSpring, useVelocity } from "motion/react"; import type { AnimationPlaybackControls, MotionValue } from "motion/react"; import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent } from "react"; import { useEffect, useLayoutEffect, useMemo, useState } from "react"; import type { AutoplayOptions } from "../types"; import { clamp, indexAt, loopCopies, mod, offsetForIndex, rubberBand } from "./loop"; import { UNMEASURED, type Breakpoint, type Geometry } from "./pose"; import { nearest, snapTarget } from "./snap"; import { createVelocityTracker } from "./velocity"; export const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect; export type CursorMode = "hidden" | "drag" | "pressed" | "dragging" | "open"; export type AutoplayState = "off" | "playing" | "paused" | "stopped"; export type EngineOptions = { count: number; loop: boolean; align: "center" | "start"; initialIndex: number; cardWidth: number; gap: number; depth: number; tilt: number; parallax: number; autoplay: false | AutoplayOptions; wheel: "hijack" | "native"; reduced: boolean; /** What a click on the active card does, if anything: the cursor reads "Open" when this is true. */ canActivate: (index: number) => boolean; /** Spoken in the live region: "Slide 3 of 9, The Perspective". */ labelOf: (index: number) => string; onIndexChange?: (index: number) => void; onActivate?: (index: number) => void; }; export type EngineValues = { /** The one number that drives everything: the track's continuous position, px. */ offset: MotionValue; geometry: MotionValue; /** Active slide. */ index: MotionValue; /** Autoplay's progress towards the next slide, 0–1. */ progress: MotionValue; autoplayState: MotionValue; /** Share of the carousel in view, 0–1. */ inView: MotionValue; cursorX: MotionValue; cursorY: MotionValue; cursorMode: MotionValue; }; /** The snap spring: heavy enough to feel like an object, damped enough to land without a wobble. */ export const SNAP_SPRING = { type: "spring", stiffness: 170, damping: 26, mass: 1.1, restDelta: 0.5 } as const; const REDUCED_TWEEN = { type: "tween", duration: 0.2, ease: "easeOut" } as const; /** How the lean follows velocity: quick to answer, with a small overshoot when the cards stop. */ export const LEAN_SPRING = { stiffness: 260, damping: 21, mass: 1 }; const WHEEL_SETTLE_MS = 120; const TAP_SLOP = 6; const TOUCH_SLOP = 8; /** Pointer capture fails for pointers the browser no longer tracks (and for synthetic events); never fatal. */ function capture(el: Element, id: number, on: boolean) { try { if (on) el.setPointerCapture(id); else if (el.hasPointerCapture(id)) el.releasePointerCapture(id); } catch { /* the gesture still works without capture while the pointer stays over the track */ } } type Gesture = { id: number; touch: boolean; x0: number; y0: number; t0: number; start: number; phase: "pending" | "drag"; /** The track was moving when the finger came down: this press catches it, it is never a click. */ caught: boolean; moved: boolean; /** The card under the pointer when it came down (pointer capture retargets everything after that). */ slot: number | null; }; const defaults: EngineOptions = { count: 0, loop: true, align: "center", initialIndex: 0, cardWidth: 400, gap: 24, depth: 0.55, tilt: 0.6, parallax: 0.5, autoplay: false, wheel: "hijack", reduced: false, canActivate: () => false, labelOf: (i) => `Slide ${i + 1}`, }; /** * The carousel's engine as a plain object: React never re-renders for anything it does. Every gesture, wheel * tick, autoplay frame and snap goes through motion values and a handful of DOM attributes. */ export function createEngine(v: EngineValues) { let o = defaults; let root: HTMLElement | null = null; let track: HTMLElement | null = null; let sizer: HTMLElement | null = null; let live: HTMLElement | null = null; let onCopies: (n: number) => void = () => {}; let anim: AnimationPlaybackControls | null = null; let target: number | null = null; let gesture: Gesture | null = null; let suppressClick = false; const tracker = createVelocityTracker(); const wheel = { timer: 0, last: 0, top: 0, page: false, travel: 0, lean: 0, stepAt: 0 }; const auto = { stopped: false, reasons: new Set(), raf: 0, last: 0 }; let movingTimer = 0; let liveTimer = 0; let pointerInside = false; const g = () => v.geometry.get(); const total = () => o.count * g().copies; const maxOffset = () => (o.count - 1) * g().step; /** The DOM slot sitting at the anchor (with copies, the instance of the active slide that is nearest). */ function activeSlot(at = v.offset.get()): number { const { step } = g(); const i = Math.round(at / step); return o.loop ? mod(i, total()) : clamp(i, 0, o.count - 1); } function stopAnim() { anim?.stop(); anim = null; target = null; } /** Animate the track to `to` px; `velocity` (px/ms) carries a release into the spring so nothing stutters. */ function animateTo(to: number, velocity?: number) { anim?.stop(); target = to; const done = () => { if (target === to) { target = null; anim = null; } }; anim = animate( v.offset, to, o.reduced ? { ...REDUCED_TWEEN, onComplete: done } : { ...SNAP_SPRING, ...(velocity === undefined ? {} : { velocity: velocity * 1000 }), onComplete: done }, ); } /** Where the track is headed: the end of the running animation, or where it is. */ const heading = () => target ?? v.offset.get(); function goTo(i: number, user = true) { if (!g().measured || !o.count) return; if (user) stop(); animateTo(offsetForIndex(i, heading(), g().step, o.count, o.loop)); } function goToSlot(slot: number) { stop(); const { step } = g(); animateTo(o.loop ? offsetForIndex(slot, heading(), step, total(), true) : slot * step); } /** A nudge and back at the ends of a straight track, so a press that cannot move still answers. */ function bump(dir: number) { stopAnim(); const at = v.offset.get(); anim = animate(v.offset, [at, at + dir * 18, at], { duration: o.reduced ? 0 : 0.36, ease: "easeOut" }); } function step(dir: 1 | -1, user = true) { if (!g().measured || !o.count) return; const { step: s } = g(); const here = Math.round(heading() / s); if (!o.loop && (here + dir < 0 || here + dir > o.count - 1)) { if (user) { stop(); bump(dir); } else goTo(0, false); // autoplay at the end of a straight track starts over return; } if (user) stop(); animateTo((here + dir) * s); } function settle(lean = 0) { const { step: s } = g(); animateTo(nearest(v.offset.get(), s, o.count, o.loop, lean)); } // ---- autoplay --------------------------------------------------------------------------------------------- function autoplayState(): AutoplayState { if (!o.autoplay) return "off"; if (auto.stopped) return "stopped"; return auto.reasons.size ? "paused" : "playing"; } function tick(now: number) { const interval = o.autoplay ? o.autoplay.interval : 4500; const p = v.progress.get() + (now - auto.last) / interval; auto.last = now; if (p >= 1) { v.progress.set(0); step(1, false); } else v.progress.set(p); auto.raf = requestAnimationFrame(tick); } function applyAutoplay() { const state = autoplayState(); v.autoplayState.set(state); root?.setAttribute("data-dc-autoplay", state); cancelAnimationFrame(auto.raf); auto.raf = 0; if (state === "playing") { auto.last = performance.now(); auto.raf = requestAnimationFrame(tick); } if (state === "stopped" || state === "off") v.progress.set(1); } /** The viewer took control: autoplay stops until they press play. */ function stop() { if (!o.autoplay || auto.stopped) return; auto.stopped = true; applyAutoplay(); } function play() { if (!o.autoplay) return; if (auto.stopped) v.progress.set(0); auto.stopped = false; // Pressing play is explicit: it outranks the pauses for focus and hover until they happen again. auto.reasons.delete("focus"); auto.reasons.delete("hover"); applyAutoplay(); } function setPause(reason: string, on: boolean) { if (on === auto.reasons.has(reason)) return; if (on) auto.reasons.add(reason); else auto.reasons.delete(reason); applyAutoplay(); } // ---- index, roving focus, live region --------------------------------------------------------------------- function syncCards() { if (!track || !g().measured) return; const { step: s, copies } = g(); const at = v.offset.get(); const active = activeSlot(at); const focusWasOnCard = track.contains(document.activeElement) && document.activeElement !== track; for (const el of track.querySelectorAll("[data-dc-slot]")) { const slot = Number(el.dataset.dcSlot); const isActive = slot === active; el.tabIndex = isActive ? 0 : -1; el.toggleAttribute("data-active", isActive); // With copies, screen readers hear each slide once: the instance nearest the anchor. const far = copies > 1 && Math.abs(mod(slot * s - at + (total() * s) / 2, total() * s) - (total() * s) / 2) > (o.count * s) / 2; el.toggleAttribute("aria-hidden", far); if (isActive && focusWasOnCard && document.activeElement !== el) el.focus({ preventScroll: true }); } } function announce(i: number) { clearTimeout(liveTimer); liveTimer = window.setTimeout(() => { if (live) live.textContent = `Slide ${i + 1} of ${o.count}, ${o.labelOf(i)}`; }, 450); } function onOffset(at: number) { if (!g().measured || !o.count) return; const i = indexAt(at, g().step, o.count, o.loop); if (i !== v.index.get()) v.index.set(i); if (root) { if (!root.hasAttribute("data-dc-moving")) root.setAttribute("data-dc-moving", ""); clearTimeout(movingTimer); movingTimer = window.setTimeout(() => root?.removeAttribute("data-dc-moving"), 300); } } function onIndex(i: number) { syncCards(); announce(i); if (autoplayState() === "playing" || autoplayState() === "paused") v.progress.set(0); o.onIndexChange?.(i); } // ---- measuring -------------------------------------------------------------------------------------------- function measure() { if (!root || !sizer) return; const stage = root.clientWidth; const card = sizer.getBoundingClientRect().width; if (!stage || !card) return; const bp: Breakpoint = stage < 640 ? "sm" : stage < 1024 ? "md" : "lg"; const gap = bp === "sm" ? Math.min(o.gap, 14) : o.gap; const s = card + gap; const copies = o.loop ? loopCopies(o.count, s, stage) : 1; const inset = clamp(stage * 0.05, 16, 64); const prev = g(); const next: Geometry = { measured: true, bp, stage, card, gap, step: s, shift: o.align === "start" ? inset + card / 2 - stage / 2 : 0, loopLength: o.loop ? o.count * copies * s : 0, copies, depth: o.depth * (bp === "sm" ? 0.5 : bp === "md" ? 0.7 : 1) * (o.reduced ? 0.4 : 1), tilt: o.reduced ? 0 : o.tilt, parallax: o.reduced ? 0 : o.parallax, }; if (!prev.measured) { v.offset.jump(clamp(o.initialIndex, 0, Math.max(0, o.count - 1)) * s); } else if (prev.step !== s || prev.copies !== copies) { // Same card stays at the anchor through a resize. const at = Math.round(v.offset.get() / prev.step); stopAnim(); v.offset.jump((o.loop ? at : clamp(at, 0, o.count - 1)) * s); } v.geometry.set(next); onCopies(copies); syncCards(); if (!prev.measured) v.index.set(indexAt(v.offset.get(), s, o.count, o.loop)); } // ---- pointer ---------------------------------------------------------------------------------------------- /** The card under a pointer event. Captured events all target the track, so look the point up instead. */ function slotAt(e: PointerEvent): number | null { const hit = e.target === track ? document.elementFromPoint(e.clientX, e.clientY) : (e.target as Element); const card = hit?.closest("[data-dc-slot]"); return card && track?.contains(card) ? Number(card.dataset.dcSlot) : null; } function cursorOver(e: PointerEvent) { if (e.pointerType === "touch") return v.cursorMode.set("hidden"); v.cursorX.set(e.clientX); v.cursorY.set(e.clientY); if (gesture) return; const slot = slotAt(e); const open = slot !== null && slot === activeSlot() && o.canActivate(slot % o.count); v.cursorMode.set(open ? "open" : "drag"); } /** A tap or click on a card: the active one is activated, any other one is brought to the anchor. */ function tapSlot(slot: number | null) { if (slot === null) return settle(); if (slot === activeSlot()) { settle(); o.onActivate?.(slot % o.count); } else goToSlot(slot); } function onPointerDown(e: PointerEvent) { suppressClick = false; if (gesture || !e.isPrimary || !track) return; if (e.pointerType === "mouse" && e.button !== 0) return; if ((e.target as Element).closest("[data-dc-nodrag]") || !g().measured) return; const caught = anim !== null && Math.abs(v.offset.getVelocity()) > 60; stopAnim(); const touch = e.pointerType === "touch"; gesture = { id: e.pointerId, touch, x0: e.clientX, y0: e.clientY, t0: e.timeStamp, start: v.offset.get(), phase: touch ? "pending" : "drag", caught, moved: false, slot: slotAt(e), }; tracker.reset(); tracker.add(e.timeStamp, e.clientX); if (!touch) { capture(track, e.pointerId, true); v.cursorMode.set("pressed"); } } function onPointerMove(e: PointerEvent) { if (pointerInside || gesture) cursorOver(e); const gs = gesture; if (!gs || e.pointerId !== gs.id || !track) return; let dx = e.clientX - gs.x0; const dy = e.clientY - gs.y0; if (gs.phase === "pending") { if (Math.hypot(dx, dy) < TOUCH_SLOP) return; // Mostly vertical: the page scrolls (touch-action: pan-y) and this gesture is not ours. if (Math.abs(dx) <= Math.abs(dy)) { gesture = null; if (gs.caught) settle(); return; } gs.phase = "drag"; gs.x0 = e.clientX; dx = 0; capture(track, e.pointerId, true); } if (!gs.moved && Math.abs(e.clientX - gs.x0) >= TAP_SLOP) { gs.moved = true; stop(); if (!gs.touch) v.cursorMode.set("dragging"); } let at = gs.start - dx; if (!o.loop) at = rubberBand(at, 0, maxOffset()); v.offset.set(at); tracker.add(e.timeStamp, e.clientX); } function release(e: PointerEvent, cancelled: boolean) { const gs = gesture; if (!gs || e.pointerId !== gs.id) return; gesture = null; if (track) capture(track, e.pointerId, false); if (gs.phase === "pending") { // A touch that never travelled: a tap, unless it caught the track mid-flight. suppressClick = true; if (gs.caught || cancelled) settle(); else tapSlot(gs.slot); return; } const tap = !cancelled && !gs.moved && !gs.caught && e.timeStamp - gs.t0 < 500; // Taps are handled here (pointer capture would send the click to the track, not the card); the click // event that follows any press on the track is swallowed. suppressClick = true; const velocity = cancelled ? 0 : -tracker.velocity(e.timeStamp); if (tap) tapSlot(gs.slot); else { const { step: s } = g(); animateTo(snapTarget({ offset: v.offset.get(), startOffset: gs.start, velocity, step: s, count: o.count, loop: o.loop }), velocity); } if (!gs.touch) cursorOver(e); } const onPointerUp = (e: PointerEvent) => release(e, false); const onPointerCancel = (e: PointerEvent) => release(e, true); function onPointerEnter(e: PointerEvent) { pointerInside = true; if (e.pointerType === "mouse" && o.autoplay && o.autoplay.pauseOnHover !== false) setPause("hover", true); cursorOver(e); } function onPointerLeave() { pointerInside = false; setPause("hover", false); if (!gesture) v.cursorMode.set("hidden"); } // ---- wheel ------------------------------------------------------------------------------------------------ function onWheel(e: WheelEvent) { if (!root || !g().measured || e.ctrlKey) return; const unit = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? g().stage : 1; let dx = e.deltaX * unit; let dy = e.deltaY * unit; if (e.shiftKey && !dx) [dx, dy] = [dy, 0]; const vertical = Math.abs(dy) > Math.abs(dx); const now = e.timeStamp; const fresh = now - wheel.last > 400; // The page was already scrolling when the carousel arrived under the pointer: let it keep scrolling. const top = root.getBoundingClientRect().top; if (fresh) { wheel.page = false; wheel.travel = 0; } else if (vertical && Math.abs(top - wheel.top) > 1) wheel.page = true; wheel.top = top; wheel.last = now; // Vertical wheels move the cards only when the carousel is (nearly) all in view and the gesture began on it. if (vertical && (o.wheel !== "hijack" || wheel.page || v.inView.get() < 0.85)) return; const delta = vertical ? dy : dx; if (!delta) return; const at = v.offset.get(); // Never trap the page: at the ends of a straight track, and after one full lap of a loop, the page scrolls. if (!o.loop && ((delta < 0 && at <= 0.5) || (delta > 0 && at >= maxOffset() - 0.5))) return; if (vertical && o.loop && wheel.travel >= (o.count - 1) * g().step - 1) return; e.preventDefault(); stop(); const discrete = vertical && !dx && (e.deltaMode !== 0 || (Math.abs(e.deltaY) >= 50 && Number.isInteger(e.deltaY))); if (discrete) { // A notched mouse wheel: one card per notch, on the same spring as everything else. if (now - wheel.stepAt < 90) return; wheel.stepAt = now; wheel.travel += g().step; step(delta > 0 ? 1 : -1, true); return; } wheel.travel += Math.abs(delta); stopAnim(); const next = o.loop ? at + delta : clamp(at + delta, 0, maxOffset()); v.offset.set(next); wheel.lean = delta * 4; clearTimeout(wheel.timer); wheel.timer = window.setTimeout(() => settle(clamp(wheel.lean, -g().step * 0.3, g().step * 0.3)), WHEEL_SETTLE_MS); } // ---- keyboard and clicks (wired through React) ------------------------------------------------------------- function onKeyDown(e: ReactKeyboardEvent) { const t = e.target as HTMLElement; if (t !== track && !t.hasAttribute("data-dc-slot")) return; const keys: Record void> = { ArrowRight: () => step(1), ArrowLeft: () => step(-1), Home: () => goTo(0), End: () => goTo(o.count - 1), " ": () => (autoplayState() === "playing" || autoplayState() === "paused" ? stop() : play()), Enter: () => o.onActivate?.(v.index.get()), }; const run = keys[e.key]; if (!run || e.altKey || e.ctrlKey || e.metaKey) return; e.preventDefault(); run(); } function onClickCapture(e: ReactMouseEvent) { if (!suppressClick) return; suppressClick = false; e.preventDefault(); e.stopPropagation(); } // ---- lifecycle ---------------------------------------------------------------------------------------------- function attach(els: { root: HTMLElement; track: HTMLElement; sizer: HTMLElement; live: HTMLElement | null }, copies: (n: number) => void) { ({ root, track, sizer, live } = els); onCopies = copies; const t = track; t.addEventListener("pointerdown", onPointerDown); t.addEventListener("pointermove", onPointerMove); t.addEventListener("pointerup", onPointerUp); t.addEventListener("pointercancel", onPointerCancel); t.addEventListener("pointerenter", onPointerEnter); t.addEventListener("pointerleave", onPointerLeave); t.addEventListener("wheel", onWheel, { passive: false }); const ro = new ResizeObserver(() => measure()); ro.observe(els.root); const io = new IntersectionObserver( ([entry]) => { // Share of what could be in view: a carousel taller than the window counts as fully in view when it fills it. const fits = Math.min(entry.boundingClientRect.height, entry.rootBounds?.height ?? Infinity); const share = fits > 0 ? Math.min(1, entry.intersectionRect.height / fits) : entry.intersectionRatio; v.inView.set(share); setPause("view", share < 0.5); }, { threshold: Array.from({ length: 21 }, (_, i) => i / 20) }, ); io.observe(els.root); const onVisibility = () => setPause("hidden", document.hidden); document.addEventListener("visibilitychange", onVisibility); // Keyboard focus inside pauses autoplay (a mouse click that focuses a button does not). const r = els.root; const onFocusIn = (e: FocusEvent) => setPause("focus", (e.target as Element).matches?.(":focus-visible") ?? false); const onFocusOut = (e: FocusEvent) => { if (!r.contains(e.relatedTarget as Node | null)) setPause("focus", false); }; r.addEventListener("focusin", onFocusIn); r.addEventListener("focusout", onFocusOut); const offOffset = v.offset.on("change", onOffset); const offIndex = v.index.on("change", onIndex); measure(); onVisibility(); applyAutoplay(); return () => { t.removeEventListener("pointerdown", onPointerDown); t.removeEventListener("pointermove", onPointerMove); t.removeEventListener("pointerup", onPointerUp); t.removeEventListener("pointercancel", onPointerCancel); t.removeEventListener("pointerenter", onPointerEnter); t.removeEventListener("pointerleave", onPointerLeave); t.removeEventListener("wheel", onWheel); document.removeEventListener("visibilitychange", onVisibility); r.removeEventListener("focusin", onFocusIn); r.removeEventListener("focusout", onFocusOut); ro.disconnect(); io.disconnect(); offOffset(); offIndex(); stopAnim(); cancelAnimationFrame(auto.raf); clearTimeout(wheel.timer); clearTimeout(movingTimer); clearTimeout(liveTimer); root = track = sizer = live = null; }; } function setOptions(next: EngineOptions) { const prev = o; o = next; if (prev.reduced !== next.reduced && next.reduced) auto.stopped = true; if (prev === defaults && next.reduced) auto.stopped = true; if (root) applyAutoplay(); } return { attach, setOptions, measure, syncCards, goTo, next: () => step(1), prev: () => step(-1), play, pause: stop, toggle: () => (autoplayState() === "playing" || autoplayState() === "paused" ? stop() : play()), setPause, getIndex: () => v.index.get(), activeSlot, onKeyDown, onClickCapture, /** Programmatic moves that should not count as the viewer taking control. */ goToQuiet: (i: number) => goTo(i, false), nextQuiet: () => step(1, false), }; } export type CarouselEngine = ReturnType; /** * Wires the engine to React: creates its motion values once, hands it the latest options after every render and * attaches it to the DOM. Returns the engine, its values, the smoothed velocity the cards lean with, and how many * times the slides are laid round the loop (the only thing here that re-renders, and only on resize). */ export function useCarouselEngine(options: EngineOptions) { const offset = useMotionValue(0); const geometry = useMotionValue(UNMEASURED); const index = useMotionValue(clamp(options.initialIndex, 0, Math.max(0, options.count - 1))); const progress = useMotionValue(0); const autoplayState = useMotionValue(options.autoplay ? "playing" : "off"); const inView = useMotionValue(1); const cursorX = useMotionValue(-100); const cursorY = useMotionValue(-100); const cursorMode = useMotionValue("hidden"); // One object for the component's lifetime, so the memoised cards never re-render because of it. const values = useMemo( () => ({ offset, geometry, index, progress, autoplayState, inView, cursorX, cursorY, cursorMode }), [offset, geometry, index, progress, autoplayState, inView, cursorX, cursorY, cursorMode], ); const velocity = useVelocity(offset); const lean = useSpring(velocity, LEAN_SPRING); const [engine] = useState(() => createEngine(values)); const [copies, setCopies] = useState(1); useIsoLayoutEffect(() => { engine.setOptions(options); }); return { engine, values, lean, copies, setCopies }; } 6e:T6a7,type Sample = { t: number; x: number }; /** * Pointer velocity from the last few samples. Each step between two samples is weighted by how recent it is, so * the release speed is what the hand was doing at the end of the gesture, not an average over the whole drag. * A pointer that stopped before letting go (no sample in the last `idle` ms) has no velocity. */ export function createVelocityTracker(size = 5, maxAge = 100, idle = 60) { let samples: Sample[] = []; return { reset() { samples = []; }, add(t: number, x: number) { samples.push({ t, x }); if (samples.length > size) samples.shift(); }, /** px per ms; positive when x grows. */ velocity(now: number): number { const last = samples[samples.length - 1]; if (!last || now - last.t > idle) return 0; const fresh = samples.filter((s) => now - s.t <= maxAge); let sum = 0; let weights = 0; for (let i = 1; i < fresh.length; i++) { const dt = fresh[i].t - fresh[i - 1].t; if (dt <= 0) continue; sum += ((fresh[i].x - fresh[i - 1].x) / dt) * i; weights += i; } return weights ? sum / weights : 0; }, }; } /** * How far a flick carries on its own: the distance a body moving at `velocity` (px/ms) covers while it slows by * the factor `decel` every millisecond, i.e. v · decel / (1 − decel). The default 0.99644 carries a flick 0.28 s * worth of its release speed: a fast flick (3 px/ms) skips two cards, a lazy one lands on the next. */ export function projectDistance(velocity: number, decel = 0.99644): number { return (velocity * decel) / (1 - decel); } 6f:T60d,"use client"; import { useMotionValueEvent, useSpring, type MotionValue } from "motion/react"; import { useRef } from "react"; import type { CursorMode } from "../engine/useCarouselEngine"; /** How the pill trails the pointer: close behind, never wobbling. */ export const CURSOR_SPRING = { stiffness: 400, damping: 30, mass: 0.6 }; /** * Drives the "Drag" pill from the engine's pointer values: spring-smoothed x/y, and the mode written straight to * the element's data-mode (the stylesheet scales it and swaps "Drag", "← →" and "Open"). Arriving from outside the * pill jumps to the pointer instead of flying across the page. */ export function useDragCursor( values: { cursorX: MotionValue; cursorY: MotionValue; cursorMode: MotionValue }, /** Read at every change: lets the pill step aside (narrow stage, touch, an open dialog) without a re-render. */ isEnabled: () => boolean = () => true, ) { const ref = useRef(null); const x = useSpring(values.cursorX, CURSOR_SPRING); const y = useSpring(values.cursorY, CURSOR_SPRING); const last = useRef("hidden"); useMotionValueEvent(values.cursorMode, "change", (mode) => { const el = ref.current; const next = isEnabled() ? mode : "hidden"; if (last.current === "hidden" && next !== "hidden") { x.jump(values.cursorX.get()); y.jump(values.cursorY.get()); } last.current = next; el?.setAttribute("data-mode", next); }); return { ref, x, y }; } 70:T76f,"use client"; import { useEffect, type RefObject } from "react"; const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'; /** * Keeps Tab and Shift+Tab inside `ref` while `active`, focuses `initial` (or the first focusable element) when it * starts, and hands focus to `restore()` when it ends. */ export function useFocusTrap( ref: RefObject, active: boolean, options: { initial?: RefObject; restore?: () => HTMLElement | null | undefined }, ) { const { initial, restore } = options; useEffect(() => { const box = ref.current; if (!active || !box) return; const first = initial?.current ?? box.querySelector(FOCUSABLE); first?.focus({ preventScroll: true }); const onKey = (e: KeyboardEvent) => { if (e.key !== "Tab") return; const items = [...box.querySelectorAll(FOCUSABLE)].filter((el) => el.offsetParent !== null || el === document.activeElement); if (!items.length) return e.preventDefault(); const head = items[0]; const tail = items[items.length - 1]; const at = document.activeElement; if (e.shiftKey && (at === head || !box.contains(at))) { e.preventDefault(); tail.focus(); } else if (!e.shiftKey && (at === tail || !box.contains(at))) { e.preventDefault(); head.focus(); } }; document.addEventListener("keydown", onKey); return () => { document.removeEventListener("keydown", onKey); restore?.()?.focus({ preventScroll: true }); }; // `initial` and `restore` are read when the trap starts and ends; changing them mid-way changes nothing. // eslint-disable-next-line react-hooks/exhaustive-deps }, [active, ref]); } 71:T54a,"use client"; import type { MotionValue } from "motion/react"; import { useEffect, type RefObject } from "react"; /** * Plays a video only while `isActive()` and the carousel is at least half in view; pauses it otherwise. Re-checks * whenever any of the given motion values changes (the active index, the share in view), so nothing re-renders. */ export function useInViewPlayback( video: RefObject, isActive: () => boolean, watch: MotionValue[], inView: MotionValue, enabled = true, ) { useEffect(() => { if (!enabled) return; const check = () => { const el = video.current; if (!el) return; const should = isActive() && inView.get() >= 0.5 && !document.hidden; if (should && el.paused) el.play().catch(() => {}); else if (!should && !el.paused) el.pause(); }; check(); const offs = [...watch, inView].map((mv) => mv.on("change", check)); document.addEventListener("visibilitychange", check); return () => { offs.forEach((off) => off()); document.removeEventListener("visibilitychange", check); }; // `isActive` reads live values; the subscriptions are what keep this current. // eslint-disable-next-line react-hooks/exhaustive-deps }, [video, inView, enabled, ...watch]); } 72:T745,"use client"; import { useMotionValue, useSpring } from "motion/react"; import { useEffect, type RefObject } from "react"; /** * A button whose icon leans towards the pointer: up to `strength` px when the pointer is within `radius` px of * the button's centre. The listener sits on `area` (the controls row), so the pull starts before the pointer * reaches the button. Returns spring-smoothed x/y for the icon. */ export function useMagnetic( button: RefObject, area: RefObject, { radius = 60, strength = 3, enabled = true } = {}, ) { const tx = useMotionValue(0); const ty = useMotionValue(0); const x = useSpring(tx, { stiffness: 300, damping: 20, mass: 0.6 }); const y = useSpring(ty, { stiffness: 300, damping: 20, mass: 0.6 }); useEffect(() => { const zone = area.current; if (!zone || !enabled) return; const move = (e: PointerEvent) => { const el = button.current; if (!el || e.pointerType === "touch") return; const r = el.getBoundingClientRect(); const dx = e.clientX - (r.left + r.width / 2); const dy = e.clientY - (r.top + r.height / 2); const dist = Math.hypot(dx, dy); if (dist > radius || dist === 0) { tx.set(0); ty.set(0); return; } const pull = strength * (1 - dist / radius) ** 0.5; tx.set((dx / dist) * pull); ty.set((dy / dist) * pull); }; const leave = () => { tx.set(0); ty.set(0); }; zone.addEventListener("pointermove", move); zone.addEventListener("pointerleave", leave); return () => { zone.removeEventListener("pointermove", move); zone.removeEventListener("pointerleave", leave); }; }, [area, button, radius, strength, enabled, tx, ty]); return { x, y }; } 73:T4b8,"use client"; import { useSyncExternalStore } from "react"; const QUERY = "(prefers-reduced-motion: reduce)"; function subscribe(onChange: () => void) { const mq = window.matchMedia(QUERY); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); } /** * Whether the viewer asked for reduced motion. False on the server and during hydration (so the markup matches), * then the real answer; it also follows the setting if it changes while the page is open. */ export function useReducedMotion(): boolean { return useSyncExternalStore( subscribe, () => window.matchMedia(QUERY).matches, () => false, ); } const FINE = "(hover: hover) and (pointer: fine)"; function subscribeFine(onChange: () => void) { const mq = window.matchMedia(FINE); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); } /** A mouse, trackpad or pen that can hover (false on touch screens and on the server). */ export function useFinePointer(): boolean { return useSyncExternalStore( subscribeFine, () => window.matchMedia(FINE).matches, () => false, ); } 74:T580d,/* * Dynamic Carousel — styles. Plain CSS, every class prefixed dc-, so it sits beside any Tailwind setup. * * Theme tokens follow the page: theme="auto" uses light-dark() against the colour scheme the page sets (the OS * preference on pages that declare `color-scheme: light dark`, and .dark / [data-theme=dark] or .light / * [data-theme=light] on any ancestor); "light" and "dark" fix it. Fonts are read from --dc-font-* on any * ancestor, with system stacks as the fallback. */ .dc-root { --dc-bg: light-dark(#fafaf8, #0b0b0c); --dc-fg: light-dark(#151515, #f2f1ed); --dc-muted: light-dark(rgb(21 21 21 / 0.66), rgb(242 241 237 / 0.6)); --dc-edge: light-dark(rgb(21 21 21 / 0.12), rgb(242 241 237 / 0.14)); --dc-shade: light-dark(rgb(17 17 17 / 0.26), rgb(0 0 0 / 0.6)); --dc-shade-near: light-dark(rgb(17 17 17 / 0.34), rgb(0 0 0 / 0.75)); --dc-accent-now: var(--dc-accent, #ef5a2a); container: dc / inline-size; position: relative; overflow-x: clip; background: var(--dc-bg); color: var(--dc-fg); font-family: var(--dc-font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); -webkit-tap-highlight-color: transparent; } .dc-root[data-dc-theme="light"] { color-scheme: light; } .dc-root[data-dc-theme="dark"] { color-scheme: dark; } :where(.dark, [data-theme="dark"]) .dc-root[data-dc-theme="auto"] { color-scheme: dark; } :where(.light, [data-theme="light"]) .dc-root[data-dc-theme="auto"] { color-scheme: light; } .dc-root *, .dc-root *::before, .dc-root *::after, .dc-detail *, .dc-cursor * { box-sizing: border-box; } .dc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- breakpoints: by the carousel's own width, so it behaves the same in a sidebar or full-bleed ---------- */ .dc-frame { --dc-cw: min(88cqw, 360px); --dc-gap-now: min(var(--dc-gap-lg, 24px), 14px); --dc-bp-f: 0.5; --dc-radius: 16px; --dc-rm-f: 1; --dc-shift: 0px; transform-origin: 50% 42%; } @container dc (min-width: 640px) { .dc-frame { --dc-cw: min(var(--dc-card-w-lg, 400px), 52cqw); --dc-gap-now: var(--dc-gap-lg, 24px); --dc-bp-f: 0.7; --dc-radius: 20px; } } @container dc (min-width: 1024px) { .dc-frame { --dc-cw: var(--dc-card-w-lg, 400px); --dc-bp-f: 1; } } @media (prefers-reduced-motion: reduce) { .dc-frame { --dc-rm-f: 0.4; } } .dc-frame { --dc-step: calc(var(--dc-cw) + var(--dc-gap-now)); --dc-depth-eff: calc(var(--dc-depth, 0.55) * var(--dc-bp-f) * var(--dc-rm-f)); } .dc-root[data-dc-align="start"] .dc-frame { --dc-shift: calc(clamp(16px, 5cqw, 64px) + var(--dc-cw) / 2 - 50cqw); } /* ---- stage and track ------------------------------------------------------------------------------------- */ .dc-stage { perspective: 1400px; perspective-origin: calc(50% + var(--dc-shift)) 50%; padding-block: clamp(20px, 2.6cqw, 36px) clamp(30px, 4.4cqw, 56px); } .dc-track { position: relative; transform-style: preserve-3d; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; } .dc-root[data-dc-dragging] .dc-track { cursor: grabbing; } @media (hover: hover) and (pointer: fine) { @container dc (min-width: 1024px) { .dc-root[data-dc-cursor="pill"] .dc-track { cursor: none; } } } .dc-sizer { width: var(--dc-cw); aspect-ratio: var(--dc-aspect, 8 / 11); margin-inline: auto; pointer-events: none; visibility: hidden; } /* ---- cards ------------------------------------------------------------------------------------------------ */ .dc-card { position: absolute; top: 0; left: calc(50% - var(--dc-cw) / 2); width: var(--dc-cw); aspect-ratio: var(--dc-aspect, 8 / 11); border-radius: var(--dc-radius); backface-visibility: hidden; outline: none; will-change: transform; } .dc-card:focus-visible, .dc-track:focus-visible .dc-card[data-active] { outline: 2px solid var(--dc-accent-now); outline-offset: 3px; } .dc-root[data-dc-open] .dc-card[data-active] > * { opacity: 0; } /* Two baked shadows; the deeper one is cross-faded in as a card nears the anchor. */ .dc-shadow { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 8px 24px -12px var(--dc-shade); pointer-events: none; } .dc-shadow-near { box-shadow: 0 30px 60px -20px var(--dc-shade-near); } /* A unit that is 1px on a 400px-wide card, so everything inside a card scales with it (and with the detail view's larger copy, which is why the open morph is seamless). */ .dc-face { --dc-u: 0.25cqw; position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--dc-card-bg, #1b1b1d); color: var(--dc-card-fg, #fff); container-type: inline-size; isolation: isolate; } .dc-dim { position: absolute; inset: 0; z-index: 4; background: #000; pointer-events: none; } .dc-edge { position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.16); background: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.02) 9%, rgb(255 255 255 / 0) 20%); } .dc-edge[data-tone="light"] { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06), inset 0 1px 0 rgb(255 255 255 / 0.5); background: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.04) 9%, rgb(255 255 255 / 0) 20%); } /* Layers that move inside a card are promoted only while the track moves (cleared 300 ms after it rests). */ .dc-root[data-dc-moving] .dc-parallax, .dc-root[data-dc-moving] .dc-word, .dc-root[data-dc-moving] .dc-dim, .dc-root[data-dc-moving] .dc-shadow-near, .dc-root[data-dc-moving] .dc-reveal { will-change: transform, opacity; } /* ---- image and video -------------------------------------------------------------------------------------- */ .dc-media { position: absolute; inset: 0; } .dc-parallax { position: absolute; inset: 0 -8%; } .dc-plate { position: absolute; inset: 0; background: color-mix(in oklab, var(--dc-accent-now) 8%, #d9d6d0) center / cover no-repeat; filter: blur(14px); transform: scale(1.12); transition: visibility 0s 0.7s; } .dc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); -webkit-user-drag: none; } .dc-img[data-loaded] { opacity: 1; transform: none; } .dc-parallax:has(> .dc-img[data-done]) > .dc-plate { visibility: hidden; } .dc-img[data-error] { visibility: hidden; } video.dc-img { opacity: 1; transform: none; } .dc-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; /* Eased stops (no visible band). Strong enough for white captions on the brightest demo photo (4.5:1). */ background: linear-gradient( to top, rgb(0 0 0 / 0.78) 0%, rgb(0 0 0 / 0.7) 10%, rgb(0 0 0 / 0.55) 20%, rgb(0 0 0 / 0.34) 32%, rgb(0 0 0 / 0.16) 44%, rgb(0 0 0 / 0.05) 54%, rgb(0 0 0 / 0) 64% ); } .dc-caption { position: absolute; inset: auto 0 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: calc(12 * var(--dc-u)); padding: calc(22 * var(--dc-u)); color: #fff; } .dc-title { margin: 0; font-size: calc(19 * var(--dc-u)); font-weight: 560; line-height: 1.2; letter-spacing: -0.012em; text-wrap: balance; } .dc-sub { margin: calc(5 * var(--dc-u)) 0 0; font-size: calc(14 * var(--dc-u)); line-height: 1.38; color: rgb(255 255 255 / 0.82); text-wrap: pretty; } .dc-tag { position: absolute; top: calc(16 * var(--dc-u)); left: calc(16 * var(--dc-u)); z-index: 2; padding: calc(7 * var(--dc-u)) calc(11 * var(--dc-u)); border-radius: 999px; font-size: calc(10.5 * var(--dc-u)); font-weight: 600; line-height: 1; letter-spacing: 0.13em; text-transform: uppercase; color: #fff; background: rgb(255 255 255 / 0.14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.24); backdrop-filter: blur(12px) saturate(1.4); } .dc-chip { flex: none; display: grid; place-items: center; width: calc(36 * var(--dc-u)); height: calc(36 * var(--dc-u)); border-radius: 999px; background: #fff; color: #111; opacity: 0; transform: scale(0.7); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .dc-chip svg { width: 42%; height: 42%; } @media (hover: hover) and (pointer: fine) { .dc-card[data-active]:hover .dc-img[data-loaded] { transform: scale(1.03); transition-duration: 0.5s, 0.6s; } .dc-card[data-active]:hover .dc-chip { opacity: 1; transform: none; } } .dc-sound { position: absolute; top: calc(14 * var(--dc-u)); right: calc(14 * var(--dc-u)); z-index: 3; display: grid; place-items: center; width: calc(34 * var(--dc-u)); height: calc(34 * var(--dc-u)); min-width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 999px; color: #fff; background: rgb(0 0 0 / 0.3); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22); backdrop-filter: blur(10px); cursor: pointer; } .dc-sound svg { width: 48%; height: 48%; } .dc-sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ---- typographic cards ------------------------------------------------------------------------------------ */ .dc-grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.07; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } .dc-face[data-tone="dark"] .dc-grain { mix-blend-mode: screen; opacity: 0.045; } .dc-statement, .dc-text, .dc-stat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: calc(24 * var(--dc-u)); } .dc-subtitle { position: relative; z-index: 1; margin: 0; max-width: 15ch; font-family: var(--dc-font-serif, ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif); font-size: calc(23 * var(--dc-u)); line-height: 1.12; letter-spacing: -0.005em; text-wrap: balance; } .dc-word { position: relative; z-index: 1; margin: 0 0 -0.1em calc(-24 * var(--dc-u) - 0.035em); font-family: var(--dc-font-display, var(--dc-font-sans, ui-sans-serif, system-ui, sans-serif)); font-size: calc(var(--dc-word-size, 112) * var(--dc-u)); font-weight: 800; line-height: 0.86; letter-spacing: -0.045em; white-space: nowrap; color: color-mix(in oklab, var(--dc-card-fg) 85%, var(--dc-card-bg)); } .dc-statement[data-align="top"] { flex-direction: column-reverse; } .dc-statement[data-align="top"] .dc-word { margin-block: -0.12em 0; } .dc-text-title { position: relative; z-index: 1; margin: 0; font-size: calc(34 * var(--dc-u)); line-height: 1.04; text-wrap: balance; } .dc-font-script { font-family: var(--dc-font-script, "Segoe Script", "Bradley Hand", "Brush Script MT", cursive); font-size: calc(var(--dc-script-size, 40) * var(--dc-u)); font-weight: 400; line-height: 1; } .dc-font-serif { font-family: var(--dc-font-serif, ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif); font-weight: 400; letter-spacing: -0.01em; } .dc-font-sans { font-weight: 650; letter-spacing: -0.03em; } .dc-text-body { position: relative; z-index: 1; display: -webkit-box; margin: 0; overflow: hidden; font-size: calc(18.5 * var(--dc-u)); font-weight: 500; line-height: 1.15; letter-spacing: -0.012em; -webkit-line-clamp: 7; -webkit-box-orient: vertical; } .dc-link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .dc-card[data-active]:hover .dc-link { background-size: 100% 1px; } .dc-stat-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: calc(12 * var(--dc-u)); } .dc-stat-label { margin: 0; max-width: 13ch; font-size: calc(20 * var(--dc-u)); font-weight: 560; line-height: 1.1; letter-spacing: -0.015em; } .dc-delta { flex: none; padding: calc(6 * var(--dc-u)) calc(10 * var(--dc-u)); border-radius: 999px; font-size: calc(13 * var(--dc-u)); font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; color: color-mix(in oklab, #166534 78%, var(--dc-card-fg)); background: color-mix(in oklab, #22c55e 22%, var(--dc-card-bg)); box-shadow: inset 0 0 0 1px color-mix(in oklab, #15803d 22%, transparent); } .dc-delta[data-sign="-"] { color: color-mix(in oklab, #991b1b 78%, var(--dc-card-fg)); background: color-mix(in oklab, #ef4444 20%, var(--dc-card-bg)); box-shadow: inset 0 0 0 1px color-mix(in oklab, #b91c1c 22%, transparent); } .dc-stat-value { position: relative; z-index: 1; margin: 0 0 -0.08em calc(-6 * var(--dc-u)); font-family: var(--dc-font-display, var(--dc-font-sans, ui-sans-serif, system-ui, sans-serif)); font-size: calc(150 * var(--dc-u)); font-weight: 750; line-height: 0.84; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---- progress and controls -------------------------------------------------------------------------------- */ .dc-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); align-items: center; gap: clamp(14px, 3cqw, 40px); padding: 0 clamp(16px, 5cqw, 64px) clamp(10px, 2cqw, 26px); } .dc-count { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--dc-font-mono, ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace); font-size: 12.5px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--dc-muted); } .dc-count-now { color: var(--dc-fg); font-weight: 600; } .dc-count-sep { width: 22px; height: 1px; background: currentColor; opacity: 0.6; } .dc-segs { display: flex; justify-self: center; gap: 6px; width: 100%; max-width: 560px; } .dc-seg { display: flex; flex: 1; align-items: center; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; transition: flex-grow 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .dc-seg-track { position: relative; width: 100%; height: 2px; overflow: hidden; border-radius: 999px; background: var(--dc-edge); transition: background-color 0.2s ease; } .dc-seg:hover .dc-seg-track { background: color-mix(in oklab, var(--dc-fg) 32%, transparent); } .dc-seg-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--dc-accent-now); transform-origin: 0 50%; transition: opacity 0.3s ease; will-change: transform; } .dc-root[data-dc-autoplay="paused"] .dc-seg-fill { opacity: 0.5; } .dc-buttons { display: flex; justify-content: flex-end; gap: 8px; } .dc-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid color-mix(in oklab, var(--dc-fg) 12%, transparent); border-radius: 999px; background: transparent; color: var(--dc-fg); cursor: pointer; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease, border-color 0.2s ease; } .dc-btn svg { width: 16px; height: 16px; } .dc-btn:active { transform: scale(0.94); } @media (hover: hover) and (pointer: fine) { .dc-btn:hover { border-color: color-mix(in oklab, var(--dc-fg) 24%, transparent); background: color-mix(in oklab, var(--dc-fg) 5%, transparent); } } .dc-btn:focus-visible, .dc-seg:focus-visible { outline: 2px solid var(--dc-accent-now); outline-offset: 3px; } .dc-ico-play { display: none; } .dc-root[data-dc-autoplay="stopped"] .dc-ico-play { display: block; } .dc-root[data-dc-autoplay="stopped"] .dc-ico-pause { display: none; } @container dc (max-width: 639px) { .dc-controls { grid-template-columns: auto 1fr auto; gap: 12px; } .dc-segs { justify-content: center; gap: 7px; } .dc-seg { flex: 0 0 6px; height: 28px; transition: flex-basis 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .dc-seg[aria-current="true"] { flex-basis: 22px; } .dc-seg-track { height: 6px; } .dc-btn-step { display: none; } } /* ---- the "Drag" cursor ------------------------------------------------------------------------------------ */ .dc-cursor { position: fixed; top: 0; left: 0; z-index: 70; pointer-events: none; mix-blend-mode: difference; will-change: transform; } .dc-cursor-pill { --s: 1; --o: 1; display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 999px; background: #fff; color: #000; opacity: var(--o); transform: scale(var(--s)); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; will-change: transform, opacity; font-family: var(--dc-font-sans, ui-sans-serif, system-ui, sans-serif); font-size: 11px; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase; } .dc-cursor[data-mode="hidden"] .dc-cursor-pill { --o: 0; --s: 0.3; } .dc-cursor[data-mode="pressed"] .dc-cursor-pill { --s: 0.85; } .dc-cursor[data-mode="dragging"] .dc-cursor-pill { --s: 0.85; } .dc-cursor[data-mode="open"] .dc-cursor-pill { --s: 1.1; } .dc-cursor-label { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; padding-left: 0.16em; opacity: 0; transform: scale(0.8); transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform, opacity; } .dc-cursor-label svg { width: 14px; height: 14px; } .dc-cursor:is([data-mode="drag"], [data-mode="pressed"], [data-mode="hidden"]) .dc-cursor-label[data-for="drag"], .dc-cursor[data-mode="dragging"] .dc-cursor-label[data-for="dragging"], .dc-cursor[data-mode="open"] .dc-cursor-label[data-for="open"] { opacity: 1; transform: none; } /* ---- detail view ------------------------------------------------------------------------------------------ */ .dc-detail { position: fixed; inset: 0; z-index: 80; overflow-y: auto; overscroll-behavior: contain; color: #f4f2ee; font-family: var(--dc-font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif); } .dc-backdrop { position: fixed; inset: 0; background: rgb(9 9 11 / 0.72); backdrop-filter: blur(20px) saturate(1.15); } .dc-sheet { position: relative; display: grid; grid-template-columns: auto minmax(0, 420px); align-items: center; justify-content: center; gap: clamp(32px, 5vw, 72px); min-height: 100%; max-width: 1120px; margin: 0 auto; padding: clamp(56px, 8vh, 88px) clamp(20px, 4vw, 48px); } .dc-detail-media { position: relative; height: min(74vh, 720px); aspect-ratio: var(--dc-aspect, 8 / 11); border-radius: 24px; transform-origin: 0 0; box-shadow: 0 50px 100px -40px rgb(0 0 0 / 0.7); } .dc-detail-media > .dc-face { border-radius: inherit; } .dc-detail-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; } .dc-detail-tag { padding: 7px 11px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); } .dc-detail-title { margin: 0; font-size: clamp(32px, 3.6vw, 48px); font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; } .dc-detail-text { margin: 0; max-width: 42ch; font-size: 17px; line-height: 1.55; color: rgb(244 242 238 / 0.74); text-wrap: pretty; } .dc-detail-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .dc-detail-count { margin-right: 6px; font-family: var(--dc-font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace); font-size: 12.5px; letter-spacing: 0.06em; color: rgb(244 242 238 / 0.74); font-variant-numeric: tabular-nums; } .dc-detail-cta { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; color: #111; background: #f4f2ee; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease; } .dc-detail-cta svg { width: 15px; height: 15px; } .dc-detail-cta:hover { background: #fff; } .dc-detail-cta:active { transform: scale(0.97); } .dc-detail .dc-btn { color: #f4f2ee; border-color: rgb(255 255 255 / 0.16); } .dc-detail .dc-btn:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.28); } .dc-detail .dc-btn:focus-visible, .dc-detail-cta:focus-visible { outline: 2px solid var(--dc-accent-now, #ef5a2a); outline-offset: 3px; } .dc-detail-close { position: fixed; top: 18px; right: 18px; z-index: 2; width: 44px; height: 44px; background: rgb(255 255 255 / 0.06); } @media (max-width: 760px) { .dc-sheet { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 26px; padding-top: 76px; } .dc-detail-media { height: auto; width: min(100%, calc(56svh * var(--dc-aspect-n, 0.7273))); border-radius: 20px; } .dc-detail-copy { width: 100%; max-width: 520px; } } 75:T11bf,import type { CSSProperties, ReactNode } from "react"; /** Fields every card the detail view can show may carry beyond the spec'd ones. */ type DetailFields = { /** Longer text for the detail view (the card itself never shows it). */ description?: string; /** Label of the detail view's link to `href`. Default "Open". */ cta?: string; }; export type ImageSlide = DetailFields & { kind: "image"; id: string; src: string; alt: string; title?: string; caption?: string; tag?: string; href?: string; width: number; height: number; blurDataURL?: string; /** Responsive sources for the built-in ; ignored when `renderImage` draws the picture. */ srcSet?: string; }; export type VideoSlide = DetailFields & { kind: "video"; id: string; src: string; poster: string; alt: string; title?: string; caption?: string; tag?: string; href?: string; /** Starts muted (always true until the viewer turns the sound on). */ muted?: boolean; /** Set false for clips without sound: the sound button is left out. Default true. */ sound?: boolean; blurDataURL?: string; }; export type StatementSlide = DetailFields & { kind: "statement"; id: string; bg: string; fg: string; word: string; subtitle?: string; align?: "top" | "bottom"; href?: string; }; export type TextSlide = DetailFields & { kind: "text"; id: string; bg: string; fg: string; title: string; titleFont?: "script" | "serif" | "sans"; body: string; href?: string; }; export type StatSlide = DetailFields & { kind: "stat"; id: string; bg: string; fg: string; value: string; label: string; delta?: string; href?: string; }; export type CustomSlide = { kind: "custom"; id: string; render: () => ReactNode; /** What screen readers announce for this card. Default "Slide". */ label?: string; }; export type CarouselSlide = ImageSlide | VideoSlide | StatementSlide | TextSlide | StatSlide | CustomSlide; export type RenderImage = (p: { slide: ImageSlide; className: string; sizes: string; priority: boolean }) => ReactNode; export type AutoplayOptions = { interval: number; pauseOnHover?: boolean }; export type DynamicCarouselProps = { /** 5–30 slides; 9 is the designed sweet spot. */ slides: CarouselSlide[]; /** Width / height of a card. Default 8 / 11. */ aspect?: number; /** Card width on wide screens, px. Default 400; narrower screens derive their own. */ cardWidth?: number; /** Space between cards, px. Default 24 (14 on phones). */ gap?: number; /** Endless track. Default true. */ loop?: boolean; /** Default { interval: 4500, pauseOnHover: true }; off for viewers who ask for reduced motion. */ autoplay?: false | AutoplayOptions; /** 0–1: how strongly the cards curve away on the arc. Default 0.55. */ depth?: number; /** 0–1: how far cards lean into fast motion. Default 0.6. */ tilt?: number; /** 0–1: how far pictures slide inside their frames. Default 0.5. */ parallax?: number; /** Which card is the active one. Default "center". */ align?: "center" | "start"; showProgress?: boolean; showArrows?: boolean; /** The "Drag" pill that follows the pointer (wide screens with a mouse). Default "drag-pill". */ cursor?: "drag-pill" | "native"; /** Clicking the active card opens it in the detail view. Default true. */ expandOnClick?: boolean; /** Vertical mouse wheel and trackpad scrolling over the cards moves them. Default "hijack". */ wheel?: "hijack" | "native"; theme?: "light" | "dark" | "auto"; accent?: string; className?: string; /** On the root element: the place for CSS variables such as --dc-bg or --dc-font-sans. */ style?: CSSProperties; /** Name of the carousel for screen readers. Default "Carousel". */ label?: string; initialIndex?: number; onChange?: (index: number, slide: CarouselSlide) => void; /** Return false to stop the default (opening the detail view or following `href`). */ onSlideClick?: (slide: CarouselSlide, index: number) => void | false; renderImage?: RenderImage; /** The nearest three pictures load eagerly with fetchpriority="high". Set false below the fold. Default true. */ priority?: boolean; }; export type DynamicCarouselHandle = { next: () => void; prev: () => void; goTo: (index: number) => void; pause: () => void; play: () => void; getIndex: () => number; }; 62:["$","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"}]]}]}]]}],["$","$L63",null,{"namespace":"@upfork","registryDependencies":[]}]]}],null]}],["$","$L64",null,{"files":[{"path":"components/dynamic-carousel/CarouselDetail.tsx","content":"$65","type":"registry:component","target":"@components/dynamic-carousel/CarouselDetail.tsx"},{"path":"components/dynamic-carousel/CarouselProgress.tsx","content":"$66","type":"registry:component","target":"@components/dynamic-carousel/CarouselProgress.tsx"},{"path":"components/dynamic-carousel/CarouselSlideCard.tsx","content":"$67","type":"registry:component","target":"@components/dynamic-carousel/CarouselSlideCard.tsx"},{"path":"components/dynamic-carousel/DragCursor.tsx","content":"$68","type":"registry:component","target":"@components/dynamic-carousel/DragCursor.tsx"},{"path":"components/dynamic-carousel/DynamicCarousel.tsx","content":"$69","type":"registry:component","target":"@components/dynamic-carousel/DynamicCarousel.tsx"},{"path":"components/dynamic-carousel/engine/loop.ts","content":"$6a","type":"registry:component","target":"@components/dynamic-carousel/engine/loop.ts"},{"path":"components/dynamic-carousel/engine/pose.ts","content":"$6b","type":"registry:component","target":"@components/dynamic-carousel/engine/pose.ts"},{"path":"components/dynamic-carousel/engine/snap.ts","content":"$6c","type":"registry:component","target":"@components/dynamic-carousel/engine/snap.ts"},{"path":"components/dynamic-carousel/engine/useCarouselEngine.ts","content":"$6d","type":"registry:component","target":"@components/dynamic-carousel/engine/useCarouselEngine.ts"},{"path":"components/dynamic-carousel/engine/velocity.ts","content":"$6e","type":"registry:component","target":"@components/dynamic-carousel/engine/velocity.ts"},{"path":"components/dynamic-carousel/hooks/useDragCursor.ts","content":"$6f","type":"registry:component","target":"@components/dynamic-carousel/hooks/useDragCursor.ts"},{"path":"components/dynamic-carousel/hooks/useFocusTrap.ts","content":"$70","type":"registry:component","target":"@components/dynamic-carousel/hooks/useFocusTrap.ts"},{"path":"components/dynamic-carousel/hooks/useInViewPlayback.ts","content":"$71","type":"registry:component","target":"@components/dynamic-carousel/hooks/useInViewPlayback.ts"},{"path":"components/dynamic-carousel/hooks/useMagnetic.ts","content":"$72","type":"registry:component","target":"@components/dynamic-carousel/hooks/useMagnetic.ts"},{"path":"components/dynamic-carousel/hooks/useReducedMotion.ts","content":"$73","type":"registry:component","target":"@components/dynamic-carousel/hooks/useReducedMotion.ts"},{"path":"components/dynamic-carousel/hooks/useScrollLock.ts","content":"\"use client\";\r\n\r\nimport { useEffect } from \"react\";\r\n\r\n/**\r\n * Locks page scrolling while `active`, without the layout shift a disappearing scrollbar would cause: the\r\n * scrollbar's width goes back in as padding on , and is exposed as --dc-scrollbar for fixed elements.\r\n */\r\nexport function useScrollLock(active: boolean) {\r\n useEffect(() => {\r\n if (!active) return;\r\n const html = document.documentElement;\r\n const bar = window.innerWidth - html.clientWidth;\r\n const prev = { overflow: html.style.overflow, paddingRight: html.style.paddingRight };\r\n html.style.overflow = \"hidden\";\r\n if (bar > 0) html.style.paddingRight = `${bar}px`;\r\n html.style.setProperty(\"--dc-scrollbar\", `${bar}px`);\r\n return () => {\r\n html.style.overflow = prev.overflow;\r\n html.style.paddingRight = prev.paddingRight;\r\n html.style.removeProperty(\"--dc-scrollbar\");\r\n };\r\n }, [active]);\r\n}\r\n","type":"registry:component","target":"@components/dynamic-carousel/hooks/useScrollLock.ts"},{"path":"components/dynamic-carousel/index.ts","content":"export { DynamicCarousel, default } from \"./DynamicCarousel\";\r\nexport { CarouselSlideCard, SlideFace } from \"./CarouselSlideCard\";\r\nexport { CarouselProgress } from \"./CarouselProgress\";\r\nexport { CarouselDetail } from \"./CarouselDetail\";\r\nexport { DragCursor } from \"./DragCursor\";\r\nexport { useCarouselEngine, createEngine, SNAP_SPRING, LEAN_SPRING } from \"./engine/useCarouselEngine\";\r\nexport { useDragCursor } from \"./hooks/useDragCursor\";\r\nexport type {\r\n AutoplayOptions,\r\n CarouselSlide,\r\n CustomSlide,\r\n DynamicCarouselHandle,\r\n DynamicCarouselProps,\r\n ImageSlide,\r\n RenderImage,\r\n StatSlide,\r\n StatementSlide,\r\n TextSlide,\r\n VideoSlide,\r\n} from \"./types\";\r\n","type":"registry:component","target":"@components/dynamic-carousel/index.ts"},{"path":"components/dynamic-carousel/portal-vars.ts","content":"/** The variables a portal (the detail view, the cursor) needs from the carousel it belongs to: it lives in . */\r\nconst VARS = [\"--dc-font-sans\", \"--dc-font-display\", \"--dc-font-serif\", \"--dc-font-script\", \"--dc-font-mono\", \"--dc-accent-now\"];\r\n\r\n/** Copies the carousel's fonts and accent onto a portal, wherever they were set (the root or any ancestor). */\r\nexport function copyVars(from: Element | null | undefined, to: HTMLElement | null | undefined) {\r\n if (!from || !to) return;\r\n const style = getComputedStyle(from);\r\n for (const name of VARS) {\r\n const value = style.getPropertyValue(name).trim();\r\n if (value) to.style.setProperty(name, value);\r\n }\r\n}\r\n","type":"registry:component","target":"@components/dynamic-carousel/portal-vars.ts"},{"path":"components/dynamic-carousel/styles.css","content":"$74","type":"registry:file","target":"@components/dynamic-carousel/styles.css"},{"path":"components/dynamic-carousel/types.ts","content":"$75","type":"registry:component","target":"@components/dynamic-carousel/types.ts"}],"className":"h-[70svh] min-h-80"}]]}]