graphics 24 effects, one stylesheet

Look at it.

Everything below is CSS. No canvas, no WebGL, no image assets, no animation library. Two files — 08-showcase.css for surfaces and 09-cinema.css for time — about 26 KB together before gzip. Delete them and the product still works; it just stops showing off.

Back to the site

Every one of them stops under prefers-reduced-motion, and the three expensive layers switch themselves off on low-power devices.

Atmosphere

The background is four layers deep

Mesh field, starfield, perspective floor and grain — each independent, each removable.

Mesh gradient field.mesh

Four radial sources on screen blend, drifting on 24 to 40 second loops that never resync

Starfield.stars

Three parallax depths built entirely from box-shadow. No images, no DOM nodes per star

Perspective floor.tron

A single element rotated 72 degrees in 3D with a scrolling background position

Type

Five things to do to a headline

XAUUSD

Iridescent.holo

A conic gradient clipped to the glyphs, with the angle animated through @property

341 ms

Gradient sweep.grad-sweep

A light passes across the text every seven seconds

BRIDGE

Extruded.extrude

Eight stacked text-shadows plus one blurred layer for the bloom

hover me

Chromatic aberration.chroma

Red and cyan shadows split apart on hover. Costs nothing

EXECUTED

Decrypting.scramble

Glyphs settle left to right when the element scrolls into view

one by one

Letter stagger.stagger

Split into spans, each with a 22 ms delay and a rotateX entrance

Surfaces

Glass, edges and light

Glass card.glasscard

Backdrop blur with saturation, a diagonal sheen, and an inset top highlight

Running border.snake

A single bright arc travels the perimeter using conic gradient plus mask compositing

Radar sweep.radar

One conic gradient rotating behind the panel content

move the pointer over me

Spotlight.spotlight

A radial light follows the cursor, positioned from two custom properties

Halftone.halftone

A dot matrix masked to fade out — texture without an image

Liquid blob.blob

Eight border-radius values morphing on a fourteen second loop

Motion

Things that respond to you

3D card stack.cardstack

Pure CSS. Perspective on the parent, a rotate on hover, no JavaScript at all

Magnetic button.magnet

The button leans toward the cursor and springs back on leave

frontback

Depth parallax.depth

Layers move by their data-z factor as the pointer crosses the block

revealed

Clip wipe.wipe

A clip-path inset animated from full to zero

Odometer.odo

Each digit rolls up into place with a per-digit delay

the bar at the very top of this page

Scroll progress.scrollbar-top

Native animation-timeline: scroll() where supported, rAF fallback where not

Cinema

The homepage runs on a beat

One beat is 80ms. Every element in the opening sequence lands on one, so twelve separate animations read as a single directed move.

Beat sequence.seq

data-beat sets the delay as a multiple of --beat, so retiming the whole sequence is one number

word by word

Kinetic type.kinetic

Split into words, each on a hinge: rotateX from -72 degrees with a blur that resolves

Anamorphic flare.flare

A streak with a radial bloom at its centre, crossing every eleven seconds

scroll this page — the hero pushes in and racks out of focus

Camera push.camera

Native animation-timeline: view(), scale and blur tied to how far the hero has left

entrance

Particle burst.burst

Twelve spans thrown along fixed angles, each carrying its own --a

Velocity lean.velskew

Scroll speed feeds a --vel property; the element skews with it and settles when you stop

REJECTED

Glitch.glitch

Two clipped copies jitter for a fifth of a second every seven. Rare on purpose

341ms

Motion trail.trail

Cyan and violet ghosts offset behind the glyphs, the cheap way to imply speed

Ken Burns.kenburns

The background never sits still: a 34 second scale and drift, alternating

Honesty

What all of this costs

Weight

08-showcase.css and 09-cinema.css together, before gzip. No images, no library, no font beyond the three the site already loads.

Properties animated

transform, opacity, filter and clip-path. Nothing here triggers layout, so the compositor does the work and the main thread stays free.

Switches off when

prefers-reduced-motion, prefers-reduced-data, a slow display, and any screen under 900px drops the expensive layers.

The restraint is the point Every effect on this page is available to the rest of the site, and most of the site uses none of them. A dashboard someone stares at for eight hours a day should be calm; a landing page has three seconds to be memorable. Same stylesheet, opposite dosage.