Fluid Gradient — React Animated Background

import { FluidGradient, FLUID_PRESETS } from "@/components/FluidGradient";

export function Hero() {
  return (
    <section style={{ position: "relative", minHeight: "100dvh" }}>
      <FluidGradient {...FLUID_PRESETS.sunset}
        {...{
          interactive: true,
          speed: 0.45,
          warp: 2.6,
          scale: 1.5,
          from: "#355c7d",
          to: "#6c5b7b",
          accent: "#c06c84"
        }}
      />
      <div style={{ position: "relative", zIndex: 1, padding: "8rem 2rem" }}>
        <h1>Fluid by default</h1>
      </div>
    </section>
  );
}