Metallic Lava

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/lib/utils"
5 
6interface MetallicLavaProps extends React.HTMLAttributes<HTMLDivElement> {
7  /** Base metallic color */
8  color?: string
9  /** Highlight/specular color */
10  highlightColor?: string
11  /** Animation speed multiplier (1 = default) */
12  speed?: number
13  /** Number of lava blobs */
14  blobCount?: number
15  /** Visual mode - "dark" renders light blobs on dark, "light" inverts */
16  mode?: "dark" | "light"
17}
18 
19const MetallicLava = React.forwardRef<HTMLDivElement, MetallicLavaProps>(
20  (
21    {
22      color = "#8a9bae",
23      highlightColor = "#c5d0dc",
24      speed = 1,
25      blobCount = 28,
26      mode = "dark",
27      className,
28      children,
29      ...props
30    },
31    ref
32  ) => {
33    const canvasRef = React.useRef<HTMLCanvasElement>(null)
34    const containerRef = React.useRef<HTMLDivElement>(null)
35 
36    React.useImperativeHandle(ref, () => containerRef.current!)
37 
38    React.useEffect(() => {
39      const canvas = canvasRef.current
40      const container = containerRef.current
41      if (!canvas || !container) return
42 
43      const ctx = canvas.getContext("2d")
44      if (!ctx) return
45 
46      // Padding around canvas for blur/contrast filter - prevents edge artifacts
47      const PAD = 80
48      let w = 0
49      let h = 0
50      let rafId = 0
51 
52      interface Blob {
53        x: number
54        y: number
55        rx: number
56        ry: number
57        rotation: number
58        rotSpeed: number
59        vx: number
60        vy: number
61        phase: number
62        freq: number
63        ampX: number
64        ampY: number
65        pulsePhase: number
66        pulseSpeed: number
67        numPoints: number
68        offsets: number[]
69      }
70 
71      let blobs: Blob[] = []
72 
73      function initBlobs() {
74        // Distribute blobs in a jittered grid for even coverage
75        const cols = Math.max(1, Math.ceil(Math.sqrt(blobCount * w / h)))
76        const rows = Math.max(1, Math.ceil(blobCount / cols))
77        const cellW = w / cols
78        const cellH = h / rows
79 
80        blobs = Array.from({ length: blobCount }, (_, i) => {
81          const col = i % cols
82          const row = Math.floor(i / cols)
83          const baseSpeed = 0.12 + Math.random() * 0.35
84          const angle = Math.random() * Math.PI * 2
85          const baseR = 50 + Math.random() * 120
86          const stretch = 0.5 + Math.random() * 1.0
87          const numPoints = 8 + Math.floor(Math.random() * 5)
88          const offsets = Array.from(
89// … truncated