Your Motion Designer: copy-paste website animations for Shopify, Webflow & Wix
Try it free

Beta · 11 free effects

Pick an effect. Copy. Paste. Your site moves.

Premium animations for your website. Set your colours, press Copy, then paste into your site builder or your AI assistant: Shopify, Webflow, Wix, WordPress, Claude Code, Cursor, Lovable.

Try the free effects See all 195 effects

The effects

Running live. Move your pointer over them.

Bloom & Stem · Florist

Metaballs

Lumen · Art museum

Holographic foil

Verde · Botanical skincare

Flow field

Ferra · Coffee roasters

Lava lamp

Tidewater · Surf school

Raymarched shapes

Tidewater · Surf school

Hover distortion

Obsidian · Security software

Perspective grid floor

Maison Lune · Boutique hotel

Neon sign

Browse all 195 effects

Everything that moves on this page comes from the library: the compass grid, the cursor, the buttons, the water, the particles.

How it works

Three steps. No code.

1

Pick an effect

Choose one you like.

2

Make it yours

Type your text, pick your colours.

3

Copy and paste

Into your site builder, or into an AI assistant like Claude Code or Cursor. We show you where.

Guides for every platform

Free in the beta

11 effects, yours to keep.

Mouse parallax, torch reveal, magnetic button, particle field, elastic cursor and six more. Enter your email once and copy as many as you like.

Unlock the free effects

Light: CSS or a few lines of JS Medium: runs every frame Heavy: canvas or WebGL, one per page

Move your pointer over each tile. On a phone, drag across it or just watch: every tile moves on its own when nothing is touching it.

Oriel · Opticians
LayersMedium

Mouse parallax

How pointer position × layer depth → translate
Usually GSAP quickTo, or plain JS
Source GSAP quickTo ↗
Quill · Independent publisher
LayersMedium

Scroll parallax

How element's position in viewport × speed → translateY
Usually GSAP ScrollTrigger + Lenis smooth scroll
Source GSAP ScrollTrigger ↗
Mori · Tea house
LayersLight

Torch reveal

How CSS mask-image radial-gradient at pointer x/y
Usually plain CSS + 5 lines of JS
Source MDN mask-image ↗
Lumen · Art museum
LayersLight

Wipe between layers

How clip-path: inset() on the top layer
Usually plain CSS + pointer events
Source MDN clip-path ↗
Oriel · Opticians
LayersMedium

Focus pull

How blur per layer = distance between its depth and the focus point
Usually CSS filter: blur() + a few lines of JS
Source MDN blur() ↗
Lumen · Art museum
LayersMedium

Stacking cards

How scroll progress split into 3 windows, one per incoming card
Usually GSAP ScrollTrigger, or CSS position: sticky
Source MDN position: sticky ↗
Solstice · Solar energy
LayersLight

Shutter slices

How 6 clipped copies of the same image, staggered transforms
Usually plain CSS, or GSAP with a stagger
Source GSAP staggers ↗
Verde · Botanical skincare
LayersLight

Shape morph

How clip-path transitions between polygon()s with the same 60 points; shape() adds true curves in Chromium
Usually plain CSS transitions
Source Chrome: CSS shape() ↗
Oriel · Opticians
LayersMedium

Liquid glass

How backdrop-filter: blur() saturate(), plus url(#filter) with an feDisplacementMap edge map
Usually liquid-glass (SVG), or liquid-glass-react
Source shuding/liquid-glass ↗
Voltline · Electric cars
MouseLight

3D tilt with glare

How perspective + rotateX/Y, children on translateZ
Usually vanilla-tilt.js, or plain JS
Source vanilla-tilt.js ↗
Solstice · Solar energy
MouseLight

Magnetic button

How distance to button centre → translate, eased back on leave
Usually GSAP quickTo
Source GSAP quickTo ↗
Cadence · Fitness app
MouseMedium

Custom cursor

How dot = pointer, ring = eased toward pointer each frame
Usually GSAP, or plain JS + requestAnimationFrame
Source MDN requestAnimationFrame ↗
Maison Lune · Boutique hotel
MouseMedium

Image trail

How a pool of 24 elements, reused as the pointer travels
Usually GSAP, or Web Animations API
Source Codrops image trail ↗
Obsidian · Security software
MouseLight

Text scramble

How reveal the real letters left to right, randomise the rest
Usually GSAP ScrambleText, or plain JS
Source GSAP ScrambleText ↗
Verde · Botanical skincare
MouseHeavy

Particle field

How canvas 2D, a spring per point, redrawn every frame
Usually canvas, or Three.js / OGL for WebGL
Source MDN Canvas API ↗
Bloom & Stem · Florist
MouseMedium

Liquid blob

How SVG "goo" filter: blur, then a sharp alpha threshold
Usually plain SVG filter + JS easing
Source CSS-Tricks gooey effect ↗
Nimbus · Developer cloud
MouseLight

Glowing borders

How radial gradient behind a 1.5px gap, positioned per card
Usually plain CSS custom properties + JS
Source MDN radial-gradient() ↗
Nord Audio · Headphones
MouseMedium

Variable-weight wave

How font-weight 200→900 set per letter by distance to pointer
Usually plain JS + a variable Google Font
Source MDN variable fonts ↗
Maison Lune · Boutique hotel
MouseLight

Difference cursor

How white circle with mix-blend-mode: difference, isolated to the hero
Usually plain CSS + a few lines of JS
Source MDN mix-blend-mode ↗
KINETIK · Running shoes
MouseMedium

Elastic cursor

How velocity → rotate(angle) + scale(1 + speed, 1 − speed)
Usually GSAP quickTo, or plain JS
Source GSAP quickTo ↗
Obsidian · Security software
MouseMedium

Compass grid

How Math.atan2(dy, dx) per needle, length and colour by distance
Usually canvas 2D
Source MDN Math.atan2 ↗
Nord Audio · Headphones
MouseLight

Click ripple

How a span at the press point, scale 0 → 1 and fade, clipped by overflow
Usually Material Web, or Web Animations API
Source material-web ↗
Aerilon · Regional airline
MouseMedium

Scratch card

How a canvas cover erased along the pointer path with globalCompositeOperation 'destination-out'
Usually canvas 2D
Source MDN globalCompositeOperation ↗
Crumb · Neighbourhood bakery
MouseLight

Direction-aware hover

How compare the entry point to the card centre, start the overlay off that edge, then transition to 0
Usually plain JS + CSS transitions
Source codrops/DirectionAwareHoverEffect ↗
Oriel · Opticians
MouseLight

Magnifier lens

How a scaled copy inside a round overflow-hidden box, offset so the pointer stays centred
Usually Magic UI Lens, or plain CSS transforms
Source Magic UI Lens ↗
Cadence · Fitness app
MouseMedium

Ribbon trail

How a chain of points, each easing toward the one before it, drawn as tapering quadratic curves
Usually canvas 2D, or the React Bits Ribbons component
Source React Bits Ribbons ↗
Quill · Independent publisher
MovingLight

Split-text entrance

How one span per letter, staggered CSS keyframes, overflow hidden
Usually GSAP SplitText
Source GSAP SplitText ↗
KINETIK · Running shoes
MovingLight

Marquee

How content duplicated, CSS translateX(-50%) on loop
Usually plain CSS
Source MDN @keyframes ↗
Mori · Tea house
MovingLight

Line drawing

How SVG stroke-dashoffset from 1 to 0, staggered
Usually plain CSS, or GSAP DrawSVG
Source GSAP DrawSVG ↗
Solstice · Solar energy
MovingMedium

Ambient gradient

How 3 blurred circles on long alternating CSS loops
Usually plain CSS, or a WebGL gradient shader
Source MDN filter ↗
Quill · Independent publisher
MovingLight

Scroll-driven, no JavaScript

How animation-timeline: view()
Usually plain CSS, with GSAP ScrollTrigger as fallback
Source MDN scroll-driven animations ↗
Halden · Digital bank
MovingLight

Odometer counter

How a 0–9 column per digit, translateY by digit × 1em
Usually plain CSS transitions + JS
Source odometer (HubSpot) ↗
Verde · Botanical skincare
MovingLight

Morphing shape

How 8-value border-radius keyframes + a slow rotate
Usually plain CSS, or SVG path morphing (GSAP MorphSVG)
Source GSAP MorphSVG ↗
Fieldnote · Design studio
MovingLight

Typewriter

How add or remove one letter per tick, CSS blink on the caret
Usually plain JS, or Typed.js
Source Typed.js ↗
Bloom & Stem · Florist
MovingLight

Orbiting circles

How cos / sin per item, ellipse squash for tilt, depth → scale and z-index
Usually Magic UI Orbiting Circles, or plain CSS
Source Magic UI ↗
Aerilon · Regional airline
MovingLight

Animated beam

How SVG path with pathLength="1", a short dash moved by stroke-dashoffset
Usually Magic UI Animated Beam, or plain SVG + CSS
Source Magic UI ↗
Nimbus · Developer cloud
MovingLight

Border beam

How conic-gradient on an animated @property angle, masked to a 1.5px ring
Usually plain CSS, or Magic UI Border Beam
Source Magic UI ↗
Solstice · Solar energy
MovingLight

Meteors

How a pool of 10 streaks, each a gradient line moved by the Web Animations API
Usually plain CSS keyframes, or Magic UI Meteors
Source Magic UI ↗
Ferra · Coffee roasters
MovingLight

Liquid fill

How two looping SVG sine paths (translateX −50%), top offset = level
Usually plain SVG + CSS
Source MDN SVG path ↗
Obsidian · Security software
MovingMedium

Flickering grid

How each frame 3% of cells get a new random opacity; brightness boosted by distance to pointer
Usually canvas 2D (Magic UI FlickeringGrid)
Source Magic UI Flickering Grid ↗
Aerilon · Regional airline
MovingLight

Motion path

How offset-path: path() + offset-distance 0→100%, offset-rotate: auto
Usually plain CSS, or GSAP MotionPath
Source MDN offset-path ↗
Rove · Travel planner
ScrollMedium

Pinned horizontal scroll

How section progress in the viewport → translateX of the row
Usually GSAP ScrollTrigger with pin: true
Source GSAP ScrollTrigger ↗
Lumen · Art museum
ScrollLight

Reveal on scroll

How IntersectionObserver adds a class, CSS transitions with a per-card delay
Usually plain JS, or GSAP ScrollTrigger.batch
Source MDN Intersection Observer ↗
Quill · Independent publisher
ScrollMedium

Zoom-through

How scroll progress → clip-path: inset() shrinking to 0, inner image scaling down
Usually GSAP ScrollTrigger, or CSS scroll-driven animations
Source MDN scroll-driven animations ↗
KINETIK · Running shoes
ScrollMedium

Scroll-velocity skew

How scroll delta per frame → skewX() and marquee speed, eased back to 0
Usually Lenis velocity + GSAP
Source Lenis on GitHub ↗
Nimbus · Developer cloud
ScrollLight

Stuck-header query

How container-type: scroll-state on the sticky element + @container scroll-state(stuck: top)
Usually plain CSS, IntersectionObserver as fallback
Source Chrome for Developers ↗
Quill · Independent publisher
ScrollNewLight

Reading progress

How scrollTop ÷ (scrollHeight − clientHeight) → scaleX; words left ÷ 230 a minute
Usually plain JS, or CSS animation-timeline: scroll()
Source MDN scroll() timeline ↗
Rove · Travel planner
ScrollNewLight

Scrollspy index

How compare each section's offsetTop with scrollTop → active index; marker eased to that item
Usually IntersectionObserver, or Bootstrap Scrollspy
Source Bootstrap Scrollspy ↗
Oriel · Opticians
ScrollNewMedium

Parallax inside the frame

How image 140% of its frame; translateY = distance from scroller centre × −0.3
Usually GSAP ScrollTrigger, or plain JS
Source GSAP ScrollTrigger ↗
Halden · Digital bank
ScrollNewLight

Count-up on reveal

How IntersectionObserver with the scroller as root; ease-out value over 1.4 s
Usually plain JS, or CountUp.js
Source MDN IntersectionObserver ↗
Quill · Independent publisher
ScrollNewLight

Sticky word swap

How position: sticky inside a tall track; word index = floor(progress × 4)
Usually CSS sticky + a few lines of JS, or GSAP ScrollTrigger pin
Source MDN position: sticky ↗
Rove · Travel planner
ScrollNewMedium

Zoom through the letter

How SVG mask cuts the word out of a cover layer; scale around the O's centre with progress³
Usually GSAP ScrollTrigger + SVG mask
Source MDN SVG mask ↗
Hive · Co-working
ScrollNewLight

Snap gallery with dots

How scroll-snap-type: x mandatory; active = round(scrollLeft ÷ slide step)
Usually plain CSS scroll snap, or Embla / Swiper
Source MDN scroll-snap-type ↗
Aerilon · Regional airline
ScrollNewLight

Scroll-drawn route

How stroke-dashoffset = length × (1 − progress); marker at getPointAtLength(length × progress)
Usually GSAP ScrollTrigger + DrawSVG / MotionPath
Source MDN getPointAtLength ↗
Quill · Independent publisher
ScrollNewLight

Background colour shift

How position between two sections → t; background = color-mix(in oklab, A, B, t)
Usually GSAP ScrollTrigger, or plain JS + color-mix()
Source MDN color-mix() ↗
Lumen · Art museum
ScrollNewLight

Cards fan out

How per card: rotate (i − 2) × 14° × progress, translateX (i − 2) × 18cqw, transform-origin bottom
Usually GSAP ScrollTrigger, or CSS scroll-driven animations
Source MDN transform-origin ↗
Oriel · Opticians
ScrollNewMedium

Image sequence scrub

How 48 pre-rendered frames; drawImage(frames[round(progress × 47)]) on a canvas
Usually a JPG/WebP sequence + canvas, with GSAP ScrollTrigger
Source CSS-Tricks, Apple-style scrub ↗
Rove · Travel planner
ScrollNewMedium

Smooth scroll (lerp)

How each frame: smooth += (scrollTop − smooth) × 0.1; content translateY(−smooth)
Usually Lenis, or GSAP ScrollSmoother
Source Lenis on GitHub ↗
Oriel · Opticians
ScrollNewLight

Hide-on-scroll header

How compare scrollTop with last frame; down past 8px → translateY(−100%), up → 0
Usually plain JS, or Headroom.js
Source Headroom.js on GitHub ↗
Cadence · Fitness app
ScrollNewLight

Back-to-top ring

How ring stroke-dashoffset = circumference × (1 − progress); scrollTo({ top: 0, behavior: 'smooth' })
Usually plain JS + SVG
Source MDN scrollTo() ↗
Solstice · Solar energy
TextLight

Gradient sweep

How gradient clipped to the text, background-position from pointer x
Usually plain CSS, @property for a pure-CSS loop
Source MDN background-clip ↗
Pixel Arcade · Game studio
TextLight

Glitch split

How ::before / ::after copies, random clip-path inset() slices + translateX
Usually plain CSS keyframes, or JS for random bursts
Source Codrops CSS glitch ↗
Oriel · Opticians
TextLight

Blur-in words

How one span per word, filter: blur(12px) → 0 with staggered delays
Usually GSAP SplitText, Motion, or plain CSS
Source GSAP SplitText ↗
Fieldnote · Design studio
TextLight

Highlighter marker

How background-size 0% → 100% on <mark>, staggered transitions
Usually plain CSS, triggered by IntersectionObserver
Source MDN background-size ↗
Aerilon · Regional airline
TextMedium

Text on a path

How SVG <textPath>, startOffset animated, path d rebuilt from pointer y
Usually plain SVG + JS
Source MDN textPath ↗
Quill · Independent publisher
TextLight

Word rotator

How masked column of words, translateY by index; slot width eased to the word
Usually React Bits RotatingText, Motion, or plain CSS
Source React Bits on GitHub ↗
Crumb · Neighbourhood bakery
TextMedium

Jelly letters

How a damped spring per letter; velocity drives scaleX / scaleY squash
Usually GSAP elastic eases, Motion springs, or plain JS
Source GSAP eases ↗
Quill · Independent publisher
TextLight

Rotating badge

How SVG text on a circle; Web Animations playbackRate eased on hover
Usually plain SVG + CSS, or GSAP timeScale
Source MDN playbackRate ↗
Pixel Arcade · Game studio
TextHeavy

ASCII render

How brightness per grid cell → character from " .:-=+*#%@", canvas fillText
Usually Three.js AsciiEffect, or canvas 2D
Source three.js AsciiEffect ↗
KINETIK · Running shoes
TextMedium

Kinetic stretch

How scaleY per letter from a bell curve around pointer x
Usually plain JS, or variable-font width axes where the font has one
Source MDN scaleY() ↗
Quill · Independent publisher
TextMedium

Scroll text fill

How scroll progress × word count → each word's opacity
Usually GSAP ScrollTrigger, or CSS animation-timeline: view()
Source MDN view() timeline ↗
Mori · Tea house
TextLight

Outline to fill

How -webkit-text-stroke + a hard-stop gradient clipped to the text at --p
Usually plain CSS + one custom property
Source MDN text-stroke ↗
Lumen · Art museum
TextMedium

Split-flap board

How each cell is two halves; the top flap rotates down, then the bottom flap rotates in
Usually Web Animations API, or React Bits SplitFlapText
Source React Bits SplitFlapText ↗
Nimbus · Developer cloud
TextLight

Rolling letters

How two stacked copies per letter in a 1em window, translateY(−1em) with staggered delays
Usually plain CSS transitions
Source Codrops 3DLettersMenuHover ↗
Voltline · Electric cars
TextNewLight

3D letter flip-in

How one span per letter, rotateX(-100deg) → 0 from a top hinge, staggered, perspective on the line
Usually GSAP SplitText, or plain CSS keyframes
Source MDN rotateX() ↗
Fieldnote · Design studio
TextNewMedium

Long shadow

How 22 stacked text-shadows along the vector away from the pointer, fading with color-mix()
Usually plain CSS, or a Sass loop for a fixed angle
Source MDN text-shadow ↗
KINETIK · Running shoes
TextNewMedium

Explode and reassemble

How random velocity + drag for 0.55s, then a damped spring per letter on x, y and rotation
Usually GSAP with elastic eases, or Motion springs
Source GSAP eases ↗
Nord Audio · Headphones
TextNewMedium

Sine wave letters

How translateY = A · sin(t + i · 0.55) per letter, tilt from the slope, A from pointer y
Usually plain JS, or GSAP with a sine ease and stagger
Source MDN Math.sin() ↗
Fieldnote · Design studio
TextNewLight

Handwritten signature

How stroke-dasharray = path length, dashoffset runs to 0; the nib sits at getPointAtLength()
Usually plain SVG + JS, or GSAP DrawSVG
Source MDN stroke-dashoffset ↗
Mori · Tea house
TextNewLight

Link underline styles

How a ::after bar on scaleX with a switched transform-origin, a growing background-size, or a masked wave
Usually plain CSS
Source MDN text-decoration ↗
Lumen · Art museum
TextNewLight

Line mask reveal

How overflow: hidden per line, inner span translateY(110%) → 0 with a stagger (Web Animations API)
Usually GSAP SplitText in lines mode
Source GSAP SplitText ↗
Fieldnote · Design studio
TextNewMedium

Karaoke highlight

How per-word gradient clipped to the text; background-position follows each word's slice of the timeline
Usually plain CSS + JS timing, or WebVTT cue timestamps
Source MDN background-clip ↗
Nord Audio · Headphones
TextNewLight

Balanced headlines

How text-wrap: balance on headings (and text-wrap: pretty on paragraphs)
Usually plain CSS
Source MDN text-wrap ↗
Fieldnote · Design studio
TextNewLight

Fluid type with clamp()

How font-size: clamp(min, cqw or vw, max), sized to the container
Usually plain CSS, scales generated with Utopia
Source MDN clamp() ↗
Mori · Tea house
TextNewLight

Tracking breathe

How letter-spacing −0.05em ↔ 0.32em while font-weight runs 800 ↔ 250 on a variable font
Usually plain CSS transitions, or GSAP
Source MDN letter-spacing ↗
Pixel Arcade · Game studio
TextNewMedium

Fuzzy text

How text drawn once to an offscreen canvas, then copied back in 2px rows with random x offsets each frame
Usually canvas 2D (React Bits FuzzyText)
Source React Bits on GitHub ↗
Fieldnote · Design studio
TextNewMedium

Text pressure

How per-letter distance to pointer → font-weight 250–900 plus scaleX/scaleY from the baseline
Usually plain JS + a variable font (React Bits TextPressure)
Source MDN font-variation-settings ↗
Hive · Co-working
3DLight

Card flip

How two faces with backface-visibility: hidden, the back pre-rotated 180°
Usually plain CSS transitions
Source MDN: backface-visibility ↗
Voltline · Electric cars
3DLight

3D ring carousel

How each card rotateY(i × 45°) translateZ(r), with r = (card width ÷ 2) ÷ tan(180° ÷ 8)
Usually plain CSS 3D transforms, or Swiper's 3D effects
Source Intro to CSS 3D: Carousel ↗
KINETIK · Running shoes
3DLight

CSS cube

How six faces, each rotated to its side and pushed out by half the cube's width with translateZ
Usually plain CSS 3D transforms
Source Intro to CSS 3D: Cube ↗
Lumen · Art museum
3DLight

Exploded layers

How rotateX(55°) rotateZ(−45°) on the stack, each layer at translateZ(i × gap)
Usually plain CSS 3D, common in product and API explainers
Source MDN: translateZ() ↗
Maison Lune · Boutique hotel
3DLight

Page flip

How transform-origin on the left edge, rotateY(0 → −180deg), backface-visibility: hidden
Usually CSS 3D, Codrops BookBlock, or turn.js
Source codrops/BookBlock ↗
Voltline · Electric cars
3DNewLight

Coverflow

How distance from centre → translateX, translateZ and rotateY per card
Usually Swiper's coverflow effect
Source Swiper API ↗
Fieldnote · Design studio
3DNewLight

Solid 3D type

How translateZ per copy inside preserve-3d, colour stepped front to back
Usually plain CSS, or TextGeometry in Three.js
Source MDN: transform-style ↗
Obsidian · Security software
3DNewMedium

Isometric blocks

How rotateX + rotateZ grid; each block is a top face with two hanging sides, height from a CSS variable
Usually plain CSS 3D
Source MDN: Using CSS transforms ↗
Voltline · Electric cars
3DNewMedium

Card helix

How translateY + rotateY + translateZ per card, opacity from cos(angle)
Usually plain CSS 3D, or GSAP
Source Intro to CSS 3D transforms ↗
Cadence · Fitness app
3DNewLight

Layered poster

How card tilt, each layer translated by its depth, sheen angle from the pointer
Usually Atropos, or plain CSS
Source Atropos ↗
Crumb · Neighbourhood bakery
3DNewLight

Paper fold

How nested panels, rotateY alternating +a and −2a, shade overlay set by the fold angle
Usually plain CSS 3D
Source MDN: rotateY() ↗
Voltline · Electric cars
3DNewMedium

Type ring

How rotateY(i × 360° / n) translateZ(r) per letter, opacity from the letter's facing angle
Usually plain CSS, or Splitting.js
Source MDN: translateZ() ↗
Aerilon · Regional airline
Canvas & WebGLMedium

Dot globe

How Fibonacci-sphere points, rotated then projected to 2D each frame
Usually canvas 2D, or cobe / Three.js
Source shuding/cobe ↗
Verde · Botanical skincare
Canvas & WebGLHeavy

Mesh gradient shader

How fragment shader: domain-warped value noise mixing four colours
Usually raw WebGL, Three.js ShaderMaterial, or a shader-gradient library
Source The Book of Shaders: Noise ↗
Tidewater · Surf school
Canvas & WebGLMedium

Halftone

How a 45° dot lattice; radius = brightness from a moving light plus a slow wave
Usually canvas 2D, or a WebGL post-process pass
Source MDN: arc() ↗
Pixel Arcade · Game studio
Canvas & WebGLMedium

Pixel mosaic reveal

How draw the scene small, then scale it up with imageSmoothingEnabled = false
Usually canvas 2D, or a pixelate shader
Source MDN: imageSmoothingEnabled ↗
Aerilon · Regional airline
Canvas & WebGLMedium

Starfield warp

How each star has x, y, z; screen position = x ÷ z, with a streak from last frame's position
Usually canvas 2D, or Three.js Points
Source MDN: Basic animations ↗
Pixel Arcade · Game studio
Canvas & WebGLMedium

Film grain and scanlines

How a half-resolution noise canvas redrawn every other frame, plus repeating-gradient scanlines and a radial vignette
Usually canvas, or an SVG feTurbulence overlay
Source MDN: feTurbulence ↗
Obsidian · Security software
Canvas & WebGLHeavy

Ordered dither

How each pixel's brightness vs a 4×4 Bayer threshold matrix → one of two colours
Usually canvas 2D, or a WebGL post-process shader
Source dithering-shader ↗
Hive · Co-working
Canvas & WebGLHeavy

Reaction-diffusion

How two chemicals diffuse and react on a 120×90 grid (Gray-Scott), 10 steps a frame
Usually WebGL ping-pong framebuffers; canvas 2D at small sizes
Source Karl Sims: reaction-diffusion ↗
Tidewater · Surf school
Canvas & WebGLHeavy

Water ripples

How two height buffers: next = neighbours ÷ 2 − previous, damped; the slope offsets and shades each pixel
Usually jquery.ripples (WebGL), or canvas 2D
Source jquery.ripples ↗
Voltline · Electric cars
Canvas & WebGLNewHeavy

Lit 3D mesh

How vertex + fragment shader: Lambert diffuse, Blinn highlight and a rim term
Usually Three.js or React Three Fiber
Source MDN: Lighting in WebGL ↗
Voltline · Electric cars
Canvas & WebGLNewHeavy

Chromatic split

How one texture sampled three times, offsets set by pointer speed
Usually Three.js RGBShiftShader, or a post-processing pass
Source three.js RGBShiftShader ↗
Obsidian · Security software
Canvas & WebGLNewMedium

Terrain flyover

How noise heightmap, perspective divide (x / z, y / z) for every grid point
Usually canvas 2D, or a Three.js PlaneGeometry
Source three.js terrain example ↗
Aerilon · Regional airline
Canvas & WebGLNewMedium

Tunnel

How each ring has a depth z, radius = size / z, recycled to the back once it passes the camera
Usually canvas 2D, or a WebGL shader
Source Lode's tunnel tutorial ↗
Voltline · Electric cars
Canvas & WebGLNewMedium

Torus knot cloud

How torus knot formula (p = 2, q = 3), perspective projection, 5 depth buckets drawn back to front
Usually canvas 2D, or Three.js Points
Source Torus knot ↗
Verde · Botanical skincare
Canvas & WebGLNewHeavy

Scroll-morphing 3D sculpture

How one fragment shader raymarches five distance-field shapes; scroll position picks two neighbours and blends them, a spring smooths the scroll
Usually Three.js or React Three Fiber with GSAP ScrollTrigger
Source Inigo Quilez: distance functions ↗
Crumb · Neighbourhood bakery
PhysicsMedium

Falling tags

How gravity + box collisions, fixed 120 Hz steps, transform per tag
Usually Matter.js, or a small hand-rolled solver
Source Matter.js ↗
Summit · Outdoor gear
PhysicsMedium

Verlet rope

How Verlet points + distance constraints solved 14× per step
Usually canvas 2D, or Matter.js constraints
Source Verlet integration ↗
KINETIK · Running shoes
PhysicsMedium

Drag and throw

How release velocity from the last 80 ms of drag, then friction + wall bounce
Usually GSAP Draggable + InertiaPlugin
Source GSAP Inertia ↗
Crumb · Neighbourhood bakery
PhysicsLight

Squishy button

How damped spring on scaleX / scaleY (stiffness 520, damping 10)
Usually Motion spring, or react-spring
Source Motion spring ↗
Hive · Co-working
PhysicsMedium

Confetti burst

How particles with gravity, air drag, spin, and a cos() width flip for flutter
Usually canvas-confetti
Source canvas-confetti ↗
KINETIK · Running shoes
PhysicsMedium

Swipe card stack

How drag sets translateX + rotate(dx × k); fling past a threshold, else spring to 0
Usually Motion drag, or Codrops CardStackEffects
Source codrops/CardStackEffects ↗
Summit · Outdoor gear
PhysicsNewMedium

Verlet cloth

How Verlet points on a grid, distance constraints relaxed 3× per step, threads break past 3× their length
Usually canvas 2D, or a cloth shader in Three.js
Source Verlet integration ↗
Nord Audio · Headphones
PhysicsNewLight

Pendulum wave

How pendulum i swings 16 + i times per cycle, position = A · cos(2πt / Tᵢ)
Usually canvas 2D or SVG, driven only by the clock
Source Pendulum wave ↗
Ferra · Coffee roasters
PhysicsNewMedium

Newton's cradle

How 5 pendulums at 480 Hz; touching balls moving toward each other swap velocities
Usually canvas 2D, or Matter.js constraints
Source Newton's cradle ↗
Verde · Botanical skincare
PhysicsNewMedium

Rising bubbles

How rise speed ∝ 1/radius, sideways sine wobble; pop spawns droplets under gravity
Usually canvas 2D, or tsParticles
Source Nature of Code: particles ↗
Bloom & Stem · Florist
PhysicsNewHeavy

Gravity orbits

How a = GM · d / (|d|² + ε²)^1.5 from each mass, integrated at 120 Hz, trails by painting the background at 16% opacity
Usually canvas 2D, or a GPGPU simulation in WebGL
Source N-body problem ↗
Tidewater · Surf school
PhysicsNewMedium

Soft body blob

How ring of 24 points, edge springs + a pressure force along each edge normal ∝ lost area
Usually canvas 2D, or Matter.js soft bodies
Source Soft-body dynamics ↗
Hive · Co-working
PhysicsNewLight

Snap to slots

How on release pick the nearest slot, swap targets, damped spring x'' = k(target − x) − c·x'
Usually GSAP Draggable with snap, dnd-kit, or SortableJS
Source GSAP Draggable ↗
Summit · Outdoor gear
PhysicsNewMedium

Bead garland

How Verlet points with fixed ends, 8 constraint passes, pointer velocity added to nearby beads
Usually canvas 2D, or Matter.js composites
Source Nature of Code: physics ↗
Hive · Co-working
LayoutLight

FLIP reorder

How First rect, Last rect, Invert with transform, Play with element.animate()
Usually GSAP Flip plugin
Source Paul Lewis, FLIP your animations ↗
Obsidian · Security software
LayoutLight

Bento hover expand

How animated grid-template-columns / rows fr values, set by :has() or JS
Usually plain CSS Grid
Source MDN :has() ↗
Summit · Outdoor gear
LayoutLight

Smooth accordion

How grid-template-rows: 0fr → 1fr, or height: auto with interpolate-size: allow-keywords
Usually plain CSS, or <details> with ::details-content
Source MDN interpolate-size ↗
Hive · Co-working
LayoutLight

Expanding panels

How flex-grow transition on the active panel, label rotate(-90deg) → none
Usually plain CSS flexbox
Source MDN flex-grow ↗
KINETIK · Running shoes
LayoutMedium

Infinite drag canvas

How tile position = (base + offset) mod wall size, velocity with decay after release
Usually GSAP Draggable + Inertia, or WebGL for thousands of tiles
Source GSAP Draggable ↗
Cadence · Fitness app
LayoutMedium

Dock magnification

How size = 1 + k × smoothstep(1 − distance / range), springed each frame
Usually Motion, or the React Bits Dock
Source React Bits Dock ↗
Maison Lune · Boutique hotel
LayoutLight

Anchored menu highlight

How anchor-name on the hovered item, the pill uses position-anchor + anchor() insets
Usually plain CSS (Chromium 125+), JS measuring as fallback
Source MDN anchor positioning ↗
Rove · Travel planner
LayoutNewLight

Shared-element zoom

How FLIP: measure the thumbnail and the full view, start the full view scaled down onto the thumbnail, animate the transform to none
Usually Motion layoutId, GSAP Flip, or the View Transitions API
Source Motion: layout animations ↗
Maison Lune · Boutique hotel
LayoutNewLight

Drawer with backdrop

How translateX on an overshooting cubic-bezier, page scaled to .94, staggered item transitions
Usually Vaul, Radix Dialog, or plain CSS
Source Vaul on GitHub ↗
Nimbus · Developer cloud
LayoutNewLight

Directional tabs

How compare old and new index for the direction, translateX ±35% with a fade, container height animated to the panel's measured height
Usually Radix Tabs + Motion, or CSS interpolate-size for the height
Source Radix: Tabs ↗
Lumen · Art museum
LayoutNewMedium

Stacked toasts

How each toast placed by its depth (translateY + scale), per-toast timer drives a progress bar, drag past 28% of the width dismisses
Usually Sonner, react-hot-toast, or plain JS
Source Sonner on GitHub ↗
Nimbus · Developer cloud
TransitionsLight

View Transitions morph

How document.startViewTransition() + a shared view-transition-name
Usually the native API, or Astro / Next.js view transitions
Source MDN View Transition API ↗
Mori · Tea house
TransitionsLight

Circle page transition

How clip-path: circle(0 → corner distance at click x y), animated
Usually Barba.js or Swup + GSAP, or View Transitions
Source MDN circle() ↗
Halden · Digital bank
TransitionsLight

Preloader curtain

How eased counter, then two halves translateY out, headline staggered in
Usually a GSAP timeline
Source GSAP Timeline ↗
Obsidian · Security software
TransitionsLight

Grid wipe

How 48 squares, scale transition delayed by (row + column)
Usually GSAP stagger with grid: [6, 8]
Source GSAP staggers ↗
Nimbus · Developer cloud
TransitionsLight

Skeleton shimmer

How placeholder blocks with a moving linear-gradient background, swapped for content
Usually plain CSS, or a UI kit Skeleton component
Source CSS-Tricks skeleton screens ↗
Crumb · Neighbourhood bakery
TransitionsLight

Entry with @starting-style

How @starting-style sets the first frame and a transition does the rest; transition-behavior: allow-discrete also animates display
Usually plain CSS, no library
Source MDN @starting-style ↗
Lumen · Art museum
TransitionsLight

Layered unreveal

How clip-path: polygon() on 3 overlay layers, staggered cover → swap → uncover
Usually GSAP + Barba.js, or Codrops UnrevealEffects
Source codrops/UnrevealEffects ↗
Aerilon · Regional airline
TransitionsNewLight

Icon path morph

How both shapes drawn with the same number of points; each point interpolated, then written to the path's d attribute
Usually GSAP MorphSVG, Flubber, or plain JS
Source MDN: d attribute ↗
Solstice · Solar energy
TransitionsNewLight

Stair transition

How scaleY 0→1 from the top with a per-column delay, swap content, then scaleY 1→0 from the bottom
Usually GSAP timeline with Barba.js, or Astro/Next route transitions
Source Codrops PageTransitions ↗
Mori · Tea house
TransitionsNewLight

Block reveal

How a block scales in from the left, content switches on at the halfway mark, the block scales out to the right
Usually GSAP timeline, or Web Animations API with offset keyframes
Source Codrops: block reveal effects ↗
Maison Lune · Boutique hotel
TransitionsNewLight

Full-screen menu

How clip-path: circle() centred on the button, radius 0% → 150%, links on staggered transition delays
Usually plain CSS, or GSAP timeline
Source MDN: circle() ↗
Cadence · Fitness app
TransitionsNewMedium

Spring modal

How a damped spring drives scale and the offset from the button's centre; the backdrop blurs with backdrop-filter
Usually Motion spring, react-spring, or a native <dialog>
Source Motion: spring ↗
Rove · Travel planner
TransitionsNewLight

Ken Burns carousel

How opacity crossfade between stacked slides; each slide runs a slow scale + translate keyframe from its own origin
Usually plain CSS, Swiper with a fade effect, or GSAP
Source Wikipedia: Ken Burns effect ↗
Mori · Tea house
TransitionsNewLight

Headline page swap

How each line is an overflow-hidden mask holding two copies; old copy translateY 0 → −105%, new copy 105% → 0, 90ms apart
Usually GSAP SplitText with Barba.js or a framework router
Source GSAP SplitText ↗
Verde · Botanical skincare
TransitionsNewLight

Button to form morph

How one element transitions width, height, border-radius and background; label, form and success message crossfade inside it
Usually plain CSS transitions, or Motion layout animations
Source MDN: using CSS transitions ↗
Obsidian · Security software
BackgroundsNewLight

Dot grid spotlight

How two radial-gradient dot patterns; the bright one is masked by a circle at the pointer
Usually plain CSS + 3 lines of JS, or Aceternity dot background
Source Aceternity: grid and dot backgrounds ↗
Hive · Co-working
BackgroundsNewLight

Animated grid squares

How a CSS line grid plus a pool of 22 squares, each faded in and out with the Web Animations API
Usually Magic UI Animated Grid Pattern, or plain SVG
Source Magic UI: animated grid pattern ↗
Nimbus · Developer cloud
BackgroundsNewLight

Background beams

How SVG paths with pathLength="100" and a short dash; stroke-dashoffset runs it from start to end
Usually plain SVG + CSS, or Aceternity Background Beams
Source Aceternity: background beams ↗
Nord Audio · Headphones
BackgroundsNewMedium

Wavy lines

How canvas polylines: two layered sines per line, plus a Gaussian pull toward the pointer
Usually canvas 2D, or Aceternity Wavy Background (simplex noise)
Source Aceternity: wavy background ↗
Solstice · Solar energy
BackgroundsNewLight

Aurora curtains

How a stage-coloured stripe gradient over a colour stripe gradient, both 300% wide, panned and blurred, masked to one corner
Usually plain CSS, or Aceternity Aurora Background
Source Aceternity: aurora background ↗
Solstice · Solar energy
BackgroundsNewMedium

Sparkles

How canvas particles; brightness = sin(time × speed + phase)³, so each one flashes briefly
Usually tsParticles, or Aceternity Sparkles
Source Aceternity: sparkles ↗
Bloom & Stem · Florist
BackgroundsNewLight

Light rays

How two repeating-conic-gradient layers with different ray widths, rotated in opposite directions and faded with a radial mask
Usually plain CSS
Source MDN: conic-gradient() ↗
Nord Audio · Headphones
BackgroundsNewHeavy

Plasma

How four sines summed per pixel on a 96 × 72 buffer, mapped through a looping colour table, then scaled up smoothly
Usually canvas 2D ImageData, or a fragment shader
Source Lode's tutorial: plasma ↗
Summit · Outdoor gear
BackgroundsNewMedium

Topographic contours

How marching squares: each 8 px cell finds where the height field crosses each contour level and draws that segment
Usually canvas 2D, or d3-contour
Source Wikipedia: marching squares ↗
Pixel Arcade · Game studio
BackgroundsNewHeavy

Voronoi cells

How per pixel, find the nearest and second-nearest seed; if the two distances are close, it's an edge
Usually canvas 2D, d3-delaunay, or a shader
Source Wikipedia: Voronoi diagram ↗
Solstice · Solar energy
BackgroundsNewLight

@property gradient mesh

How @property registers --x/--y as <percentage>, so @keyframes can interpolate the radial-gradient centres
Usually plain CSS
Source MDN: @property ↗
Ferra · Coffee roasters
BackgroundsNewHeavy

Vortex

How polar coordinates: angle speed grows as 1 / radius, radius shrinks each frame; trails come from a translucent fill
Usually canvas 2D, or Aceternity Vortex (simplex noise)
Source Aceternity: vortex ↗
Solstice · Solar energy
BackgroundsNewLight

Grainy gradient

How a 260% gradient panned with background-position plus hue-rotate(), under an SVG feTurbulence noise tile in overlay blend
Usually plain CSS, a lighter alternative to a WebGL mesh gradient
Source CSS-Tricks: grainy gradients ↗
Cadence · Fitness app
UI detailsNewLight

Day/night toggle

How one class flips; knob translate + rotate, craters, stars and clouds each transition with their own delay
Usually plain CSS transitions, or Lottie / Rive for illustrated switches
Source MDN transition ↗
Crumb · Neighbourhood bakery
UI detailsNewLight

Like burst

How restart one class: scale keyframes with overshoot, a shrinking ring border, dots on rotate(a) translateY()
Usually plain CSS keyframes, or mo.js / Motion for bursts
Source mo.js on GitHub ↗
Maison Lune · Boutique hotel
UI detailsNewLight

Menu icon morph

How each bar gets translateY + rotate; the arrows shrink the outer bars from one end with transform-origin
Usually plain CSS, or an SVG path morph
Source MDN transform-origin ↗
Ferra · Coffee roasters
UI detailsNewLight

Button hover fills

How a ::before layer scaled or slid behind the label; the roll uses a text-shadow copy one line down
Usually plain CSS transitions
Source MDN transform-origin ↗
Cadence · Fitness app
UI detailsNewLight

Loader set

How @keyframes on transform and opacity only, staggered with animation-delay
Usually plain CSS, SpinKit, or Lottie for branded loaders
Source SpinKit on GitHub ↗
Aerilon · Regional airline
UI detailsNewLight

Progress ring to success

How circle with pathLength="100"; stroke-dashoffset = 100 − progress, then a check path draws from 1 to 0
Usually SVG + CSS transitions
Source MDN stroke-dashoffset ↗
Hive · Co-working
UI detailsNewMedium

Sortable list

How rows sit on translateY slots; dragging swaps slots in an order array and the others glide there with a transition
Usually SortableJS, dnd-kit, or Motion Reorder
Source SortableJS on GitHub ↗
KINETIK · Running shoes
UI detailsNewMedium

Elastic slider

How pointer velocity → target tilt; a damped spring eases the bubble back to 0°; each digit is a 0–9 reel
Usually native range input + JS, or Motion springs
Source MDN input type=range ↗
Crumb · Neighbourhood bakery
UI detailsNewLight

Star rating

How the hovered count adds a class to the first n stars; transition-delay: calc(var(--i) × 40ms) staggers them
Usually plain CSS + a few lines of JS
Source MDN transition-delay ↗
Cadence · Fitness app
UI detailsNewLight

Hold to confirm

How pointerdown starts a progress value; clip-path: inset() reveals the filled copy; pointerup rewinds it
Usually plain JS + CSS, or a Motion value
Source MDN pointerdown ↗
Nimbus · Developer cloud
UI detailsNewLight

Copy to check

How three SVG strokes with pathLength="1"; stroke-dashoffset swaps between 0 and 1 with a short delay
Usually SVG + CSS, with navigator.clipboard.writeText()
Source MDN Clipboard.writeText ↗
Rove · Travel planner
UI detailsNewMedium

Pull to refresh

How shown pull = max × (1 − 1 ÷ (1 + raw ÷ max)), so it resists more the further you pull
Usually native on phones; overscroll-behavior + JS on the web
Source MDN overscroll-behavior ↗
Cadence · Fitness app
UI detailsNewMedium

Bell shake and badge

How two damped springs (bell and clapper) plus a third for the badge scale, stepped every frame
Usually Motion springs, or plain JS physics
Source Motion spring ↗
Halden · Digital bank
UI detailsNewLight

Password strength meter

How every keystroke re-checks four rules; the count met sets a level class that colours the first n segments
Usually plain JS, or zxcvbn for a real strength estimate
Source zxcvbn on GitHub ↗
Verde · Botanical skincare
GenerativeNewHeavy

Boids flocking

How separation + alignment + cohesion per neighbour within 34px, flee force near the pointer
Usually canvas 2D, or instanced meshes in Three.js for thousands
Source Craig Reynolds: Boids ↗
Fieldnote · Design studio
GenerativeNewHeavy

Particle text

How draw the word off-screen, sample opaque pixels with getImageData, spring each particle to one
Usually canvas 2D, or GPU points in Three.js
Source MDN getImageData ↗
Pixel Arcade · Game studio
GenerativeNewHeavy

Falling sand

How cellular automaton on a pixel grid, scanned bottom-up, drawn with putImageData
Usually canvas 2D, or WebGL / WebGPU compute for big grids
Source Falling-sand game ↗
Halden · Digital bank
GenerativeNewMedium

Game of Life

How count 8 neighbours on a wrapping grid, apply B3/S23, fade dead cells for a trail
Usually canvas 2D, or a fragment shader ping-pong
Source Conway's Game of Life ↗
Verde · Botanical skincare
GenerativeNewMedium

Growing tree

How recursive branching with random angles, each branch grows after its parent, sway = sin(t + depth)
Usually canvas 2D, SVG, or L-systems
Source Nature of Code: fractals ↗
Nord Audio · Headphones
GenerativeNewLight

Harmonograph

How x = Σ Aᵢ sin(fᵢt + pᵢ) e^(−dᵢt), same for y, drawn as a growing path
Usually canvas 2D or SVG path
Source Harmonograph ↗

Coming soon

Be the first to know.

195 effects, and a one-click install for Shopify. Leave your email and you'll hear first.

Beta feedback

Tell me what you think.

What works, what breaks, which effect you wish existed. I read every message.

Free · one step

See how every effect works

Enter your email once to read the description under every effect. It also unlocks the free effects.