CSS & SVG Animation Patterns
Animation Patterns
Browse reusable motion patterns, inspect focused interactive examples, and explore detail pages built for fast visual scanning.
Pattern Library
Aurora Loop
Soft neon gradients tuned for landing-page hero backgrounds.
Paper Bloom
Layered stop-motion petals for editorial and gallery cards.
Signal Sprint
Fast kinetic typography for announcement banners and app promos.
Shared Element Layout Transition
Progressively enhanced gallery-to-detail motion with same-document View Transition API fallbacks.
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.
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.
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.
Shimmer Gradient Sweep Skeleton
A project-authored CSS skeleton loader showcase where custom linear-gradient highlight bands sweep across placeholder cards with varied angles and contrast.
Shimmer Background Slide
A project-authored CSS skeleton loader showcase where gradient highlight stripes sweep by animating background-position across placeholder surfaces.
Shimmer Keyframe Loop
A project-authored CSS skeleton loader showcase where animation shorthand tunes looping shimmer cadence with custom keyframes, delays, and easing.
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 with reduced-motion and manual pause fallbacks.
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.