@alpic-ai/ui 0.0.0-dev.g05467b7 → 0.0.0-dev.g05c89ce

package/src/components/grid-fx.tsx

@@ -1,238 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { useReducedMotion } from "../hooks/use-reduced-motion";
-import { cn } from "../lib/cn";
-
-const CELL_SIZE = 46;
-const TTL_MIN = 42;
-const TTL_MAX = 78;
-const SPAWN_MIN = 180;
-const SPAWN_MAX = 480;
-
-interface GlitchLine {
-  horiz: boolean;
-  at: number;
-  life: number;
-  ttl: number;
-  color: string;
-  colorHi: string;
-}
-
-const rand = (min: number, max: number) => min + Math.random() * (max - min);
-
-function resolveColors(element: HTMLElement) {
-  const styles = getComputedStyle(element);
-  return {
-    color: styles.getPropertyValue("--color-primary").trim() || "#e90060" /* --color-primary */,
-    colorHi: styles.getPropertyValue("--color-primary-hover").trim() || "#f22b79" /* --color-primary-hover */,
-  };
-}
-
-function strokeFull(ctx: CanvasRenderingContext2D, horiz: boolean, at: number, width: number, height: number) {
-  ctx.beginPath();
-  if (horiz) {
-    ctx.moveTo(0, at);
-    ctx.lineTo(width, at);
-  } else {
-    ctx.moveTo(at, 0);
-    ctx.lineTo(at, height);
-  }
-  ctx.stroke();
-}
-
-function drawGlitchLine(ctx: CanvasRenderingContext2D, line: GlitchLine, width: number, height: number) {
-  const { horiz, at, color, colorHi } = line;
-  const span = horiz ? width : height;
-  const progress = line.life / line.ttl;
-  const envelope = progress < 0.08 ? progress / 0.08 : 1 - (progress - 0.08) / 0.92;
-  const base = Math.max(0, envelope);
-
-  ctx.lineCap = "round";
-
-  const ghosts = [
-    { offset: 0, alpha: 0.85, blur: 12 },
-    { offset: rand(-3, 3), alpha: 0.35, blur: 0 },
-    { offset: rand(-7, 7), alpha: 0.2, blur: 0 },
-  ];
-  for (const ghost of ghosts) {
-    ctx.globalAlpha = base * ghost.alpha * (Math.random() < 0.1 ? 0.3 : 1);
-    ctx.strokeStyle = color;
-    ctx.lineWidth = 1.5;
-    ctx.shadowBlur = ghost.blur;
-    ctx.shadowColor = color;
-    strokeFull(ctx, horiz, at + ghost.offset, width, height);
-  }
-
-  if (Math.random() < 0.5) {
-    ctx.globalAlpha = base * 0.6;
-    ctx.lineWidth = 2;
-    ctx.shadowBlur = 0;
-    ctx.strokeStyle = colorHi;
-    for (let segment = 0; segment < 3; segment++) {
-      const start = rand(0, span * 0.85);
-      const end = start + rand(20, 80);
-      const jitter = rand(-4, 4);
-      ctx.beginPath();
-      if (horiz) {
-        ctx.moveTo(start, at + jitter);
-        ctx.lineTo(end, at + jitter);
-      } else {
-        ctx.moveTo(at + jitter, start);
-        ctx.lineTo(at + jitter, end);
-      }
-      ctx.stroke();
-    }
-  }
-}
-
-function GridFx({
-  className,
-  cellSize = CELL_SIZE,
-  style,
-  ...props
-}: React.ComponentProps<"canvas"> & { cellSize?: number }) {
-  const reduced = useReducedMotion();
-  const canvasRef = React.useRef<HTMLCanvasElement>(null);
-
-  React.useEffect(() => {
-    if (reduced) {
-      return;
-    }
-    const canvas = canvasRef.current;
-    const parent = canvas?.parentElement;
-    const ctx = canvas?.getContext("2d");
-    if (!canvas || !parent || !ctx) {
-      return;
-    }
-
-    let width = 0;
-    let height = 0;
-    let dpr = 1;
-    let frame = 0;
-    let nextIn = rand(SPAWN_MIN, SPAWN_MAX);
-    let onScreen = true;
-    const lines: GlitchLine[] = [];
-
-    const resize = () => {
-      dpr = Math.min(window.devicePixelRatio || 1, 2);
-      width = parent.clientWidth;
-      height = parent.clientHeight;
-      canvas.width = width * dpr;
-      canvas.height = height * dpr;
-      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    };
-
-    const spawn = () => {
-      const horiz = Math.random() < 0.5;
-      const tracks = Math.ceil((horiz ? height : width) / cellSize);
-      const { color, colorHi } = resolveColors(canvas);
-      lines.push({
-        horiz,
-        at: Math.floor(Math.random() * tracks) * cellSize + 0.5,
-        life: 0,
-        ttl: rand(TTL_MIN, TTL_MAX),
-        color,
-        colorHi,
-      });
-    };
-
-    const tick = () => {
-      ctx.globalAlpha = 1;
-      ctx.shadowBlur = 0;
-      ctx.clearRect(0, 0, width, height);
-
-      if (--nextIn <= 0) {
-        spawn();
-        nextIn = rand(SPAWN_MIN, SPAWN_MAX);
-      }
-      for (let index = lines.length - 1; index >= 0; index--) {
-        const line = lines[index];
-        if (!line) {
-          continue;
-        }
-        line.life++;
-        drawGlitchLine(ctx, line, width, height);
-        if (line.life >= line.ttl) {
-          lines.splice(index, 1);
-        }
-      }
-
-      ctx.globalAlpha = 1;
-      ctx.shadowBlur = 0;
-      frame = requestAnimationFrame(tick);
-    };
-
-    const running = () => onScreen && document.visibilityState === "visible";
-    const start = () => {
-      if (!frame && running()) {
-        frame = requestAnimationFrame(tick);
-      }
-    };
-    const stop = () => {
-      if (frame) {
-        cancelAnimationFrame(frame);
-      }
-      frame = 0;
-      ctx.clearRect(0, 0, width, height);
-    };
-
-    resize();
-    start();
-
-    const resizeObserver = new ResizeObserver(() => resize());
-    resizeObserver.observe(parent);
-
-    const intersectionObserver = new IntersectionObserver(([entry]) => {
-      if (!entry) {
-        return;
-      }
-      onScreen = entry.isIntersecting;
-      if (onScreen) {
-        start();
-      } else {
-        stop();
-      }
-    });
-    intersectionObserver.observe(canvas);
-
-    const onVisibility = () => {
-      if (running()) {
-        start();
-      } else {
-        stop();
-      }
-    };
-    document.addEventListener("visibilitychange", onVisibility);
-
-    return () => {
-      stop();
-      resizeObserver.disconnect();
-      intersectionObserver.disconnect();
-      document.removeEventListener("visibilitychange", onVisibility);
-    };
-  }, [reduced, cellSize]);
-
-  if (reduced) {
-    return null;
-  }
-
-  return (
-    <canvas
-      ref={canvasRef}
-      aria-hidden
-      data-slot="grid-fx"
-      className={cn("pointer-events-none absolute inset-0 h-full w-full", className)}
-      style={{
-        zIndex: -1,
-        WebkitMaskImage: "radial-gradient(120% 95% at 50% 0%, #000 30%, transparent 100%)",
-        maskImage: "radial-gradient(120% 95% at 50% 0%, #000 30%, transparent 100%)",
-        ...style,
-      }}
-      {...props}
-    />
-  );
-}
-
-export { GridFx };