Wave Background — React Animated Background

import { WaveBackground } from "@/components/WaveBackground";

export function Hero() {
  return (
    <section style={{ position: "relative", minHeight: "100dvh" }}>
      <WaveBackground
        speed={1}
        amplitude={1}
        frequency={2.5}
        from="#020617"
        to="#1d4ed8"
        accent="#38bdf8"
        {...{
          interactive: true,
          speed: 1,
          amplitude: 1,
          frequency: 2.5,
          from: "#020617",
          to: "#1d4ed8",
          accent: "#38bdf8"
        }}
      />
      <div style={{ position: "relative", zIndex: 1, padding: "8rem 2rem" }}>
        <h1>GPU effects, native React</h1>
      </div>
    </section>
  );
}