A tour of every component, grouped by what it does, each with real spring physics. Every section below is live: hover it, press it, scroll it. Open a category to see all of its components.

motion components

Text

Type that drops, stretches, flows, decodes, and marks itself up.

See them all
Show the codeHide the code 
<script type="module">
  import "motion-components/motion-curve";
  import "motion-components/motion-glitch";
  import "motion-components/motion-perspective";
  import "motion-components/motion-liquid";
</script>

<motion-curve amplitude="22" wave-length="360" wave-duration="2.6">curve</motion-curve>
<motion-glitch trigger="loop" intensity="7">glitch</motion-glitch>
<motion-perspective depth="0.7" vanish="right" loop>perspective</motion-perspective>
<motion-liquid intensity="12" duration="6">liquid</motion-liquid>
curve glitch perspective liquid

Reveal

Content that arrives instead of just appearing.

See them all
Show the codeHide the code 
<script type="module">
  import "motion-components/motion-blur-in";
</script>

<motion-blur-in intensity="14" y="18" once="false"><p>Words that wait</p></motion-blur-in>
<motion-blur-in intensity="14" y="18" duration="0.8" once="false"><p>until you reach them,</p></motion-blur-in>
<motion-blur-in intensity="14" y="18" duration="0.9" once="false"><p>then come into focus</p></motion-blur-in>
<motion-blur-in intensity="14" y="18" duration="1" once="false"><p>one line at a time.</p></motion-blur-in>

Words that wait

until you reach them,

then come into focus

one line at a time.

Respond

Surfaces that answer your pointer like physical objects.

See them all
Show the codeHide the code 
<script type="module">
  import "motion-components/motion-magnetic";
  import "motion-components/motion-press";
  import "motion-components/motion-tilt";
</script>

<style>
  .obj { display: grid; place-items: center; width: 10rem; aspect-ratio: 1; font-weight: 700; }
  .pull { border-radius: 50%; background: #facc15; }
  .press { border-radius: 1.5rem; background: #60a5fa; }
  .tilt { aspect-ratio: 3 / 4; border-radius: 0.75rem; background: #222230; color: #e8e8f0; }
</style>

<motion-magnetic strength="0.6" bounce="0.5">
  <div class="obj pull">pull</div>
</motion-magnetic>
<motion-press>
  <div class="obj press">press</div>
</motion-press>
<motion-tilt max="18" gloss>
  <div class="obj tilt">tilt</div>
</motion-tilt>
pull
press
tilt

Icons

Any SVG icon, drawn in and moved on a spring.

See them all
Show the codeHide the code 
<script type="module">
  import "motion-components/motion-icon";
</script>

<motion-icon src="https://cdn.jsdelivr.net/npm/lucide-static@1/icons/heart.svg" animation="draw pulse" trigger="view" once="false" delay="0"></motion-icon>
<motion-icon src="https://cdn.jsdelivr.net/npm/lucide-static@1/icons/bell.svg" animation="draw wiggle" trigger="view" once="false" delay="0.08"></motion-icon>
<motion-icon src="https://cdn.jsdelivr.net/npm/lucide-static@1/icons/rocket.svg" animation="draw bounce" trigger="view" once="false" delay="0.16"></motion-icon>
<motion-icon src="https://cdn.jsdelivr.net/npm/lucide-static@1/icons/star.svg" animation="draw pop" trigger="view" once="false" delay="0.24"></motion-icon>
<motion-icon src="https://cdn.jsdelivr.net/npm/lucide-static@1/icons/sun.svg" animation="draw rotate" trigger="view" once="false" delay="0.32"></motion-icon>
<motion-icon src="https://cdn.jsdelivr.net/npm/lucide-static@1/icons/mail.svg" animation="draw" trigger="view" once="false" delay="0.4"></motion-icon>
<motion-icon src="https://cdn.jsdelivr.net/npm/lucide-static@1/icons/zap.svg" animation="draw wiggle" trigger="view" once="false" delay="0.48"></motion-icon>
<motion-icon src="https://cdn.jsdelivr.net/npm/lucide-static@1/icons/music.svg" animation="draw slide-up" trigger="view" once="false" delay="0.56"></motion-icon>

Scroll

Depth and choreography driven by the scrollbar.

See them all
Show the codeHide the code 
<script type="module">
  import "motion-components/motion-parallax";
</script>

<motion-parallax axis="x" depth="0.9"><span>near</span></motion-parallax>
<motion-parallax axis="x" depth="-0.45"><span>middle</span></motion-parallax>
<motion-parallax axis="x" depth="0.15"><span>far away</span></motion-parallax>

Components

Ready-made widgets with the springs already inside.

See them all
Show the codeHide the code 
<script type="module">
  import "motion-components/motion-flip-card";
  import "motion-components/motion-countdown";
</script>

<motion-flip-card trigger="hover" axis="y" style="width: 14rem; height: 16rem">
  <div slot="front">hover me</div>
  <div slot="back">flipped on a spring</div>
</motion-flip-card>

<p>Until 2027</p>
<motion-countdown to="2027-01-01T00:00:00" format="days hours minutes seconds" roll></motion-countdown>
hover me
flipped on a spring

Until 2027

Charts

Numbers that draw themselves when they come into view.

See them all
Show the codeHide the code 
<script type="module">
  import "motion-components/motion-chart";
  import "motion-components/motion-pie";
  import "motion-components/motion-sparkline";
</script>

<motion-chart
  type="line"
  label="Weekly downloads"
  values="1200, 1850, 1600, 2400, 2900, 3300, 4100, 4800"
  labels="Jan, Feb, Mar, Apr, May, Jun, Jul, Aug"
></motion-chart>

<motion-pie
  donut
  label="Visitors by source"
  values="46, 27, 17, 10"
  labels="Search, Direct, Social, Other"
></motion-pie>

<p>
  Downloads grew every month
  <motion-sparkline values="12, 18, 16, 24, 29, 33, 41, 48"></motion-sparkline>
  since January.
</p>

Downloads grew every month since January.

Code

Highlighted code that can type itself out.

See them all
Show the codeHide the code 
<script type="module">
  import "motion-components/motion-code";
</script>

<motion-code filename="index.html" typing typing-speed="45">
  <script type="text/plain">
<motion-tilt max="12" gloss>
  <img src="cover.jpg" alt="Album cover" />
</motion-tilt>

<motion-counter to="9847" suffix="+"></motion-counter>
  </script>
</motion-code>

All of it starts with one line.

npm install motion-components

Then import a tag and write HTML. It works in React, Vue, Svelte, Angular, Astro and plain pages. Start with the text showcase or the docs.

Deep dives: parallax, scroll scenes and variable fonts.