Animated Grid

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6 
7export interface AnimatedGridProps extends React.HTMLAttributes<HTMLDivElement> {
8  /** Base grid cell size in pixels. */
9  size?: number;
10  /** Line color (any CSS color). */
11  color?: string;
12  /** Accent color for the ambient glow (any CSS color). */
13  accent?: string;
14  /** Overall opacity of the grid lines (0–1). */
15  opacity?: number;
16  /** Radial mask so the grid fades toward the edges. */
17  fade?: boolean;
18}
19 
20/**
21 * AnimatedGrid — a layered, CSS-only animated grid backdrop.
22 *
23 * Depth comes from two grids (a fine base + a 4× major grid whose lines pick up
24 * the accent) plus a slow, drifting radial accent glow. Everything is drawn with
25 * gradients and two `background-position` / `transform` keyframes — no canvas,
26 * no WebGL, no JS animation loop, so it costs nothing on the main thread. The
27 * layer fills its positioned parent and is `aria-hidden` (decorative). A scoped
28 * `@media (prefers-reduced-motion: reduce)` rule stops all motion. Density,
29 * opacity, scale, and accent are configurable. Clean-room original.
30 */
31export function AnimatedGrid({
32  size = 36,
33  color = "var(--color-border,#e4e7ec)",
34  accent = "var(--color-accent,#695cff)",
35  opacity = 0.7,
36  fade = true,
37  className,
38  style,
39  ...props
40}: AnimatedGridProps) {
41  const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "");
42  const cls = `mk-grid-${uid}`;
43  const major = size * 4;
44 
45  const css = `
46.${cls}::before,
47.${cls}::after { content: ""; position: absolute; inset: -${major}px; }
48.${cls}::before {
49  background-image:
50    linear-gradient(to right, ${color} 1px, transparent 1px),
51    linear-gradient(to bottom, ${color} 1px, transparent 1px);
52  background-size: ${size}px ${size}px;
53  opacity: ${opacity * 0.6};
54  animation: ${cls}-drift 26s linear infinite;
55  will-change: background-position;
56}
57.${cls}::after {
58  background-image:
59    linear-gradient(to right, color-mix(in oklab, ${accent} 55%, ${color}) 1.2px, transparent 1.2px),
60    linear-gradient(to bottom, color-mix(in oklab, ${accent} 55%, ${color}) 1.2px, transparent 1.2px);
61  background-size: ${major}px ${major}px;
62  opacity: ${opacity * 0.5};
63  animation: ${cls}-drift 26s linear infinite;
64  will-change: background-position;
65}
66.${cls} > .${cls}-glow {
67  position: absolute; inset: 0;
68  background: radial-gradient(45% 45% at 50% 42%, color-mix(in oklab, ${accent} 26%, transparent), transparent 70%);
69// … truncated