51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T4a4a,// biome-ignore-all lint/performance/noImgElement: Crossfade layers animate opacity/filter/transform imperatively via WAAPI on plain img elements. // biome-ignore-all lint/correctness/useImageSize: Layers are absolutely positioned and sized via object-fit: contain, not intrinsic dimensions. "use client"; import { cn } from "@/lib/utils"; import { type ComponentPropsWithoutRef, type Ref, useEffect, useRef, } from "react"; import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion"; const DEFAULT_INTERVAL_MS = 4500; const CROSSFADE_EASING = "cubic-bezier(0.4, 0, 0.2, 1)"; const OUT_DURATION_MS = 420; const IN_DURATION_MS = 460; const IN_DELAY_MS = 60; /** How long a manual next/prev takes to visually finish out the progress bar before it resets. */ const CATCHUP_DURATION_MS = 220; /** How long the full bar takes to collapse back to empty before the next cycle starts. */ const SHRINK_DURATION_MS = 220; export interface HeroCarouselImage { /** Accessible label for the image. */ alt: string; /** Image URL. */ src: string; } export interface HeroCarouselClassNames { /** Prev/next button classes, layered on top of the defaults. */ chevron?: string; /** Play/pause pill button classes, layered on top of the defaults. */ pill?: string; } export interface HeroCarouselProps extends Omit, "children"> { /** Per-slot class overrides: `pill`, `chevron`. */ classNames?: HeroCarouselClassNames; /** Images cycled through, in order. Fewer than 2 renders a single static image with no controls. */ images: HeroCarouselImage[]; /** Index to start on. Clamped into range; defaults to 0. */ initialIndex?: number; /** Milliseconds each image is held before auto-advancing. */ intervalMs?: number; ref?: Ref; } function HeroCarousel({ className, classNames, images, initialIndex = 0, intervalMs = DEFAULT_INTERVAL_MS, ref, ...props }: HeroCarouselProps) { const stageRef = useRef(null); const layerRefs = useRef<(HTMLImageElement | null)[]>([]); const pillRef = useRef(null); const fillRef = useRef(null); const prevRef = useRef(null); const nextRef = useRef(null); const currentElRef = useRef(null); const prefersReducedMotion = usePrefersReducedMotion(); const total = images.length; const startIndex = Math.min(Math.max(initialIndex, 0), total - 1); const first = images[startIndex]; useEffect(() => { const stage = stageRef.current; const pill = pillRef.current; const fill = fillRef.current; const prevBtn = prevRef.current; const nextBtn = nextRef.current; const currentEl = currentElRef.current; const layers = layerRefs.current; if ( !(stage && pill && fill && prevBtn && nextBtn && currentEl) || total < 2 || !(layers[0] && layers[1]) ) { return; } const layer0 = layers[0]; const layer1 = layers[1]; // Preload every image so transitions never wait on the network. for (const image of images) { const pre = new Image(); pre.src = image.src; } let current = startIndex; let active = 0; // index into [layer0, layer1] that is currently shown let playing = true; let crossfades: Animation[] = []; let progressAnim: Animation | null = null; // "growing": progressAnim is the real intervalMs countdown, so its // currentTime maps to a progress ratio. "transition": progressAnim is a // short catch-up/shrink flourish — currentTime is on that anim's own // short timeline, not intervalMs, so it must never be read as a ratio. let progressPhase: "growing" | "idle" | "transition" = "idle"; let destroyed = false; const applyResting = () => { const top = active === 0 ? layer0 : layer1; const bottom = active === 0 ? layer1 : layer0; top.style.opacity = "1"; top.style.filter = "none"; top.style.transform = "none"; top.style.zIndex = "2"; bottom.style.opacity = "0"; bottom.style.filter = "none"; bottom.style.transform = "none"; bottom.style.zIndex = "1"; }; const cancelCrossfades = () => { for (const a of crossfades) { try { a.cancel(); } catch { /* noop */ } } crossfades = []; }; const updateCount = () => { currentEl.textContent = String(current + 1); }; /** Blur-and-scale crossfade between the outgoing and incoming layers. */ const startCrossfade = (out: HTMLImageElement, inc: HTMLImageElement) => { inc.style.opacity = "0"; const outAnim = out.animate( [ { filter: "blur(0px)", opacity: 1, transform: "scale(1)" }, { filter: "blur(10px)", opacity: 0, transform: "scale(0.94)" }, ], { duration: OUT_DURATION_MS, easing: CROSSFADE_EASING, fill: "forwards", } ); // The incoming image blurs in and scales up shortly after the // outgoing one begins to leave. const incAnim = inc.animate( [ { filter: "blur(10px)", opacity: 0, transform: "scale(0.94)" }, { filter: "blur(0px)", opacity: 1, transform: "scale(1)" }, ], { delay: IN_DELAY_MS, duration: IN_DURATION_MS, easing: CROSSFADE_EASING, fill: "forwards", } ); crossfades = [outAnim, incAnim]; }; const go = (target: number) => { const next = ((target % total) + total) % total; if (next === current) { return; } // Interruptible: settle whatever is mid-flight before starting anew. cancelCrossfades(); applyResting(); const out = active === 0 ? layer0 : layer1; const inc = active === 0 ? layer1 : layer0; const image = images[next]; if (!image) { return; } inc.src = image.src; inc.alt = image.alt; out.style.zIndex = "1"; inc.style.zIndex = "2"; if (prefersReducedMotion) { inc.style.opacity = "1"; out.style.opacity = "0"; } else { startCrossfade(out, inc); } active = active === 0 ? 1 : 0; current = next; updateCount(); }; /** * Collapses the full bar back to empty, anchored on the right — the * mirror image of the left-anchored fill — instead of snapping straight * to 0, then hands off to `onDone` to start the next cycle. */ const shrinkProgress = (onDone: () => void) => { if (prefersReducedMotion) { progressPhase = "idle"; fill.style.transform = "scaleX(0)"; onDone(); return; } progressPhase = "transition"; fill.style.transformOrigin = "right"; const shrinkAnim = fill.animate( [{ transform: "scaleX(1)" }, { transform: "scaleX(0)" }], { duration: SHRINK_DURATION_MS, easing: "ease-in", fill: "forwards" } ); progressAnim = shrinkAnim; shrinkAnim.onfinish = () => { fill.style.transformOrigin = ""; if (destroyed) { return; } onDone(); }; }; const startProgress = () => { if (progressAnim) { // Clear onfinish first: cancel() never fires it, but this rules out // any stray callback from a not-yet-settled prior animation. progressAnim.onfinish = null; progressAnim.cancel(); } // Force the visual reset synchronously — shrinkProgress already leaves // the bar at scaleX(0), this covers the paths that skip it. fill.style.transform = "scaleX(0)"; fill.style.transformOrigin = ""; if (prefersReducedMotion) { // No visible countdown; just schedule advances on a timer-like anim. progressPhase = "idle"; progressAnim = fill.animate([{ opacity: 0 }, { opacity: 0 }], { duration: intervalMs, }); } else { progressPhase = "growing"; progressAnim = fill.animate( [{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }], { duration: intervalMs, easing: "linear", fill: "forwards" } ); } progressAnim.onfinish = () => { if (destroyed || !playing) { return; } shrinkProgress(() => { if (destroyed || !playing) { return; } go(current + 1); startProgress(); }); }; }; const resetProgress = () => { progressAnim?.cancel(); progressAnim = null; progressPhase = "idle"; fill.style.transform = "scaleX(0)"; fill.style.transformOrigin = ""; }; /** * Manual next/prev: smoothly finish the bar out to full instead of * snapping, shrink it back to empty, then hand off to `onDone` (which * restarts the countdown). Only reads a live progress ratio while a real * countdown ("growing") is running — if a click lands mid catch-up/shrink * flourish, that animation's own short currentTime is meaningless as a * fraction of intervalMs, so treat it as already full instead. */ const completeProgress = (onDone: () => void) => { const anim = progressAnim; let ratio = 1; if (progressPhase === "growing" && anim) { const elapsed = typeof anim.currentTime === "number" ? anim.currentTime : intervalMs; ratio = Math.min(1, Math.max(0, elapsed / intervalMs)); } if (anim) { anim.onfinish = null; anim.cancel(); } // Normalize origin in case we interrupted a mid-flight shrink. fill.style.transformOrigin = ""; if (prefersReducedMotion) { progressPhase = "idle"; fill.style.transform = "scaleX(0)"; onDone(); return; } if (ratio >= 1) { fill.style.transform = "scaleX(1)"; shrinkProgress(onDone); return; } progressPhase = "transition"; const catchUp = fill.animate( [{ transform: `scaleX(${ratio})` }, { transform: "scaleX(1)" }], { duration: CATCHUP_DURATION_MS, easing: "ease-out", fill: "forwards" } ); progressAnim = catchUp; catchUp.onfinish = () => { if (destroyed) { return; } shrinkProgress(onDone); }; }; const setPlayingState = (value: boolean) => { playing = value; pill.classList.toggle("is-paused", !value); pill.setAttribute("aria-pressed", String(!value)); pill.setAttribute( "aria-label", value ? "Pause slideshow" : "Play slideshow" ); }; const play = () => { if (playing) { return; } setPlayingState(true); if (progressAnim && progressAnim.playState === "paused") { progressAnim.play(); } else { startProgress(); } }; const pause = () => { if (!playing) { return; } setPlayingState(false); progressAnim?.pause(); }; const togglePlay = () => { if (playing) { pause(); } else { play(); } }; const step = (delta: number) => { go(current + delta); if (playing) { completeProgress(() => { if (!destroyed && playing) { startProgress(); } }); } else { resetProgress(); } }; const onStageClick = () => step(1); const onPrev = (e: Event) => { e.stopPropagation(); step(-1); }; const onNext = (e: Event) => { e.stopPropagation(); step(1); }; const onPill = (e: Event) => { e.stopPropagation(); togglePlay(); }; const onKey = (e: KeyboardEvent) => { if (e.metaKey || e.ctrlKey || e.altKey) { return; } const t = e.target as HTMLElement | null; if ( t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable) ) { return; } if (e.key === "ArrowRight") { e.preventDefault(); step(1); } else if (e.key === "ArrowLeft") { e.preventDefault(); step(-1); } }; const onVisibility = () => { if (!playing) { return; } if (document.hidden) { progressAnim?.pause(); } else { progressAnim?.play(); } }; stage.addEventListener("click", onStageClick); prevBtn.addEventListener("click", onPrev); nextBtn.addEventListener("click", onNext); pill.addEventListener("click", onPill); document.addEventListener("keydown", onKey); document.addEventListener("visibilitychange", onVisibility); applyResting(); updateCount(); setPlayingState(true); startProgress(); return () => { destroyed = true; cancelCrossfades(); progressAnim?.cancel(); stage.removeEventListener("click", onStageClick); prevBtn.removeEventListener("click", onPrev); nextBtn.removeEventListener("click", onNext); pill.removeEventListener("click", onPill); document.removeEventListener("keydown", onKey); document.removeEventListener("visibilitychange", onVisibility); }; }, [images, intervalMs, prefersReducedMotion, startIndex, total]); if (!first) { return null; } return (

{ layerRefs.current[0] = el; }} src={first.src} /> { layerRefs.current[1] = el; }} src={first.src} />

{total > 1 && (

)}

); } export { HeroCarousel }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@soralabs","registryDependencies":["utils","@soralabs/hooks-use-prefers-reduced-motion"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/primitives/effects/hero-carousel/index.tsx","content":"$53","type":"registry:ui","target":"components/sora-ui/effects/hero-carousel.tsx"}],"className":"h-[70svh] min-h-80"}]]}]