A.01
pointerhoverspringmotion
Magnetic Button
A button gently pulled toward the pointer inside a bounded magnetic field.
Buttons & Controls · React / Motion / Tailwind
Motion Fundamentals
The grammar of interface motion.
Each component here isolates one motion idea you will reuse everywhere: a spring that follows intent, a stagger that sequences text, a tween that counts honestly, a layout transition that preserves spatial continuity, a height animation that never jumps, and a state change that morphs instead of swapping.
- A.04hoverfocusstaggerzero deps
Split Text Button
A button whose label rolls character by character on hover or focus, revealing a duplicate line.
Buttons & Controls · React / CSS / Tailwind
- G.25viewporttweenzero deps
Animated Counter
A locale-aware count-up number that plays once in view and never shifts the layout.
Data & Feedback · React / Tailwind
- D.14clickkeyboardlayoutmotion
Morphing Tabs
Accessible tabs with a selection indicator that flows between tabs on a spring.
Navigation & Menus · React / Motion / Tailwind
- B.38clickkeyboardtweenzero deps
Fluid Accordion
An accessible accordion whose panels glide open to their natural height, with single or multiple open items.
Cards & Containers · React / CSS / Tailwind
- A.33clickkeyboardlayoutmotion
Stateful Submit Button
A submit button that morphs through loading, success and error with a spring-driven width and drawn icons.
Buttons & Controls · React / Motion / SVG / Tailwind
- D.47clickkeyboardspringmotion
Dynamic Island
A pill that morphs between idle, compact and expanded live activities on a spring.
Navigation & Menus · React / Motion / Tailwind
- B.70dragkeyboardlayoutmotion
Sortable List
A drag-to-reorder list with a grip handle, lifted rows, layout animations and full keyboard reordering.
Cards & Containers · React / Motion / Tailwind
- D.76clickkeyboardlayoutmotion
Fluid Pagination
Pagination with a sliding active indicator, smart ellipsis windowing and numbers that roll in the direction of travel.
Navigation & Menus · React / Motion / Tailwind
- C.73viewportcontinuouszero deps
Morph Text
Words that melt into one another through a liquid blur-and-threshold morph.
Typography & Text · React / SVG / CSS / Tailwind
- A.93clickkeyboardlayoutmotion
Segmented Control
A radio-group segmented control with a spring thumb, roving arrow keys, sizes and native form support.
Buttons & Controls · React / Motion / Tailwind
- B.100clickkeyboardlayoutmotion
Filterable Grid
A grid filtered by tag chips and sorted from a menu, with items gliding between layouts as filters change.
Cards & Containers · React / Motion / Tailwind
- A.126clickkeyboardspringmotion
Morph Icon Button
An icon button whose glyph morphs between two states by interpolating SVG paths — play/pause, menu/close, heart and more.
Buttons & Controls · React / Motion / SVG / Tailwind
- C.132hoverfocusspringmotion
Wave Text
Letters that ripple in a springy wave from the letter nearest the pointer — on hover, focus, in view or continuously.
Typography & Text · React / Motion / Tailwind
- C.163hoverviewporttweenzero deps
Text Prism
Words printed on the faces of a 3D prism that tumbles to the next word, with the width reserved for the longest.
Typography & Text · React / CSS / Tailwind
- D.166scrolldragscroll-linkedzero deps
Swipe Tabs
Mobile tabs with side-by-side panels on native scroll-snap and an indicator that tracks the swipe continuously.
Navigation & Menus · React / CSS / Tailwind
- D.197clickkeyboardtweenmotion
Page Transition
A route transition wrapper using the View Transitions API with a Motion fallback, direction-aware presets and SPA focus management.
Navigation & Menus · React / Motion / CSS
- B.187dragclickspringmotion
Swipe Actions
List rows that reveal actions when swiped, with full-swipe triggers and an accessible Actions menu on every row.
Cards & Containers · React / Motion / Tailwind
Technology requirements
Everything this set needs, combined. Each component remains a separate, self-contained file.
ReactMotionTailwindCSSSVG
- npm dependencies
- motion
- Peer
- react, tailwindcss
npm install motion- Magnetic Button documentation
- Split Text Button documentation
- Animated Counter documentation
- Morphing Tabs documentation
- Fluid Accordion documentation
- Stateful Submit Button documentation
- Dynamic Island documentation
- Sortable List documentation
- Fluid Pagination documentation
- Morph Text documentation
- Segmented Control documentation
- Filterable Grid documentation
- Morph Icon Button documentation
- Wave Text documentation
- Text Prism documentation
- Swipe Tabs documentation
- Page Transition documentation
- Swipe Actions documentation