CreativePower

Just watch— Auto-plays — just watch.

awwwardsanimatedwebglshadereffect

Aurora curtains

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

View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebglshadereffect

Flame — inferno

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

Subscription View code

Just watch— Auto-plays — just watch.

boldanimatedwebglshadereffect

Flame — ember bed

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

Subscription View code

Just watch— Auto-plays — just watch.

subtleanimatedwebglshadereffect

Flame — candle

A single soft teardrop flame that sways and breathes.

Subscription View code

Just watch— Auto-plays — just watch.

boldanimatedwebglshadereffect

Flame — rising sparks

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

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebgl3dthree-js

Fresnel distorted sphere

Vertex-displaced icosphere with a glowing fresnel rim.

View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebgl3dthree-js

Glass refraction orb

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

View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebgl3dthree-js

Metal torus knot

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

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebgl3dthree-js

Noise terrain flyover

Displaced wireframe mesh scrolling toward camera — synth landscape.

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebgl3dthree-js

Particle flow swarm

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

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebgl3dthree-js

Instanced wave grid

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

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebgl3dthree-js

Fibre bundle

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

Subscription View code

Just watch— Auto-plays — just watch.

boldanimatedwebgl3dthree-js

Fibre bundle — horizontal fan

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

Subscription View code

Just watch— Auto-plays — just watch.

boldanimatedwebgl3dthree-js

Fibre bundle — diagonal sway

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

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebgl3dthree-js

Fibre bundle — rising

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

Subscription View code

Just watch— Auto-plays — just watch.

boldanimatedwebgl3dthree-js

Fibre bundle — dropping

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

Subscription View code

Just watch— Auto-plays — just watch.

subtleanimatedwebgl3dthree-js

Fibre bundle — held fan

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

Subscription View code

Just watch— Auto-plays — just watch.

boldherosignageslideshowken-burns

Signage Slideshow

Full-screen photos with a slow Ken Burns drift, cross-dissolves, a duotone brand tint and rotating messages.

Subscription View code

Just watch— Auto-plays — just watch.

boldherosignageslideshowken-burns

Signage Slideshow — People

Clips of people at work, drifting and dissolving under a brand tint.

Subscription View code

Just watch— Auto-plays — just watch.

boldherosignageslideshowken-burns

Signage Slideshow — Offices

Clips of workspaces, from a morning floor to a lamp-lit loft.

Subscription View code

Just watch— Auto-plays — just watch.

boldherosignageslideshowken-burns

Signage Slideshow — Buildings

Clips of glass lobbies and a boardroom over the city.

Subscription View code

Just watch— Auto-plays — just watch.

boldherosignageslideshowken-burns

Signage Slideshow — Landscapes

Clips of lakes, hills, dunes and canyons, slow and calm.

Subscription View code

Just watch— Auto-plays — just watch.

boldherosignageslideshowken-burns

Signage Slideshow — Mixed

A mixed playlist: the sea, people, a lobby, an office, coffee and flowers.

Subscription View code

Just watch— Auto-plays — just watch.

boldanimatedcanvasbackgroundgenerative

Chain reaction

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

Subscription View code

Just watch— Auto-plays — just watch.

boldanimatedcanvasgenerativecounter

Counter explosion

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

Subscription View code

Just watch— Auto-plays — just watch.

subtleanimatedcanvasbackgroundgenerative

Data stream

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

Subscription View code

Just watch— Auto-plays — just watch.

subtleanimatedcanvasbackgroundgenerative

Galaxy swirl

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

Subscription View code

Just watch— Auto-plays — just watch.

boldanimatedcanvasbackgroundgenerative

Knowledge graph

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

Subscription View code

Just watch— Auto-plays — just watch.

subtleanimatedcanvasbackgroundgenerative

Magnetic field lines

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

Subscription View code

Just watch— Auto-plays — just watch.

subtleanimatedcanvasbackgroundgenerative

Neural net pulse

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

View code

Just watch— Auto-plays — just watch.

subtleanimatedcanvasbackgroundgenerative

Orbit rings

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

Subscription View code

Just watch— Auto-plays — just watch.

boldanimatedcanvasgenerativecelebration

Particle burst

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

Subscription View code

Just watch— Auto-plays — just watch.

boldanimatedcanvasbackgroundgenerative

Shockwave rings

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

Subscription View code

Just watch— Auto-plays — just watch.

subtleanimatedcanvasbackgroundgenerative

Starfield drift

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

Subscription View code

Just watch— Auto-plays — just watch.

boldanimatedtexttypographyentrance

Letter explode

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

Subscription View code

Just watch— Auto-plays — just watch.

boldanimatedcanvasbackgroundgenerative

Word cascade

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

Subscription View code

Just watch— Auto-plays — just watch.· navigate with the dots or J/K

subtleanimatedcss-onlyattentioncta

Attention pulse

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

Subscription View code

Just watch— Auto-plays — just watch.· navigate with the dots or J/K

boldinteractivepressbuttonfeedback

Like burst

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

Subscription View code

Just watch— Auto-plays — just watch.

boldanimatedcss-onlybordercard

Border beam

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

Subscription View code

Just watch— Auto-plays — just watch.

subtleanimatedcss-onlybordercard

Shine border

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

Subscription View code

Just watch— Auto-plays — just watch.· navigate with the dots or J/K

subtlehovercss-onlybuttoncta

Shimmer button

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

Subscription View code

Just watch— Auto-plays — just watch.· navigate with the dots or J/K

subtleinteractivepressbuttonfeedback

Ripple on press

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

Subscription View code

Just watch— Auto-plays — just watch.

subtleanimatedtextdecodetypography

Text scramble

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

View code

Just watch— Auto-plays — just watch.· navigate with the dots or J/K

subtlehovercss-onlycardlift

Card lift on hover

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

Subscription View code

Just watch— Auto-plays — just watch.

subtleloadingcss-onlyskeletonshimmer

Loading shimmer

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

Subscription View code

Just watch— Auto-plays — just watch.

subtleanimatedeffectbackgroundambient

Floating orbs

Three drifting blurred orbs — the Socialaize look.

View code

Just watch— Auto-plays — just watch.

subtleanimatedeffectbackgroundgradient

Animated gradient mesh

Soft, slow-drifting radial gradients — pure CSS.

Subscription View code

Just watch— Auto-plays — just watch.

subtleanimatedtexttickerinfinite

Marquee text band

Infinite scrolling text band, pure CSS.

View code

Scroll-driven— Scroll-driven — the showcase auto-plays it for you.

boldanimatedtextheroreveal

Kinetic typography

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

View code

Move your mouse— Move your cursor across the stage — it follows you.· navigate with the dots or J/K

boldanimatedinteractiveeffectcursor

Spotlight cursor

A soft glow follows the cursor across the section.

Subscription View code

Scroll-driven— Scroll-driven — the showcase auto-plays it for you.

boldanimatedscrolleffecthero

Parallax layered hero

Background, grid, and content scroll at different rates.

Subscription View code

Scroll-driven— Scroll-driven — the showcase auto-plays it for you.

awwwardsanimatedscrolllayoutstory

Sticky pin sections

Full-viewport sections, scrubbed transitions.

Subscription View code

Move your mouse— Move your cursor across the stage — it follows you.· navigate with the dots or J/K

awwwardsanimatedinteractivectahover

Magnetic CTA

Button drifts toward the cursor.

Subscription View code

Hover— Hover the cards to see them react.· navigate with the dots or J/K

subtleanimatedlayoutgridbento

Bento grid

Asymmetric grid with hover-lift cards.

Subscription View code

Just watch— Auto-plays — just watch.

boldanimatedscrolltextstats

Count-up stats

Numbers animate from 0 to target on scroll into view.

View code

Scroll-driven— Scroll-driven — the showcase auto-plays it for you.

subtleanimatedscrolluinavigation

Scroll progress bar

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

Subscription View code

Just watch— Auto-plays — just watch.

boldanimatedtextherovanilla-js

Typewriter effect

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

Subscription View code

Static— Static by design — no motion.

subtleeffectuicardfrosted

Glass morphism

Frosted glass card over a colorful background.

Subscription View code

Click— Click an item to expand it.· navigate with the dots or J/K

subtleanimatedinteractiveuiaccordion

FAQ accordion

Smooth-expanding accordion with rotating + icon.

Subscription View code

Hover— Hover the cards to see them react.· navigate with the dots or J/K

boldanimatedinteractive3dcard

Hover-tilt cards

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

View code

Just watch— Auto-plays — just watch.

subtleanimatedsvgvectoricon

Animated SVG icons

Line-drawing SVG icons that draw themselves on mount.

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebgleffectbackground

Shader gradient

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

Subscription View code

Move your mouse— Move your cursor across the stage — it follows you.· navigate with the dots or J/K

awwwardsanimatedwebgleffectinteractive

Fluid cursor

Cursor-following fluid ink trails with HSL color drift.

Subscription View code

Move your mouse— Move your cursor across the stage — it follows you.· navigate with the dots or J/K

boldanimatedwebgleffectbackground

Particle field

200 particles with connecting lines and cursor attraction.

Subscription View code

Just watch— Auto-plays — just watch.

subtleanimatedwebgleffectbackground

Noise field

Animated topographic contour lines using procedural noise.

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebgleffectbackground

Aurora hero

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

View code

Just watch— Auto-plays — just watch.

boldanimatedwebgl3dbackground

Wave grid

Perspective wave-grid receding to vanishing point.

Subscription View code

Just watch— Auto-plays — just watch.

boldanimatedeffecttextglitch

Glitch transition

RGB-split glitch bursts on a bold headline.

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebgl3deffect

Mesh distortion

Wireframe sphere that ripples and rotates. Scroll-reactive.

Subscription View code

Just watch— Auto-plays — just watch.· navigate with the dots or J/K

awwwardsanimatedwebgl3dthree-js

Three.js stack

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

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebglshadereffect

Domain-warped flow

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

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebglshadereffect

Animated mesh gradient

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

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebglshadereffect

Iridescent oil-slick

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

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebglshadereffect

Voronoi crystal

Animated cellular tessellation with glowing seed points.

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebglshadereffect

Caustics

Refracted underwater light — bright filaments over deep blue.

View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebglshadereffect

Liquid chrome

Fake-normal lit metal flowing — molten, reflective.

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebglshadereffect

Electric plasma

Interfering waves pinched into bright electric filaments.

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebglshadereffect

Metaball field

SDF energy field — soft glowing blobs merging and parting.

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebglshadereffect

Noise tunnel

Polar warp scrolling inward — an endless soft tunnel.

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebglshadereffect

Halftone drift

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

Subscription View code

Just watch— Auto-plays — just watch.

awwwardsanimatedwebglshadereffect

Topographic lines

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

Subscription View code

━━ End of showcase

That’s the set.

81 of 81 patterns shown.

Back to grid Generate a page with motion