Blur-in Letters
A headline comes into focus letter by letter, each one sharpening and rising slightly as it lands.
Motion you can copy into any prompt.
Live demos of web animations. Each one comes with its source and a prompt you can paste into an AI coding tool, written in the language you read.
95 motions
95 shown
Text 16
Monthly visitors
Odometer Digits
Each digit is a vertical strip of 0–9 that rolls to its new value, with the digits on the right travelling further.
Design that feels calm
Rotating Words
One word in a headline slides up and out while the next slides in from below, and the slot resizes to fit it.
Typewriter
Phrases type out one character at a time behind a blinking caret, pause, erase and move on to the next.
Wave Letters
Letters hop one after another so a soft wave keeps rolling through the word.
12,480Teams onboard
Count Up
A key number climbs from zero to its value as it scrolls into view, then eases to a stop so the final figure lands with weight.
SIGNAL LOST
Glitch Text
On hover the word tears into offset slices of colour for a moment, like a signal breaking up, then snaps back clean.
Made to move
Flowing Gradient Text
A warm gradient runs slowly through the letters of a headline, so it keeps a little life without moving at all.
Good motion is felt before it is seen.
Highlighter Mark
A marker stroke sweeps behind the key phrase as the sentence comes into view, pointing the eye at what matters.
Open late
Neon Flicker
A glowing sign that stutters on, holds, and drops out for a beat now and then, like a tube that is slightly worn.
Outline Text Fill
Hollow outlined letters fill with colour from the bottom up when you hover, like liquid rising inside the type.
Scroll ↓
Scroll Text Reveal
Words light up one after another as you scroll, so a statement is read at the pace the reader moves.
LONDON
Split Flap
Each tile of a departure board flips over in turn to the next word, with a short stagger so the change ripples across.
Every frame is a decision
Masked Line Rise
Each line of a headline slides up from behind an invisible edge, one after another, like type set into place.
Text Scramble
On hover, each character flickers through random glyphs and locks into place from left to right, like a display decoding.
Sliding Underline
The underline draws in from the left when you hover a link and leaves through the right, so it reads as passing through.
Buttons 15
Press and hold for 1.2 seconds
Hold to Confirm
A fill grows across the button while you hold it down; let go early and it drains back, hold to the end and it confirms.
Like Burst
Tapping the heart squashes it, refills it in colour and throws a ring of small sparks outward.
Loading to Success
The label slides away for a spinner while the request runs, then a check mark draws itself when it succeeds.
Shine Sweep Button
A narrow band of light glides across the button once when you hover or focus it.
bun add gsapCopy Feedback
The copy icon pops into a check mark and the label confirms, then both settle back, so you know the clipboard worked.
Rotating Gradient Border
A bright arc travels around the edge of the button, drawing attention to it without moving the button itself.
Hamburger to Close
The three menu lines fold into an X: the outer lines meet in the middle, then rotate, while the centre line slips away.
Jelly Button
On hover the button squashes and stretches like a jelly being poked, wobbling a few times before it settles.
Magnetic Button
The button leans toward the cursor and its label drifts a little further, then settles back when the pointer leaves.
3D Press
The button sits on a solid edge and sinks into it when pressed, like a physical key that bottoms out.
Ripple Press
A soft circle grows from the exact point you press and fades out, so the button answers where it was touched.
Rolling Text Button
On hover each letter of the label rolls up and is replaced by a copy from below, in a quick wave from left to right.
Send Plane Button
Clicking Send launches the paper plane off the button, the label slides over to Sent with a check, then everything resets.
Slide to Confirm
Drag the knob across the track to commit; let go early and it springs back, so a stray tap never confirms anything.
Tooltip Pop
Tooltips pop up above icon buttons with a slight springy overshoot after a short pause, so they help without getting in the way.
Forms & controls 9
Floating Label Input
The label sits inside the empty field like a placeholder and floats up to the border once you focus or type.
Range Slider Bubble
A value bubble rides above the slider thumb, grows while you drag and leans in the direction you are moving.
Shake on Error
Submitting an invalid code makes the field shake side to side and show the error underneath, like a head saying no.
Stretchy Toggle
The knob stretches into a pill as it travels, then settles round on the other side while the track fills with colour.
Animated Checkbox
Ticking a to-do fills the box with a squish, draws the check mark, and strikes the task through from left to right.
Expanding Search
A round search icon stretches into a full field when tapped and folds back when you leave it empty.
Guests
2
Number Stepper
The number slides up when you add and down when you subtract, so the direction of the change is felt as well as read.
Sliding Tab Indicator
A single highlight slides and resizes between tabs instead of each tab lighting up on its own.
Star Rating
Stars fill up to the one you hover, and the one you pick pops with a small bounce, all on native radio buttons.
Cards 11
Flip Card
The card turns over in 3D to reveal details on its back, and turns back on the next click.
PlanStudioRM 49 / monthUnlimited projects and exports
Spotlight Card
A soft glow follows the pointer inside the card and lights up the border right where the pointer is.
01Kuala Lumpur
Swipe Card Stack
Drag the top card sideways and it tilts with your hand; throw it far enough and it flies off while the next card steps forward.
Focus Dim Siblings
Hovering one card lifts it slightly while the others fade and soften, so attention lands on a single choice.
★
Rare edition
No. 042 / 300
Holographic Card
A foil sheen of shifting colour follows the pointer across the card, like tilting a collectible under a lamp.
Skeleton Shimmer
Grey placeholder shapes hold the layout while a soft band of light sweeps across them, then the real content crossfades in.
01Dawn
02Noon
03Dusk
04Night
05Storm
Focus Carousel
Swipe through a row of cards that snap to the centre, where the focused card grows to full size and the rest recede.
Ideas
Drafts
Final
Stack Fan Out
A tidy stack of cards fans out like a hand of playing cards on hover, showing what is underneath at a glance.
Project 1
Project 2
Project 3
Project 4
Project 5
Project 6
Staggered Card Reveal
Cards rise into place one after another when the group scrolls into view, so a grid arrives as a sequence instead of a block.
MembershipStudio Pass
Tilt Card with Glare
The card tips in 3D toward the pointer while a light spot slides across its surface like a reflection.
Toast Stack
New notifications slide up from the bottom and push older ones back into a neat, shrinking pile that clears itself.
Images 5
BeforeAfter
Before / After Slider
Drag the divider across the picture to compare the edited version with the original underneath.
Image Clip Reveal
A coloured panel sweeps across and pulls the picture in behind it, while the picture itself settles from a slight zoom.
Ken Burns Pan
A still picture slowly zooms and drifts inside its frame, the documentary trick that makes a photo feel like footage.
Hover Zoom & Pan
Hovering zooms the image in, and moving the pointer pans across it, so shoppers can inspect detail without opening a viewer.
Scroll ↓Above the clouds
Scroll Zoom to Full
A framed image opens out to fill the width as it scrolls into the middle of the screen, turning a thumbnail into a scene.
SVG & shapes 7
Orders per day
Bar Chart Grow
Bars rise from the baseline one after another as the chart scrolls into view, with each value appearing on top.
0%
Profile completeCircular Progress
A ring fills to the new value while the number in the middle counts up with it.
Path Draw
A line illustration draws itself stroke by stroke, then a dot travels along the finished route.
Now playing · Low Tide
Audio Bars
A row of equaliser bars bounces at uneven rhythms to show that something is playing, and freezes when paused.
Scanning
Radar Sweep
A beam sweeps round a radar dish and each blip flashes the moment the beam passes over it, then fades.
Scroll ↓
Scroll Draw Path
A route line draws itself as you scroll and rewinds when you scroll back, tying progress to the reader’s hand.
Payment complete
Success Check
A ring draws itself closed, the check mark strokes in, and the badge gives one small pop to say the job is done.
Backgrounds 10
Confetti Burst
Clicking fires a cone of paper confetti that tumbles, slows with air drag and falls out of view.
Move across the grid
Reactive Dot Grid
A grid of dots swells and pushes away from the pointer, like a field of pins under your hand.
Quietly moving
Drifting Gradient
Three soft colour fields slide past each other behind a headline, so the background feels alive without pulling focus.
Evening edition
Bokeh Lights
Soft out-of-focus orbs of light drift and pulse behind the content, like city lights seen through a lens.
Live feed
Glyph Rain
Columns of characters stream down the screen at different speeds, each leaving a fading tail behind its bright head.
Into the hills
Scroll ↓Parallax Layers
Hills, sun and title move at different speeds as you scroll, so a flat scene gains depth.
Move your pointer here
Constellation Field
Points drift slowly across a canvas and draw thin lines to each other when the pointer passes near them.
Live
Pulse Rings
Rings ripple out from a live indicator at an even pace, like a signal broadcasting from the centre.
Next stop
Retro Grid Horizon
A glowing grid floor rolls endlessly toward you under a horizon, giving a hero section a sense of forward travel.
Move your pointer
Wavy Lines
Fine horizontal lines ripple slowly like a calm sea, and swell into a bump wherever the pointer passes over them.
Layout 16
Expanding Panels
A row of narrow panels where the one you hover or focus widens to show its story while the others make room.
- Branding
- Web design
- Motion
- Next.js
- Copywriting
- SEO
- E-commerce
- Dashboards
- Prototypes
- Landing pages
- Design systems
Infinite Marquee
Two rows of tags glide in opposite directions without a seam, and pause while you hover them.
Scroll inside the frame ↓01Brief 02Sketch 03Build 04Launch
Sticky Stacking Cards
As you scroll, each card sticks a little lower than the one before and the earlier cards shrink back into a neat pile.
No. Most of these motions are plain CSS; GSAP only helps with timelines.
Yes. Every demo turns off or softens its movement under that setting.
Yes. Paste it into any AI coding tool to rebuild the effect.
Smooth Accordion
Panels open to their natural height and close again with no fixed max-height, while the chevron turns to match.
Share to
Bottom Sheet
A sheet rises from the bottom edge over a dimmed screen, the way mobile apps present quick choices.
Command Palette
A search palette pops in with a quick scale, filters as you type, and a highlight glides between results under the arrow keys.
01
Home
Curtain Page Transition
Two coloured panels sweep across to cover the page, the content swaps behind them, and they sweep away to reveal the new page.
Dock Magnify
Icons in a dock swell as the pointer nears them and shrink as it moves away, pushing neighbours aside like a desktop dock.
Text
Card
Button
Text
Button
Card
Text
Card
Filterable Grid
Choosing a filter makes hidden items shrink away and the rest glide into their new places instead of jumping.
Hide Header on Scroll
The header slides away while you scroll down to read and slides back the moment you scroll up to look for it.
Scroll ↓
01Plan
02Design
03Build
04Launch
Horizontal Scroll Section
Scrolling down pins the section and slides a row of panels sideways, then lets the page continue once the row ends.
Modal Dialog
The dialog rises and scales in over a fading backdrop, and leaves the same way, all on the native dialog element.
0% read
Designing calm interfaces
Reading Progress
A thin bar across the top fills as you read down the article, so readers always know how much is left.
Push Side Drawer
The navigation drawer slides in from the left and pushes the page aside, which shrinks and dims a little to show it is in the background.
- Cart
- Address
- Payment
- Done
Step Progress
The connecting line fills toward the next step and each completed dot pops into a check, so progress through a flow is obvious.
Top Loading Bar
A slim bar creeps across the top while a page loads, slowing as it goes, then races to the end and fades once it is done.
Cursor 6
Look closer
View case study →Inverting Blend Cursor
A round cursor inverts whatever it passes over and grows into a lens when it reaches a link.
Lagging Follower Ring
A small dot sticks to the pointer while a larger ring trails behind it, then wraps around buttons you hover.
Draw with your pointer
Ribbon Cursor Trail
The pointer leaves a smooth ribbon behind it that thins out and fades within half a second.
Move inside
Crosshair Cursor
Two hairlines span the whole area and meet at the pointer, with a live coordinate readout, like a design tool ruler.
They are watching
Following Eyes
A pair of eyes tracks the pointer anywhere on the page and blinks now and then, adding a little personality.
Elm StHarbour RdMill LnPark AveQuayOld Bridge
Hover to magnifyMagnifier Lens
A round lens follows the pointer and shows the detail underneath at twice the size, for reading fine print or inspecting a map.
From demo to your codebase
- Try the motion in its preview. Each one reacts to your pointer, clicks, drags or scroll.
- Copy its prompt. The prompt follows the site language, so the demo text and the prompt match.
- Paste it into Claude, Cursor or any AI coding tool and adjust the numbers to taste.