Motion patterns

Wave 2 motion · 75 patternsView as showcase

Ready-to-paste motion patterns.

75 self-contained HTML+CSS+JS snippets you can drop into any generated page or copy directly. Live previews, one-click copy, all honoring prefers-reduced-motion.

Tags:
━━ 75 patterns

Floating orbs

subtle

Three drifting blurred orbs — the Socialaize look.

animatedeffectbackground

Animated gradient mesh

Subscriptionsubtle

Soft, slow-drifting radial gradients — pure CSS.

animatedeffectbackground

Marquee text band

subtle

Infinite scrolling text band, pure CSS.

animatedtextticker

Kinetic typography

bold

Word-by-word reveal that lands like a punchline.

animatedtexthero

Spotlight cursor

Subscriptionbold

A soft glow follows the cursor across the section.

animatedinteractiveeffect

Parallax layered hero

Subscriptionbold

Background, grid, and content scroll at different rates.

animatedscrolleffect

Sticky pin sections

Subscriptionawwwards

Full-viewport sections, scrubbed transitions.

animatedscrolllayout

Magnetic CTA

Subscriptionawwwards

Button drifts toward the cursor.

animatedinteractivecta

Bento grid

Subscriptionsubtle

Asymmetric grid with hover-lift cards.

animatedlayoutgrid

Count-up stats

bold

Numbers animate from 0 to target on scroll into view.

animatedscrolltext

Scroll progress bar

Subscriptionsubtle

A thin accent-colored bar at the top tracks how far you've scrolled.

animatedscrollui

Typewriter effect

Subscriptionbold

Text types itself out, deletes, types the next phrase.

animatedtexthero

Glass morphism

Subscriptionsubtle

Frosted glass card over a colorful background.

effectuicard

FAQ accordion

Subscriptionsubtle

Smooth-expanding accordion with rotating + icon.

animatedinteractiveui

Hover-tilt cards

bold

Cards tilt in 3D toward the cursor with a glow spotlight.

animatedinteractive3d

Animated SVG icons

Subscriptionsubtle

Line-drawing SVG icons that draw themselves on mount.

animatedsvgvector

Shader gradient

Subscriptionawwwards

Flowing GPU-shader color field — nebula-like ambient depth.

animatedwebgleffect

Fluid cursor

Subscriptionawwwards

Cursor-following fluid ink trails with HSL color drift.

animatedwebgleffect

Particle field

Subscriptionbold

200 particles with connecting lines and cursor attraction.

animatedwebgleffect

Noise field

Subscriptionsubtle

Animated topographic contour lines using procedural noise.

animatedwebgleffect

Aurora hero

awwwards

Northern-lights WebGL shader with starfield. Hero-ready.

animatedwebgleffect

Wave grid

Subscriptionbold

Perspective wave-grid receding to vanishing point.

animatedwebgl3d

Glitch transition

Subscriptionbold

RGB-split glitch bursts on a bold headline.

animatedeffecttext

Mesh distortion

Subscriptionawwwards

Wireframe sphere that ripples and rotates. Scroll-reactive.

animatedwebgl3d

Three.js stack

Subscriptionawwwards

12 glassy 3D cards drifting with mouse-following camera.

animatedwebgl3d

Domain-warped flow

Subscriptionawwwards

FBM noise warped through itself — a genuinely liquid field, not stacked gradients.

animatedwebglshader

Animated mesh gradient

Subscriptionawwwards

Stripe/Linear-style four-point mesh blend, perpetually drifting.

animatedwebglshader

Iridescent oil-slick

Subscriptionawwwards

Thin-film interference via cosine palette — shifting petrol sheen.

animatedwebglshader

Voronoi crystal

Subscriptionawwwards

Animated cellular tessellation with glowing seed points.

animatedwebglshader

Caustics

awwwards

Refracted underwater light — bright filaments over deep blue.

animatedwebglshader

Liquid chrome

Subscriptionawwwards

Fake-normal lit metal flowing — molten, reflective.

animatedwebglshader

Electric plasma

Subscriptionawwwards

Interfering waves pinched into bright electric filaments.

animatedwebglshader

Metaball field

Subscriptionawwwards

SDF energy field — soft glowing blobs merging and parting.

animatedwebglshader

Noise tunnel

Subscriptionawwwards

Polar warp scrolling inward — an endless soft tunnel.

animatedwebglshader

Halftone drift

Subscriptionawwwards

Editorial dot-screen over a moving gradient — print-grade texture.

animatedwebglshader

Topographic lines

Subscriptionawwwards

Contour map of flowing noise — designer-grade line-work.

animatedwebglshader

Aurora curtains

awwwards

Vertical light curtains — northern-lights drape, not blobs.

animatedwebglshader

Flame — inferno

Subscriptionawwwards

A full-bleed wall of rising fire, drawn from noise alone.

animatedwebglshader

Flame — ember bed

Subscriptionbold

A low bed of glowing coals along the bottom edge, with short licks of flame.

animatedwebglshader

Flame — candle

Subscriptionsubtle

A single soft teardrop flame that sways and breathes.

animatedwebglshader

Flame — rising sparks

Subscriptionbold

Ember sparks drifting upward through the dark, no flame body.

animatedwebglshader

Fresnel distorted sphere

awwwards

Vertex-displaced icosphere with a glowing fresnel rim.

animatedwebgl3d

Glass refraction orb

awwwards

Dark glass sphere with internal glow and a bright fresnel edge.

animatedwebgl3d

Metal torus knot

Subscriptionawwwards

Lit metallic knot — warm/lime/blue three-point rig, slow tumble.

animatedwebgl3d

Noise terrain flyover

Subscriptionawwwards

Displaced wireframe mesh scrolling toward camera — synth landscape.

animatedwebgl3d

Particle flow swarm

Subscriptionawwwards

Thousands of points drifting through a noise flow-field, additively lit.

animatedwebgl3d

Instanced wave grid

Subscriptionawwwards

900 lit cubes rippling on a radial sine — a 3D dot-matrix done right.

animatedwebgl3d

Fibre bundle

Subscriptionawwwards

Equal-length strands fan in from off-frame, unwrap, rewrap; flat cut ends glow on one plane.

animatedwebgl3d

Fibre bundle — horizontal fan

Subscriptionbold

A level bundle that breathes open and closed, flat glowing ends.

animatedwebgl3d

Fibre bundle — diagonal sway

Subscriptionbold

A steep diagonal bundle with rounded tips that sways as one.

animatedwebgl3d

Fibre bundle — rising

Subscriptionawwwards

A near-vertical bundle rising from below, tapered tips, wrap and unwrap.

animatedwebgl3d

Fibre bundle — dropping

Subscriptionbold

A bundle hanging from the top edge, tapered tips, swaying.

animatedwebgl3d

Fibre bundle — held fan

Subscriptionsubtle

A still, open fan from the corner. No motion, for reduced-motion-first pages.

animatedwebgl3d

Chain reaction

Subscriptionbold

Eight linked nodes firing left to right, each swelling as the pulse reaches it.

animatedcanvasbackground

Counter explosion

Subscriptionbold

A number counting to its target, then bursting, then resetting and doing it again.

animatedcanvasgenerative

Data stream

Subscriptionsubtle

Rows of hex and binary scrolling in alternating directions behind the content.

animatedcanvasbackground

Galaxy swirl

Subscriptionsubtle

Eight hundred points on three logarithmic arms, turning as one and squashed to an ellipse.

animatedcanvasbackground

Knowledge graph

Subscriptionbold

Twenty-eight labelled nodes settling under repulsion, springs and a pull to centre.

animatedcanvasbackground

Magnetic field lines

Subscriptionsubtle

Sixty tracers crossing the frame on sine paths, each dragging an eighteen-point tail.

animatedcanvasbackground

Neural net pulse

subtle

A four-layer network with signals travelling edge by edge from input to output.

animatedcanvasbackground

Orbit rings

Subscriptionsubtle

Five concentric rings carrying three to sixteen bodies, alternating direction.

animatedcanvasbackground

Particle burst

Subscriptionbold

Ninety particles thrown from the centre every two and a half seconds, under gravity and drag.

animatedcanvasgenerative

Shockwave rings

Subscriptionbold

Rings that break from the centre every six-tenths of a second and fade as they widen.

animatedcanvasbackground

Starfield drift

Subscriptionsubtle

Stars falling toward the viewer on a perspective divide, recycled at the far plane.

animatedcanvasbackground

Letter explode

Subscriptionbold

Letters thrown to random positions and rotations, then flying home 35ms apart.

animatedtexttypography

Word cascade

Subscriptionbold

Words dropped on a cadence, falling under gravity and stacking where they land.

animatedcanvasbackground

Attention pulse

Subscriptionsubtle

A ring that expands out of one element and fades, twice every four seconds.

animatedcss-onlyattention

Like burst

Subscriptionbold

Fourteen particles thrown from a heart on the like, and nothing on the un-like.

interactivepressbutton

Border beam

Subscriptionbold

A comet with a bright head and a faint tail running the border every three seconds.

animatedcss-onlyborder

Shine border

Subscriptionsubtle

A light travelling once around a card's border every four seconds.

animatedcss-onlyborder

Shimmer button

Subscriptionsubtle

A band of light crossing a CTA every 2.6 seconds, and faster while hovered.

hovercss-onlybutton

Ripple on press

Subscriptionsubtle

A circle blooming from the exact point of contact and fading as it grows.

interactivepressbutton

Text scramble

subtle

A line resolving out of random glyphs, each character settling on its own frame.

animatedtextdecode

Card lift on hover

Subscriptionsubtle

A card that rises six pixels on hover and settles two down on press.

hovercss-onlycard

Loading shimmer

Subscriptionsubtle

Skeleton blocks with a highlight sweeping across them every 1.4 seconds.

loadingcss-onlyskeleton