DEPTH
move
Oriel · Opticians
LayersMedium
Mouse parallax
Free
Each layer moves a different distance with the pointer. Near layers move most, so flat shapes read as depth.
The library
195 effects. All running live.
Move your pointer over each one; on a phone, drag across it or just watch. The 11 marked Free are ready to copy now. The ones with a lock open with the full library.
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.
SCROLL
scroll the page
Quill · Independent publisher
LayersMedium
Scroll parallax
Free
Layers slide at different speeds as the page scrolls. The classic hero with a product floating over a slower background.
SURFACE
BENEATH
move
Mori · Tea house
LayersLight
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.
Layer A
Layer B
move sideways
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.
FAR
focus: mid
move up and down
Oriel · Opticians
LayersMedium
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.
Card 1 of 4Intro
Card 2 of 4Material
Card 3 of 4Detail
Card 4 of 4Shop
scroll the page
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.
BEFORE
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.
Shape
Blob
hover to morph
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.
Refract · Blur · Tint · Refract · Blur · Tint · Refract · Blur · Tint · Refract · Blur · Tint ·
GLASS GLASS GLASS GLASS GLASS GLASS GLASS GLASS
Refract · Blur · Tint · Refract · Blur · Tint · Refract · Blur · Tint · Refract · Blur · Tint ·
Liquid glass
Checking…
move
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.
Tilt card
rotateX · rotateY · translateZ
Voltline · Electric cars
MouseLight
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.
Discover
move near the button
Solstice · Solar energy
MouseLight
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.
ViewExplore
move, hover the words
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.
move
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.
Motion
hover
Obsidian · Security software
MouseLight
Text scramble
Letters cycle through random characters before settling on the next word. Common on menu links and section labels.
move
Verde · Botanical skincare
MouseHeavy
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.
move
Bloom & Stem · Florist
MouseMedium
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.
Overview
Collection
Materials
Journal
Stockists
Contact
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.
move fast
Tidewater · Surf school
MouseMedium
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.
WEIGHT
move along the word
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.
Lookcloser
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.
Elastic
move fast
KINETIK · Running shoes
MouseMedium
Elastic cursor
Free
The cursor blob stretches in the direction you move, more the faster you go, and snaps back round when you stop.
move
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.
Continue to checkout
Save
Share
Compare
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.
Your welcome gift−20%on your first order
move to scratch
Aerilon · Regional airline
MouseMedium
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.
01Frames
ViewIn from the left
02Lenses
ViewIn from the left
03Cases
ViewIn from the left
04Care
ViewIn from the left
Crumb · Neighbourhood bakery
MouseLight
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.
2.2×
move to read the fine print
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.
Follow
move
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.
Seenup close
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.
Parallax Tilt Reveal TrailParallax Tilt Reveal Trail
Layers · Mouse · Moving · Scroll · Depth ·Layers · Mouse · Moving · Scroll · Depth ·
KINETIK · Running shoes
MovingLight
Marquee
Endless rows of text or logos sliding in opposite directions. Hover slows them down without restarting.
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.
Ambient
runs on its own
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.
Checking your browser…
scroll the page
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.
sample figure
runs on its own
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.
hover to speed up
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.
Made foreveryday.
runs on its own
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.
Web
move to tilt
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.
runs on its own
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.
Studio plan
€24
per month, billed yearly
Start free trial
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.
Launch weekSomething new every day
runs on its own
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.
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.
Uptime, last 90 days99.98%
move
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.
Idea
Live
hover to speed up
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.
01 · SketchPencil
02 · MaterialTitanium
03 · DetailHinge
04 · OpticsLens
05 · FinishCase
scroll the page
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.
Frame
Hinge
Lens
Case
Cloth
Card
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.
Step inside
Coastline, 06:40
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.
Titanium · Hinge · Lens · Titanium · Hinge · Lens ·
Scroll faster · Scroll faster · Scroll faster · Scroll faster ·
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.
Release notesWhat shipped
Checking your browser…
ChangelogIn the flowStuck to the top
- v3.9Scroll-state queries on the header
- v3.8Anchor-positioned tooltips
- v3.7Cross-page view transitions
- v3.6Popover menus, no JS
- v3.5Container queries on cards
- v3.4Variable font, one file
- v3.3AVIF images, half the weight
- v3.2Dark mode with light-dark()
- v3.1Passkey sign-in
- v3.0New grid, subgrid inside
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.
Journal · 4 min read4 min left
Essay
Why fast pages sell more
A visitor decides in the first second whether a page feels quick. Anything that moves before the content is ready reads as a delay, not as polish.
Start with what the reader came for. Load the headline and the main image first, and let decoration arrive once the page can already be used.
Measure the wait people actually feel. Largest Contentful Paint tells you when the main thing appeared; Interaction to Next Paint tells you whether taps respond.
Cut what nobody would miss. A second font weight, an autoplaying carousel and a chat widget on every page each cost more than they return.
Then add motion back where it explains something: a product turning, a price updating, a form confirming it was sent.
End of article
Quill · Independent publisher
ScrollLight
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.
One page that says who the site is for and what it must get them to do.
Boxes and words on paper before anyone opens a design tool.
Real content in the browser early, so problems show up while they are cheap.
Ship, measure what people actually do, and fix the first thing that trips them.
Rove · Travel planner
ScrollLight
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.
Three places, one season
End of the series
Oriel · Opticians
ScrollMedium
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.
Last season, in numbers
0orders shipped
0arrived on time
0average rating
Sample figures
Halden · Digital bank
ScrollLight
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.
We make it
fast.clear.yours.last.
01 / 04
Quill · Independent publisher
ScrollLight
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.
Chapter twoInside the studio
Scroll to step through the O
Rove · Travel planner
ScrollMedium
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.
01Morning light
02Studio desk
03Field notes
04Night run
05Last train
01 / 05
Hive · Co-working
ScrollLight
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.
0.0 km
Aerilon · Regional airline
ScrollLight
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.
Quill · Independent publisher
ScrollLight
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.
01Brand
02Web
03Motion
04Print
05Film
Lumen · Art museum
ScrollLight
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.
frame 01 / 48
Oriel · Opticians
ScrollMedium
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.
Native 0 px
Smoothed 0 px
Rove · Travel planner
ScrollMedium
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.
New season, fewer things.
Oriel · Opticians
ScrollLight
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.
Cadence · Fitness app
ScrollLight
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.
Polished
background-clip: text
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.
SIGNAL
ERR 0x2F · frame dropped
hover to glitch
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.
Clarity arrives one word at a time.
hover to replay
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.
Good pages say one thing, show it without clutter, and make the next step impossible to miss.
hover to redrawFieldnote · 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.
move up and down
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.
Built for
strangers.speed.phones.everyone.strangers.
hover to roll
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.
BOUNCE
move across the letters
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.
↗
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.
move the light
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.
STRETCH
move sideways
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.
As you scroll, each word catches up with you. The words still ahead stay quiet until you reach them.
driven by scroll scroll the pageQuill · 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.
OUTLINE
move sideways
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.
Build statusmain · 2041
Regioneu-west
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.
hover a word
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.
Turn upon cue.
hover to replay
Voltline · Electric cars
TextLight
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.
Cast
move the light
Fieldnote · Design studio
TextMedium
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.
Scatter
spring k 90 · damping 12
hover to scatter
KINETIK · Running shoes
TextMedium
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.
Make waves
move up and down
Nord Audio · Headphones
TextMedium
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.
OPENLATE
records · coffee · repairs
Maison Lune · Boutique hotel
TextLight
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.
Signed off by
Studio director
hover to sign again
Fieldnote · Design studio
TextLight
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.
Collectiongrow from left
Journalgrow from centre
Stockistsslide through
Aboutmarker fill
Contactrunning wave
Mori · Tea house
TextLight
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.
Good motion explains
where things came
from and where they
are going next.
hover to replay
Lumen · Art museum
TextLight
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.
We left the porch light on
for anyone still driving
home through the rain.
move to scrub
Fieldnote · Design studio
TextMedium
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.
text-wrap: wrap
Every line should carry its fair share of the words
text-wrap: balance
Every line should carry its fair share of the words
Nord Audio · Headphones
TextLight
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.
Fluid type
clamp(14px, 12cqw, 30px)—Fieldnote · Design studio
TextLight
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.
BREATHE
—
move sideways
Mori · Tea house
TextLight
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.
hover to fuzz
Pixel Arcade · Game studio
TextMedium
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.
PRESSURE
move to press
Fieldnote · Design studio
TextMedium
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.
FrontSurfacehover to turn it over
BackDetailbackface-visibility: hidden
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.
move sideways
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.
01 · structureHTML
02 · styleCSS
03 · behaviourJS
04 · vectorSVG
05 · GPUWebGL
06 · speedWASM
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.
Horizon
move
Obsidian · Security software
3DLight
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.
Data
Behaviour
Style
Content
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.
ContentsHow a site gets made
Page 4Launch
Page 1Sketch
Notes
Page 2Prototype
Notes
Page 3Build
Notes
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.
drag sideways
Voltline · Electric cars
3DLight
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.
move
Fieldnote · Design studio
3DLight
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.
move
Obsidian · Security software
3DMedium
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.
move
Voltline · Electric cars
3DMedium
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.
Holo · Rare074 / 120
Aurora
Foil edition · first print
Lumen · Art museum
3DLight
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.
Season 2Night Drive
Cadence · Fitness app
3DLight
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.
move sideways
Crumb · Neighbourhood bakery
3DLight
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.
move
Voltline · Electric cars
3DMedium
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.
move
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.
fragment shader · 4 colours
move
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.
move
Bloom & Stem · Florist
Canvas & WebGLHeavy
Metaballs
Blobs that merge when they touch and split as they part, like a lava lamp. One blob follows the pointer.
move
Verde · Botanical skincare
Canvas & WebGLHeavy
Flow field
Hundreds of particles follow invisible currents and leave fading trails. The pointer stirs a whirlpool into the current.
halftone · 45° screen
move
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.
block 1px
hover, move sideways
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.
hover to warp
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.
Reel 04 · 24 fpsLate show
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.
move to move the light
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.
Gray-Scott · f .0545 · k .062
move to seed growth
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.
move, or wait for rain
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.
drag sideways
Voltline · Electric cars
Canvas & WebGLHeavy
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.
move the light
Tidewater · Surf school
Canvas & WebGLHeavy
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.
move fast
Voltline · Electric cars
Canvas & WebGLHeavy
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.
move to steer
Obsidian · Security software
Canvas & WebGLMedium
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.
move to steer
Aerilon · Regional airline
Canvas & WebGLMedium
Tunnel
Hexagon rings rush out of the screen and twist as they pass, joined into a tunnel. The pointer steers the far end.
move
Voltline · Electric cars
Canvas & WebGLMedium
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.
scroll
Verde · Botanical skincare
Canvas & WebGLHeavy
Scroll-morphing 3D sculpture
A glossy sculpture turns slowly and changes shape as you scroll: a ribbed sphere, a twisted ring, a ribbon, a pebble with a hole, a cut gem. Between shapes it swells into a soft blob, then settles. On a real page it sits behind everything as a fixed background.
push them
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.
move
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.
Throw mev = 0 px/s
drag and let go
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.
Add to bag
scale over the last 2 s
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.
Order placed
click anywhere
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.
KeepSkipStyle 1 of 4MinimalLots of white space, one typeface.
KeepSkipStyle 2 of 4BrutalistHard edges, loud type.
KeepSkipStyle 3 of 4EditorialBig headlines, calm columns.
KeepSkipStyle 4 of 4PlayfulRound shapes, bright colour.
drag sideways
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.
204 points · 380 threads
push, swipe fast to tear
Summit · Outdoor gear
PhysicsMedium
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.
t 0.0 s / 24 s
hover to speed up
Nord Audio · Headphones
PhysicsLight
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.
lift 1
click a side to lift
Ferra · Coffee roasters
PhysicsMedium
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.
popped 0
touch a bubble
Verde · Botanical skincare
PhysicsMedium
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.
2 suns
hover to add a third mass
Bloom & Stem · Florist
PhysicsHeavy
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.
24 springs + pressure
poke it
Tidewater · Surf school
PhysicsMedium
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.
Page sections
drag a block sideways
Hive · Co-working
PhysicsLight
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.
garland + pendant
pluck the strings
Summit · Outdoor gear
PhysicsMedium
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.
01
02
03
04
05
06
07
08
09
10
11
12
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.
FrameTitanium
DetailHinge
OpticsLens
CarryCase
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.
Shipping
Free across Europe. Most orders arrive in two to four working days.
Returns
Thirty days to change your mind, with a prepaid label in the box.
Care
Wipe with the cloth in the case. Rinse off salt water with fresh.
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.
Morning06:40 · 14°
Studio10:15 · 19°
Coast13:30 · 23°
City17:50 · 18°
Night22:05 · 12°
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.
drag
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.
Dock
FMN♪P{}T
Files
move along the dock
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.
WorkStudioJournalContact
Work
Checking your browser…
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.
N° 01Field notes
Rove · Travel planner
LayoutLight
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.
Shop
Maison Lune · Boutique hotel
LayoutLight
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.
Cut from one sheet of recycled wool and finished by hand in Porto. Fits true to size.
- ShellRecycled wool
- LiningOrganic cotton
- ButtonsCorozo nut
Air it out between wears and brush with the grain. Dry clean only when it really needs it, about once a season.
Nimbus · Developer cloud
LayoutLight
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.
NotificationsStacked now, fanned out on hover
hover · swipe one away
Lumen · Art museum
LayoutMedium
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.
Field notesNº 04
StudioNº 05
NightNº 06
Field notes · Nº 04A morning on the coast
Low sun, salt air and a frame light enough to forget.
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.
click anywhere
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.
Autumn · WinterMade slowly.
0
replays on its own
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.
Collection 01Spring
runs on its own
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.
New in
Round frame
Titanium, hand polished.
Ships in two days.
Add to bag
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.
Notifications
hover to add one
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.
01 / 03CollectionNine frames, one material.
click or watch
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.
d="…"
Play · Pause
Menu · Close
Add · Remove
Aerilon · Regional airline
TransitionsLight
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.
01IndexSelected work, 2019 to 2026
→ Work
click to change page
Solstice · Solar energy
TransitionsLight
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.
Issue 07 · Autumn
Frames made
to be kept.
Mori · Tea house
TransitionsLight
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.
Atlas
Studio · since 2019We make pages that move.
Instagram · Read.cv · Newsletter
Maison Lune · Boutique hotel
TransitionsLight
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.
Project · Atlas
Launch planShareShare this page
atlas.page/launch-plan
CancelCopy link
Cadence · Fitness app
TransitionsMedium
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.
01 / 03Morning
hover to pause
Rove · Travel planner
TransitionsLight
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.
01 / 04
click for the next page
Mori · Tea house
TransitionsLight
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.
Join the waitlist
click the button
Early accessBe first in line
Notify me
✓You're on the listWe'll write once, when it's ready.
Verde · Botanical skincare
TransitionsLight
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.
Changelog · v4.2Ship on Fridays.
move
Obsidian · Security software
BackgroundsLight
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.
InfrastructureDeploys in 40 seconds.
move
Hive · Co-working
BackgroundsLight
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.
Now in betaEvery signal, one inbox.
hover to speed up
Nimbus · Developer cloud
BackgroundsLight
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.
Audio toolsSignal, not noise.
move
Nord Audio · Headphones
BackgroundsMedium
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.
Pure CSSNorthern lights, no canvas.
move sideways
Solstice · Solar energy
BackgroundsLight
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.
Focus timer · 25:00Slow down.
hover to heat
Ferra · Coffee roasters
BackgroundsMedium
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.
Launch partyTonight at nine.
move
Solstice · Solar energy
BackgroundsMedium
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.
Out nowThe Morning Edition
move sideways
Bloom & Stem · Florist
BackgroundsLight
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.
Demoscene · 1993Plasma
move
Nord Audio · Headphones
BackgroundsHeavy
Plasma
The classic demoscene effect: bands of colour flow and loop through the palette forever. The pointer moves the centre of the ripples.
▲ 1,240 m
Trail map · 1:25 000Ridge Route
move to raise a peak
Summit · Outdoor gear
BackgroundsMedium
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.
Delivery zonesTerritories
move
Pixel Arcade · Game studio
BackgroundsHeavy
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.
@property <percentage>
CSS onlyNo canvas, no WebGL.
hover to speed up
Solstice · Solar energy
BackgroundsLight
@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.
Waitlist · 12,408 joinedGet pulled in.
move
Ferra · Coffee roasters
BackgroundsHeavy
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.
CSS + SVG noiseGrainy by design.
move
Solstice · Solar energy
BackgroundsLight
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.
Day mode
tap the switch
Cadence · Fitness app
UI detailsLight
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.
1,284
Tap the heart to save
tap the heart
Crumb · Neighbourhood bakery
UI detailsLight
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.
Menu
Menu
Menu
Maison Lune · Boutique hotel
UI detailsLight
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.
Ferra · Coffee roasters
UI detailsLight
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.
Ring
Dots
Equaliser
Orbit
Pulse
Flip
Cadence · Fitness app
UI detailsLight
Loader set
Six small loaders that need no images and no JavaScript: ring, bouncing dots, equaliser, orbit, pulse and flipping square.
0%
hero-video.mp4Uploading…
Aerilon · Regional airline
UI detailsLight
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.
Homepage sectionsDrag to reorder
Hero videoAutoplay
Product grid8 items
TestimonialsCarousel
NewsletterForm
FooterLinks
Hive · Co-working
UI detailsMedium
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.
Monthly budgetper month
€
€100€900
KINETIK · Running shoes
UI detailsMedium
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 was your order?
move along the stars
Tap a star
Crumb · Neighbourhood bakery
UI detailsLight
Star rating
Stars fill one after another as the pointer moves along them, and tapping locks the rating with a small burst.
Delete “Spring lookbook”?12 pages and 48 images. This can’t be undone.
Let go early to cancel
Cadence · Fitness app
UI detailsLight
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.
$
Start a new Astro site
npm create astro@latest
Nimbus · Developer cloud
UI detailsLight
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.
InboxUpdated just now
Rove · Travel planner
UI detailsMedium
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.
3
New order #10422 items · €480
Cadence · Fitness app
UI detailsMedium
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.
Create a password
hover to mask
Too weak
- At least 8 characters
- An uppercase letter
- A number
- A symbol
Halden · Digital bank
UI detailsLight
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.
flock of 60
move to scatter
Verde · Botanical skincare
GenerativeHeavy
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.
0 particles
move through the word
Fieldnote · Design studio
GenerativeHeavy
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.
0 grains
move to pour
Pixel Arcade · Game studio
GenerativeHeavy
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.
generation 0
move to draw cells
Halden · Digital bank
GenerativeMedium
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.
seed 1
move to blow
Verde · Botanical skincare
GenerativeMedium
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.
3 : 2
hover to draw faster
Nord Audio · Headphones
GenerativeLight
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.
No effect matches that search.
Each entry says what the thing is in one sentence, shows the smallest useful code, and links to the reference. Support status for web-platform features uses Baseline: Widely works everywhere, Newly works in all current browsers, Limited is not yet in every browser.
No technique matches that search.
The collections, libraries and repos the effects above were drawn from. Every effect tile links to its own reference too.
Full library · coming soon
All 195, in your style.
The 11 free effects are yours now. The full library brings every effect above, ready to copy with your brand's colours and font.
- All 195 effectsText, scroll, 3D, physics, backgrounds, transitions and more.
- Your brand, set onceSave your colours and font; every effect you copy uses them.
- Copy code or Copy for AIPaste into your site builder, or let your AI assistant place it.
- New effects as they landThe library keeps growing. You'll hear when new ones arrive.
Coming soon
Be the first to know.
195 effects, and a one-click install for Shopify. Leave your email and you'll hear first.