Braille Loader

1import type { CSSProperties } from "react";
2import { getBrailleCharacters } from "@/lib/text-to-braille";
3import { cn } from "@/lib/utils";
4 
5interface BrailleLoaderProps {
6  text: string;
7  className?: string;
8  variant?: "wave" | "typewriter" | "shimmer" | "pulse";
9  speed?: number;
10}
11 
12const STEP_MS = 120;
13const MIN_SPEED = 0.1;
14 
15const variantStyles: Record<
16  NonNullable<BrailleLoaderProps["variant"]>,
17  string
18> = {
19  wave: `@keyframes braille-wave {
20    0%, 100% { opacity: 0.15; }
21    12%, 25% { opacity: 1; }
22    37% { opacity: 0.15; }
23  }`,
24  typewriter: `@keyframes braille-typewriter {
25    0%, 10% { opacity: 0; }
26    12% { opacity: 1; }
27    80% { opacity: 1; }
28    90%, 100% { opacity: 0; }
29  }`,
30  shimmer: `@keyframes braille-shimmer {
31    0%, 100% { opacity: 0.15; }
32    12%, 25% { opacity: 1; }
33    37% { opacity: 0.4; }
34    50% { opacity: 0.15; }
35  }`,
36  pulse: `@keyframes braille-pulse {
37    0%, 100% { opacity: 0.15; }
38    50% { opacity: 1; }
39  }`,
40};
41 
42function getAnimation(
43  variant: NonNullable<BrailleLoaderProps["variant"]>,
44  index: number,
45  total: number,
46  speed: number
47): CSSProperties {
48  const stepMs = STEP_MS / Math.max(speed, MIN_SPEED);
49  const totalDuration = (total + 2) * stepMs;
50  const delay = index * stepMs;
51 
52  if (variant === "pulse") {
53    return {
54      animation: `braille-pulse ${total * stepMs * 1.5}ms ease-in-out ${delay}ms infinite`,
55    };
56  }
57 
58  return {
59    animation: `braille-${variant} ${totalDuration}ms ease-in-out ${delay}ms infinite`,
60  };
61}
62 
63export function BrailleLoader({
64  text,
65  className,
66  variant = "wave",
67  speed = 1,
68}: BrailleLoaderProps) {
69  const chars = getBrailleCharacters(text);
70 
71  return (
72    <span
73      aria-hidden="true"
74      className={cn("inline-flex font-mono text-muted-foreground", className)}
75    >
76      <style>{variantStyles[variant]}</style>
77      {chars.map(({ char, key }, i) => (
78        <span key={key} style={getAnimation(variant, i, chars.length, speed)}>
79          {char === " " ? "\u00A0" : char}
80        </span>
81      ))}
82    </span>
83  );
84}