CSS Scenes

All scenes 10 Stories 3 Interactive 2 Ambient loops 5

Loops 3.3 KB

Aurora

Soft bands of violet light turning slowly across a dark sky, drawn by one blurred conic gradient on a registered angle
- registered-properties
- conic-gradient
- seamless-loop
How it's made

Techniques
- @property <angle> animated with plain keyframes
- conic-gradient sweeping from the registered angle
- heavy blur turning hard gradient edges into glow
Features
- @property newly available (2024-07-09)
- conic-gradient() widely available
Source for Aurora
Interactive 10.7 KB

Clockmaker's Observatory

A clockmaker's observatory beneath a copper dome: a brass telescope, a moving four-planet orrery, instrument shelves and a workbench crowded with books, charts and tools.
- css-art
- clockwork
- 3d
- interactive
Inspired by Orrery: clockmaking origins and orbital mechanisms by Wikipedia contributors
How it's made

Techniques
- Scoped 3D orbits
- Layered material gradients
- Masked conic gears
- Trigonometric fasteners
- CSS-only state controls
- Portrait recomposition
Features
- 3D transforms (perspective / preserve-3d) widely available; scoped to the orrery, with a composed 2D fallback
- mask-image widely available (2023-12-07); radial cutouts enhance complete gear discs
- clip-path: polygon() widely available (2021-01-21); base silhouettes retained
- CSS trigonometric functions (sin() / cos()) widely available (2023-03-13); explicit coordinate fallback
- individual transforms (rotate / translate) widely available (2022-08-05)
- light-dark() newly available (2024-05-13); explicit scheme-based palette fallback
- :has() widely available (2023-12-19); optional label styling only, controls use sibling selectors
- prefers-reduced-motion widely available; separated static planets, resting pendulum and instant lamp changes
Source for Clockmaker's Observatory
Interactive 5.0 KB

Day / Night Hillside

A hillside town that swings from day to night when you toggle the switch
- state-toggle
- registered-properties
- crossfade
- inline-svg
How it's made

Techniques
- Checkbox as preceding sibling (no :has())
- Typed @property palette crossfade
- One pivot rotation swaps sun and moon
- Registered angle driving the haze
- sibling-index() stagger with --i fallback
- Masked-disc crescent moon
- --u stage unit and bottom-anchored SVG crop
- Two-tone focus ring
- light-dark() chrome and reduced motion
Features
- @property (<color>, <angle>) newly available (2024-07-09); palette snaps without it
- sibling-index() / sibling-count() newly available (2026-08-18); --i fallback
- sin() / min() / max() widely available
- light-dark() / color-scheme newly available (2024-05-13); UI chrome only
- individual transforms (translate, rotate) widely available
- mask-image (crescent moon) widely available (2023-12-07)
- prefers-reduced-motion widely available
Source for Day / Night Hillside
Plays through 3.9 KB

Full Send

The words FULL SEND in giant outlined letters. Their outlines draw in, lime floods them from the bottom up, colour sweeps across the line ALL GAS, NO BRAKES. and a tilted lime ticker runs past.
- story
- typography
- svg
- background-clip
Inspired by landonorris.com (outlined display type, lime ticker) by OFF+BRAND
How it's made

Techniques
- stroke-dashoffset draw-in on SVG text, shared through <use>
- clip-path flood on a second <use> of the same text
- background-clip: text colour sweep
- finished-frame base styles with from-only keyframes
- one shared clock that alternates, so the poster draws and undraws
Features
- background-clip: text limited availability (Chrome/Edge 120, Safari 14) per web-features 3.40.1; solid text fallback
- clip-path (animatable inset()) widely available
- light-dark() newly available (2024-05-13)
Source for Full Send
Loops 7.3 KB · uses JS

Kaleidoscope

Looking down a brass kaleidoscope. Fixed mirrors fold the coloured glass beads and shards in the object cell into a six-fold pattern. The barrel turns endlessly, tumbling the glass so the pattern keeps changing and never repeats.
- symmetry
- clip-path
- gradients
- infinite-loop
How it's made

Techniques
- mirrored clip-path wedges (rotate + scaleY(-1))
- sibling-count() and sibling-index() fold count with :nth-child fallback
- fixed mirrors over a turning object cell with tumbling fragment layers
- mix-blend-mode switched by colour scheme
- endless barrel turn with coprime animation periods
- per-visit random() with element-shared, keeping the mirrors symmetric
- optional adaptive size: a small script fits the eyepiece to the frame rate
Features
- sibling-count() / sibling-index() newly available (2026-08-18); :nth-child fallback fixed at 12 wedges
- CSS random() limited availability (Safari 26.2; not Chrome or Firefox, checked from knowledge, not web-features); without it the pattern starts the same each visit but still never repeats
- individual transform properties (translate, rotate) widely available
- CSS trigonometric functions (tan()) widely available
- clip-path: polygon() widely available
- mix-blend-mode widely available
- light-dark() newly available (2024-05-13)
Source for Kaleidoscope
Plays through 4.8 KB

Liftoff

A rocket on a launch pad counts down, lifts off, drops its booster and climbs through the clouds into space.
- story
- counters
- shape
Inspired by Artemis 2 - Scroll to Launch by Chris Bolson
How it's made

Techniques
- the whole launch as keyframe percentages on one --loop clock
- @property <integer> countdown and altimeter via counter()
- composed scale + transform flame flicker
- shape() nose cone with polygon fallback
- sibling-index() smoke spread with --i fallback
Features
- @property newly available (2024-07-09)
- shape() newly available (2026-02-24); polygon() fallback
- sibling-index() newly available (2026-08-18); --i fallback
Source for Liftoff
Loops 6.9 KB

Rainy Alley

A narrow city alley at night in the rain. Cars pass along the street at the far end under two street lights, and the wet asphalt mirrors their lights, the lit windows and a pink BAR sign as long, wavering streaks
- seamless-loop
- reflection
- mask-image
- conic-gradient
How it's made

Techniques
- One background, painted twice
- Masks for where the ground is wet
- Perspective windows inside the light layer
- Cars in both copies
- A water plane at the alley's vanishing point
- Perspective bricks from one conic gradient
- Rain layers from one rule
- Ripples placed by sin() and cos()
- Performance switches
Features
- custom properties + individual transforms (scale) widely available
- mask-image widely available (2023-12-07)
- repeating-conic-gradient widely available
- 3D transforms (rotate: x, perspective, perspective-origin) widely available
- SVG data URI as a background layer widely available
- clip-path: polygon() widely available
- sin() / cos() widely available
- sibling-index() newly available (2026-08-18); --i fallback
- light-dark() newly available (2024-05-13)
- prefers-reduced-motion widely available
- :not() with attribute selectors (performance switches) widely available
Source for Rainy Alley
Loops 5.0 KB

Ramen Counter

A late-night ramen counter in Tokyo: a steaming bowl on the counter, a red paper lantern swaying and a noren curtain stirring in the doorway
- tokyo
- seamless-loop
- shape
- light-dark
Inspired by Rise & Steam (sleepy dumplings) by Gemma Croad, Tokyo Subway by this gallery
How it's made

Techniques
- clip-path: shape() keyframe morph
- blur on parent of clipped children
- one-curve gust easing with linear()
- corner-shape: bevel tags
- sibling-index()/sibling-count() stagger with --i fallback
- light-dark() scene palette
Features
- shape() newly available (2026-02-24); wisps fall back to soft rising blobs
- linear() easing widely available (2026-06-11)
- corner-shape limited availability (Chrome/Edge 139 only); falls back to plain border-radius
- sibling-index() / sibling-count() newly available (2026-08-18); --i fallback
- light-dark() newly available (2024-05-13)
Source for Ramen Counter
Loops 4.2 KB

Tokyo Subway

Inside a Tokyo metro car at night, tunnel lights streaming past the windows
- parallax
- seamless-loop
- gradients
- mask-image
How it's made

Techniques
- period-locked repeating-gradient tile loop
- ratio-locked parallax
- mask-image window cutouts
- light-dark()
- sibling-index() stagger with --i fallback
Features
- light-dark() / color-scheme newly available (2024-05-13)
- mask-image widely available (2023-12-07)
- sibling-index() newly available (2026-08-18); --i fallback
- individual transforms (translate, rotate) widely available
Source for Tokyo Subway
Plays through 4.6 KB

Vertical Drive

A top-down race circuit over a contour map. A lime race car drives three laps, passing three rivals, while a lap counter, position and race clock count up.
- story
- motion-path
- counters
- shape
Inspired by landonorris.com (lime on near-black, contour lines) by OFF+BRAND
How it's made

Techniques
- offset-path car driven round the circuit by keyframes
- shape() motion path that scales with the board, path() fallback
- the whole race as keyframe percentages on one --loop clock
- @property <integer> race clock split with round() and mod() into counter()
- SVG <use> layers for kerbs, tarmac and centreline from one path
Features
- motion path (offset-path, offset-distance, offset-rotate) widely available (2025-03-12)
- shape() in offset-path shape() newly available (2026-02-24); fixed-size path() fallback
- @property newly available (2024-07-09)
- round() and mod() newly available (2024-05-17); clock reads 0:00.00 without them
- light-dark() newly available (2024-05-13)
Source for Vertical Drive

Whole worlds, drawn in CSS.

Techniques

Features

Techniques

Features

Techniques

Features

Techniques

Features

Techniques

Features

Techniques

Features

Techniques

Features

Techniques

Features

Techniques

Features

Techniques

Features