How it works
One tag.
Works in native HTML .
Drop a tag anywhere. No config, no wrappers, no boilerplate.
- 1 Install
Run
npm install motion-components , or load it from a CDN with one script tag, as in the example. - 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.
// 1. install
npm install motion-components
// or, with no build step, one tag in your HTML
<script type="module" src="https://cdn.jsdelivr.net/npm/motion-components@1/+esm"></script>
// 2. import once — works in any framework
import 'motion-components'
// 3. wrap anything
<motion-hover scale="1.1" y="-6">
<button>Hover me</button>
</motion-hover>
<motion-reveal>
<h2>Smooth entrance</h2>
</motion-reveal>
<motion-stagger>
<div>One</div>
<div>Two</div>
<div>Three</div>
</motion-stagger>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, rotating words, swaps, and marks that draw onto words.
Loop scramble
We
Cycle words with per-word color
Swaps on a loop
to
Marker, underline, strike and ring
Theming
Light, dark, and system.
<motion-theme-toggle> switches themes with a spring sun-to-moon morph, and an optional circular wipe from the control.
dark-mode-toggleattributes and events.-
Read the docs
Animated icons
Icons that move.
Hover the icons. Click one to preview it and copy its code.
Why motion-components
Built different.
Spring physics
Every animation uses spring dynamics: naturally interruptible, with no jarring cuts.
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 the reduced motion setting. Animations skip cleanly: no flashes, no layout shift.
Pick a goal. Find the tag.
Still want more?
Four more areas to explore. Hover to reveal what's inside.
Add scroll-driven parallax and motion.
Parallax depth, progress-driven animation, and 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, and theme toggles: interactive widgets that animate themselves.
Explore →Show data as a chart that moves.
Bar, line, pie and donut charts from an attribute or a table, plus inline sparklines. Bars grow, pies sweep in, and every change in the data springs into place.
Explore →Display code with syntax highlighting.
Syntax-highlighted code blocks with copy buttons, optional typing animation, and chrome-style title bars. Drop them in for docs, tutorials, and live demos.
Explore →