Skip to content

Transitions

Collection of the most essential transitions for web apps that
you can just copy and paste into any project.

Card resize
Smooth card resize transition
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
  1. Reading the question
  2. Looking up relevant docs
  3. Drafting an answer
  4. Checking tone
Reasoning chain
Collapsible chain-of-thought with stagger

Ship dark mode toggle

2 / 5
  1. Read theme tokens
  2. Search examples
  3. Pick a token strategy
  4. Implement the toggle
  5. 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

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