CSS & SVG Motion Library
Animation Patterns
70+ hand-rebuilt CSS and SVG animation patterns for modern web UI. Every one a clean-room implementation — study, copy, ship.
Pattern Library
58 patterns across 5 categories. Pick a collection, search by tag or behavior, or open any pattern for the source recipe.
Shared Element Layout Transition
Progressively enhanced gallery-to-detail motion with same-document View Transition API fallbacks.
Aurora Gradient Sweep
Layered radial gradients drift behind readable foreground content using transform, opacity, and background-position friendly timing with a static reduced-motion fallback.
Animated 3D Cube Perspective Walkthrough
A CSS 3D cube walkthrough that separates scene perspective from face transforms so rotate and translateZ order stays inspectable.
Semantic Pie/Donut Chart Markup Strategy
A conic-gradient donut chart pattern that pairs the decorative ring with real caption and legend text so the data remains readable without color or motion.
Flip Card Front/Back Face Handling
A CSS 3D flip card pattern where front and back faces share one plane, hide their backfaces, and expose focus-safe fallback behavior.
Gradient Text Sweep
A fallback-safe background-clip text treatment where an explicit two-axis gradient background sweeps a narrow highlight band across live, selectable headline text.
Starlight Shimmer Text
A shimmer text pattern that keeps the real text node selectable while a clipped gradient glint and separate decorative sparkle layer create a starlight pass.
Gooey Blob Construction
A blob construction showcase that merges overlapping SVG primitives through a padded blur-and-threshold filter while keeping animation transform-only.
SVG Path Command Structure for Morph-Ready Shapes
A clean-room SVG path morph demo where each endpoint keeps the same command family and point flow to reduce warped intermediate shapes.
SVG Path Fill Reveal
A two-stage SVG pattern where a custom path outline draws first, then the matching fill reveals as a separate final phase. Demonstrated on simple production-icon shapes (heart, star, checkmark) so the technique reads at a glance.
SVG Path Illustration Scene
12 hand-curated ocean illustration scenes — twilight lagoon, golden sunset, crashing wave, palm silhouette, sunlit underwater, moonlit night, storm, pastel dawn, harbor at dusk, misty cliffs, bioluminescent waves, breaching whale. Each is a self-contained animated SVG with inline @keyframes (drift / shimmer / cloud / pulse).
Signature Line Drawing Illusion Overview
An SVG signature draw illusion that sequences normalized stroke-dasharray and stroke-dashoffset paths to mimic ordered pen strokes.
Irregular Handwritten Mask Reveal
A brush-script SVG reveal that separates a filled text layer from a wide animated mask stroke so handwriting appears to fill in naturally.
Gradient-Clipped Rainbow Text
A multicolor linear-gradient clipped into real text, with restrained color stops, readable fallback color, and reduced-motion static spectrum fallback.
Text Scramble Reveal
A decipher-style text reveal where aria-hidden scramble glyphs clear away while the final live DOM phrase remains selectable and readable.
Variable Font Weight Morph
A variable typography morph that changes weight, width, and slant axes inside a reserved text track instead of using scale transforms.
Split Character Stagger
A grapheme-aware split text reveal that uses Intl.Segmenter when available, transform-only staggered spans, and readable fallback text.
Wavy Underline Thickness Control
A native CSS wavy underline treatment that tunes text-decoration-thickness and underline offset without adding a separate decorative SVG layer.
Elastic Text Custom Easing Tradeoffs
A transform-only text snap showcase that uses bounded CSS cubic-bezier overshoot while documenting the boundary where true spring physics should move to JavaScript.
Neon Glow Layering with Text Shadow
A CSS text-shadow stack that separates a crisp neon core, colored halo layers, restrained flicker, and a static reduced-motion glow fallback.
Gooey Blob Metaball Filter
A project-authored SVG filter showcase where blurred alpha fields and color-matrix contrast fuse circles into elastic gooey blob bridges.
Shape-aware Halo via drop-shadow
A project-authored SVG glow showcase where drop-shadow halos hug badge, ring, and comet silhouettes instead of rectangular bounds.
Shimmer Skeleton Loaders
A project-authored CSS skeleton loader showcase that groups gradient sweeps, background-position slides, and keyframe cadence variants in one pattern.
Layout-stable Skeleton Placeholder
A project-authored CSS skeleton loader showcase that reserves media and text slots up front so shimmer placeholders swap to loaded content without causing layout shift.
Reduced Motion Skeleton Fallback
Skeleton loaders that swap a sweeping shimmer for a static placeholder or subtle opacity pulse when prefers-reduced-motion is reduce, keeping loading feedback clear.
Marquee / Ticker / Infinite Scroll
A project-authored CSS marquee showcase where duplicated rails, white-space: nowrap semantics, overflow: hidden viewport clipping, and translateX() keyframes keep ticker labels on a single unbroken line while moving by one authored track width, then switch to a static reduced-motion fallback and manual pause affordances when less movement is requested.
Axis-aware Scroll-linked Marquee Ticker
A scroll-linked marquee ticker pattern that documents axis ownership, duplicate-track accessibility, and a static reduced-motion state.
Moving Background Reveal
A procedural moving background reveal where background-size and background-position travel are matched so the loop stays stable.
Film Overlay Compositing
A scoped procedural grain overlay that composites texture inside the background wrapper while preserving foreground text and control contrast.
Fixed Background Parallax Baseline
A fixed-background parallax baseline with readable foreground composition and explicit mobile and reduced-motion fallback boundaries.
Practical Scroll Snapping Caveats
A horizontal scroll snap rail that demonstrates mandatory versus proximity snapping, scroll-padding, focus framing, and tall-card caveats.
Dark Mode Token Transition Fallback
A paint-only dark mode token transition that crossfades color, background, border, and shadow without animating layout or using transition: all.
Segmented Control Radio Tab Group
A native radio-group segmented control that slides a pill indicator with translateX while keeping radios as the source of truth for keyboard and screen reader selection.
Toggle Switch Appearance None
A native checkbox skinned as a switch via appearance: none, with a sliding thumb driven by :checked and a focus-visible ring layered above the track.
Tooltip Anchor Positioning Top Layer
A popover tooltip anchored via the CSS anchor positioning API with @position-try fallbacks for edge collisions, falling back to absolute positioning in unsupported browsers.
Active Tab Underline with :has
A tab bar that slides an underline across active tabs by switching container-level custom properties via :has(), with a class-toggle fallback for browsers without :has() support.
Floating Label Input
A form input where the visible label shrinks and translates up on focus, on value presence, and on autofill — keeping the label accessible and never collapsing to a placeholder-only state.
Custom Focus Indicator Variants
Three focus-visible treatments — solid ring, underline + color shift, and soft box-shadow glow — each pairing a non-color signal with a color signal so focus stays visible across contrast modes.
Focus Ring Pulse Spacing
A keyboard-visible focus ring that breathes outward by animating outline-offset between two small length values, keeping the box model stable and respecting prefers-reduced-motion.
Grid Row Accordion Expand
An accordion whose panel animates height without knowing its content size by transitioning grid-template-rows between 0fr and 1fr on an outer grid wrapper.
Responsive Dialog Side Sheet
A native <dialog> side sheet that slides in from the right, restores focus to the opener, and respects Escape / backdrop / reduced-motion behaviors.
Card Hover Shadow Depth
Three elevation tiers driven purely by layered box-shadows on hover and focus-visible, keeping layout stable while conveying perceived depth.
Success Checkmark Path Draw
SVG success ring and tick draw with getTotalLength-measured dasharray, in sequential ring+tick and standalone tick-with-pop variants.
Click Replay Heart Burst
Like button with WAAPI scale-pop and optional radial particle burst on every click, with aria-pressed tracking liked state and the decorative layer isolated from the button name.
Copy to Clipboard Pulse
A copy button that waits for Clipboard.writeText() to resolve before playing a success pulse, with a separate error branch for NotAllowedError and insecure contexts.
Toast Notification Slide Stack
Translate-Y driven toast stack in top-right and bottom-center anchors, with flex gap handling restack and prefers-reduced-motion collapsing the transform to an instant swap.
Notification Badge Bounce Retrigger
A transform-based badge pop that replays on every count change by keyed remount, with reduced-motion collapsing the bounce to an instant swap.
Rating Star Fill Hover Preview
A radio-input star rating that fills a preview range on pointer hover while keeping checked state as the source of truth, with focus-visible and reduced-motion fallbacks.
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.
Error Shake Feedback
One-shot transform shake paired with aria-live hints and a reduced-motion outline fallback, in subtle single-shake and assertive border-flash variants.
Conic-gradient Spinner
A project-authored CSS loader showcase where conic-gradient arcs and a radial mask carve a spinning ring out of a single element, with single-arc, dual-arc, and segmented fade variants.
Border-trick Ring Spinner
A project-authored CSS loader showcase where border-radius, side-specific border colors, and counter-rotating pseudo-element rings produce classic, dual-ring, and two-tone border spinners.
Native <progress> Variants
A project-authored CSS progress showcase built on top of the native <progress> element with determinate fill, indeterminate sheen, and striped barber-pole variants sharing one semantic shell.
Pulse / Heartbeat / Breathing
A CSS keyframe showcase that maps single pulse, double-beat heartbeat, and slow breathing loops with scale-and-opacity timing stops.
Neon Text Glow Layers
A layered text-shadow showcase that keeps the first glow crisp while larger blur radii build cyan, magenta, and ice-blue neon halos.
Typewriter Width Reveal
A project-authored CSS typewriter showcase where a wrapper track width sweeps from 0 to the phrase width while a separate caret layer owns its own blink cadence, letting typing and blink timing stay independent across monospace and proportional presets.
Glitch Text Clip-path Slice Bands
A project-authored CSS glitch showcase where the readable text stays put while two aria-hidden decoy copies burst through animated clip-path inset bands with small RGB offset shifts.
Multiline Typewriter Line-Step Sizing
A multiline typewriter pattern that grows the reveal container by line-height steps so complete rows appear without partial-line clipping or layout shift.