How it works
One tag.
Works in
Drop a tag anywhere. No config, no wrappers, no boilerplate.
- 1 Install
Run
npm install motion-components - 2 Import once
import 'motion-components' registers all custom elements globally. - 3 Wrap anything
Compose
motion-hover ,motion-reveal , and friends around your existing markup.
Primitives
Feel the difference
Composable primitives. Each one is interactive — try them.
Spring scale and lift on hover
Tactile spring compression on press
Fade and lift on viewport entry
Sequence children in on scroll entry
Element attracted to cursor with spring
3D perspective tilt following cursor
Text Effects
Words in motion
Components for animated text — split, typewriter, counter, scramble, and ticker.
Hover to scramble
We
Cycle words with per-word color
Why motion-components
Built different
Spring physics
Every animation uses spring dynamics — naturally interruptible, no jarring cuts or fixed durations.
Framework-agnostic
Standard web components work anywhere — React, Vue, Svelte, Astro, or raw HTML. No adapter needed.
Composable primitives
Build complex interactions by wrapping — nest
Zero config
Sensible defaults out of the box. Attributes let you tune — but you never have to.
TypeScript ready
Full type declarations included. Attribute names and values are typed for IDE autocomplete.
Accessible by default
Respects
Pick a goal. Find the tag.
Still want more?
Three more areas to explore — hover to reveal what's inside.
Add scroll-driven parallax and motion.
Parallax depth, progress-driven animation, scroll-linked scenes — two components that unlock scroll-based motion without any scroll library.
Explore →Build a dialog, gallery, or slider fast.
Dialogs, galleries, sliders, image comparison, countdowns, progress rings, flip-cards, spotlights — interactive widgets that animate themselves.
Explore →Display code with syntax highlighting.
Syntax-highlighted code blocks with copy buttons, optional typing animation, and chrome-style title bars — drop in for docs, tutorials, and live demos.
Explore →