4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T41ab,"use client"; import type { MotionValue } from "motion/react"; import { motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "motion/react"; import type { ReactNode } from "react"; import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; import { cn } from "@/lib/utils"; export type SnapTextSpring = { bounce?: number; damping?: number; mass?: number; stiffness?: number; visualDuration?: number; }; export type SnapTextEffects = { imageOffsetPercent?: number; imageScaleFalloff?: number; maxIndentSteps?: number; outlineWidth?: number; rowMinOpacity?: number; rowOpacityFalloff?: number; rowMinScale?: number; rowScaleFalloff?: number; rowStretch?: number; }; export type SnapTextProps = { className?: string; colors?: readonly string[]; effects?: SnapTextEffects; fontSize?: number | string; imageClassName?: string; imageFrameAspectRatio?: number; imageFrameClassName?: string; imageFrameRadius?: number; imageFrameWidth?: number | string; images?: readonly string[]; indent?: number; inactiveColor?: string; initialIndex?: number; itemHeight?: number; items?: readonly string[]; onIndexChange?: (index: number) => void; prefix?: ReactNode; showCounter?: boolean; spring?: SnapTextSpring; }; type ResolvedSnapTextEffects = Required; type SnapTextRowProps = { color: string; effects: ResolvedSnapTextEffects; indent: number; inactiveColor: string; index: number; item: string; itemHeight: number; progress: MotionValue; }; type SnapTextImageProps = { effects: ResolvedSnapTextEffects; imageClassName?: string; index: number; progress: MotionValue; shouldReduceMotion: boolean; src: string; }; export const DEFAULT_SNAP_TEXT_ITEMS = [ "A signal appears.", "The grid wakes up.", "Color breaks free.", "Gravity lets go.", "The impossible forms.", "Everything comes alive.", ]; export const DEFAULT_SNAP_TEXT_IMAGES = [ "/images/snap-text/i1.jpeg", "/images/snap-text/i2.jpeg", "/images/snap-text/i3.jpeg", "/images/snap-text/i4.jpeg", "/images/snap-text/i5.jpeg", "/images/snap-text/i6.jpeg", ] as const; export const DEFAULT_SNAP_TEXT_COLORS = [ "#8CD7C0", "#FFD873", "#FF5768", "#6C89C5", "#FF60A8", "#F5B2D3", ] as const; const DEFAULT_SPRING = { damping: 30, mass: 0.8, stiffness: 280, }; const DEFAULT_EFFECTS = { imageOffsetPercent: 24, imageScaleFalloff: 0.04, maxIndentSteps: 3, outlineWidth: 1, rowMinOpacity: 0.24, rowOpacityFalloff: 0.68, rowMinScale: 0.8, rowScaleFalloff: 0.1, rowStretch: 0.1, } satisfies ResolvedSnapTextEffects; function toCssSize(value: number | string) { return typeof value === "number" ? `${value}px` : value; } function clampIndex(index: number, itemCount: number) { return Math.min(Math.max(index, 0), Math.max(itemCount - 1, 0)); } function SnapTextImage({ effects, imageClassName, index, progress, shouldReduceMotion, src, }: SnapTextImageProps) { const opacity = useTransform(progress, (latestIndex) => Math.max(0, 1 - Math.abs(index - latestIndex)), ); const transform = useTransform(progress, (latestIndex) => { if (shouldReduceMotion) { return "translate3d(0px, 0%, 0px) scale3d(1, 1, 1)"; } const signedDistance = index - latestIndex; const clampedDistance = Math.max(-1, Math.min(1, signedDistance)); const scale = 1 - Math.min(Math.abs(signedDistance), 1) * effects.imageScaleFalloff; return `translate3d(0px, ${clampedDistance * effects.imageOffsetPercent}%, 0px) scale3d(${scale}, ${scale}, 1)`; }); return ( {/* biome-ignore lint/performance/noImgElement: keeps registry consumers free to use arbitrary local or remote image sources */}

); } function SnapTextRow({ color, effects, indent, inactiveColor, index, item, itemHeight, progress, }: SnapTextRowProps) { const opacity = useTransform(progress, (latestIndex) => { const distance = Math.abs(index - latestIndex); return Math.max(effects.rowMinOpacity, 1 - distance * effects.rowOpacityFalloff); }); const fillOpacity = useTransform(progress, (latestIndex) => Math.max(0, 1 - Math.abs(index - latestIndex)), ); const outlineOpacity = useTransform(fillOpacity, (latestOpacity) => 1 - latestOpacity); const transform = useTransform(progress, (latestIndex) => { const distance = Math.abs(index - latestIndex); const horizontalOffset = Math.min(distance, effects.maxIndentSteps) * indent; const scale = Math.max(effects.rowMinScale, 1 - distance * effects.rowScaleFalloff); const stretch = 1 + Math.sin(Math.min(distance, 1) * Math.PI) * effects.rowStretch; return `translate3d(${horizontalOffset}px, 0px, 0px) scale3d(${scale * stretch}, ${scale}, 1)`; }); return ( ); } export function SnapText({ className, colors = DEFAULT_SNAP_TEXT_COLORS, effects, fontSize = "clamp(1.75rem, 4vw, 4.5rem)", imageClassName, imageFrameAspectRatio = 0.5, imageFrameClassName, imageFrameRadius = 12, imageFrameWidth = "clamp(4.5rem, 10vw, 19rem)", images = DEFAULT_SNAP_TEXT_IMAGES, indent = 32, inactiveColor = "#737373", initialIndex = 3, itemHeight = 104, items = DEFAULT_SNAP_TEXT_ITEMS, onIndexChange, prefix, showCounter = true, spring, }: SnapTextProps) { const shouldReduceMotion = useReducedMotion(); const rootRef = useRef(null); const scrollRef = useRef(null); const sectionHeightRef = useRef(0); const activeIndexRef = useRef(clampIndex(initialIndex, items.length)); const [activeIndex, setActiveIndex] = useState(activeIndexRef.current); const scrollIndex = useMotionValue(activeIndexRef.current); const viewportHeight = useMotionValue(0); const visualItemHeight = useMotionValue(itemHeight); const safeColors = colors.length > 0 ? colors : DEFAULT_SNAP_TEXT_COLORS; const resolvedEffects = { ...DEFAULT_EFFECTS, ...effects }; const springConfig = useMemo(() => { if (spring?.visualDuration !== undefined || spring?.bounce !== undefined) { return { bounce: spring.bounce ?? 0, visualDuration: spring.visualDuration ?? 0.35, }; } return { damping: spring?.damping ?? DEFAULT_SPRING.damping, mass: spring?.mass ?? DEFAULT_SPRING.mass, stiffness: spring?.stiffness ?? DEFAULT_SPRING.stiffness, }; }, [spring?.bounce, spring?.damping, spring?.mass, spring?.stiffness, spring?.visualDuration]); const presentedIndex = useSpring(scrollIndex, springConfig); const trackTransform = useTransform( [presentedIndex, viewportHeight, visualItemHeight], ([latestIndex, latestHeight, latestItemHeight]: number[]) => `translate3d(0px, ${latestHeight / 2 - latestItemHeight / 2 - latestIndex * latestItemHeight}px, 0px)`, ); const commitIndex = useCallback( (nextIndex: number) => { const clampedIndex = clampIndex(nextIndex, items.length); if (clampedIndex === activeIndexRef.current) { return; } activeIndexRef.current = clampedIndex; setActiveIndex(clampedIndex); onIndexChange?.(clampedIndex); }, [items.length, onIndexChange], ); useLayoutEffect(() => { const root = rootRef.current; const scrollDriver = scrollRef.current; if (!root || !scrollDriver) { return; } const syncSize = () => { const nextHeight = root.getBoundingClientRect().height; if (nextHeight <= 0) { return; } const previousHeight = sectionHeightRef.current; const currentProgress = previousHeight > 0 ? scrollDriver.scrollTop / previousHeight : activeIndexRef.current; sectionHeightRef.current = nextHeight; viewportHeight.set(nextHeight); visualItemHeight.set(itemHeight); scrollDriver.scrollTop = currentProgress * nextHeight; scrollIndex.jump(currentProgress); presentedIndex.jump(currentProgress); }; syncSize(); const resizeObserver = new ResizeObserver(syncSize); resizeObserver.observe(root); return () => resizeObserver.disconnect(); }, [itemHeight, presentedIndex, scrollIndex, viewportHeight, visualItemHeight]); useEffect(() => { const scrollDriver = scrollRef.current; const clampedIndex = clampIndex(initialIndex, items.length); activeIndexRef.current = clampedIndex; setActiveIndex(clampedIndex); scrollIndex.jump(clampedIndex); presentedIndex.jump(clampedIndex); if (scrollDriver && sectionHeightRef.current > 0) { scrollDriver.scrollTop = clampedIndex * sectionHeightRef.current; } }, [initialIndex, items.length, presentedIndex, scrollIndex]); useEffect(() => { if (shouldReduceMotion) { presentedIndex.jump(scrollIndex.get()); } }, [presentedIndex, scrollIndex, shouldReduceMotion]); useEffect(() => { const scrollDriver = scrollRef.current; if (!scrollDriver || items.length === 0) { return; } const observer = new IntersectionObserver( (entries) => { let closestEntry: IntersectionObserverEntry | null = null; for (const entry of entries) { if ( entry.isIntersecting && entry.intersectionRatio >= 0.55 && (!closestEntry || entry.intersectionRatio > closestEntry.intersectionRatio) ) { closestEntry = entry; } } if (!closestEntry) { return; } const nextIndex = Number((closestEntry.target as HTMLElement).dataset.snapIndex); if (Number.isInteger(nextIndex)) { commitIndex(nextIndex); } }, { root: scrollDriver, threshold: [0.55, 0.75, 1] }, ); for (const section of scrollDriver.querySelectorAll("[data-snap-index]")) { observer.observe(section); } return () => observer.disconnect(); }, [commitIndex, items.length]); if (items.length === 0) { return null; } const hasImagePrefix = images.length > 0; const hasPrefix = prefix !== undefined && prefix !== null && prefix !== false && prefix !== ""; const prefixText = hasPrefix && (typeof prefix === "string" || typeof prefix === "number") ? `${prefix} ` : ""; const activeColor = safeColors[activeIndex % safeColors.length] ?? DEFAULT_SNAP_TEXT_COLORS[0]; const sequenceNumber = String(activeIndex + 1).padStart(2, "0"); const sequenceTotal = String(items.length).padStart(2, "0"); const selectWithKeyboard = (nextIndex: number) => { const scrollDriver = scrollRef.current; const clampedIndex = clampIndex(nextIndex, items.length); if (!scrollDriver || clampedIndex === activeIndexRef.current) { return false; } scrollDriver.scrollTop = clampedIndex * sectionHeightRef.current; scrollIndex.jump(clampedIndex); presentedIndex.jump(clampedIndex); commitIndex(clampedIndex); return true; }; return (

{showCounter ? ( ) : null}

{ let nextIndex: number | null = null; if (event.key === "ArrowDown" || event.key === "PageDown") { nextIndex = activeIndexRef.current + 1; } else if (event.key === "ArrowUp" || event.key === "PageUp") { nextIndex = activeIndexRef.current - 1; } else if (event.key === "Home") { nextIndex = 0; } else if (event.key === "End") { nextIndex = items.length - 1; } if (nextIndex !== null && selectWithKeyboard(nextIndex)) { event.preventDefault(); } }} onScroll={(event) => { const sectionHeight = sectionHeightRef.current; if (sectionHeight <= 0) { return; } const nextProgress = event.currentTarget.scrollTop / sectionHeight; scrollIndex.set(nextProgress); if (shouldReduceMotion) { presentedIndex.jump(nextProgress); } }} ref={scrollRef} role="slider" tabIndex={0} > {items.map((item, index) => (

{prefixText} {items[activeIndex]}, item {activeIndex + 1} of {items.length}

); } 4b:["$","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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@skecher-ui","registryDependencies":[]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"components/ui-components/snap-text.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]