Bolt prompt for an animated hero background

Add an animated background to the hero of my a project management SaaS project in Bolt. Create one new file, src/components/HeroBackground.tsx, and mount it inside the existing hero as the bottom layer. Do not modify the hero's copy, buttons, or spacing, and change no other file beyond the single import.

Wiring: the hero container gets position relative and overflow hidden; HeroBackground renders absolute and full-bleed with pointer-events none, under a content wrapper with a higher z-index. That is the whole integration surface.

Pick one technique to match the visual direction: blurred gradient blobs drifting on CSS transforms for soft directions, a canvas particle drift for dark or technical directions, or slow-rotating wireframe geometry for editorial and brutalist directions. Whichever you pick, it should register with engineering managers at startups as atmosphere, not as a feature.

Engineering rules, because Bolt hot-reloads constantly: any rAF loop lives in a useEffect whose cleanup cancels the frame and removes listeners — otherwise hot module reload stacks duplicate loops and the preview crawls. Cap particles at 60 and devicePixelRatio at 2. Animate transform and opacity only. A prefers-reduced-motion query must skip the loop entirely and paint one static frame.

Visual direction:
Minimal dark style. Near-black canvas (#0A0A0B) with one elevated surface tone (#141416) for cards — never more than two surface steps. Hairline borders (1px, white at 8% opacity) instead of shadows; if a shadow is unavoidable use 0 1px 2px rgba(0,0,0,0.4) and nothing softer. Text in exactly three steps: white at 92% for headings, 60% for body, 40% for captions. Generous negative space — section padding at least 120px on desktop, 64px on mobile. The accent color appears only on interactive elements and one hero highlight, nowhere else.

Palette: a strict neutral ramp (white, #F5F5F5, #E5E5E5, #737373, #171717) carries the entire interface; pick one accent and use it only for primary CTAs, active states, and a single hero highlight. If the accent appears more than five times per viewport it stops being an accent. Keep semantic colors (success, error) desaturated so the accent stays in charge.
Typography: one geometric sans (a Futura/Poppins-class face) at three weights maximum (400/500/700). Scale: 64-88px hero, 32px section heads, 18px lede, 16px body, 13px caps labels with 0.08em tracking. Tight headline leading (1.05-1.1), relaxed body (1.6). Let the geometry carry the personality — no italics; weight and size do all hierarchy.
Motion: none. Zero scroll animations, zero entrance effects — the page is fully composed the instant it paints. Spend the motion budget on input feedback instead: 120-150ms ease-out color and transform transitions on hover and press states only. Hold this constraint absolutely; it is a statement, not an omission.

Motion is the intensity dial: element count, drift distance, and loop speed scale together, and the calm end should be barely perceptible.

Legibility: keep a 72px calm margin around the headline block, add a scrim if the effect brightens, and confirm the primary button reading "start a free trial" holds full contrast at every point in the loop.

Responsive: under 640px, halve the element count and lengthen the loop; on phones the effect should nearly disappear.

Verify in the instant preview: (1) frame rate stays smooth after three consecutive hot reloads — the duplicate-loop test, (2) reduced-motion emulation shows a still frame, (3) every hero control still clicks with the layer mounted, (4) only the new file and one import changed.