116 animated React components, each one working.
Cursor trails, pointer tracking, button feedback, text effects, scroll motion and more, built from scratch in plain React and CSS with no animation library. 77 are free, with their source and the swish-ui agent skill. The 39 Pro ones are free to play with here, and one Pro payment unlocks their source.
- CursorPro
Context label cursor
A small cursor dot swells into a circle with a word, like View, Drag or Play, that names what the hovered item does.
- CursorPro
Gooey cursor trail
A chain of circles follows the pointer and melts into one stretchy blob that pools back together when it stops.
- CursorPro
Image trail
Moving the pointer drops small photos along its path that pop in, hold for a beat and then fall away.
- CursorPro
Lens magnifier
A round lens follows the pointer over a busy calendar and shows the area underneath at higher zoom.
- CursorPro
Paint trail grid
The pointer paints a trail of rounded colour tiles on a grid that shrink and fade; a click drops a patch with confetti.
- CursorPro
Pointer parallax layers
A small layered scene shifts with the pointer, the near hills moving more than the far ones, so it reads as depth.
- CursorPro
Tilt and glare card
A card tilts in 3D toward the pointer while a soft glare slides across its face, then eases back flat on leave.
- Buttons and controlsPro
Circular theme reveal
Switching theme spreads the new colours out from the toggle button in a growing circle until they cover the panel.
- TextPro
Live code edit
A small code editor plays edits: a line is struck and collapses, new lines type in and flash, numbers shift.
- ScrollPro
Layered scroll parallax
Hero layers (sun, hills and heading) slide at different speeds as the page scrolls, giving the scene depth.
- ScrollPro
Pinned horizontal scroll
Scrolling down pins a row of villa cards in place and slides it sideways, then releases the page once the last card is in view.
- ScrollPro
Scroll velocity marquee
Two rows of text drift in opposite directions, then speed up and lean with how fast you scroll before easing back.
- ScrollPro
Sticky scroll story
A sticky product stage swaps between Find, Offer and Earn panels as each text step scrolls past, with a progress bar.
- ScrollPro
Tracing beam timeline
A vertical line fills down a booking timeline as you scroll, and each dot lights up as its entry passes the beam.
- Cards and layoutPro
Before and after slider
Drag the divider across a calendar to compare empty gap nights before with the same nights sold after.
- Cards and layoutPro
Expandable card
Tapping a villa card grows it in place into a detail view, and Escape or the close button shrinks it back into the list.
- Cards and layoutPro
Magnifying dock
App icons in a dock grow as the pointer nears them, neighbours a little less, and bounce when tapped.
- Cards and layoutPro
Orbit dial carousel
Cards sit around a dial that turns one step at a time; the card at the top grows and reveals its details.
- Cards and layoutPro
Swipe card stack
Drag the top villa card left or right to throw it off the stack; it tilts as it moves and the next card grows into place.
- Navigation and overlaysPro
Autoplay feature tabs
Feature tabs advance on their own while a thin line fills; the product panel crossfades and slides to match.
- Navigation and overlaysPro
Command palette demo
A command palette that types its own queries when idle, eases its height as results filter and runs commands.
- Gestures and dragPro
Desktop windows
A mini desktop: drag windows by their title bars, click to bring one forward, minimise it into the dock and back.
- Feedback and formsPro
Agent status card
Tickets show an AI agent at work: a spinner while it works, a pulsing ask when it needs you, a drawn check when done.
- Feedback and formsPro
AI autofill form
An Autofill with AI button makes each empty field shimmer, type its value and settle, then a light sweeps the form.
- Feedback and formsPro
Approve and deny gate
Access requests queue up as cards: approve stamps one and sends it through a gate, deny shakes it off to the left.
- Feedback and formsPro
One time code input
Six digit boxes that auto advance, step back on backspace, fill all at once on paste and confirm when complete.
- Feedback and formsPro
Savings jar
A coin arcs into a jar with a splash, the liquid rises on a gentle wave and a goal ring fills as the balance rolls up.
- Feedback and formsPro
Scan to lock
A scan line sweeps an invoice, each field lights up as it is read, then a padlock drops shut on Verified.
- DataPro
Delivery timeline
An email moves from Queued to Clicked: each step pings and draws a check while the rail fills behind it.
- DataPro
Payout path flow
Payouts travel as coins along curved paths from partner avatars into a bank card whose total ticks up.
- DataPro
Radar sweep
A radar arm sweeps a pipeline: each lead pings as the beam passes, then fades until the next turn.
- DataPro
Reaction timeline
A video bar fills while reactions float up and comment pins pop open at the moment they were left.
- DataPro
Route draw map
A route draws itself across a stylised city map, a marker drives it and the ETA counts down; Reroute swaps paths.
- BackgroundsPro
Connection graph
Tools, people and topics float on a quiet network while small pulses travel the links; hover a node to light its ties.
- Brand and heroPro
Animated logo mark
A house outline draws itself, its calendar nights fill in, and the teal gap night fills last.
- Brand and heroPro
Assistant face
A friendly assistant face that blinks, listens, thinks, cheers and flinches, with eyes that follow your pointer.
- Brand and heroPro
Particle assemble icon
A cloud of particles flies together into an icon, holds, then bursts apart and rebuilds as the next icon.
- Brand and heroPro
Scripted chat demo
A chat thread plays a short product story, from calendar sync to a paid extra night, on a loop.
- Brand and heroPro
Zoom to focus product shot
A product screenshot built in HTML glides from the whole app into one panel while the edges soften, then back out.