Card resize
Smooth card resize transition
Transitions
Collection of the most essential transitions for web apps that
you can just copy and paste into any project.
65.78
Number pop-in
Digit flip with blur and stagger
Notification badge
Diagonal slide with spring pop-in
Transaction processing...
Text states swap
Text swap transition with blur
Menu dropdown
Origin-aware open / close transition
Modal open/close
Modal transition with scale
Panel reveal
Panel open / close transition
Page side-by-side
Forward / back page transition
Icon swap
Scale and blur icon swap
Button morph
Pill contracts to a circle, spinner becomes a check
Maya Lin
Designer · 4h
Twelve onboarding states ready.
Take a look anytime.
Skeleton load
Shimmer placeholder resolves into content
Streaming text
Word-by-word blur-in with a live cursor
Typing dots
Three bouncing dots, staggered
- Reading the question
- Looking up relevant docs
- Drafting an answer
- Checking tone
Reasoning chain
Collapsible chain-of-thought with stagger
Ship dark mode toggle
2 / 5
- Read theme tokens
- Search examples
- Pick a token strategy
- Implement the toggle
- Fix contrast on hover
Task
Status-aware checklist atom
Suggestion chip
Arrow + text atom
Tooltip callout
Pill unfurls from right, icon springs in
Deposit
12
Submitting transaction…
Filling your transaction on the blockchain.
Fill statusProcessing
Deposit flow
Continue pill lifts a modal that resolves into a celebratory check
Charts & diagrams
Data charts and hand-built diagrams animated with the same ease-out-expo as the transitions above. Neutral surfaces, one blue accent, every color a theme-bound token.
Line chart
Single-series line with hover crosshair
Area chart
Gradient area with draw-in
Bar chart
Categorical bars with peak highlight
62%Active of 100
Donut chart
Arc draw with center label pop-in
Revenue
42↑ 250.0%
Sparkline
Compact line with last-point marker
Monthly recurring revenue
$48,230
12.4% vs last period
KPI tile
Animated counter + delta + sparkline
Activity
816contributions
Activity heatmap
Staggered cell fill with hover tooltip
Flow diagram
Edge tracing + arrowhead pop-in
Dependency tree
Cascading edge trace down through levels
Playground
Type
Color
Duration
Strength
100%
Dithered dots playground
move · click · hold to charge → explode
Image
PNG, JPG, WebP, GIF, or SVG. You can also drop a file onto the canvas.
Presets
Cursor mode
Push radius80px
Push strength220px
Falloff power3.0
Swirl0%
Ripple speed380
Ripple strength38px
Ripple band18px
Stiffness180
Damping0.78
Inertia45%
Surface tension70%
Density3px
Dither noise18%
Position jitter25%
Dot size2.2px