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:T1da5,"use client"; import { cn } from "@/lib/utils"; import { motion, useReducedMotion, type Transition, type Variants, } from "framer-motion"; import { forwardRef, useEffect, useImperativeHandle, useMemo, useState, type HTMLAttributes, } from "react"; type SplitMode = "words" | "characters" | "lines"; type RevealDirection = "up" | "down" | "left" | "right"; type StaggerOrigin = "start" | "end" | "center" | "edges" | "random" | number; export interface KineticTextRevealRef { /** Starts or replays the reveal animation. */ play: () => void; /** Moves the text back to its hidden state. */ reset: () => void; } interface KineticTextRevealProps extends Omit< HTMLAttributes, "children" > { /** Text content to reveal. */ text: string; /** Additional CSS classes for the outer element. */ className?: string; /** CSS classes applied to each animated text segment. */ segmentClassName?: string; /** CSS classes applied to each clipping wrapper. */ maskClassName?: string; /** How the text is segmented before animation. */ splitBy?: SplitMode; /** Direction each segment travels from. */ direction?: RevealDirection; /** Distance each segment travels in pixels. */ distance?: number; /** Delay between animated segments in seconds. */ stagger?: number; /** Where the stagger wave begins. */ staggerFrom?: StaggerOrigin; /** Animation transition for each segment. */ transition?: Transition; /** Adds blur while segments are hidden. */ blur?: boolean; /** Starts automatically after mount. */ autoPlay?: boolean; /** Optional delay before the automatic reveal begins, in seconds. */ delay?: number; /** Called when the reveal begins. */ onRevealStart?: () => void; /** Called after the last segment completes. */ onRevealComplete?: () => void; } interface Segment { value: string; animated: boolean; index: number; } function splitIntoGraphemes(value: string): string[] { if (typeof Intl !== "undefined" && "Segmenter" in Intl) { const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" }); return Array.from(segmenter.segment(value), ({ segment }) => segment); } return Array.from(value); } function getSegments(text: string, splitBy: SplitMode): Segment[] { let animatedIndex = 0; if (splitBy === "lines") { return text.split("\n").map((line) => { const animated = line.length > 0; return { value: line, animated, index: animated ? animatedIndex++ : -1, }; }); } if (splitBy === "characters") { return splitIntoGraphemes(text).map((character) => { const animated = !/\s/.test(character); return { value: character, animated, index: animated ? animatedIndex++ : -1, }; }); } return text.split(/(\s+)/).map((part) => { const animated = !/^\s+$/.test(part) && part.length > 0; return { value: part, animated, index: animated ? animatedIndex++ : -1, }; }); } function getDelay( index: number, total: number, stagger: number, staggerFrom: StaggerOrigin, ) { if (typeof staggerFrom === "number") { return Math.abs(staggerFrom - index) * stagger; } if (staggerFrom === "end") { return (total - 1 - index) * stagger; } if (staggerFrom === "center") { return Math.abs((total - 1) / 2 - index) * stagger; } if (staggerFrom === "edges") { return Math.min(index, total - 1 - index) * stagger; } if (staggerFrom === "random") { const seeded = Math.abs(Math.sin(index * 12.9898) * 43758.5453) % 1; return Math.floor(seeded * total) * stagger; } return index * stagger; } function getOffset(direction: RevealDirection, distance: number) { if (direction === "down") return { x: 0, y: -distance }; if (direction === "left") return { x: distance, y: 0 }; if (direction === "right") return { x: -distance, y: 0 }; return { x: 0, y: distance }; } export const KineticTextReveal = forwardRef< KineticTextRevealRef, KineticTextRevealProps >( ( { text, className, segmentClassName, maskClassName, splitBy = "words", direction = "up", distance = 20, stagger = 0.075, staggerFrom = "start", transition = { duration: 0.72, ease: [0.22, 1, 0.36, 1] }, blur = true, autoPlay = true, delay = 0, onRevealStart, onRevealComplete, ...props }, ref, ) => { const shouldReduceMotion = useReducedMotion(); const [run, setRun] = useState(0); const [visible, setVisible] = useState(false); const segments = useMemo(() => getSegments(text, splitBy), [text, splitBy]); const animatedTotal = segments.filter((segment) => segment.animated).length; useImperativeHandle(ref, () => ({ play: () => { setVisible(false); requestAnimationFrame(() => { setRun((current) => current + 1); setVisible(true); onRevealStart?.(); }); }, reset: () => setVisible(false), })); useEffect(() => { if (!autoPlay) return; const timeout = window.setTimeout(() => { setRun((current) => current + 1); setVisible(true); onRevealStart?.(); }, delay * 1000); return () => window.clearTimeout(timeout); }, [autoPlay, delay, text, onRevealStart]); const offset = getOffset(direction, distance); const variants: Variants = { hidden: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, x: offset.x, y: offset.y, filter: blur ? "blur(6px)" : "blur(0px)", }, visible: (index: number) => ({ opacity: 1, x: 0, y: 0, filter: "blur(0px)", transition: shouldReduceMotion ? { duration: 0.01 } : { ...transition, delay: getDelay(index, animatedTotal, stagger, staggerFrom), }, }), }; return ( {text} {segments.map((segment, index) => { if (!segment.animated) { return ( ); } return ( ); })} ); }, ); KineticTextReveal.displayName = "KineticTextReveal"; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-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":"framer-motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@componentry","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ui/kinetic-text-reveal.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]