Living backgrounds

import { useState } from "react"
import { GroundworkBackground } from "@/components/blocks/groundwork-background/groundwork-background"

export function BackgroundExample() {
  const [paused, setPaused] = useState(false)
  return <div
    className="relative min-h-96 overflow-hidden bg-primary text-primary-foreground"
  >
    <GroundworkBackground
      variant="survey"
      seed={42}
      ruggedness={0.55}
      density={16}
      relief={180}
      bearing={45}
      terraces={7}
      datum={0.62}
      connections={2}
      duration={48}
      speed={1}
      amplitude={14}
      scale={1}
      opacity={0.48}
      animated={true}
      floating={false}
      surveyMotion="evolve"
      evolutionAmount={0.65}
      terrainFrequency={3.6}
      terrainWarp={0.85}
      extent="tile"
      effectSpeed={1}
      lineWeight={1}
      siteSize={1}
      showScan={true}
      showGrid={true}
      showMarkers={true}
      showShading={true}
      showHatching={true}
      showDatum={true}
      showRoutes={true}
      showSignals={true}
      paused={paused}
    />
    <div className="relative z-10 p-6">
      <button onClick={() => setPaused(value => !value)}>{paused ? "Play" : "Pause"}</button>
    </div>
  </div>
}

Use animated=false for a static fallback. The optional motion controller provides looping tours and pointer interaction, with reduced-motion, visibility and pause handling. Geometry stays seeded and repeatable.