File size: 1,148 Bytes
75fefa7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
"use client";

import React, { useEffect, useRef } from "react";
import { setIntervalOnVisible } from "@/utils/set-timeout-on-visible";
import data from "./wave-data.json";

export default function SubtleWave({ className = "" }: { className?: string }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const frameIndex = useRef(0);

  useEffect(() => {
    const animateWave = () => {
      if (containerRef.current) {
        containerRef.current.innerHTML = data[frameIndex.current];
        frameIndex.current = (frameIndex.current + 1) % data.length;
      }
    };

    // Initialize first frame
    animateWave();

    // Start animation when visible
    const cleanup = setIntervalOnVisible({
      element: containerRef.current,
      callback: animateWave,
      interval: 150, // Slower for subtlety
    });

    return () => {
      cleanup?.();
    };
  }, []);

  return (
    <div
      ref={containerRef}
      className={`font-mono text-white/10 whitespace-pre select-none fc-decoration ${className}`}
      style={{
        fontSize: "10px",
        lineHeight: "1",
        letterSpacing: "0.05em",
      }}
    />
  );
}