Card Animations
01 expand_moreHover over each card
hover me!
Lift
credit_card
Lift on hover
Card rises with depth shadow on hover.
Scale
image
Scale up
Subtle zoom communicates interactivity.
Glow
auto_awesome
Border glow
Pulsing outline ring on featured cards.
Float
rocket_launch
Floating bob
Gentle vertical loop for empty states.
Tilt
view_in_ar
Tilt wobble
Playful rotation for gamified UI.
Pulse
monitor_heart
Pulse ring
Expanding ring for live status signals.
Card-specific interactions
Slide action
Slide-in action bar
Actions slide up from the bottom on hover.
Expand
Expand on click
Click to reveal extra detail rows.
Last updated2 hours ago
StatusPublished
Accent
dock_to_right
Left accent bar
A colored border slides in and content nudges right.
Check draw
Checkmark draw
SVG path draws itself on completion.
Ring
0%
Click +10%
Micro progress ring
Stroke draws as completion increases.
Toggle
Dark mode
Notifications
Toggle morph
Knob stretches rubber-like while sliding.
Action feedback
Copy
content_copyCopy token
Copy confirm
Chip turns green and swaps icon on copy.
Progress btn
Progress button
Button becomes its own progress bar.
Stars
starstarstarstarstar
Tap to rateStar rating
Stars fill progressively, label narrates selection.
Chips
All
Design
Code
Motion
Tag pop chips
Chips scale and change state on click.
Counter
5
quantity
Number morph counter
Value scales out and in on every change.
Accordion
What is a micro interaction?expand_more
A purposeful animation that responds to a user action and communicates system state clearly.
How many are enough?expand_more
As few as needed. Each one must earn its place by reducing confusion or confirming intent.
Smooth accordion
Content slides open, chevron rotates 180°.
Text Micro Interactions
02 expand_moreColor and fill
Gradient
Hover this text
Color sweeps as a blue-to-teal gradient using background-clip text.
Highlight
Highlighted phrase
Tinted background sweeps in from left like a marker.
Glow
Soft glow on hover
Color shifts to teal. Add text-shadow for a warmer feel.
Ghost fill
Read the full story
A colored copy paints over the original from left using clip-path.
Box sweep
Design system
Solid background scales in from left behind the text.
Strike
This feature is deprecated
Red strikethrough draws across on hover, communicating removal.
Weight and shape
Weight
Regular to bold
Font weight transitions 400 to 600 with tightened tracking.
Shadow lift
Floating headline
Text rises and tracking opens, giving tangible physical lift.
Blur focus
Unfocused text
Starts blurred and snaps sharp on hover like a lens focusing.
Stagger
Design
Characters cascade in color and lift with staggered delay.
Rotate
Wobble
Odd and even characters tilt in opposite directions.
Underline draw
Read the docs
View changelog
Open in new tab
A 1.5px line slides in left to right on hover.
Motion and reveal
Scramble
Innovation
Letters cycle randomly before resolving back to the real word.
Flicker
Hover to flicker
Text flashes amber with a neon-sign flicker on hover.
Retype
Ship fast.
Text erases and a new phrase types itself in its place.
Cursor gradient
Move cursor here
Text color shifts along a spectrum with cursor horizontal position.
Word pop
Hover any individual word in this paragraph. It scales up and darkens independently.
Form and Input Interactions
03 expand_moreFloat label
Floating label
Label lifts above the input and shrinks on focus.
Char count
0 / 80
Character counter
Count turns amber near limit, red when full.
Validate
Inline validation
Input shakes red on error, turns green on success.
Password
visibility
Password reveal toggle
Eye icon crossfades, type toggles cleanly.
Undo
Item deletedUndo
Undo toast slide
Toast slides in after destructive action, auto-dismisses.
Snap scroll
Mon
Tue
Wed
Thu
Fri
Scroll snap picker
Items lock to position with a native-app feel.
Interactive Particle Field
04 expand_more
Mode
150
70
Magnetic Field Lines
05 expand_more
Mode
12
70
Cursor Micro Interactions
06 expand_moreRibbon trail
28
6
Sparks
2
8
Eyes
6
3
Text trail
14
Shape morph
1x
Arc discharge
Concentric echo
80px
1.8
Constellation
Physics-based Mechanics
07 expand_morePendulum
Pendulum
Click to push. Force accumulates. Friction decays the swing over time.
Rope
Rope chain
Several verlet ropes with a gentle breeze. Hover to push and sway them smoothly.
Gel
Gel blob
Soft organic shape deforms toward the cursor with spring physics.
Friction
Friction drag
Drag the block. Slides with momentum and decelerates realistically.
Audio-reactive Interactions
08 expand_moreEqualizer
Frequency bars
Simulated audio EQ with independent animated bar columns.
Waveform
Live waveform
Continuous audio signal. Hover to change amplitude and frequency.
Beat pulse
BPM ring pulse
Rings expand on every beat. Adjust the BPM with the controls.
120 BPM
Volume
Volume ring
A single ring scales up and down. Drag the slider to adjust.
Scroll-triggered Interactions
09 expand_moreParallax
Parallax layers
Three depth layers move at different speeds. Background slowest, foreground fastest.
Sticky morph
Sticky pill morph
A navbar pill compresses into a compact icon as the page scrolls down.
Scrub counter
0
active users
Scroll scrub counter
The number counts up as you scrub. Drag to animate to any value.
Word reveal
We build things that matter.
Scroll word reveal
Words fade in one by one as the slider advances. Drag to control.
Time-based Interactions
11 expand_moreFlip clock
00
:
00
:
00
Live flip clock
Panel-flip animation on the seconds digit. Shows actual current time.
Analog
Live analog clock
Smooth sweep second hand showing actual current time. Hover hands to highlight.
Countdown
07
DAYS
:
14
HRS
:
32
MIN
:
00
SEC
Live countdown
Each unit ticks down independently. Seconds roll smoothly every second.
Schedule
Live schedule bar
A vertical "now" marker sweeps across schedule blocks in real time.
AI and ML-feel Interactions
12 expand_moreToken stream
Token streaming
Text appears token by token with variable speed, mimicking a live LLM response with randomised delays.
Thinking
Analysing your request
0 tokens processed
AI thinking state
Progress bar and rotating status label simulate a model processing a request with a live token count.
Confidence
Confidence bars
Classification results with animated probability scores. Each bar fills to its confidence on load.
Neural
Neural pulse
A network diagram pulses activation signals through layers. Hover to trigger a forward pass manually.
Interactive Color Field
12 expand_more
Decibel
30
dB
Trail mode
Cursor scrubbing
Cells light with a random palette swatch and fade back over the duration set by the Fade slider.
Gradient mode
Positional hue
Each cell's color is a deterministic function of its coordinates. Same cell, same color, every time.
Voronoi shape
Irregular tessellation
Cells become Voronoi polygons around jittered seeds. Click any cell to ripple outward through neighbors.
Decibel mapping
Color → loudness
Cool blues read as quiet, hot reds as loud. The meter smooths painted values and decays back to baseline.
Card Motion Lab
13 expand_more01 · Spring tilt with depth
Pointer position drives target rotation. Springs chase it. Inner layers sit at different Z depths for parallax, plus a cursor tracked glare.
Z +52
Specimen 01
Layered parallax card
Three content layers at translateZ 18, 34 and 52 pixels create depth as the card rotates under the cursor.
k = 190c = 16
hover · or focus + arrow keys
rotX0.0°
rotY0.0°
scale1.000
spring vel0.0
02 · Swipe deck with velocity
Release decision uses flick velocity, not just distance. A slow long drag and a short sharp flick both dismiss. Everything else springs back.
← KEEP
DISMISS →
drag the top card · or press ← / →
dx0
velocity0 px/s
threshold±120px or ±700px/s
verdict—
remaining5
03 · FLIP shared element expand
First, Last, Invert, Play. The card is measured in place, repositioned as a fixed modal, then the inverse transform is animated away. One element, no clones.
Specimen 03
Press to expand
This exact element becomes the modal. The readout shows the inverted transform the animation starts from.
In the FLIP technique the layout change happens instantly, then a transform makes the element appear to travel from its old position. Because only transform animates, the browser keeps it on the compositor thread and the motion stays smooth even on weak devices. Press Escape or click anywhere outside to collapse.
FLIPcompositor only
click · enter to open · esc to close
Δx0px
Δy0px
scaleX1.00
scaleY1.00
statecollapsed
04 · Drag to reorder, FLIP the rest
The dragged card follows the pointer. Every displaced sibling FLIPs into its new slot. Keyboard users can focus a card and move it with arrow keys.
drag cards · or focus + ← →
orderA B C D E F
dragging—
moves0
05 · Magnetic field with falloff
Each card feels a pull toward the cursor scaled by a quadratic falloff of distance. Not a hover state, a continuous force field.
Field A
Pull radius 170
force = (1 − d/r)² × 26px
Field B
Quadratic falloff
Smooth entry, no snap at the boundary.
Field C
Springs everywhere
Release and they settle with overshoot.
move the cursor through the field
nearest—
distance—
force0.0px
06 · Scrubbable stack timeline
The whole choreography is a pure function of progress t. Scrub it by hand to inspect any frame, or press play to drive t with a spring.
t0.000
card stagger0.18 / card
drivermanual
07 · Underdamped flip reveal
Damping is set deliberately low so the rotation overshoots 180° and wobbles into place, with a 70ms stagger across the row.
click any card · or enter when focused
rotY card 10°
card 20°
card 30°
overshoot0.0°
08 · Deal along an arc
Five cards spring from a single deck position out to fanned targets on a circular arc, staggered, then gather back in reverse order.
statestacked
arc radius300px
stagger70ms
settling0 / 5
09 · Bottom sheet with detents
Three resting positions. On release the sheet projects where your flick would land (y + v × 0.18s) and springs to the nearest detent, exactly how native sheets decide.
Specimen 09
Map view behind
The content under the sheet stays put. Drag the handle, or focus the sheet and use up and down arrows.
Nearby results
Release velocity is projected forward before picking a detent, so a flick from PEEK can jump straight to FULL without passing through HALF.
PEEK 274HALF 165FULL 46
drag the sheet · or focus + ↑ ↓
y274px
velocity0 px/s
projected—
detentpeek
10 · Throw with gravity and bounce
No springs here. Flick the card and it travels under real gravity, loses energy on each wall hit, and comes to rest from friction. Catch it mid-flight to interrupt.
Specimen 10
Throw me anywhere
Newtonian: x″ = 0, y″ = g. Restitution 0.62, friction 0.985.
drag and release · catch in flight
vx0 px/s
vy0 px/s
|v|0 px/s
KE0
bounces0
11 · Chained spring trail
Five followers, each chasing the one ahead with its own spring. Drag the leader; the trail snakes behind it because every link integrates lag from the previous one.
drag the dark card · the rest follow
leader0, 0
tail lag0px
followers5
12 · Filter and FLIP grid
Click a chip. Surviving cards FLIP into their new grid positions, exiting cards fade and scale out, and entering ones fade in. The list reads exactly the same to a screen reader.
filterall
visible8 / 8
moves animated0
13 · Cascade from hero
A "deal from deck" or stagger cascade. Every secondary card starts stacked behind the hero, then springs out to its grid position in sequence. Useful for the moment a color system, dashboard, or spec sheet first loads.
Main Color
HEX #005693
Success
HEX #05A364
Error
HEX #F70C00
Tolerance
HEX #C25400
D1
HEX #4D4D4D
D2
HEX #888888
D3
HEX #E4E4E7
stagger55ms / card
cards16
settled0 / 16
14 · Grid expand in place
Click a card and it grows to span two columns and two rows. Neighbors FLIP into the new layout. Reveal content lives inside the same node — no separate detail view, no clones.
click to expand · click again or another card to switch
expanded—
neighbors0 animated
cycles0
15 · Masonry cascade
Variable-height items packed into three columns via CSS columns, with a staggered fall-from-above entrance. The order is logical (each child is the next in the list), while the layout is visual.
items9
stagger60ms / item
settled0 / 9