Design intent

Target

A dark, calm hero area lit by aurora-like light. Three soft color fields (#7c3aed, #06b6d4, #ec4899) drift slowly behind the headline "Build something luminous". It should feel ambient and premium, never busy.

Motion rhythm

• Continuous, slow drift. One full wander of a color field takes roughly 20–30 seconds at speed 1×.
• Each field follows its own path with different frequencies, so the motion never visibly loops.
• Fields gently breathe in size (about ±18%).
• With prefers-reduced-motion, motion slows to about 15% instead of stopping, so the light still feels alive.

Must keep

• Colors overlap with additive (screen) blending: where fields meet, they glow brighter, not muddier.
• Heavy blur (110px). There are no visible edges or circles.
• A fine grain overlay (about 7% opacity). It stops banding and gives the image a filmic texture.
• A vignette fades the edges into the background color #05060a.
• The text stays crisp and readable on top. The headline is large, tight (−0.035em tracking) and balanced across lines.

Avoid

• Hard-edged shapes, fast motion, and hue cycling.
• Any dependency on scroll position or the cursor.

Acceptance checks

Key states

• First paint: the background #05060a shows immediately. The color fields are already placed (no flash from the top-left corner).
• Running: all three colors are visible and drift independently. Where they overlap, they glow brighter.
• Reduced motion: with OS "reduce motion" on, the drift slows to a crawl and does not jump.
• Off-screen: scroll the hero out of view. The animation pauses (no rAF work in the Performance panel).

Checks

• Parameters match the table exactly (colors, blur 110px, intensity 0.75, speed 1×).
• The headline reads "Build something luminous" and stays sharp; there is no blur on the text.
• No visible circle edges or color banding at 100% zoom.
• It fills the container on mobile (375px) and desktop (1440px) with no scrollbars or overflow.
• It holds a steady 60fps on a mid-range laptop, with no layout thrashing (transforms only).
• destroy() removes all DOM and stops the animation, so there are no leaks when the route changes.