v0.1.0 · 12 patterns · 3 templates

Motion patterns

A collection of web motion. Small CSS patterns and full scenes, each with a live demo, a reduced-motion state and a credit to where it came from. CSS first, no dependencies, MIT.

Get motion.css GitHub Suggest a motion

Use one in a minute

<link rel="stylesheet" href="motion.css">
<script src="play.js"></script>   <!-- only for in-view patterns -->

<h1>Hello</h1>
<p class="rise">The heading is already there; this line rises in.</p>

Or copy one entry: tokens.css plus that entry's style.css. Everything respects prefers-reduced-motion by showing the finished state.

Paper diorama hero

A hero where a cut-paper landscape builds behind a headline readable from the first frame: hills land, the house pops up, birds and a tag arrive after. Stacks on phones.

csssvgin-view

Recreation of @dikipirasaputra

Code

Squeeze headline

A kinetic shop hero: the headline squeezes in, an underline draws as it settles, copy and button follow, and a category band loops with a pause toggle.

csssvgvariable-fontload

Code

Stamp collage

A menu board where paper scraps stamp on at a tilt, price stickers pop after each one, a live dot pulses and a shape drifts in the corner.

csssvgload

Code

Crossfade

Stacked frames that take turns with no background flash. 2, 3 or 4 frames, an optional slow zoom on the image, and a pause toggle.

cssloop

Code

Draw

Lines that draw themselves: SVG strokes in sequence, a CSS-only text underline that wraps, and a link hover underline. No cap dot before the start.

csssvgin-view

Code

Drift

Ambient float on three cycles that share no factor, so the path never visibly repeats. Composes with existing transforms; phase and size controls.

csssvgloop

Code

Fade

Opacity only, for images and backgrounds. A frame that removes the white flash and layout shift, a focus-settle for photos, and an in-view variant.

csssvgload

Code

Marquee

An endless row with edge fades, reverse rows and a CSS-only pause toggle. Under reduced motion it stops and wraps so every item is readable.

cssloop

Code

Paper diorama build

A cut-paper scene that builds back to front: layers land, upright pieces pop up on a hinge, extras arrive after. Shadow, grain and a quick variant.

csssvgin-view

Recreation of @dikipirasaputra

Code

Pop

Springy scale-in on a real damped spring, with opacity done early. Variants for in-view, corner origins and a tactile button press.

cssload

Code

Pulse

A soft halo that beats then rests behind a status dot. A sonar variant for live states, a counted variant that stops, and a still ring under reduced motion.

cssloop

Code

Scroll reveal

Motion tied to scroll: eased rise, image clip and parallax, and a reading progress bar. Falls back to a one-time rise where scroll timelines are missing.

cssscroll

Code

Rise

Entry from below with opacity landing early. Variants for in-view and a soft blur, plus a stagger capped at 8 steps.

cssload

Code

Stamp

Pressed onto the surface: accelerates in, squashes on contact, settles at a tilt. An ink variant for Paid or Approved seals, and in-view.

cssload

Code

Stretch and squeeze

Variable-width type: headlines settle from wide to condensed (optionally light to heavy), and hover words widen without shifting their neighbours.

cssvariable-fontload

Code