4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/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"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/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"] 4f:T1adf,"use client"; import type { MotionValue } from "motion/react"; import { motion, useReducedMotion, useScroll, useSpring, useTransform } from "motion/react"; import type { ReactNode, RefObject } from "react"; import { useRef } from "react"; import { cn } from "@/lib/utils"; export type ScrollRevealPhysics = { bounce?: number; damping?: number; mass?: number; stiffness?: number; visualDuration?: number; }; export type ScrollRevealRange = { end?: number; start?: number; }; export type ScrollRevealTextProps = { className?: string; lines?: readonly string[]; mutedClassName?: string; mutedColor?: string; physics?: ScrollRevealPhysics; revealClassName?: string; revealColor?: string; revealRange?: ScrollRevealRange; scrollLength?: number; scrollHint?: ReactNode; scrollHintClassName?: string; scrollHintPosition?: "bottom" | "top"; scrollContainerRef?: RefObject; showScrollHint?: boolean; stickyClassName?: string; textClassName?: string; }; type RevealLineProps = { index: number; line: string; lineCount: number; mutedClassName?: string; mutedColor?: string; progress: MotionValue; revealClassName?: string; revealColor?: string; revealEnd: number; revealStart: number; shouldReduceMotion: boolean; }; export const DEFAULT_SCROLL_REVEAL_LINES = [ "Interfaces should not just respond.", "They should move with intention.", "And make every interaction feel alive.", ] as const; export const DEFAULT_SCROLL_REVEAL_PHYSICS = { damping: 28, mass: 0.8, stiffness: 200, } as const; function RevealLine({ index, line, lineCount, mutedClassName, mutedColor, progress, revealClassName, revealColor, revealEnd, revealStart, shouldReduceMotion, }: RevealLineProps) { const revealRange = revealEnd - revealStart; const lineStart = revealStart + (index / lineCount) * revealRange; const lineEnd = revealStart + ((index + 1) / lineCount) * revealRange; const clipPath = useTransform( progress, [lineStart, lineEnd], ["inset(0 100% 0 0)", "inset(0 0% 0 0)"], { clamp: true, }, ); return ( {line} ); } export function ScrollRevealText({ className, lines = DEFAULT_SCROLL_REVEAL_LINES, mutedClassName, mutedColor, physics = DEFAULT_SCROLL_REVEAL_PHYSICS, revealClassName, revealColor, revealRange, scrollLength, scrollHint = "Scroll to reveal", scrollHintClassName, scrollHintPosition = "top", scrollContainerRef, showScrollHint = true, stickyClassName, textClassName, }: ScrollRevealTextProps) { const sectionRef = useRef(null); const shouldReduceMotion = Boolean(useReducedMotion()); const safeLines = lines.map((line) => line.trim()).filter(Boolean); const resolvedLines = safeLines.length > 0 ? safeLines : [...DEFAULT_SCROLL_REVEAL_LINES]; const revealStart = Math.min(Math.max(revealRange?.start ?? 0.08, 0), 0.95); const revealEnd = Math.min(Math.max(revealRange?.end ?? 0.92, revealStart + 0.05), 1); const { scrollYProgress } = useScroll({ container: scrollContainerRef, target: sectionRef, offset: ["start start", "end end"], }); /* * Smooths tiny trackpad and wheel changes without making * the reveal feel delayed. */ const smoothProgress = useSpring( scrollYProgress, physics.visualDuration !== undefined ? { bounce: physics.bounce, visualDuration: physics.visualDuration, } : { damping: physics.damping ?? DEFAULT_SCROLL_REVEAL_PHYSICS.damping, mass: physics.mass ?? DEFAULT_SCROLL_REVEAL_PHYSICS.mass, stiffness: physics.stiffness ?? DEFAULT_SCROLL_REVEAL_PHYSICS.stiffness, }, ); const scrollHintOpacity = useTransform(smoothProgress, [0, 0.12, 0.22], [1, 1, 0]); const scrollHintY = useTransform(smoothProgress, [0, 0.22], [0, -8]); return (

{resolvedLines.map((line, index) => ( ))}

{showScrollHint && !shouldReduceMotion ? (

) : null}

); } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","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"}]]}]}]]}],["$","$L4d",null,{"namespace":"@skecher-ui","registryDependencies":[]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ui-components/scroll-reveal-text.tsx","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]