Collection · components
Quiet motion
Motion the stylesheet can quiet, with no JavaScript to argue with.
Rule behind this list: The animated components whose scenes drive every animation from CSS — so the site-wide prefers-reduced-motion rule covers them completely, measured by the motion audit rather than hand-picked. A JS-driven scene has to branch itself; these never need to.
Featured member
Flip Card Duo
A 3D card that turns on click or tap (not hover) — the interaction model survives touch. Front for the promise, back for the details.
a11y 96 · Q 96 · 1.7 KB · every animation is a class or an inline keyframe — the media query owns all of it
showing 10 of 10 members
Flip Card Duo
A 3D card that turns on click or tap (not hover) — the interaction model survives touch. Front for the promise, back for the details.
Polaroid Stack
Fanned polaroids that lift on hover and come to the front when clicked — a gallery with the tactility of a table, zero libraries.
Success Check (stroke-draw)
An SVG check that draws its own ring and tick on entry. Reduced motion receives the finished mark — the information, minus the theatre.
Donut with Center Label
Pure SVG donut whose arc draws itself once — the percent lives as text in the center and in the aria-label, so the visual is a courtesy.
Status Ping Dot
Three severities; only 'degraded' pings — 'ok' holds still, because calm computing means motion is a signal, not a default. Text labels do the real work.
Skeleton-to-Content Fade
Shimmer to content with matched dimensions — the avatar, the lines and the card never move between loading and loaded, so nothing shifts.
Skeleton Table
The loading skeleton whose column widths are the real table's widths — the swap shifts nothing, which is the whole point.
Scroll Progress Rail
A reading-progress line pinned to the top of a scroll container, with a side gauge for long pages. Barely code, instantly useful on docs and articles.
Scroll-linked Hue Hero
A hero that repaints through the colour wheel as you read: one scroll handler converts scrollTop into a hue angle that drives sky, chip and CTA glow together.
Tilted Hero CTA
A hero button that tips toward the pointer, capped at 8° with the label counter-rotated so the words stay level. Arrow keys tilt it for keyboard readers and reduced motion leaves it upright.
Bundle estimate
14.1 KB
upper bound — sum of members
Accessibility
95
lowest member score · 1 keyboard-first
Last updated
2026-09-12
newest member publish date
Members
10
of 44 matches
Collections are URLs, not saved state — copy the address bar and send it. The rule above explains membership, so nobody has to guess why an item is in or out.
All collections →