Design Lab
Patterns from beautifului, beui, rareui, transitions.dev, shadcn/ui
10 interactive patterns · light theme · mobile-firstDesign tokens as swatches
Every visual decision starts as a CSS variable.
Rows cascade in on scroll
60ms stagger per row · translateY + opacity only · cubic-bezier(0.22,1,0.36,1).
- 1Composite-only properties
Transform & opacity skip layout and paint. - 2Springs over lines
Overshoot curves feel physical, not robotic. - 3Stagger sells hierarchy
Order of arrival implies order of importance. - 4Observe, don't poll
IntersectionObserver fires off the main render loop. - 5Respect reduced motion
Every rule here has an escape hatch.
3D tilt with cursor glare
Perspective transform driven by pointer position; glare is a radial gradient on --mx/--my.
Pointer-reactive surface
Move your cursor across this card. On touch devices, tap to nudge it.
Pill indicator that slides
The pill moves with measured offsets via transform — zero layout thrash. Panels cross-fade.
Overview
A sliding indicator gives instant spatial feedback about which tab owns the view — the motion itself communicates the relationship between tabs.
Details
The pill measures each tab's offsetLeft/offsetWidth once, then animates purely with transform: translateX() and width. No reflow, no jank, 60fps on mobile Safari.
Specs
Transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1). Panel cross-fade: opacity 350ms cubic-bezier(0.22, 1, 0.36, 1) with a 6px rise.
Word-by-word streaming simulation
Mimics LLM token streaming with a blinking block cursor, then reveals source chips.
Spring fill + synced count-up
Bar width springs past its target then settles; the number tracks it frame-by-frame via rAF.
Reject bad input physically
Empty submit shakes ±6px for 400ms, flips the border red, fades in helper text.
Motion kill switch
Toggling adds a .reduce-motion class on <html> clamping every animation/transition to 0.01ms. The same rules apply automatically under @media (prefers-reduced-motion: reduce).
Try it, then replay the button or stream above — everything snaps instantly.