50: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"] 51: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"] 52:T18d0,"use client"; import * as React from "react"; import { animate, motion, useMotionValue, useReducedMotion, useTransform, type MotionValue, } from "motion/react"; import { cn } from "@/lib/utils"; export const BLOCK_TEXT_THEMES = { halloween: { colors: ["#ea580c", "#6d28d9", "#1c1917"], textColor: "#fff7ed" }, classic: { colors: ["#16a34a", "#ff5a1f", "#0029ff"], textColor: "#f5f5f5" }, ocean: { colors: ["#0369a1", "#0d9488", "#1e3a8a"], textColor: "#f0f9ff" }, candy: { colors: ["#db2777", "#9333ea", "#e11d48"], textColor: "#fdf2f8" }, sunset: { colors: ["#dc2626", "#ea580c", "#b45309"], textColor: "#fff7ed" }, } as const; export type BlockTextTheme = keyof typeof BLOCK_TEXT_THEMES; export interface BlockTextProps extends Omit, "children" | "color"> { words?: string[]; theme?: BlockTextTheme; colors?: string[]; textColor?: string; interval?: number; duration?: number; paused?: boolean; shimmer?: boolean; } const DEFAULT_WORDS = ["Trick", "Treat", "Boo!"]; const FACES = [0, 1, 2, 3]; function faceStep(face: number, step: number) { const ahead = step + 1; return ahead - ((((ahead - face) % 4) + 4) % 4); } function Face({ face, angle, word, color, shimmer, }: { face: number; angle: MotionValue; word: string; color: string; shimmer: boolean; }) { const shade = useTransform(angle, (value) => { const turn = ((value - face * 90) * Math.PI) / 180; return Math.min(0.55, Math.max(0, (1 - Math.cos(turn)) * 0.55)); }); return ( {shimmer ? ( {word} ) : ( {word} )} ); } function BlockText({ words = DEFAULT_WORDS, theme = "halloween", colors, textColor, interval = 1.4, duration = 1.2, paused = false, shimmer = true, className, style, ...props }: BlockTextProps) { const reduceMotion = useReducedMotion(); const angle = useMotionValue(0); const [step, setStep] = React.useState(0); const stepRef = React.useRef(0); const list = words.length > 0 ? words : [""]; const preset = BLOCK_TEXT_THEMES[theme] ?? BLOCK_TEXT_THEMES.halloween; const palette: readonly string[] = colors && colors.length > 0 ? colors : preset.colors; const count = list.length; const transform = useTransform( angle, (value) => `translateZ(calc(var(--block-h) / -2)) rotateX(${value}deg)`, ); React.useEffect(() => { if (paused || count < 2) return; let timer: ReturnType | undefined; let controls: ReturnType | undefined; let cancelled = false; const roll = () => { timer = setTimeout(() => { const next = stepRef.current + 1; controls = animate(angle, next * 90, { duration: reduceMotion ? 0 : duration, ease: [0.65, 0, 0.25, 1], }); controls.then(() => { if (cancelled) return; stepRef.current = next; setStep(next); roll(); }); }, interval * 1000); }; roll(); return () => { cancelled = true; if (timer) clearTimeout(timer); controls?.stop(); angle.set(stepRef.current * 90); }; }, [angle, count, duration, interval, paused, reduceMotion]); return ( {list.join(", ")} {list.map((word, index) => ( {word} ))} {FACES.map((face) => { const at = faceStep(face, step); const index = ((at % count) + count) % count; return ( ); })} ); } export { BlockText }; 4f:["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@clover-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/clover-ui/block-text.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]