Tune

The time dimension of interaction: what easing looks like, how 100ms vs 500ms feels, and which micro-interaction to reach for — all playable.

Easing curves · 10

The same distance, different distributions of time. Hover a card to replay a real element — a toast entering with that curve (springs visibly overshoot). Default to ease-out for UI transitions (fast response, gentle settle); every curve value is copyable.

Saved ✓
linear linear uniform-speed semantics (progress bars, marquees); almost never right for UI transitions
Saved ✓
ease ease browser default; the fallback when you have no specific intent
Saved ✓
ease-out ease-out entrances — respond fast, settle gently; the default for UI transitions
Saved ✓
ease-in ease-in exits — ease in, accelerate away; feels sluggish on entrances
Saved ✓
ease-in-out ease-in-out in-view moves (reorder, swap) — soft on both ends
Saved ✓
standard (Material-ish) cubic-bezier(0.2, 0, 0, 1) system-grade standard curve: instant response, rock-steady settle; dense UIs
Saved ✓
decelerate cubic-bezier(0, 0, 0, 1) pure-deceleration entrance — elements arriving from off-screen
Saved ✓
accelerate cubic-bezier(0.3, 0, 1, 1) pure-acceleration exit — elements leaving the screen
Saved ✓
spring / back-out cubic-bezier(0.34, 1.56, 0.64, 1) playful overshoot entrance (badges, emoji reactions); use sparingly, careful in B2B
Saved ✓
anticipate / back-in-out cubic-bezier(0.68, -0.6, 0.32, 1.6) wind up, then overshoot — emphatic one-shot animations that direct attention

Duration ladder

The same move at five durations (same easing). Rule of thumb: micro feedback 100-150ms · standard transitions 200-300ms · attention 400ms+; past 500ms a UI transition is just making people wait.

100ms
micro feedback: hover / press / toggles
150ms
micro feedback: hover / press / toggles
200ms
standard transitions: panels / cards / modals
300ms
standard transitions: panels / cards / modals
500ms
directing attention / large moves; any longer is just waiting

Micro-interaction patterns · 15

Live demos of the everyday micro-interactions — hover / click to try; each with when-to-use and copyable CSS.

Press scale

120ms · ease-out

Press feedback for every clickable button — a more immediate “got it” signal than hover.

✓ color/shadow
✗ moves layout

Hover feedback

200ms · ease-out

Give hover feedback with color/shadow — never translate/scale, which jitters the layout.

Tab ⇥ to focus

Focus ring

150ms · ease-out

Focus indicator for keyboard users; shown only on :focus-visible so mouse clicks stay quiet.

Saved ✓

Toast slide-in

250ms · cubic-bezier(.2,.8,.2,1)

Non-blocking notice for success or background completion; auto-dismisses after 2s, never steals focus.

Delete this file?

Modal enter

200ms · ease-out

Blocking moments that need a user decision; overlay fades in while the panel scales up slightly.

Skeleton shimmer

1400ms · ease

Loading placeholder; shapes arrive first, cutting perceived wait and layout jumps.

spinner
✓ skeleton first

Spinner vs skeleton

800ms · linear

Skeleton for known layouts; spinner only for unknown/brief waits — skeleton first.

Success check draw

400ms · ease-out

Confirmation moment for a successful submit/save; one-shot stroke animation, never looped.

you@example

Error shake

300ms · ease-in-out

Instant negative feedback for validation or input errors; over within 300ms.

Floating label

150ms · ease-out

Space-saving label for form inputs; floats up on focus or when the field has a value.

Switch toggle

180ms · ease

For settings that apply instantly; the flip itself confirms the state.

Yes — free for up to 3 projects, no card required.

Accordion expand

250ms · ease-out

Expand/collapse for FAQs and settings groups; grid-template-rows 0fr→1fr, no height measuring.

Copy button feedback

150ms · ease-out

Completion cue for instant actions like copy; the label swaps in place and reverts after 1.2s.

Ripple

400ms · ease-out

Material-style tactile feedback; spreads from the click point, best for touch-first products.

saved ✓

Optimistic UI

150ms · ease-out

For high-success writes, update the UI before the server responds; roll back and notify on failure.

The eight states (click to switch)

One list component in all eight states — empty and error states are the line between “professional” and “half-finished”. Full checklist → app-factory playbook 4.2 §3.

No pipelines yetPipelines you create will show up here.
Invoice syncRan 2h ago · 148 rowsOpen
Lead enrichmentRan daily · 3 sourcesOpen
Weekly digestPausedOpen
Invoice syncRan 2h ago · 148 rowsOpen
Invoice syncRan 2h ago · 148 rowsOpen
Sync failed — file exceeds 50 MB. Try splitting it, or retry now.
Invoice syncJust now · 152 rowsOpen
✓ Synced · Undo
quarterly_financial_report_FINAL_v7_REALLY_FINAL_2026_approved_copy(3).xlsx9,842 rows · 48 MBOpen
Lead enrichmentRan dailyOpen
⚠ You're offline — showing cached data from 14:02.
Invoice syncRan 2h ago · 148 rowsOpen

Never bare “No data” — say what will live here and give one clear next action

Every animation on this page respects prefers-reduced-motion (falls back to static end states).