CSS & SVG Motion Library
Animation Patterns
Production-minded CSS and SVG motion patterns rebuilt from first principles. Each detail page pairs a live stage with notes on structure, timing, accessibility, and reduced-motion fallbacks.Live demos, implementation notes, and reduced-motion fallbacks for production CSS and SVG motion.
- Live stagesReal UI contexts instead of static thumbnails
- Copy-ready recipesMarkup, CSS, motion notes, and source tabs
- Reduced-motion awareFallback behavior called out per pattern
Pattern Library
65 patterns organized into 5 focused collections for feedback, loading, controls, layout, and visual effects. Search by behavior or tag when you already know the motion you need.
Grid Row Accordion Expand
An accordion that animates content height without measuring it — the outer wrapper is display: grid, and a CSS transition between grid-template-rows: 0fr and 1fr handles natural panel height. Three product contexts each tune the rhythm: an FAQ Stack (single-open help-centre disclosure), a Checkout Stepper (sequential summary rows), and a Filter Dock (multi-open sidebar groups with a count badge).
Shared Element Layout Transition
Progressively-enhanced gallery → detail morph using the View Transition API where supported, with a same-document FLIP fallback that keeps the same hero, title, and metadata anchors moving regardless of browser support. Three rhythms: balanced default, gentle settle, and a sharper power-curve.
Axis-aware Scroll-linked Marquee Ticker
Scroll-linked marquee ticker that documents axis ownership (X vs. Y), duplicate-track accessibility (aria-hidden on the dupe), and a static reduced-motion state. Three variants: horizontal news, vertical stats, and a paired axis-cross layout.
Fixed Background Parallax Baseline
Foreground scrolls past a fixed background image via background-attachment: fixed. Three motion shapes — Linear (steady), Eased (calmer editorial pace), and Steps (snap card-to-card) — each with explicit mobile + reduced-motion fallbacks since iOS Safari ignores fixed-attachment.
Practical Scroll Snapping Caveats
Horizontal scroll-snap rail covering the production caveats — mandatory vs. proximity, scroll-padding for sticky controls, focus framing within the snap zone, and a Padding Trap variant where a tall outlier card breaks alignment until scroll-padding is right.
Segmented Control Radio Tab Group
Segmented control built on real <input type="radio"> with an accent pill that slides under the checked option via translateX driven by a CSS custom property. Three layouts: horizontal day/week/month, vertical filters, and a compact two-segment pill.
Multiline Typewriter Line-Step Sizing
Three CSS techniques for line-by-line text reveal — a max-height stack, a clip-path top-edge wipe, and a clip-path left-edge draw. Each row appears as a complete line-step, never a partial clip; the technique determines whether rows pop in vertically, wipe down, or draw left-to-right.
Glitch Text Clip-path Slice Bands
Readable text stays still; two aria-hidden RGB-shifted decoys ride animated clip-path inset bands so the glitch fires without sacrificing legibility. Three cadences: a short edge flicker, an ambient scanline drift, and an aggressive dropout stutter.
Clip-path Reveal Transition
A layout stable reveal transition that keeps the element box fixed while clip-path shapes expose content. Three expression methods separate inset wipes, circle-origin reveals, and polygon shutters before mapping them to product surfaces.
Aurora Gradient Sweep
Layered radial-gradient blobs drift behind readable foreground content via transform + opacity, no gradient-stop interpolation. Three palettes — cool polar, warm sunset, and an ambient quiet header for low-motion contexts.
Animated 3D Cube Perspective Walkthrough
Six-face CSS 3D cube that separates scene perspective from per-face transform-order so the rotate → translateZ relationship stays inspectable. Three teaching variants: a balanced centred scene, a wide-origin camera bias, and a slow face-assembly view.
Semantic Pie/Donut Chart Markup Strategy
Conic-gradient donut chart paired with a real <ol>/<li> legend so screen readers + copy-paste users see the data without color or motion. Three layouts: side-legend stat card, stacked overlay, and a centered KPI tile.
Fixed Grid Cell Overlay Pulse
A fixed CSS grid keeps every cell in its original track while an absolutely positioned overlay pulse highlights one active cell. Three expression methods separate outline ring, inner glow, and shadow halo treatments before mapping them to product contexts.
Flip Card Front/Back Face Handling
Two faces share one plane via backface-visibility: hidden + a single rotateY/X transform, with :hover/:focus-within driving the flip. Three variants: a Y-axis profile card, an X-axis product tile, and a Quiet Swap opacity-crossfade fallback for reduced motion.
Gradient Text Sweep
A narrow highlight band sweeps across live headline text via background-clip + an explicit two-axis background-size, with a static fallback color for engines without clip support. Three variants: a wide launch headline, a tight command label, and a slower editorial kicker.
Starlight Shimmer Text
A clipped gradient glint sweeps across live text while a separate decorative sparkle layer adds star-like dots. Three cadences: a dramatic midnight pass, an orbit-sync twin-glint ping, and an ambient continuous drift.
Gooey Blob Construction
Two overlapping divs blurred + contrast-thresholded into a single gooey shape via an SVG filter chain (gaussianBlur → colorMatrix). Three motion archetypes: a calm pulse, a synchronized orbit, and a chaotic jitter.
SVG Path Command Structure for Morph-Ready Shapes
Authored SVG paths with matching command structure (same M/C/Z command count, same anchor types) so a values list can morph between them via SMIL or CSS d:path() interpolation. Three morph routes — crystal → signal, seal → spark, petal → sigil.
SVG Path Fill Reveal
Two-stage SVG draw — outline traces first via stroke-dashoffset, then the matching fill reveals as a separate phase. Demonstrated on three production icons (heart, star, checkmark) so the technique reads at a glance.
SVG Path Illustration Scene
Scene-scale SVG illustration with multiple paths drawing in a choreographed sequence, then optionally filling. Three scenes — a city skyline, a constellation, and a botanical sketch — each authored as a single self-contained SVG.
Signature Line Drawing Illusion Overview
Handwritten signature illusion drawn via stroke-dasharray timing curves that mimic a real pen's pacing. Three signatures — a relaxed cursive, a confident architect's mark, and a slow editorial scribble — each with its own pen-pressure rhythm.
Irregular Handwritten Mask Reveal
Hand-drawn brush-stroke mask reveals text/image underneath via mask-image + an animated stroke-dasharray on the mask path. Three brush styles: a soft watercolor wash, a confident marker stroke, and a textured chalk reveal.
Gradient-Clipped Rainbow Text
A multicolor linear-gradient clipped into live text via background-clip, with a static fallback for engines that don't support it. Three palettes: a balanced spectrum hero, a warmer festival CTA, and a muted dashboard treatment.
Text Scramble Reveal
Real text stays as live DOM underneath; an aria-hidden cipher overlay ticks per-character then clears via clip-path. Three variants: a binary terminal decipher, a mixed-symbol search settle, and a slower hex editorial cipher.
Variable Font Weight Morph
Live text morphs through font-variation-settings axes (wght, wdth, slnt) inside a reserved track — no scale transforms, no layout shift. Three axis programs: a weight pulse, an elastic width breathe, and a multi-axis morph.
Split Character Stagger
A grapheme-aware split-text reveal — Intl.Segmenter splits user-perceived characters so emoji + non-Latin scripts never get sliced. Three variants: a Latin headline rise, an emoji-safe sequence, and a Hangul / katakana phrase that segments correctly.
Wavy Underline Thickness Control
Native CSS text-decoration-style: wavy with animated thickness + offset — no decorative SVG layer needed. Three motion programs: a thickness breathe, a thickness + offset peak pulse, and a hue-shift color sweep.
Elastic Text Custom Easing Tradeoffs
Per-word transform snaps with bounded cubic-bezier overshoot — documents where CSS easing is enough vs. where real spring physics need JS. Three motion types: a vertical rebound, a horizontal slide-in, and a scale snap.
Neon Glow Layering with Text Shadow
A layered text-shadow stack — crisp white core + colored halo + wide outer bloom. Only opacity animates so the flicker reads electrical, not pulsing. Three flicker programs: a steady warm hum, a cyan signal pulse, and a violet stutter.
Gooey Blob Metaball Filter
True metaball merging — multiple SVG circles travel along independent orbits and visually fuse into one gooey shape via the same blur+threshold filter. Three orbit programs: anchor + drifters, dual binary, and a quiet single satellite.
Shape-aware Halo via drop-shadow
Halo follows an SVG shape's alpha silhouette via stacked filter: drop-shadow chains (NOT box-shadow, which only follows the bounding rectangle). Three shapes — a moon, a snowflake, and a leaf — each with a per-shape glow recipe.
Shimmer Skeleton Loaders
Skeleton placeholders over a static block layout — loading is communicated by the motion layer above. Three motion archetypes: a stage-wide dual sheen, a per-block sweep across feed cards, and a per-row opacity wave on console rows.
Marquee / Ticker / Infinite Scroll
Seamless infinite-scroll ticker via duplicated tracks (aria-hidden on the duplicate) so the loop wraps without a visible seam. Three patterns: a continuous loop, a hover-pause ribbon, and a paired counter-direction layout.
Moving Background Reveal
Layered background gradient drifts behind a static foreground composition — three motion mechanics for ambient hero spaces: a slow drift, a pulse-and-settle, and a long horizontal sweep. Foreground content stays put; only the background layers move.
Film Overlay Compositing
Cinematic film-grain overlay that composites tint + grain + vignette over a base photo via mix-blend-mode + filter chains. Three film stocks: warm Kodachrome, cool tungsten balance, and a high-contrast B&W silver-halide stock.
Dark Mode Token Transition Fallback
Theme toggle that animates color tokens across light → dark via CSS custom-property transitions, with a stale-state guard that snaps to the new theme if the tab was hidden mid-animation. Three transition lengths from quick to deliberate.
Animated Toggle Switches
Three toggle treatments built on real <input type="checkbox"> with appearance: none — a Day/Night celestial pill (sun/moon/stars/clouds), a Neumorphic Bloom dial that morphs into a glowing gemstone, and a Power Glow industrial terminal with a 12-LED boot sequence.
Animated Tooltips
Three opinionated tooltip animations — a frosted-glass command-palette tip with a purple-pink-blue gradient halo + ⌘K keycap (spring scale-in), a rich profile-preview card that unfurls on @-mention hover with a pulsing online dot and italic stats (-1.8° rotate-in), and an editorial marginalia footnote that draws a dotted connector down to a tilted parchment aside with an asterism ornament. Each one uses :hover + :focus-within so keyboard users get the same affordance.
Animated Tabs
Tabbed nav with a single sliding underline indicator driven by a CSS custom property updated per click (or via :has() in supporting browsers). Three indicator styles: thin underline, pill highlight, and a notch + dot Material tab.
Animated Form Inputs
Three floating-label input animations — Outlined Notch (rounded border that notches around the label as it floats up), Underline Slide (bottom bar thickens + brightens on focus while the label slides), and Glow Border (gradient border that ignites on focus with a soft halo). :placeholder-shown + :focus-within drive the float without JavaScript.
Custom Focus Indicator Variants
Each :focus-visible treatment pairs a non-color signal with a color signal so focus stays legible across contrast modes. Three pairings: a Solid Ring (outline + offset on a form CTA), Underline + Color (text-decoration on an inline link), and Soft Glow (layered box-shadow on a pill subscribe button).
Focus Ring Pulse Spacing
A keyboard-visible focus ring that breathes outward by animating outline-offset across three production contexts — Primary Button (CTA pulse), Inline Link (tight in-prose ring), and Form Field (wider ring that clears the input border). The element box never shifts, and prefers-reduced-motion freezes the ring at its widest point so focus stays visible without motion.
Responsive Dialog Side Sheet
Native <dialog> element + ::backdrop with viewport-driven layout that becomes a centered modal on desktop and an edge-anchored side sheet on mobile. Three motion programs: spring scale-in, slide-from-edge, and a soft fade.
Top Layer Discrete Entry Exit
Native dialog and popover surfaces can animate into and out of the top layer by pairing @starting-style with discrete display and overlay transitions, so panels and backdrops stay visible until their exit fade or scale completes.
Card Hover Shadow Depth
Card lifts on hover via transform: translateY + an animated box-shadow that grows in radius and softens. Three product contexts: a dashboard metric tile, a product-catalogue card, and a hero CTA panel.
Success Checkmark Path Draw
Success checkmark drawn as an SVG path via stroke-dasharray animation, with an optional ring outline that completes around the same time. Three success cadences: a quick confirmation, a celebratory pulse, and a slow editorial draw.
Click Replay Heart Burst
Three like-button burst treatments — a Heart Pop (a single one-shot scale-pop replays via element.animate() on every click), a Radial Particle Burst (the same heart pop layered with six decorative particles that fly outward), and a Balloon Rain (a celebration variant where eighteen heart-shaped balloons drift upward on a CSS @keyframes loop with a ripple ring under the button — same look as the gallery thumbnail card-preview, scaled up). The two WAAPI variants cancel any in-flight animations before kicking off the next so rapid clicks never stack easing curves.
Toast Notification Slide Stack
Three CSS techniques for the toast enter motion — a horizontal Side Slide via translateX, a Pop Scale via transform: scale(0.85→1), and a Drop In via translateY. All three share a flex-column stack and prefers-reduced-motion fallback; flex gap handles the restack on dismiss.
Notification Badge Bounce Retrigger
Three notification-badge bounce treatments tuned per product context — an Inbox sidebar row (subtle 1.25x shoulder pop), a Cart Add-to-cart CTA (heavier 1.45x bounce with a rotate kick on the icon), and an alerts Bell with a tall 1.55x overshoot and a parallel bell shake. Each badge keys its DOM node to the current count so React remounts it on every change, replaying the keyframe from frame 0 without animationend bookkeeping.
Rating Star Fill Hover Preview
Three star-rating treatments tuned per product context — a Classic Five (canonical product rating), a Ten-Tier (fine-grain reviewer scale, faster transition), and a Three-Tier (emoji-style quick survey, deliberate slower transition). All three use real <input type="radio"> + <label> so keyboard, focus-visible, and screen-reader semantics come from the native control; pointer hover fills a preview range via the sibling combinator while the checked state remains the source of truth.
Button Ripple Radial Gradient Fill
A press-feedback ripple driven by an animated radial-gradient layer inside an overflow-hidden button, with pointer-tracked origin and a pure CSS centered fallback.
Background-position Fill Sweep
An interaction fill effect that uses an oversized gradient background layer and transitions background-position on hover or focus-visible. The element keeps its size fixed while the color field sweeps across or up from one edge.
Error Shake Feedback
Three one-shot validation feedback patterns paired with aria-live hints — a canonical horizontal jitter, a motion-free border-pulse halo for reduced-motion users, and a vertical drop-bounce on the cross axis.
Conic-gradient Spinner
A single-element spinner — conic-gradient paints the arc, a radial mask thins the ring without SVG. Three variants: a single quarter arc, balanced dual arcs, and a tapered segmented trace.
Border-trick Ring Spinner
A square with border-radius: 50% turns into a ring; side-specific border colors do the rest. Three variants: a classic single-arc, a counter-rotating dual ring, and a two-tone two-halves loop.
Typing Dots Staggered Bounce
A compact loading indicator with three expression methods: a horizontal translateY row wave, a vertical translateX column wave, and a scale-only pulse that all use staggered animation delays.
Hourglass Flip Loader
A CSS hourglass loader comparing two implementation methods: a real drain-pause-flip cycle and a CSS-only fade reset, both inside a fixed badge footprint.
Native <progress> Variants
Three skinned fills on top of the native <progress> element — a canonical two-stop gradient, a six-stop rainbow, and a diagonal repeating-stripe overlay that scrolls. Native element stays in the DOM so screen readers announce the value.
Typewriter Width Reveal
A wrapper track sweeps width 0 → phrase while a separate caret layer owns its own blink cadence, so typing and blink timing stay independent. Three variants: a monospace terminal prompt with steps(), an eased editorial headline on max-content, and a slow ambient ticker.
Pointer Preserve-3D Parallax Stack
A pointer-driven 3D stack that keeps child layers in one preserve-3d scene while CSS variables drive tilt, glare, and translateZ offsets without flattening the depth model.
Typed Halftone Background Drift
A procedural halftone background that registers dot offset and stop values with @property so the radial-gradient pattern drifts smoothly instead of jumping between gradient strings.
Twinkle Parallax Starfield
A layered starfield that separates slow parallax translation from faster twinkle opacity pulses, giving distant and near stars different cadence without synchronized blinking.
Typed Gradient Property Interpolation
A CSS gradient animation pattern that registers angle, hue, and stop-position custom properties so internal gradient values interpolate continuously instead of swapping whole strings.
Number Counter Odometer Transition
A metric transition pattern that rolls fixed-width digit columns with translateY and tabular numerals so changing numbers feel continuous without resizing the row.
Idle Wiggle Feedback Loop
A restrained feedback loop that uses a short low-amplitude wiggle burst and a long rest phase so empty or waiting states feel alive without constant motion.