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.
Why motion-components
Built different.
Spring physics
Every animation uses spring dynamics: naturally interruptible, with 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, 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, and 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 them in for docs, tutorials, and live demos.
Explore →