# motion-components

> Framework-agnostic web components for spring-based motion: reveals, hover and press responses, text effects, animated icons, scroll scenes, charts and ready-made widgets. One HTML tag per effect, built on Lit and Motion.

- Install: `npm install motion-components`, then `import 'motion-components'` for every tag, or `import 'motion-components/motion-reveal'` for one.
- No build step: `<script type="module" src="https://cdn.jsdelivr.net/npm/motion-components@1/+esm"></script>`.
- Works in plain HTML, React 19, Vue, Svelte, Angular, Astro and Alpine. Wrap your own markup: `<motion-reveal><h2>Hello</h2></motion-reveal>`.
- Every animation is interruptible and respects `prefers-reduced-motion`.
- Every animated component has `play()`, `pause()`, `finish()`, `cancel()`, `playState` and `finished`, and fires `motion-start`, `motion-finish` and `motion-cancel` (bubbling, composed).
- Time is in seconds. Spring settings are `duration` and `bounce`.

## Docs

- [Usage](https://www.motion-components.dev/docs.md): install, framework setup, preload CSS and per-component imports
- [JavaScript API](https://www.motion-components.dev/docs/js-api.md): playback methods, events and pauseAll/resumeAll/cancelAll
- [Migrating to 1.0](https://www.motion-components.dev/docs/migration.md): renamed attributes and units
- [Using with AI](https://www.motion-components.dev/docs/ai.md): llms.txt, Markdown pages, a rules file for coding agents and editor completions

## Reveal

- [motion-blur](https://www.motion-components.dev/docs/reveal/motion-blur.md): Scroll-driven blur reveal.
- [motion-blur-in](https://www.motion-components.dev/docs/reveal/motion-blur-in.md): Viewport-triggered blur reveal.
- [motion-reveal](https://www.motion-components.dev/docs/reveal/motion-reveal.md): Viewport-triggered fade + translate reveal.
- [motion-stagger](https://www.motion-components.dev/docs/reveal/motion-stagger.md): Staggered viewport-triggered reveal for a list of children.

## Respond

- [motion-hover](https://www.motion-components.dev/docs/respond/motion-hover.md): Spring-based hover transform primitive.
- [motion-magnetic](https://www.motion-components.dev/docs/respond/motion-magnetic.md): Magnetic cursor pull.
- [motion-press](https://www.motion-components.dev/docs/respond/motion-press.md): Tactile press primitive.
- [motion-tilt](https://www.motion-components.dev/docs/respond/motion-tilt.md): 3D tilt-on-hover primitive.

## Text

- [motion-arc](https://www.motion-components.dev/docs/text/motion-arc.md): Text laid out along a partial arc.
- [motion-circle](https://www.motion-components.dev/docs/text/motion-circle.md): Text wrapped around a full circle, optionally rotating.
- [motion-counter](https://www.motion-components.dev/docs/text/motion-counter.md): Animated number counter.
- [motion-curve](https://www.motion-components.dev/docs/text/motion-curve.md): Sine-wave text.
- [motion-font](https://www.motion-components.dev/docs/text/motion-font.md): Animated variable-font axes.
- [motion-glitch](https://www.motion-components.dev/docs/text/motion-glitch.md): RGB-split glitch effect on text.
- [motion-gravity](https://www.motion-components.dev/docs/text/motion-gravity.md): Gravity-drop text.
- [motion-headline](https://www.motion-components.dev/docs/text/motion-headline.md): Animated headline with split-text reveal.
- [motion-liquid](https://www.motion-components.dev/docs/text/motion-liquid.md): Liquid-distorted text via SVG turbulence + displacement-map.
- [motion-marker](https://www.motion-components.dev/docs/text/motion-marker.md): A highlighter stroke that sweeps behind a phrase from left to right.
- [motion-perspective](https://www.motion-components.dev/docs/text/motion-perspective.md): Vanishing-point text.
- [motion-ring](https://www.motion-components.dev/docs/text/motion-ring.md): An ellipse or a box that draws itself around a word or a short phrase, like a pen circling something important.
- [motion-scramble](https://www.motion-components.dev/docs/text/motion-scramble.md): Decode-style text scramble.
- [motion-split](https://www.motion-components.dev/docs/text/motion-split.md): Split-text reveal primitive.
- [motion-stretch](https://www.motion-components.dev/docs/text/motion-stretch.md): Springy character spread on hover.
- [motion-strike](https://www.motion-components.dev/docs/text/motion-strike.md): A line that draws itself through a phrase, from left to right.
- [motion-swap](https://www.motion-components.dev/docs/text/motion-swap.md): Letter-swap text effect.
- [motion-text-mask](https://www.motion-components.dev/docs/text/motion-text-mask.md): Mask-clip reveal primitive.
- [motion-ticker](https://www.motion-components.dev/docs/text/motion-ticker.md): Horizontal auto-scrolling ticker / marquee.
- [motion-typewriter](https://www.motion-components.dev/docs/text/motion-typewriter.md): Typewriter text effect.
- [motion-underline](https://www.motion-components.dev/docs/text/motion-underline.md): A line that draws itself under a phrase, from left to right.
- [motion-words](https://www.motion-components.dev/docs/text/motion-words.md): Rotating word swap.

## Icons

- [motion-icon](https://www.motion-components.dev/docs/icons/motion-icon.md): Animates any SVG icon on a spring: it draws the strokes in, or makes the icon pop, bounce, rotate, wiggle, pulse or slide up, down, left or right.
- [motion-icon-state](https://www.motion-components.dev/docs/icons/motion-icon-state.md): An icon that morphs between two states with spring physics: menu and close, play and pause, copy and check, plus and minus, chevron down and up, an empty and a filled heart, loading and done, and eye and eye-off.

## Scroll

- [motion-parallax](https://www.motion-components.dev/docs/scroll/motion-parallax.md): Lightweight parallax scroll primitive.
- [motion-scene](https://www.motion-components.dev/docs/scroll/motion-scene.md): Scroll-driven scene with sticky positioning and data-driven child animations.

## Components

- [motion-countdown](https://www.motion-components.dev/docs/components/motion-countdown.md): Countdown timer with animated digit transitions.
- [motion-dialog](https://www.motion-components.dev/docs/components/motion-dialog.md): Animated modal dialog.
- [motion-flip-card](https://www.motion-components.dev/docs/components/motion-flip-card.md): Two-sided card that flips between a `front` and `back` slot with spring physics.
- [motion-gallery](https://www.motion-components.dev/docs/components/motion-gallery.md): Image gallery with a spring-animated expand/collapse lightbox.
- [motion-image-compare](https://www.motion-components.dev/docs/components/motion-image-compare.md): Before/after image comparison slider with a draggable, spring-damped handle.
- [motion-progress](https://www.motion-components.dev/docs/components/motion-progress.md): Fixed progress bar driven by document or per-element scroll.
- [motion-slider](https://www.motion-components.dev/docs/components/motion-slider.md): Horizontal slider with spring-snap drag, arrow-button navigation, and dot indicators.
- [motion-spotlight](https://www.motion-components.dev/docs/components/motion-spotlight.md): Mouse-tracked radial-gradient spotlight overlay.
- [motion-theme-toggle](https://www.motion-components.dev/docs/components/motion-theme-toggle.md): Light / dark mode control with an optional third "system" option.

## Charts

- [motion-chart](https://www.motion-components.dev/docs/charts/motion-chart.md): A bar or line chart drawn from HTML.
- [motion-pie](https://www.motion-components.dev/docs/charts/motion-pie.md): A pie or donut chart for parts of a whole.
- [motion-sparkline](https://www.motion-components.dev/docs/charts/motion-sparkline.md): A small trend line that sits inside a sentence, a table cell or a stat tile.

## Code

- [motion-code](https://www.motion-components.dev/docs/code/motion-code.md): Syntax-highlighted code block with macOS-style window chrome, an optional copy button, and an optional typewriter reveal.
- [motion-code-inline](https://www.motion-components.dev/docs/code/motion-code-inline.md): Inline code snippet with an optional copy-to-clipboard button.

## Recipes

- [Charts](https://www.motion-components.dev/docs/recipes/charts.md)
- [Icons](https://www.motion-components.dev/docs/recipes/icons.md)
- [Magnetic CTA](https://www.motion-components.dev/docs/recipes/magnetic-cta.md)
- [Scroll progress](https://www.motion-components.dev/docs/recipes/scroll-progress.md)
- [Staggered grid](https://www.motion-components.dev/docs/recipes/staggered-grid.md)
- [Tilt card](https://www.motion-components.dev/docs/recipes/tilt-card.md)
- [Typewriter hero](https://www.motion-components.dev/docs/recipes/typewriter-hero.md)

## Optional

- [All components in one file](https://www.motion-components.dev/llms-full.txt): every component's attributes, events, slots and CSS properties
- [Blog](https://www.motion-components.dev/blog/): releases and guides, also as [RSS](https://www.motion-components.dev/rss.xml)