Terrain Ridge — React Animated Background

import { TerrainRidge, TERRAIN_RIDGE_PRESETS } from "@/components/TerrainRidge";

export function RangeHero() {
  return (
    <section style={{ position: "relative", minHeight: "100dvh" }}>
      <TerrainRidge {...TERRAIN_RIDGE_PRESETS.dusk}
        {...{
          interactive: true,
          speed: 1,
          intensity: 1,
          layers: 5,
          ruggedness: 0.8,
          from: "#1b2a4a",
          to: "#e8956b",
          accent: "#141a2e"
        }}
      />
      <div style={{ position: "relative", zIndex: 1, padding: "8rem 2rem" }}>
        <h1>Range after range</h1>
      </div>
    </section>
  );
}