Loading

61: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"] 62: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"] 63:T48a8,"use client"; // beui.dev/components/motion/loader import { motion, useReducedMotion } from "motion/react"; import { useEffect, useId, useState } from "react"; import { EASE_IN_OUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; export type LoaderVariant = | "spinner" | "dots" | "bars" | "dot-matrix" | "dither" | "ascii" | "ascii-line" | "ascii-braille" | "ascii-blocks" | "ascii-bounce" | "morph" | "comet" | "scramble" | "metaballs" | "newton" | "helix" | "percent"; // Terminal-style frame sets — the loaders CLI AI agents cycle through. const ASCII_SETS: Record = { ascii: ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"], "ascii-line": ["|", "/", "-", "\\"], "ascii-braille": ["⣾", "⣽", "⣻", "⢿", "⡿", "⣟", "⣯", "⣷"], "ascii-blocks": ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█", "▇", "▆", "▅", "▄", "▃", "▂"], "ascii-bounce": ["⠁", "⠂", "⠄", "⡀", "⢀", "⠠", "⠐", "⠈"], }; export interface LoaderProps { /** Which animation to render. */ variant?: LoaderVariant; /** Base square size in px. Everything scales from this. */ size?: number; /** Seconds per animation cycle. */ speed?: number; /** Accessible label announced to screen readers. */ label?: string; className?: string; } // Reduced motion keeps a calm opacity pulse and drops every transform. const REDUCED = { animate: { opacity: [1, 0.4, 1] }, transition: { duration: 1.4, ease: EASE_IN_OUT, repeat: Infinity }, }; export function Loader({ variant = "spinner", size = 32, speed = 1, label = "Loading", className, }: LoaderProps) { const reduce = useReducedMotion() ?? false; return ( {variant === "spinner" && } {variant === "dots" && } {variant === "bars" && } {variant === "dot-matrix" && ( )} {variant === "dither" && } {ASCII_SETS[variant] && ( )} {variant === "morph" && } {variant === "comet" && } {variant === "scramble" && ( )} {variant === "metaballs" && ( )} {variant === "newton" && } {variant === "helix" && } {variant === "percent" && ( )} {label} ); } interface PartProps { size: number; speed: number; reduce: boolean; } function Spinner({ size, speed, reduce }: PartProps) { const stroke = Math.max(2, size * 0.09); const r = (size - stroke) / 2; return ( ); } function Dots({ size, speed, reduce }: PartProps) { const dot = size * 0.24; return ( {[0, 1, 2].map((i) => ( ))} ); } function Ascii({ frames, size, speed, reduce, }: PartProps & { frames: string[] }) { const [frame, setFrame] = useState(0); useEffect(() => { // Reduced motion slows the cycle rather than stopping it — it's a glyph // swap, not on-screen movement. const step = ((reduce ? speed * 2.5 : speed) / frames.length) * 1000; const id = setInterval( () => setFrame((f) => (f + 1) % frames.length), step, ); return () => clearInterval(id); }, [frames.length, speed, reduce]); return ( {frames[frame % frames.length]} ); } // Each shape is sampled at the same number of points and emitted as an SVG // path with identical command structure, so framer tweens the `d` attribute // point-to-point — a real morph, not a snap. (clip-path polygon strings don't // interpolate reliably in framer, which left the shapes broken.) const MORPH_POINTS = 24; function ngonRadius(ang: number, n: number, phase = 0) { const seg = (2 * Math.PI) / n; const a = ang - phase; const local = (((a % seg) + seg) % seg) - seg / 2; return Math.cos(Math.PI / n) / Math.cos(local); } function morphPath(radiusAt: (ang: number) => number) { const parts: string[] = []; for (let i = 0; i < MORPH_POINTS; i++) { const ang = (i / MORPH_POINTS) * 2 * Math.PI - Math.PI / 2; const r = Math.min(1.05, radiusAt(ang)); const x = (50 + Math.cos(ang) * 46 * r).toFixed(2); const y = (50 + Math.sin(ang) * 46 * r).toFixed(2); parts.push(`${i === 0 ? "M" : "L"}${x} ${y}`); } return `${parts.join(" ")} Z`; } const MORPH_PATHS = [ morphPath(() => 1), // circle morphPath((a) => ngonRadius(a, 4, Math.PI / 4)), // square morphPath((a) => ngonRadius(a, 3)), // triangle morphPath((a) => ngonRadius(a, 6)), // hexagon morphPath((a) => ngonRadius(a, 4)), // diamond ]; // Each shape appears twice in a row so it fully forms and HOLDS before the // next morph. Even keyframe spacing then alternates hold / morph segments. const MORPH_SEQ = [...MORPH_PATHS.flatMap((p) => [p, p]), MORPH_PATHS[0]]; // Rotation and scale only change across the morph segments, staying put on the // holds, so a settled shape sits still. const MORPH_ROT = [0, 0, 72, 72, 144, 144, 216, 216, 288, 288, 360]; const MORPH_SCALE = [1, 1, 0.88, 0.88, 1, 1, 0.88, 0.88, 1, 1, 1]; function Morph({ size, speed, reduce }: PartProps) { return ( Loading ); } const COMET_TRAIL = [0, 1, 2, 3, 4, 5]; function Comet({ size, speed, reduce }: PartProps) { const head = size * 0.2; const r = size / 2 - head / 2; return ( {COMET_TRAIL.map((i) => { const scale = 1 - i * 0.13; const sz = head * scale; return ( ); })} ); } const SCRAMBLE_TARGET = "LOADING"; const SCRAMBLE_GLYPHS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789<>/*#@"; function Scramble({ size, speed, reduce }: PartProps) { const [text, setText] = useState(SCRAMBLE_TARGET); useEffect(() => { if (reduce) { setText(SCRAMBLE_TARGET); return; } let tick = 0; const total = SCRAMBLE_TARGET.length + 4; const id = setInterval( () => { const reveal = tick % total; let s = ""; for (let i = 0; i < SCRAMBLE_TARGET.length; i++) { s += i < reveal ? SCRAMBLE_TARGET[i] : SCRAMBLE_GLYPHS[ Math.floor(Math.random() * SCRAMBLE_GLYPHS.length) ]; } setText(s); tick++; }, (speed / SCRAMBLE_TARGET.length) * 1000 * 0.55, ); return () => clearInterval(id); }, [speed, reduce]); return ( {text} ); } function Metaballs({ size, speed, reduce }: PartProps) { const id = useId().replace(/:/g, ""); return ( ); } const NEWTON_BALLS = [0, 1, 2, 3, 4]; function Newton({ size, speed, reduce }: PartProps) { const d = size * 0.2; const out = d * 1.1; // Only the end balls move: the left slides out and back on the first half, // then the right on the second half — the impact appears to jump the three // still middle balls. Pure horizontal slide, no swing, no strings. const moves: Record = { 0: { x: [0, -out, 0, 0], times: [0, 0.28, 0.5, 1] }, 4: { x: [0, 0, out, 0], times: [0, 0.5, 0.78, 1] }, }; return ( {NEWTON_BALLS.map((i) => { const move = moves[i]; return ( ); })} ); } function Helix({ size, speed, reduce }: PartProps) { const rows = 7; const dot = size * 0.14; const amp = size * 0.32; return ( {Array.from({ length: rows }, (_, r) => { const top = (r / (rows - 1)) * (size - dot); const delay = (r / rows) * speed; return ( ); })} ); } function Percent({ size, speed, reduce }: PartProps) { const [p, setP] = useState(0); useEffect(() => { const dur = (reduce ? speed * 2 : speed) * 1000; const start = { t: 0 }; const tickMs = 40; const id = setInterval(() => { start.t += tickMs; const next = Math.min(100, Math.round((start.t / dur) * 100)); setP(next); if (next >= 100) start.t = 0; }, tickMs); return () => clearInterval(id); }, [speed, reduce]); return ( {p}% ); } function Bars({ size, speed, reduce }: PartProps) { const bar = size * 0.16; return ( {[0, 1, 2, 3].map((i) => ( ))} ); } function DotMatrix({ size, speed, reduce }: PartProps) { const n = 3; const gap = size * 0.14; const dot = (size - gap * (n - 1)) / n; const cells = Array.from({ length: n * n }, (_, idx) => idx); return ( {cells.map((idx) => { const x = idx % n; const y = Math.floor(idx / n); // Diagonal wave: cells light in order of their distance from the corner. const delay = ((x + y) / (2 * (n - 1))) * speed; return ( ); })} ); } // Ordered Bayer 4x4 matrix — the classic dithering threshold pattern. Cells // light in this order, so the fill shimmers like a dissolving halftone. const BAYER_4 = [ 0, 8, 2, 10, 12, 4, 14, 6, 3, 11, 1, 9, 15, 7, 13, 5, ]; function Dither({ size, speed, reduce }: PartProps) { const n = 4; const gap = Math.max(1, size * 0.05); const cell = (size - gap * (n - 1)) / n; return ( {BAYER_4.map((order, idx) => ( ))} ); } 64:T722,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; /** Accelerating curve for things that fall (a dropped ball, a toppled block). Not for UI entrances. */ export const EASE_IN = [0.55, 0, 1, 0.45] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 60:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","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"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/motion/loader.tsx","content":"$63","type":"registry:component","target":"@components/motion/loader.tsx"},{"path":"lib/ease.ts","content":"$64","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]