live demo
/ Magnetic
Magnetic Hover Fields
Buttons and links drift toward the cursor as it approaches, then spring home when it leaves — turning hover targets into tactile objects.
/ best for
CTAsNav itemsHero buttons
Light perf
Desktop only
Height and opacity transition together with an eased curve so the panel arrives instead of snapping.
live demo
/ AnimatePresence + layout
Expandable Reveal Panels
Cards that smoothly expand height and reveal nested content with synchronized opacity, height, and transform animation.
/ best for
FAQsProject case studiesMobile feature lists
Light perf
Mobile optimized
/ global
The pill at the top of every page is the demo.
Active route is highlighted by a layout-shared pill that springs from link to link as you navigate.
live demo
/ FloatingNav
Dynamic Floating Navigation
A pill nav that floats above the page, fades its background as you scroll, and uses shared layout transitions to slide an active pill between links.
/ best for
Marketing sitesShowcasesDocumentation
Light perf
Mobile optimized
/ 01
Step 1
Scroll inside this panel — the accent spine fills in time with progress.
/ 02
Step 2
Scroll inside this panel — the accent spine fills in time with progress.
/ 03
Step 3
Scroll inside this panel — the accent spine fills in time with progress.
/ 04
Step 4
Scroll inside this panel — the accent spine fills in time with progress.
/ 05
Step 5
Scroll inside this panel — the accent spine fills in time with progress.
/ 06
Step 6
Scroll inside this panel — the accent spine fills in time with progress.
/ 07
Step 7
Scroll inside this panel — the accent spine fills in time with progress.
/ 08
Step 8
Scroll inside this panel — the accent spine fills in time with progress.
live demo
/ useScroll + scaleY
Scroll Progress Spine
A vertical accent line whose fill is bound to scroll progress, used to give long-form content a visible spine of advancement.
/ best for
TimelinesHow-it-works sectionsLong articles
Light perf
Mobile optimized
/ drag to reorder · spring physics
- Tighten the hero copy
- Audit the motion timing
- Ship the case study page
- Record the launch video
- QA on mobile Safari
live demo
/ DragReorderList
Drag-to-Reorder List
Items rearrange with spring physics as you drag them — neighbors slide out of the way and snap into place when released.
/ best for
SettingsPlaylistsKanban columns
Light perf
Mobile optimized
/ after
Color
/ before
Mute
⇆
drag the handle ↔
live demo
/ ImageCompareSlider
Image Comparison Slider
Drag the divider to reveal a before/after split — the classic comparison widget, polished with spring damping and a magnetic handle.
/ best for
Product before/afterPhoto editsDesign case studies
Light perf
Mobile optimized
/ shared layoutId · spring
live demo
/ MagneticTabs
Magnetic Tab Indicator
A fluid pill slides between tabs with a shared layout animation — the indicator feels like one object morphing, not three separate states.
/ best for
TabsPricing togglesFilter pills
Light perf
Mobile optimized
live demo
/ BentoFocusGrid
Bento Focus Grid
An Apple-style grid where clicking a tile expands it to full-grid focus through a layout animation, then settles back into its slot.
/ best for
Feature gridsPortfolio tilesProduct highlights
Light perf
Mobile optimized
- / 01What makes motion feel premium?+
Restraint, easing curves the eye trusts (cubic-bezier 0.16, 1, 0.3, 1 is a great default), and timing under 700ms for most reveals. The trick is doing less, but more deliberately.
- / 02Should every interaction animate?+
- / 03What about accessibility?+
- / 04How do you keep frame rates high?+
live demo
/ SharedLayoutAccordion
Shared-Layout Accordion
Items animate between collapsed and expanded with shared element transitions, so titles glide instead of redrawing.
/ best for
FAQsRoadmapsPricing tiers
Light perf
Mobile optimized
/ keyboard first
Press ⌘ K while hovering this panel
Or just click the button below.
live demo
/ CommandPaletteDemo
Command Palette (⌘K)
A keyboard-first overlay with fuzzy search and arrow-key navigation — the desktop-grade affordance every premium app eventually needs.
/ best for
DashboardsPower-user toolsDocumentation
Light perf
Desktop only