Fog
Soft clouds that keep the copy readable
The fuzzy mist from the landing hero, extracted as its own header. Heavily blurred brand and accent washes sit behind centred copy — atmosphere without imagery.
atmosphere index
Twelve washes, one shared API.
Every section takes the same eyebrow, title, description, intensity, animate, speed and actions slot. Theme tokens keep each wash in sync with the active palette.
shared props
One API across every wash.
| Prop | Type | Default | Notes |
|---|---|---|---|
| eyebrow | string|null | null | Small uppercase label above the title |
| title | string|null | null | Primary headline |
| description | string|null | null | Supporting copy under the title |
| as | string | h2 | Heading element tag for the title |
| intensity | float | 1 | Wash strength, clamped to 0.5–2.5 |
| animate | bool | true | Enable slow wash motion |
| speed | float | 1 | Motion tempo, clamped to 0.5–2.5 |
| actions | slot | — | CTA row under the description |
usage
Copy a starting point.
Swap the variant name — fog, tide, aurora, and the rest — while keeping the same props.
Horizon
A dawn band instead of floating clouds
A soft sky wash settles into a low brand horizon. No orbs — just a measured light field that keeps the hero calm and readable.
Beam
One light source, studio clarity
A conical wash from the upper corner stands in for fog. Corner registration marks keep the construction intentional rather than decorative.
Tide
Layered fields that suggest depth
Three soft elliptical washes drift at different rates — depth from stacking, not from a single blurry cloud.
Grain
Mist with a tactile surface
A quiet brand wash under film grain. Less colour bloom, more paper-like texture — useful when fog feels too soft.
Halo
A soft bloom behind the words
One centred radial wash puts the headline in a quiet spotlight — atmosphere that focuses attention instead of filling the sky.
Veil
Sheer planes of light
Soft vertical curtains replace fog orbs. Skewed translucent bands suggest depth and architecture without imagery.
Sheen
Light catching polished glass
A single diagonal specular sweep — cleaner than fog, cooler than a studio beam. Useful when the hero should feel precise.
Ripple
Concentric quiet rings
Soft rings expand from the centre like water disturbed once. Geometric structure without hard edges or cloudy mist.
Perspective
A vanishing-point floor under the copy
An angled grid recedes into depth — bold pulsing joins mark each intersection so the lattice reads as a connected stage, not soft fog.
Galaxy
A deep field that still reads clearly
Nebula washes and twinkling stars on a dark field. Celestial depth without images — dial intensity for denser glow, speed for quicker twinkle.
Aurora
Colour curtains that drift and shimmer
Vertical aurora bands move slower than fog and feel more kinetic than veil. Distinct sky energy for dark heroes.
playground
Dial intensity, speed and motion live.
Same fog wash — change the shared props and watch the CSS variables update. Motion still respects prefers-reduced-motion.
Live fog
Tune the wash until it feels right
Drag the controls above. Intensity strengthens colour; speed shortens drift cycles; uncheck animate for a still construction.