Mesh Gradient — React Animated Background

import { MeshGradient, MESH_GRADIENT_PRESETS } from "@/components/MeshGradient";

export function MeshHero() {
  return (
    <section style={{ position: "relative", minHeight: "100dvh" }}>
      <MeshGradient {...MESH_GRADIENT_PRESETS.aurora}
        {...{
          interactive: true,
          speed: 0.6,
          scale: 3.2,
          softness: 0.09,
          from: "#0b1120",
          to: "#155e75",
          accent: "#7c3aed",
          deep: "#f472b6"
        }}
      />
      <div style={{ position: "relative", zIndex: 1, padding: "8rem 2rem" }}>
        <h1>Color fields, computed live</h1>
      </div>
    </section>
  );
}