Components
Component Library
Browse the full set of UI components, interaction studies, and motion primitives.
Controls
Elastic segmented tabs with a velocity-aware pill that glides into place.
Rolling digit counter with tactile plus-minus controls and spring recoil.
Clipboard chip that flips from utility to confirmation in one tap.
Action button that compresses into loading before resolving with feedback.
Expandable email CTA with bell-led transitions between idle and success.
A standalone, data-driven command palette with animated overlay, grouped results, fuzzy search, and a useCommandPalette hook that binds ⌘K out of the box.
A hyper-realistic physical rotary knob with tactile depth, spring-loaded momentum, and dynamic industrial lighting.
Stacked notification cards that fan out into a full list with springy stagger — collapses back into a compact peek with ghost layers.
Scrollable list of icon+label cards with a center-focus depth effect — the active item scales up while outer cards fade and shrink.
A spring-physics calendar picker with sliding month transitions, staggered day-cell entry, and a velocity-aware trigger — the date picker your design system deserves.
A searchable select with staggered option entry, spring chevron, grouped items, and a bottom-sheet on mobile — one component, every platform.
Tinder-style swipe deck with directional action overlays, velocity-based dismissal, spring snap-back, and stacked depth layers — zero competing npm packages.
A one-time-code input with blur-roll digit entry, an animated caret, error shake with auto-clear, and a staggered success pop — paste-friendly and fully accessible.
An emoji reaction picker where the tapped emoji flies onto the message's reaction badge along a curved path — built on Motion's new arc() easing with a spring-pop landing.
AI
An AI thinking pill that cycles shimmering phase labels — Searching, Reading, Writing — with blur slot-swaps and a spring-pop check on completion.
Media
Vinyl sleeve player with tactile lift, spin, and transport motion.
A hyper-realistic handheld retro media device — CRT display, precision speaker grill, and spring-loaded tactile transport controls.
Hyperlinks that summon a directional image tooltip — springy entry, cursor-tracked glide, and a parallax tilt on the artwork inside.
A flip card that swings toward the cursor's entry side, with cursor-tracked sheen, parallax tilt, and a lifting floor shadow that quietly pull you in for another flip.
A two-column client index. Hovering a name fades-and-scales the preview into focus while the active row magnetically drifts under the cursor.
A hero card surrounded by a radial scatter of secondary cards. Hover the center to toss the stack outward with springy overshoot; un-hover snaps them back behind.
A fanned arc of overlapping artwork cards — hovered cards spring up and forward while neighbors nudge aside, crowned by floating user-handle badges.
Carousels
A 3D coverflow carousel with spring physics, drag-to-navigate, scroll-wheel support, keyboard navigation, and optional reflection and audio feedback.
Hover-weighted gallery that stretches the active frame into focus.
Physics
Nine pendulums with staggered lengths produce a travelling wave through frequency drift alone — no keyframes, no choreography.
A lattice of nodes lit by propagating wavefronts. Fires automatically every 2.5 s. Click anywhere on the grid to spawn your own.
Radial spikes pulse outward in a staggered sine wave — a mechanical loading signature inspired by signal-ingest instrumentation.
Particles scatter from noise and converge into text — inspired by Linear's AI generation animation.
An interactive 3D Rubik's cube — drag to orbit, click a face to twist a layer. Monochrome, CSS 3D-transform based, GPU-accelerated.
Text
On hover, the resting label fades out while replacement text resolves in character by character — each glyph staggers up through a chromatic-aberration shimmer before settling.
Heroes
A bright, centered hero with an avatar trust badge, two-line accent headline, single CTA, and a painted blue-sky valley rising from the fold — real artwork, Ken-Burns settle.
An image-first editorial hero — floating black pill nav, a framed classical painting, serif-italic headline accent, inline email capture, and a soft rainbow glow at the fold.
A full landing hero with pill nav, badge, accent headline, dual CTAs, and a painted dusk landscape that rises in from the bottom — pure SVG, zero image assets.
Sections
A marketing-grade pricing section with a sliding billing toggle, direction-aware price rolls, staggered card entrances, and a highlighted popular tier.
An infinite dual-row testimonial wall that drifts in opposite directions and decelerates smoothly on hover — motion-value driven, seamlessly looping.
A spring-physics FAQ accordion — rows pop in with stagger, panels unfold with height springs, and the plus badge twists into a close mark on open.
Templates
A complete landing page for AI automation platforms — editorial hero, feature grid, testimonial marquee, pricing table, gradient CTA band, and footer — composed from the section components with scroll-triggered reveals.