Your Motion Designer
Get notified

Coming soon

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

Premium animations for your website. Press Copy, then paste into your site builder or your AI assistant: Shopify, Webflow, Wix, WordPress, Claude Code, Emergent.

Get notified Try the free effects

The effects

Running live. Move your pointer over them.

Bloom & Stem · Florist

Metaballs

Blobs that merge when they touch and split as they part, like a lava lamp. One blob follows the pointer.

Lumen · Art museum

Holographic foil

A collectible card whose foil layer shifts colour as it tilts, with a sparkle pattern and a glare that follow the light, like a rare trading card.

Verde · Botanical skincare

Flow field

Hundreds of particles follow invisible currents and leave fading trails. The pointer stirs a whirlpool into the current.

Ferra · Coffee roasters

Lava lamp

Wax rises from a warm pool, stretches, splits and sinks back down. Hover to turn up the heat. A soft, slow backdrop for wellness, focus or night-time products.

Tidewater · Surf school

Raymarched shapes

A sphere and a rounded cube melt into each other and cast soft shadows, with no triangles at all: every pixel finds the surface by stepping along a ray. The light follows the pointer.

Tidewater · Surf school

Hover distortion

The picture warps like water in proportion to how fast the pointer moves, then settles. On a real site this runs over a campaign photo.

Obsidian · Security software

Perspective grid floor

A retro grid runs toward you under a striped sun, and the vanishing point follows the pointer. The eighties synthwave look, in CSS.

Maison Lune · Boutique hotel

Neon sign

Glowing tube letters on a dark wall, with the odd letter stuttering off and the whole sign browning out now and then. Instant late-night atmosphere.

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 Emergent. We show you where.

Free

Free effects.

This is the beta. Enter your email once to unlock them all, and we'll tell you when new effects arrive.

We'll email you about new effects and the launch. Unsubscribe any time.

Oriel · Opticians

Mouse parallax

Free

Each layer moves a different distance with the pointer. Near layers move most, so flat shapes read as depth.

Quill · Independent publisher

Scroll parallax

Free

Layers slide at different speeds as the page scrolls. The classic hero with a product floating over a slower background.

Mori · Tea house

Torch reveal

Free

A second layer sits on top, visible only inside a circle that follows the pointer. Works well for a detail shot under a lifestyle image.

Oriel · Opticians

Focus pull

Free

Like a camera racking focus: the pointer's height picks which layer is sharp, and the others blur. Top is far, bottom is near.

Voltline · Electric cars

3D tilt with glare

Free

The card leans toward the pointer and a highlight slides across it. Text inside sits at a different depth, so it floats.

Solstice · Solar energy

Magnetic button

Free

Inside the dashed zone the button is pulled toward the pointer and its label moves a little further. Makes the main call-to-action feel alive.

Verde · Botanical skincare

Particle field

Free

A grid of points pushed away by the pointer, springing back into place. The same idea scales up to WebGL effects that ripple a photo.

Bloom & Stem · Florist

Liquid blob

Free

A chain of circles follows the pointer and melts into the two resting blobs when it gets close, like drops of liquid.

KINETIK · Running shoes

Elastic cursor

Free

The cursor blob stretches in the direction you move, more the faster you go, and snaps back round when you stop.

Aerilon · Regional airline

Scratch card

Free

Rubbing the pointer over a foil layer scratches it away to uncover what is underneath. Works for discount reveals and small moments of play.

Crumb · Neighbourhood bakery

Direction-aware hover

Free

The overlay slides in from whichever edge the pointer came through, and leaves by the edge it exits. Makes a grid of cards feel like it follows your hand.

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.

Lumen · Art museum
LayersLight

Wipe between layers

Two versions of the same picture, split by a line you control. Good for comparing two finishes or lens colours.

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

Stacking cards

As you scroll, each card slides up over the last one, and the cards underneath shrink back a step. A common way to walk through a product story.

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

The top picture is cut into six strips that slide out left and right, one after another, to reveal the layer beneath. Good for switching between two collections.

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

A picture's outline melts between a blob, a wave-edged panel, a rounded card and an arch. Useful for image frames that change shape between sections.

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

A glass pill floats over moving content, blurring and brightening what sits behind it. Where the browser allows an SVG filter in backdrop-filter (Chromium), the edges also bend the content like a lens.

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 ↗
Cadence · Fitness app
MouseMedium

Custom cursor

A dot tracks the pointer exactly while a ring trails behind it. The ring grows over anything clickable. Desktop only by nature.

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

Moving leaves a trail of cards that shrink and fade. On a real page each card is a product or campaign photo.

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

Letters cycle through random characters before settling on the next word. Common on menu links and section labels.

How reveal the real letters left to right, randomise the rest
Usually GSAP ScrambleText, or plain JS
Source GSAP ScrambleText ↗
Nimbus · Developer cloud
MouseLight

Glowing borders

A light follows the pointer across a grid of cards and lights up the borders it passes, including the neighbouring cards. Works well for menus and feature grids.

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

Letters near the pointer swell from thin to heavy and back as it passes. Needs a variable font, which holds every weight in one file.

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

A large circle follows the pointer and inverts every colour underneath it, so the headline flips wherever it passes. A signature look on studio portfolios.

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 ↗
Obsidian · Security software
MouseMedium

Compass grid

A field of short needles that all turn to face the pointer, growing and lighting up as it gets close. Works as a quiet, reactive hero background.

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

A circle of light spreads from the exact spot you pressed and fades out. Confirms the tap on touch screens, where there is no hover.

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 ↗
Oriel · Opticians
MouseLight

Magnifier lens

A round lens follows the pointer and shows the drawing underneath at 2.2 times the size, so the fine print becomes readable. Used on product detail and technical images.

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

Two ribbons trail behind the pointer, thick at the head and tapering to nothing, curling as they catch up. A softer cousin of the custom cursor.

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

The headline is cut into letters that rise out of a hidden line, one after another. The most common hero headline animation.

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

Marquee

Endless rows of text or logos sliding in opposite directions. Hover slows them down without restarting.

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

Line drawing

An outline draws itself stroke by stroke, then fills in. Good for a logo, a signature or a product silhouette.

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

Ambient gradient

Blurred colour shapes drift slowly behind the text. Adds life without drawing attention. The blur is what costs battery on phones.

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

The square turns and the bar fills as this tile crosses the screen, all in CSS. Chrome, Edge and Safari 26 run it natively; Firefox needs the JS fallback.

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

Odometer counter

Each digit is a reel that rolls to its new value, so a changing number reads as a mechanical counter instead of a flicker.

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

An organic shape that slowly changes outline and turns. Often used as a soft backdrop behind a product cut-out.

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

The last word types itself, holds, deletes and types the next, with a blinking caret. Lets one headline speak to several audiences.

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

Icons circle a centre mark on two counter-rotating orbits. The pointer tilts the plane, and items passing in front grow slightly. Common for "works with" integration sections.

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

Pulses of light travel along curved wires from several services into one hub and on to the page. Explains how a product connects things without a paragraph of text.

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

A streak of light runs around the card's edge with a soft glow behind it. Draws the eye to the recommended plan without shouting.

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

Thin streaks shoot diagonally across a dark card at random moments over a still starfield. Sets an event or launch mood with very little cost.

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

A circle fills with gently rolling liquid to a level you set. The number changes colour where the liquid covers it. Nice for progress, stock levels or goals.

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

A field of tiny squares twinkles as random cells brighten and dim, and cells near the pointer light up. A calm, technical backdrop for a stat or a headline.

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

Small objects travel along a curvy route and turn to face the way they are going. Good for delivery trackers, journeys and step-by-step stories.

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

Scrolling down moves a row of panels sideways, with a rail that fills as you go. A common way to tell a five-step story without a carousel.

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

Cards fade and rise one after another the moment the section comes into view. The quiet default for product grids and feature lists.

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

A small framed picture grows until it fills the screen while the headline behind it fades away. Turns a hero into the first scene of a story.

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

The text leans and speeds up in proportion to how fast you scroll, then settles back upright. Makes a page feel physical under a smooth-scroll library.

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

The header restyles itself the moment it sticks to the top of its scroller. Chrome 133+ does it in CSS alone; elsewhere a few lines of JS compare the scroll position. The tile says which one is running.

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

A thin bar across the top fills as you read, and a label counts down the minutes left. Standard on long articles, guides and documentation.

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

A side index highlights the section you are reading, and a marker slides to it. Keeps long pages navigable: docs, case studies, product specs.

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

The frames scroll normally but the pictures inside them move slower, so each photo seems to sit behind a window. A quiet way to add depth to a gallery.

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

Each figure counts up from zero the moment it scrolls into view, and resets when it leaves so it plays again. Common on about pages and results sections.

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

The sentence stays pinned while you scroll, and only its last word changes, one per section. Lets one headline carry four promises.

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

A giant word grows as you scroll until the hole in its O fills the screen and you pass through it into the next chapter. A bold opener for a story page.

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

Swipe sideways and each slide clicks neatly into the centre; the dots and counter follow. The browser does the snapping, so it feels native on phones.

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

A path draws itself as you scroll, with a marker riding the tip and stops lighting up as it passes them. Good for a timeline, a journey or a delivery story.

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

The whole background and text colour blend from one section's palette into the next as you scroll, instead of switching at hard edges. Sets a mood per chapter.

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

A neat stack spreads into a hand of cards as you scroll, each pivoting from its bottom edge. A compact way to reveal services or collections.

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

Scrolling plays a product turntable frame by frame, forwards and backwards, and the lid lifts in the second half. This is how Apple's product pages turn a phone as you scroll.

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)

Both columns get the same scroll input. The left jumps a notch at a time; the right glides after it. That glide is what Lenis adds to most award-winning sites.

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

The header slips away while you scroll down to read, comes back the moment you scroll up, and shrinks once you leave the top. More screen for content on phones.

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

A button appears once you are a fifth of the way down; its ring shows how far you have read, and one tap glides you back to the top.

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

A band of light travels across the letters and follows the pointer. A quiet way to make one headline word feel premium.

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

Two coloured copies of the word jump sideways in thin slices for a split second, like a broken video signal. Suits tech, music and gaming brands.

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

Each word comes into focus in turn, as if a lens were adjusting. Softer than letters sliding up, so it fits calm, editorial brands.

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

Key phrases get a marker stroke drawn under them, one after another. Guides a skimming reader to the three things that matter.

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

A line of type flows along a wave, and the pointer's height sets how deep the wave bends. Good for a banner or a playful section divider.

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

Word rotator

The last word rolls like a slot-machine reel, and the gap resizes to fit each new word. One headline, several audiences.

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

Letters near the pointer jump and wobble on springs, squashing as they land. Friendly and tactile, best kept to a single short word.

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

A ring of text turns slowly around a button and speeds up when you hover. A common "scroll down" or "view work" stamp on portfolio sites.

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

A lit, turning sphere drawn entirely with characters, from space for dark to @ for bright. The pointer moves the light. Reads as retro and technical.

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

Letters grow tall where the pointer is and fall back as it leaves, like pressing piano keys. Turns a plain wordmark into something to play with.

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

Words light up one by one as the paragraph moves up the screen, so reading speed follows scrolling. Popular for manifesto-style statements.

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

A hollow outlined word fills with solid colour up to the pointer. Works as a hover state for big navigation links.

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

Each character flips through a few letters like an airport departures board before landing on the next word. Suits live statuses, countdowns and arrival lists.

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

On hover, each letter of a menu item rolls up and is replaced by a coloured copy from below, one after another. A quiet way to make navigation feel responsive.

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

Each letter swings down from above like a hinged card, one after another. A sturdier cousin of the rising split-text entrance, good for short launch headlines.

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

The word throws a long, solid shadow away from the light, and the shadow swings round as the light moves. A flat-design classic that still reads as depth.

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

The letters burst apart in every direction, spinning, then springs pull each one back to its place with a little overshoot. Playful for a 404 page or a game-like brand.

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

A wave runs through the word, lifting each letter a moment after the one before it. The pointer's height sets how big the swell is.

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

A signature writes itself at a pen's pace, with the nib visible at the tip of the line, then underlines itself with a swash. A personal sign-off for an about page or a letter.

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

Five ways to underline a link on hover, side by side: grow, grow from the middle, slide through, marker fill and a running wave. Pick one and use it everywhere.

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

Each line of a paragraph slides up out of its own hidden slot, one after another, then leaves the same way. The editorial way to bring in a statement.

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

Words fill with colour from left to right in time, with a ball bouncing on the word being read. Moving across the tile scrubs the timeline. Good for podcasts, captions and read-along stories.

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

The same headline in two boxes that change width. The top one leaves a lonely last word; the bottom one spreads the words evenly across its lines. One line of CSS.

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()

The headline grows with its box between a floor and a ceiling, so it never gets too small on a phone or too big on a wide screen. The bar shows which zone it is in.

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

The word opens up and closes in, getting lighter as the letters spread and heavier as they close. A calm, luxurious move for a wordmark or a loading state.

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

The word shivers like a badly tuned TV, each thin strip of it jittering sideways. It hums quietly at rest and breaks up when the pointer is over it.

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

The pointer presses down on the word like a finger: letters under it squash wide and heavy, letters away from it stand tall and thin. Lower pointer, harder press.

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

A card turns over to show its reverse side and leans a little toward the pointer. Good for a product front and back, or a question and its answer.

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

Eight cards stand on a ring and turn in real 3D space. The pointer steers the ring left or right, and cards at the back dim.

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

Six faces folded into a solid cube with nothing but CSS. The pointer turns it; left alone, it spins slowly.

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

A page pulled apart into its four layers and stacked in isometric view. They drift apart and back together; hover to spread them fully.

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

Pages turn around the spine in 3D, with a different face on the back of each sheet. Suits lookbooks, menus and annual reports.

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

Seven covers in a row: the middle one faces you, and the rest turn away and stack behind it. It steps through on its own; drag sideways to browse.

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

Fourteen copies of the same word stacked a few pixels apart in depth read as one solid block of type that turns with the pointer.

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

A 6 × 6 field of CSS blocks seen from above. A wave rolls through it, and the blocks near the pointer rise and light up.

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

Sixteen cards wound around a spiral staircase that turns slowly. Cards on the far side fade back so the front of the spiral reads first.

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

A poster split into sky, moon, hills and title layers that slide at different depths as it tilts, with a sheen passing over it. This is the Apple TV home-screen effect.

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

A printed sheet folds into four panels like a leaflet and opens again, with light and shade on each fold. Move sideways to fold it by hand.

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

A line of text wrapped around an invisible cylinder, spinning. Letters on the far side fade so the ring reads front to back.

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

Six hundred points spread evenly over a sphere, turning slowly, with the far side faded back. The pointer tilts the axis.

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

Soft colour fields flow into each other, like the gradient on Stripe's homepage, and bend around the pointer. Every pixel is computed on the GPU.

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

A light moves across a screen of print dots, and each dot grows with the brightness beneath it. Newspaper printing, running live.

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

The picture breaks into large square pixels, then resolves back to sharp. Hover and move left for coarse, right for sharp.

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

Stars stream out of a vanishing point; hover to jump to warp speed. The pointer steers where you are heading.

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

Moving grain, CRT lines, a faint flicker and dark corners make a flat screen feel like film or an old monitor.

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

A lit sphere and its ring drawn in just two colours, with shading made from a fixed grid of dots, like an early Mac screen. Gives photos and 3D renders a crisp retro print texture.

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

Coral-like patterns grow and branch across the tile on their own, and the pointer plants new seeds. Used as a living, never-repeating background.

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

The picture behaves like the surface of a pond: the pointer and falling drops send rings outward that bend the image and catch the light, then settle.

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

A torus built from about 1,400 points and lit by a real light, with shading, a highlight and a rim glow. Drag sideways to spin it. This is the starting point for any 3D product viewer.

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

Move fast and the red, green and blue channels pull apart like a cheap lens, then settle. Often used on hover over campaign images and in glitchy video intros.

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

A wireframe landscape rolls toward you with a valley down the middle, like a synthwave title sequence. The pointer banks the camera left, right and up.

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

Hexagon rings rush out of the screen and twist as they pass, joined into a tunnel. The pointer steers the far end.

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

1,500 points on a knotted tube spin in space. They're sorted into depth bands, so near points are bigger and brighter.

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 ↗
Crumb · Neighbourhood bakery
PhysicsMedium

Falling tags

Labels drop in under gravity, knock into each other and pile up. The pointer shoves them around. Used for skills, services or product tags in a playful footer.

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

A rope hangs from the top and its weighted end chases the pointer, swinging and settling like the real thing. Good for a hanging tag or a pull-cord menu.

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

Grab the card and fling it. It keeps your speed, slows with friction, bounces off the edges and leans into the motion. The basis of swipeable carousels.

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

The button squashes when pressed and wobbles back into shape. The trace underneath draws the spring settling. Makes a key action feel physical.

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

Paper pieces shoot up, spin, flutter and drift down under air drag. Keep it for real wins: an order placed, a form finished.

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

Drag the top card left or right. Past a threshold it flies off and the next card rises; short of it, it springs back. Good for quizzes, style pickers and onboarding.

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

A sheet of fabric pinned along the top, billowing in gusts of wind. Push it with the pointer, or swipe quickly across it to rip the threads. It re-knits after a while.

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

Fifteen pendulums seen from above, each a little shorter than the last. They drift out of step into snakes, splits and mirror patterns, then line up again every 24 seconds.

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

Drop one ball and one flies out the other side; drop two and two fly out. Click nearer the edge to lift more balls. A calm desk-toy loop for a loading or "about" section.

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

Bubbles wobble upward, big ones slower than small ones, and burst into droplets at the surface or when the pointer touches them. A playful background for a drinks, bath or kids' page.

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

Particles circling a pair of suns that orbit each other, leaving fading trails. Hovering adds a third mass that bends every path it passes.

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

A jelly character that hops around, squashes on landing and bulges when poked. Springs hold its skin together and internal pressure keeps its volume.

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

Drag a block and let go: it springs into the nearest slot, and whatever sat there springs back to where you came from. The feel behind page builders and kanban boards.

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

A string of beads hung between two pins, with a pendant dropping from the middle. Drag through it to pluck the strings; they swing, jostle and settle.

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

When a grid is sorted or filtered, every item glides to its new place instead of jumping. The standard trick behind smooth shop filters.

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

The cell under the pointer takes more room and its neighbours give way, so the grid reshapes around what you look at.

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

Rows open to their natural height with a real slide instead of a snap. Long-standing CSS gap, now solved without measuring heights in JS.

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

Five narrow panels share a row; the one you point at opens wide and its label turns upright. A compact gallery for collections or chapters.

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

A wall of tiles you can throw in any direction; it never runs out because tiles leaving one edge come back on the other. Used for image-heavy portfolios.

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

Icons swell as the pointer passes, and their neighbours grow a little less, like the macOS dock. The row widens, so nothing overlaps.

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

A pill slides between menu items and resizes to fit the one you hover. With CSS anchor positioning the pill is tied to the item in CSS alone; the tile says which version your browser is running.

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

The picture you pick grows out of its own spot in the grid into the full view, and shrinks back into place when closed, so you never lose track of where you were.

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

The bag slides in from the side with a small rubber-band bounce, the page behind dims and steps back, and the items arrive just after. Click outside to close.

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

Moving to a tab on the right slides the content in from the right, going back slides it in from the left, and the box grows or shrinks to fit the new panel.

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

New messages stack like cards, each one smaller and further back. Hovering fans them out and pauses their timers, and a sideways swipe throws one away.

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

A thumbnail grows into its detail view as one continuous shape. Clicking uses the browser's View Transitions API; the automatic loop uses a FLIP fallback.

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

The next page spreads out as a circle from the point you clicked until it covers the screen. Ties the page change to the gesture that caused it.

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

A counter runs to 100, then the screen splits and lifts to reveal the headline. Covers load time on image-heavy sites; keep it under two seconds.

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

Grid wipe

Squares pop in diagonally to cover the screen, the scene changes underneath, then they shrink away. A graphic way to move between sections.

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

Grey shapes in the layout of the real content, with a light sweeping across, until the data arrives. Feels faster than a spinner and avoids layout jumps.

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

New notifications fade and slide in the moment they are added, with no animation code: CSS alone describes the first frame. The same trick animates popovers and dialogs as they open.

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

Three coloured panels sweep across on a slant and cover the page, the content changes underneath, then the panels pull away on the other side. A classic page-to-page transition.

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

Each icon bends into its other state instead of swapping: the play triangle splits into pause bars, the menu folds into a cross. The icon shows what just changed.

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

Five columns drop down one after another to cover the page, the content changes behind them, then they carry on down and out. A common page change on studio and agency sites.

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

A solid bar sweeps across each line and the picture, and the content appears while the bar is on top, then the bar slides away. Headlines arrive with some weight.

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

The menu grows out of its own button as a circle until it fills the screen, the button turns into a close cross, and the links rise in one by one.

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

The dialog springs out of the button you pressed, overshoots a touch and settles, while the page behind blurs. Closing pulls it back into the same button.

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

Slides dissolve into each other while each one slowly pushes in and drifts, like a documentary camera over a still photo. Hovering pauses both the timer and the drift.

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

On a page change the old headline slides up out of its line while the new one slides up in behind it, line by line, with a thin loading bar across the top.

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

The call-to-action button stretches into the sign-up form itself, then shrinks back into a button once the email is in. One object, three states, no pop-up.

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

A quiet grid of dots fills the background, and the dots near the pointer light up in the accent colour. A calm SaaS or changelog hero backdrop that still answers the pointer.

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

A faint square grid where random cells light up and fade, and the cell under the pointer flashes. Reads as a system quietly working in the background.

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

A fan of fine curved lines with pulses of light running along them at different speeds. Suggests data moving through a product without showing any real data.

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

Twenty-eight thin lines ripple like a sound wave, fading from grey to the accent colour. The pointer bends the lines nearest to it, as if pressing on a string.

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

Vertical curtains of colour drift slowly across the top corner, like the northern lights. Different from blurred blobs: the stripes give it folds and direction.

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

Tiny points of light twinkle and drift upward around the headline, and the larger ones flare into four-point stars. They brighten as the pointer passes.

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

Shafts of light fall from above and sway slowly, like sun through a window. The pointer swings the beams. Good for a launch, a release or an editorial cover.

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

The classic demoscene effect: bands of colour flow and loop through the palette forever. The pointer moves the centre of the ripples.

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

Contour lines like a hiking map, slowly shifting as the land changes. The pointer pushes up a hill and every fourth line is drawn heavier, as on a real map.

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

The tile is split into cells, each owned by its closest drifting point, like territories on a map. The pointer is a point too, and carves out its own accent cell.

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

Three soft colour pools glide around each other with no script driving them. CSS can't normally animate a gradient's position, but it can once each position is a registered property.

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

Particles spiral inward, speeding up as they near the centre, then reappear at the edge. The eye of the storm follows the pointer. Strong for a waitlist or countdown.

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

A colour gradient that pans and shifts hue, with a fine print grain over it. It gets the tactile look of a shader gradient for the cost of a few lines of CSS.

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

A theme switch where the knob turns from a sun into a cratered moon, stars fade in and clouds drift away. Makes a dark-mode toggle feel like part of the brand.

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

The heart fills, overshoots and settles while a ring and eight dots burst outward. The same pattern works for save, follow and add-to-wishlist.

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

Three bars fold into a close cross, a forward arrow or a back arrow. The icon tells people what tapping it again will do.

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

Four ways for a button to answer the pointer: a fill from the left, a circle from the centre, a diagonal sweep, and letters that roll to a second copy.

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

Six small loaders that need no images and no JavaScript: ring, bouncing dots, equaliser, orbit, pulse and flipping square.

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

A ring fills as an upload progresses, then turns solid and draws a check mark. The finish tells people it worked without them reading anything.

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

Grab a row by its handle and drag it up or down; the other rows slide out of the way. Used for playlists, section order and priority lists.

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

The value bubble leans against the direction you drag and springs upright when you stop, while its digits roll to the new amount.

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

Stars fill one after another as the pointer moves along them, and tapping locks the rating with a small burst.

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

A destructive action that only fires if you hold for about a second. Letting go early cancels it, so nobody deletes a project by accident.

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

The copy icon draws itself out and a check mark draws in, with a small Copied label. It confirms the click right where the eye already is.

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

Pull the feed down and it stretches like rubber; pull past the line and it refreshes and slides a new message in. Drag with a mouse, or watch it run.

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

The bell rocks and settles, the clapper swings a beat behind, and the badge count pops. A new notification is hard to miss without playing a sound.

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

As the password is typed, the meter fills and changes colour and each rule ticks off. People see what is missing before they submit.

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

Each bird follows three rules: keep some space, match the neighbours' heading, drift toward the group. The pointer is a predator and the flock splits around it.

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

A word made of hundreds of dots, each spring-tied to a pixel of the lettering. The pointer blows them apart, they swarm back, and every few seconds they re-form into a new word.

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

A swinging spout pours grains that tumble and pile into striped dunes. Every grain follows one rule: fall down, or slide diagonally if blocked.

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

Conway's cellular automaton: a cell lives with two or three neighbours and is born with exactly three. Gliders crawl across, and the pointer paints new 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

A tree grows branch by branch from a single trunk, sways in the wind and blossoms at the tips, then regrows from a new random seed. A good "growth" or sustainability motif.

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

A pen driven by decaying pendulums traces looping figures that spiral inward, then the paper clears and a new ratio starts. Pure maths, no randomness in the shape itself.

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.

194 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 effect · beta

Magnetic button

Enter your email to unlock the free effects. You only do this once.

Copy code: for Shopify, Webflow, Wix, WordPress, Framer, Squarespace. Copy for AI: the code plus a ready-made instruction, for Claude Code, Emergent, Lovable or Cursor.
Show the code