4f: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"] 50: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"] 51:T13b8,"use client"; import { useEffect, useRef, useState } from "react"; import { motion } from "motion/react"; import { AnimateDigits } from "@/components/unlumen-ui/animate-digits"; import { Button } from "@/components/ui/button"; function formatTime(seconds: number): string { const m = Math.floor(seconds / 60); const s = seconds % 60; return String(m).padStart(2, "0") + ":" + String(s).padStart(2, "0"); } interface AnimateDigitsDemoProps { gap?: number; enterStiffness?: number; enterDamping?: number; exitStiffness?: number; exitDamping?: number; direction?: "dynamic" | "up" | "down"; enterY?: number; enterBlur?: number; enterScale?: number; animationDelay?: number; } const SCROLL_THRESHOLD = 80; export default function AnimateDigitsDemo({ gap = 2, enterStiffness, enterDamping, exitStiffness, exitDamping, direction, enterY, enterBlur, enterScale, animationDelay, }: AnimateDigitsDemoProps) { const [minutes, setMinutes] = useState(5); const [remaining, setRemaining] = useState(null); const [running, setRunning] = useState(false); const [scrollDir, setScrollDir] = useState<"up" | "down" | null>(null); const intervalRef = useRef | null>(null); const scrollAccum = useRef(0); const scrollIdleTimer = useRef | null>(null); const idle = !running && remaining === null; function start() { setRemaining(minutes * 60); setRunning(true); } function reset() { if (intervalRef.current) clearInterval(intervalRef.current); setRunning(false); setRemaining(null); } function handleWheel(e: React.WheelEvent) { if (!idle) return; e.preventDefault(); setScrollDir(e.deltaY > 0 ? "down" : "up"); if (scrollIdleTimer.current) clearTimeout(scrollIdleTimer.current); scrollIdleTimer.current = setTimeout(() => setScrollDir(null), 400); scrollAccum.current += e.deltaY; if (Math.abs(scrollAccum.current) >= SCROLL_THRESHOLD) { const steps = Math.trunc(scrollAccum.current / SCROLL_THRESHOLD); scrollAccum.current -= steps * SCROLL_THRESHOLD; setMinutes((m) => Math.max(1, Math.min(99, m - steps))); } } useEffect(() => { if (!running || remaining === null) return; if (remaining <= 0) { setRunning(false); return; } intervalRef.current = setInterval(() => { setRemaining((r) => { if (r === null || r <= 1) { clearInterval(intervalRef.current!); setRunning(false); return 0; } return r - 1; }); }, 1000); return () => clearInterval(intervalRef.current!); }, [running, remaining]); const display = remaining !== null ? formatTime(remaining) : formatTime(minutes * 60); return (

{idle ? "scroll to set time" : "Concentration"}

{[0, 1, 2].map((i) => { const activeIndex = scrollDir === "up" ? 0 : scrollDir === "down" ? 2 : 1; const isActive = idle && activeIndex === i; return ( ); })}

{idle && ( )} {(running || remaining !== null) && ( )}

); } 4e:["$","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,["$","$L4f",null,{"namespace":"@unlumen-ui","registryDependencies":["@unlumen-ui/animate-digits"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/demo/components/unlumen/animate-digits/index.tsx","content":"$51","type":"registry:example"}],"className":"h-[70svh] min-h-80"}]]}]