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.
- CursorFree
Crosshair cursor
Thin full width and full height lines track the pointer with a live coordinate readout, and thicken when they lock onto a target.
- CursorFree
Direction aware hover
Each tile's overlay slides in from the edge the pointer entered through and leaves toward the edge it exits.
- CursorFree
Dot and ring cursor
A small dot sits exactly on the pointer while a larger ring trails behind it and swells over links.
- CursorFree
Eyes that follow
A small character whose pupils watch the pointer anywhere on the page and who blinks every few seconds.
- CursorFree
Following pointer label
Inside a card the cursor becomes a small arrow with a name pill that trails behind it with a soft lag.
- 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.
- CursorFree
Magnetic button
The button leans toward the pointer when it comes close, and its label leans a little further.
- 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.
- CursorFree
Sparkle trail
Small four point stars shed from the pointer, spin and drift down as they fade.
- CursorFree
Spotlight cards
A soft light follows the pointer across a row of cards, and each card border glows where the light is closest.
- 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 controlsFree
Arrow nudge links
Link rows whose arrows act out where they go: forward loops through, external tilts out, download drops in a tray.
- Buttons and controlsFree
Border beam button
A bright teal segment of light runs around the button border in a continuous loop, with a soft glow behind it.
- Buttons and controlsFree
Bracket focus frame
Four corner brackets glide and resize to frame the hovered or focused option, then chase round as they land.
- 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.
- Buttons and controlsFree
Coin flip toggle
A billing switch drawn as a 3D coin that flips between monthly and yearly while the price rolls.
- Buttons and controlsFree
Copy to clipboard button
The copy icon shrinks away as a check draws itself in, and a small Copied tooltip rises above the button.
- Buttons and controlsFree
Drawn checkbox and strike
Checking a task draws the tick stroke inside the box, then a line strikes through the label from left to right.
- Buttons and controlsFree
Hold to confirm
Pressing and holding fills the button from left to right; let go early and it drains, finish and it confirms.
- Buttons and controlsFree
Lift and press buttons
Buttons rise 2px with a soft shadow on hover, sink to 97 percent on press, and the arrow nudges where it points.
- Buttons and controlsFree
Like burst
The heart pops and fills, a ring and eight dots burst outward, and the count rolls up to the new number.
- Buttons and controlsFree
Orbit button
Glowing dots orbit a pill CTA, gather around its arrow on hover and burst outward when pressed.
- Buttons and controlsFree
Ripple button
A click sends a soft circle out from the exact point you pressed, filling the button and fading away.
- Buttons and controlsFree
Shimmer button
A band of light sweeps across the button once when it appears and again each time you hover it.
- Buttons and controlsFree
Sliding segmented control
A dark pill slides between Day, Week and Month and stretches or shrinks to fit the label it lands on.
- Buttons and controlsFree
Spring switch
The switch thumb stretches as it travels, overshoots a touch and settles, while the track fades to the on colour.
- Buttons and controlsFree
Stateful save button
The label turns into a spinner, then a check with Saved, while the button smoothly resizes to fit each state.
- TextFree
Flicker headline
A headline switches on like a neon sign: letters catch in random order, then two stutter once more.
- TextFree
Generating letter wave
A status label whose letters ride a wave while AI works, then settle in order into a drawn check.
- TextFree
Handwritten word
One word in a headline is written by a pen stroke, then underlined with a quick hand drawn swoosh.
- TextFree
Highlighter draw
A headline lands, then one key phrase gets a marker stroke that draws in once from left to right.
- TextFree
Inline media headline
A headline with small media chips between its words that roll to new avatars, times and places every few seconds.
- TextFree
Letter swap hover
On hover or focus each letter slides up and out while a tinted copy rises from below, one letter after another.
- TextPro
Live code edit
A small code editor plays edits: a line is struck and collapses, new lines type in and flash, numbers shift.
- TextFree
Number ticker
Stats count up from zero with a soft ease out the first time they scroll into view.
- TextFree
Odometer digits
Each digit is a column of 0 to 9 that rolls to its new value when the total changes.
- TextFree
Proximity font weight
Letters in a variable font get heavier and a little larger the closer the pointer comes to them.
- TextFree
Scroll word reveal
A paragraph starts faint and each word fills in to full ink as it scrolls past the middle of the view.
- TextFree
Shiny text
A muted label with a soft band of light sweeping across it every few seconds.
- TextFree
Split blur in
A heading appears word by word, each one rising out of a soft blur a beat after the last.
- TextFree
Text scramble
Text decodes from random glyphs into the real string, one character at a time from left to right.
- TextFree
Typewriter
A phrase types out behind a blinking caret, pauses, deletes itself and types the next one.
- TextFree
Underline draw link
A link's underline draws in from the left on hover and slides away to the right when the pointer leaves.
- TextFree
Word rotate
One word in a sentence slides up and out while the next slides in, and the gap resizes to fit it.
- ScrollFree
Clip path image reveal
Each image opens from a small inset window to full size, settling from a slight zoom, as it scrolls into view.
- ScrollFree
Header turns solid on scroll
The header floats transparent over the hero, then gains a white backdrop, blur and hairline once the page moves 20px.
- 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.
- ScrollFree
Scroll edge fade
Scrollable rows and lists fade out at an edge only while more content is hiding past it.
- ScrollFree
Scroll progress bar
A thin bar under the article header fills from left to right as the reader moves through the text.
- 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 layoutFree
Avatar stack bump
Overlapping avatars bump one after another in a wave, then spread apart with name tooltips on hover, focus or tap.
- 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 layoutFree
Card hover lift
Cards rise 3px and tint their border on hover while a small illustration inside comes alive, like a clock hand sweeping.
- 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 layoutFree
Fan out card stack
A stack of payment cards fans out in an arc on hover or tap; pick one and it slides to the front.
- Cards and layoutFree
Infinite marquee
A row of host wordmarks scrolls forever behind soft edge fades and stops while you point at it.
- 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 layoutFree
Media card play expand
Video cards whose round play button widens into a Play 2:14 pill as the thumbnail scales, on hover, focus or tap.
- Cards and layoutFree
Notification deck
Booking notifications stacked with depth; every few seconds the front one lifts away and the rest step forward.
- 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 layoutFree
Progress border card
A task card whose border draws itself around the edge as work progresses, ticking off steps, then glows Done.
- Cards and layoutFree
Sliding tab indicator
The dark pill behind the active tab slides and resizes to the tab you pick while the panel below cross fades.
- Cards and layoutFree
Smooth accordion
FAQ rows open and close with a smooth height animation while the plus icon turns into a minus.
- Cards and layoutFree
Snap story carousel
A snapping row of coloured customer stat cards whose big numbers count up as each card lands in view.
- 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 overlaysFree
Autoplay progress dots
Slideshow dots where the active one stretches into a pill that fills with the slide's time, then hands off.
- 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.
- Navigation and overlaysFree
Nudge bubble
A chat launcher hops with a squash every few seconds, then grows a chat panel out of itself and turns into a close button.
- Navigation and overlaysFree
Origin aware popover
Menus scale out of the exact trigger that opened them and flip above it when there is no room below.
- 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 formsFree
Floating label
Field labels sit inside the input, then float up and shrink on focus or once filled, with a growing underline.
- Feedback and formsFree
Hearts stream
A heart button whose taps release hearts that sway as they rise and fade; holding it streams them.
- Feedback and formsFree
Input shake on error
An invalid email makes the field shake and shows an inline error; a valid one draws a tick inside the field.
- Feedback and formsFree
Multi step ticks
A checklist of booking steps ticks off one after another, each check drawn in as its circle fills.
- 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 formsFree
Recording pill
A floating record pill: pulsing dot and timer, pause morphs into play, stop folds it into a Saved link chip.
- 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.
- Feedback and formsFree
Scanner bar
A bright segment sweeps under a search field with a fading afterglow, then fills the bar and shows the results.
- Feedback and formsFree
Skeleton shimmer
A listing card shows shimmering placeholder blocks, then cross-fades into the real content.
- Feedback and formsFree
Slider value pop
A seat slider whose value bubble pops while you drag, ticks light up, numbers roll and steps snap with a bounce.
- Feedback and formsFree
Time slot picker
Pick a day and its times cascade in; picking a time splits it into time and Confirm, then a check books it.
- Feedback and formsFree
Toast stack
New toasts stack with depth, fan out on hover, count down with a progress line and swipe away.
- Feedback and formsFree
Typing to message
A typing bubble with bouncing dots grows into the real reply as its text fades in. Tap a quick reply to answer.
- Feedback and formsFree
Upload ring
Change photo fills a ring around the avatar with a live percentage, crossfades the new photo and pops a check badge.
- Feedback and formsFree
Voice bars
A mic button whose bars breathe at rest, dance while listening, then fold into a line and a drawn check.
- 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.
- DataFree
Signal roller
Live account signals roll upward through a faded window, with a fresh arrival lighting up now and then.
- IconsFree
Weather icons
A forecast card of living weather icons: turning sun, drifting clouds, rain with splashes, snow and a thunder flash.
- BackgroundsFree
Aurora gradient
Three soft, blurred colour blobs drift slowly behind a heading.
- BackgroundsFree
Click ripple grid
Clicking a cell sends a wave of colour outward through a grid of squares, ring by ring.
- 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.
- BackgroundsFree
Meteors
Thin streaks fall diagonally across a dark panel at random moments.
- BackgroundsFree
Proximity dot grid
A canvas of small dots that grow and turn teal near the pointer, with a slow wave when nobody is pointing.
- Brand and heroFree
Agent terminal
A terminal streams an agent run: live ticking time and token counters, steps that check off, then a diff summary.
- 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 heroFree
Logo cloud swap
A grid of customer wordmarks where one cell at a time trades its logo for another with a blur and scale crossfade.
- 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.