5f: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"] 60: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"] 61:T16af,"use client"; import { useEffect, useRef } from "react"; import { animate, motion, useMotionValue, useSpring, useTransform, type MotionValue, } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; // Enough lift to read as a wave at 44px without letters touching the line above. const LIFT = 8; const GROW = 0.08; // About two letters either side of the cursor get pulled along. const SPREAD = 44; // Soft enough that the crest trails the cursor slightly; no overshoot, so // letters never dip below the baseline. const FOLLOW = { stiffness: 220, damping: 26 }; const SETTLE = { stiffness: 180, damping: 24 }; // A tap ripple has to cross the whole word, so it runs longer than UI motion. const RIPPLE_S = 0.9; // How far letters away from the cursor fade toward muted in reduced motion. const DIM = 45; function bell(distance: number) { return Math.exp(-((distance / SPREAD) ** 2)); } type Field = { pointer: MotionValue; hover: MotionValue; ripple: MotionValue; // [tap origin x, heading width], written on tap, read by every letter. tap: React.RefObject<[number, number]>; reduce: boolean; }; export function WaveText({ text, className, }: { text: string; className?: string; }) { const reduce = useReducedMotion() ?? false; const headingRef = useRef(null); const rawPointer = useMotionValue(0); const pointer = useSpring(rawPointer, FOLLOW); const rawHover = useMotionValue(0); const hover = useSpring(rawHover, SETTLE); // 0 to 1 as a tap ripple travels outward; 1 means spent. const ripple = useMotionValue(1); const tap = useRef<[number, number]>([0, 1]); const field: Field = { pointer, hover, ripple, tap, reduce }; const localX = (e: React.PointerEvent) => e.clientX - (headingRef.current?.getBoundingClientRect().left ?? 0); const words = text.split(" "); const starts = words.map((_, i) => words.slice(0, i).reduce((sum, word) => sum + word.length, 0), ); return (

{ if (e.pointerType === "touch") return; // Start the crest under the cursor instead of sweeping in from the edge. const x = localX(e); rawPointer.jump(x); pointer.jump(x); }} onPointerMove={(e) => { if (e.pointerType === "touch") return; rawPointer.set(localX(e)); rawHover.set(1); }} onPointerLeave={() => rawHover.set(0)} onPointerDown={(e) => { if (e.pointerType !== "touch") return; tap.current = [localX(e), headingRef.current?.offsetWidth ?? 1]; animate(ripple, [0, 1], { duration: RIPPLE_S, ease: [0.23, 1, 0.32, 1] }); }} > {words.map((word, w) => ( {/* Keeps a word's letters together, so lines only break between words. */} {Array.from(word).map((char, c) => ( ))} {w < words.length - 1 && " "} ))}

); } function Letter({ char, heading, field, order, }: { char: string; heading: React.RefObject; field: Field; order: number; }) { const ref = useRef(null); // Measured on mount and resize, never per frame. const center = useRef(0); useEffect(() => { const el = ref.current; const parent = heading.current; if (!el || !parent) return; const measure = () => { // The heading is the offsetParent, and offsetLeft ignores transforms, // so a lifted letter still measures its resting position. center.current = el.offsetLeft + el.offsetWidth / 2; }; measure(); const observer = new ResizeObserver(measure); observer.observe(parent); return () => observer.disconnect(); }, [heading, order]); const { pointer, hover, ripple, tap, reduce } = field; const strength = useTransform([pointer, hover, ripple], ([p, h, r]) => { const near = bell((p as number) - center.current) * (h as number); const progress = r as number; if (progress >= 1) return near; // The ring's radius grows with progress while its height fades out. const [from, width] = tap.current; const wave = bell(Math.abs(center.current - from) - progress * width) * (1 - progress); return Math.max(near, wave); }); // Both styles stay bound in either mode; only what they output changes. const transform = useTransform(strength, (s) => reduce ? "none" : `translateY(${-LIFT * s}px) scale(${1 + GROW * s})`, ); const color = useTransform([strength, hover], ([s, h]) => reduce ? `color-mix(in oklab, var(--foreground), var(--muted-foreground) ${Math.round( DIM * Math.max(0, (h as number) - (s as number)), )}%)` : "var(--foreground)", ); return ( {char} ); } export default function WaveTextDemo() { return (

Move across the letters, or tap them.

); } 5e:["$","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"}]]}]}]]}],["$","$L5f",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],null]}],["$","$L60",null,{"files":[{"path":"components/wave-text.tsx","content":"$61","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"}],"className":"h-[70svh] min-h-80"}]]}]