Wave Spinner

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { type VariantProps, cva } from "class-variance-authority";
5import type { FC } from "react";
6import "./wave-spinner.css";
7 
8/**
9 * WaveSpinner - A beautiful animated loading spinner with wave effects
10 *
11 * Features multiple patterns, colors, sizes, and animation styles.
12 * Designed to be highly customizable while maintaining visual consistency.
13 */
14 
15// Animation delay patterns for different visual effects
16const DELAY_PATTERNS = {
17  /** Diagonal wave from top-left */
18  diagonalTL: [0, 0.12, 0.24, 0.12, 0.24, 0.36, 0.24, 0.36, 0.48],
19  /** Diagonal wave from top-right */
20  diagonalTR: [0.24, 0.12, 0, 0.36, 0.24, 0.12, 0.48, 0.36, 0.24],
21  /** Diagonal wave from bottom-left */
22  diagonalBL: [0.24, 0.36, 0.48, 0.12, 0.24, 0.36, 0, 0.12, 0.24],
23  /** Diagonal wave from bottom-right */
24  diagonalBR: [0.48, 0.36, 0.24, 0.36, 0.24, 0.12, 0.24, 0.12, 0],
25  /** Ripple effect from center */
26  ripple: [0.36, 0.24, 0.36, 0.24, 0, 0.24, 0.36, 0.24, 0.36],
27  /** Horizontal wave */
28  horizontal: [0, 0.12, 0.24, 0, 0.12, 0.24, 0, 0.12, 0.24],
29  /** Vertical wave */
30  vertical: [0, 0, 0, 0.12, 0.12, 0.12, 0.24, 0.24, 0.24],
31  /** Random-like pattern */
32  random: [0.1, 0.3, 0.2, 0.4, 0, 0.35, 0.15, 0.25, 0.45],
33  /** Spiral from center */
34  spiral: [0.4, 0.32, 0.24, 0.48, 0, 0.16, 0.56, 0.64, 0.08],
35} as const;
36 
37// Grid configurations for different patterns
38const GRID_CONFIGS = {
39  /** 3x3 grid (standard) */
40  square3x3: { cols: 3, count: 9 },
41  /** 2x2 grid (minimal) */
42  square2x2: { cols: 2, count: 4 },
43  /** 4x4 grid (detailed) */
44  square4x4: { cols: 4, count: 16 },
45  /** Single row (linear) */
46  line: { cols: 3, count: 3 },
47  /** Diamond pattern */
48  diamond: { cols: 3, count: 5, specialLayout: "diamond" as const },
49  /** Cross pattern */
50  cross: { cols: 3, count: 5, specialLayout: "cross" as const },
51  /** Circle arrangement */
52  circle: { cols: 1, count: 8, specialLayout: "circle" as const },
53} as const;
54 
55type DelayPattern = keyof typeof DELAY_PATTERNS;
56type GridPattern = keyof typeof GRID_CONFIGS;
57 
58// Color presets matching GAIA's design system
59const COLOR_PRESETS = {
60  /** GAIA primary blue (#00bbff) */
61  primary: "#00bbff",
62  /** Success green */
63  success: "#22c55e",
64  /** Warning amber */
65  warning: "#f59e0b",
66  /** Danger red */
67  danger: "#ef4444",
68  /** Muted zinc */
69  muted: "#71717a",
70  /** Purple accent */
71  purple: "#a855f7",
72  /** Cyan accent */
73  cyan: "#06b6d4",
74  /** Rose accent */
75// … truncated