For the agent-readable index of this site, see /llms.txt.
Ambient Layers
The room around the room. Weather drifts in, mood bleeds from the edges, impact ripples through the frame, and the whole world tints to match the hour — all behind your content, never in its way.
Ambient Layers wrap the world around your content in four distinct ways. Atmosphere brings the weather — rain, snow, ash, fog — drifting quietly behind everything. Psychology shapes how a moment feels, framing the edges with danger, tension, focus, or dreamlike haze. Environment sets the hour and place, tinting the whole scene like dawn, neon, or candlelight. Action reacts to a single beat: a hit, a flash, a burst of speed that comes and goes. They all live behind your content and never get in its way.
Preset
Choose a preset to set the scene
One-shot transient effects that punch through the frame and auto-clear
How It Works
Every effect is pure CSS and SVG — no <canvas>, no WebGL, no JavaScript animation
loops. Particle fields (rain, snow, ash, storm) are real DOM
elements animated via CSS @keyframes and transform3d, which the browser composites on the GPU
automatically. Complex distortions (underwater caustics, heat
shimmer, film grain, glitch) use inline SVG filters — feTurbulence and feDisplacementMap — with <animate> elements for real-time parameter mutation.
The result is a zero-dependency rendering pipeline that doesn't
fight the browser — it is the browser. Every effect
runs on the same compositor that paints the rest of the page,
respects prefers-reduced-motion, and costs no additional
JavaScript per frame. The only JS is a single requestAnimationFrame callback that drives one float (--ambient-level) for smooth intensity decay — not per-particle, per layer.
Why not Canvas or WebGL?
Canvas-based rendering requires manual hit-testing, breaks native
accessibility, and forces every visual update through JavaScript.
The new HTML-in-Canvas proposal (WICG, currently
behind a Chrome flag) can rasterize live HTML into a <canvas> for shader effects — but drawn
elements lose interactivity inside the canvas, and
the API is experimental with no cross-browser support. Our CSS/SVG
approach delivers the same atmospheric effects with zero runtime cost,
full browser compatibility, and inherent accessibility.
For effects that genuinely need per-pixel shaders
(physically-based refraction, volumetric lighting), we're
exploring targeted feDisplacementMap pipelines and will evaluate HTML-in-Canvas
when it ships — as an opt-in enhancement, not a foundation rewrite.
Atmosphere
The weather of the world. A continuous physical presence drifting behind everything, setting the climate of the scene.
Variant
Intensity
Psychology
The inside of someone's head. Edge-framed mental states that colour how a moment feels without touching what's on screen.
Variant
Intensity
Environment
The hour and the place. A sticky colour grade that tints the whole scene to set time of day and location.
Variant
Intensity
Action
A single beat that punches through the frame, then gets out of the way. Use it when something happens — a hit, a flash, a burst.
Variant
Radial shockwave for heavy hits, landings, collisions, and breached doors.
Intensity
Reference
Atmosphere
Weather and physical sensory layers. Persistent with auto-decay. Sits behind your content.
rain— Vertical Downpour- Vertical particle field across three parallax depth bands. Noir scenes, melancholy, cleansing moments, night city streets.
snow— Quiet Fall- Soft radial flakes with gentle sway and slow rotation. Winter forests, hushed stillness, fragile beauty, memorial scenes.
ash— Burned Aftermath- Torn-paper flakes tumbling down with ~10% glowing embers. Post-apocalypse, scorched cities, funeral pyres, nuclear winter.
storm— Hostile Sky- Dense rain with lightning flashes and horizontal wind drift. Peak weather drama, climactic chaos, sea voyages in peril.
wind— Dry Tension- Horizontal dust or leaf streaks without precipitation. Deserts, plains, the stillness before a fight, dust storms building.
fog— Lost Bearings- Volumetric turbulence with vertical gradient and two masked banks. Misty moors, horror scenes, liminal transitions, dream logic.
underwater— Submerged Drift- Soft SVG displacement with cool tint and drifting caustics. Diving, drowning, amniotic dreams, near-death submersion.
heat— Oppressive Warp- Real SVG displacement melt above a warm wash. Desert exteriors, forges, volcanic vents, fever delirium.
Psychology
Edge-framed emotional states. Persistent with auto-decay. Colors mood without obscuring the scene center.
danger— Active Threat- Crimson vignette pulsing on a heartbeat rhythm from the edges. Predators nearby, boss encounters, low-health moments, red alert.
tension— Pressure Building- Staccato micro-tremors with a slowly constricting vignette. Negotiations about to break, sneaking past patrols, withheld truths cracking.
dizzy— Lost Equilibrium- Two off-center dark lobes in slow counter-orbits. Concussion, drunk or poisoned perception, vertigo on a high ledge, waking disoriented.
focus— Locked In- Living tunnel vision that breathes and tightens toward center. Aiming the final shot, flow state, sniper patience, surgical precision.
filmGrain— Memory Recording- Heavy sepia wash with irregular frame-drop flickers. Flashbacks, noir stylization, found footage, unreliable narrators.
haze— Dreamlike Layer- Multi-bloom drift with wide hue rotation. Psychedelic sequences, visions, romantic overwhelm, reveries softening.
calm— Earned Relief- Cool vignette with a slow breathing pulse. Returning to safety after combat, healing scenes, reconciliation, quiet after exertion.
serenity— Deep Stillness- Pale outer glow with near-imperceptible drift. Deep meditation, chosen death, journey's end, transcendence.
success— Earned Victory- Warm green vignette with a single outward bloom from center. Quest completed, lock opened, level-up, plan visibly working.
fail— Rejection Beat- Red edge flash with sharp attack and quick decay. Failed action, wrong answer, denied access, critical miss, companion lost.
awe— Sublime Revelation- Pale gold-white radial brightening from center. First sight of a cathedral or cosmic vista, witnessing a miracle, a reframing revelation.
melancholy— Held Grief- Desaturated cool vignette with slow downward drift. After permanent loss, bittersweet endings, rain-soaked goodbyes, the weight carried forward.
Environment
Sticky baseline color grades. Sets hour and place. No decay, no animation — the LUT of the scene.
dawn— Sunrise Bloom- Cool blue sky above, warm peach horizon, slow sunrise glow. Morning beginnings, long darkness ending, emotional recovery.
dusk— Dying Light- Deep orange bleeding vertically into violet. Sunset scenes, final conversations, romantic and elegiac moments outdoors.
candlelit— Intimate Firelight- Warm golden radial spotlight with strong edge falloff. Fire-lit interiors, quiet confessions, ritual chambers, gothic libraries.
night— Cool Darkness- Even deep-blue wash across the viewport. Generic night, moonlit stealth, calm night dialogue without immediate danger.
neon— Synthetic Glow- Cyan and magenta cast bleeding across the scene. Cyberpunk streets, clubs, arcades, wet reflective city nights.
overcast— Drained Sky- Flat grey-blue desaturated wash with slight green undertone. Bleak daytime exteriors, cemeteries, battlefields, emotional numbness.
sickly— Quiet Wrongness- Green-yellow radial glow with vignette darkening. Plague zones, cursed villages, fever delirium, abandoned medical facilities.
toxic— Active Hazard- Saturated irradiated green, even chemical cast. Radioactive zones, chemical spills, acid swamps, biohazard interiors.
underground— Buried Pressure- Dark cool-grey radial with heavy edge darkening. Caves, catacombs, deep mines, bunker depths, claustrophobic darkness.
Action
Transient one-shot beats. Fire once, auto-unmount. Use for discrete moments, never for sustained mood.
impact— Shockwave Hit- Radial shockwave ring expanding from center. Heavy punches, landings, collisions, critical hits, doors being breached.
speed— Acceleration Sweep- Three-layer parallax sweep with radial edge mask. Dashes, sprints, launches, chase sequences, vehicles taking off.
glitch— Reality Stutter- RGB chromatic aberration applied briefly to underlying content. Simulation hiccups, hack attacks, reality tears, AI masks slipping.
flash— White Pulse- Full-screen bright pulse with quick rise and decay. Lightning strikes, flash grenades, sudden revelations, teleport arrivals.
reveal— Curtain Rise- Radial expand wipe from center outward. Scene openings, chapter starts, unveiling locations, scan pulses finding targets.
dissolve— Soft Exit- Soft fade to transparent across a gentle blur. Scene endings, dreams dissolving, gentle death transitions, time-skip exits.
shake— World Tremor- Damped translate random walk on the layer root. Nearby explosions rattling the environment, large creatures approaching, earthquakes, structural damage.
zoomBurst— Focus Punch- Brief radial scale with outward motion blur from center. Dramatic reveals, decision beats, boss spawns, attention collapsing to one point.
Most scenes need at most one or two layers. One variant per category at a time. Ambient is seasoning — contrast and restraint make it land.