Motion

The files of our motion library: text, interaction, component, background and sound effects in small framework-free files, plus a physics scene in WebAssembly. A page loads only the effects it uses; each one stops when it is off screen or the tab is hidden, and shows its final state when you ask your system for reduced motion.

Every effect has its own page with a live demo, controls and code for HTML, React, Vue and JavaScript: search.axi0.io/motion.

272 effects
loader 2.7 KB gzip
0 dependencies
version 0.2.0

Your system asks for reduced motion: every effect on this page shows its final state and nothing moves.

Use it

Two lines in a page's head. The loader finds data-motion attributes and <axi0-…> elements, fetches each effect once with its integrity hash, and keeps watching the page, so a React app that renders later works the same as a static page.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=5">
<script src="/axi0/motion/motion.js?v=9" defer></script>

Then mark what should move: <h2 data-motion="split-text">, <div data-motion="reveal tilt"> or <axi0-aurora cover></axi0-aurora>. Sites of other brands never load from an axi0 host: a pinned copy goes into their own repository with one command (motion-pack vendor).

Text

Split text

1.3 KB gzip

Words, or letters, rise into place one after another the first time the text scrolls into view.

Words rise into place, one after another.

<p class="demo-big" data-motion="split-text">Words rise into place, one after another.</p>

Attribute	Default	What it does
`data-motion-split`	`words`	`words` or `chars` (letters)
`data-motion-from`	`below`	where each piece comes from
`data-motion-stagger`	`0`	milliseconds between pieces; 0 picks 70 for words, 28 for letters
`data-motion-duration`	`650`	milliseconds per piece
`data-motion-delay`	`0`	milliseconds before the first piece

Blur text

0.1 KB gzip

Words, or letters, come into focus out of a soft blur, one after another.

Each word comes into focus.

<p class="demo-big" data-motion="blur-text">Each word comes into focus.</p>

Attribute	Default	What it does
`data-motion-split`	`words`	`words` or `chars` (letters)
`data-motion-stagger`	`90`	milliseconds between pieces
`data-motion-duration`	`800`	milliseconds per piece
`data-motion-delay`	`0`	milliseconds before the first piece

Shiny text

0.4 KB gzip

A band of light sweeps across the text, again and again.

A light passes over the words.

<p class="demo-big"><span data-motion="shiny">A light passes over the words.</span></p>

Attribute	Default	What it does
`data-motion-speed`	`3`	seconds per pass
`data-motion-color`	auto	the band's color; auto mixes a light shade of the text color

Gradient text

0.5 KB gzip

The text fills with colors that flow slowly along it.

Color flows through the letters.

<p class="demo-big"><span data-motion="gradient-text" data-colors="#f6a04d,#ff6b8b,#8a7dff">Color flows through the letters.</span></p>

Attribute	Default	What it does
`data-motion-colors`	`#f6a04d,#ff6b8b,#8a7dff`	two or more colors, comma separated
`data-motion-speed`	`6`	seconds per loop

Count up

0.9 KB gzip

A number counts up to its value when it scrolls into view, in the page's own format.

2,048 pixels 98.6 degrees

<p class="demo-stats"><span class="demo-num" data-motion="count-up">2,048</span> pixels <span class="demo-num" data-motion="count-up" data-duration="2400">98.6</span> degrees</p>

Attribute	Default	What it does
`data-motion-from`	`0`	the starting number
`data-motion-duration`	`1800`	milliseconds
`data-motion-delay`	`0`	milliseconds before it starts

Curve marquee

1.8 KB gzip

The text runs without end along a curve, a gentle arc or a wave on a colored ribbon; drag it to fling it either way.

Be creative ✦ Small files ✦ Smooth motion

<p class="demo-marquee" data-motion="curve-marquee">Be creative ✦ Small files ✦ Smooth motion</p>

Attribute	Default	What it does
`data-motion-shape`	`arc`	Curve
`data-motion-depth`	`0.9`	Depth of the curve
`data-motion-waves`	`2`	Crests of a wave
`data-motion-speed`	`70`	Speed
`data-motion-direction`	`left`	Direction
`data-motion-ribbon`	`false`	Colored ribbon under the text
`data-motion-color`	`#f6a04d`	Ribbon color
`data-motion-ink`	`#111111`	Text color on the ribbon
`data-motion-gap`	`✦`	Mark between copies

Decode

1.1 KB gzip

Random glyphs cycle under every letter until each one locks into the real text.

Access granted. Welcome back.

<p class="demo-big" data-motion="decode">Access granted. Welcome back.</p>

Attribute	Default	What it does
`data-motion-trigger`	`both`	Plays on
`data-motion-order`	`start`	Letters lock from
`data-motion-duration`	`1100`	Time until every letter locks
`data-motion-speed`	`40`	Time between glyph changes
`data-motion-glyphs`	`mixed`	Glyph set
`data-motion-color`	`#f6a04d`	Glyph color

Dust type

2.0 KB gzip

The text gathers out of drifting dust; the pointer scatters it and a click blows it apart before it settles back.

Future interfaces

<p class="demo-big" data-motion="dust-type">Future interfaces</p>

Attribute	Default	What it does
`data-motion-density`	`18`	Dust per letter height
`data-motion-size`	`1.8`	Grain size
`data-motion-radius`	`80`	Reach of the pointer
`data-motion-color`	`#f6a04d`	Color of moving grains

Flip board

2.0 KB gzip

A split-flap board: every tile clacks through the letters to the next phrase.

NOW BOARDING

<p class="demo-big" data-motion="flip-board" data-motion-words="NOW BOARDING|GATE 12 ON TIME|SMALL AND FAST">NOW BOARDING</p>

Attribute	Default	What it does
`data-motion-words`	auto	More phrases, separated by \|
`data-motion-interval`	`3400`	Time on each phrase
`data-motion-speed`	`75`	Time per flip
`data-motion-steps`	`12`	Most flips per change
`data-motion-stagger`	`24`	Delay between tiles
`data-motion-tile`	`#17171c`	Tile color
`data-motion-ink`	`#f5f5f7`	Letter color

Focus frame

1.3 KB gzip

One word at a time comes into focus inside gliding corner brackets while the rest stay soft.

Look at one word at a time

<p class="demo-big" data-motion="focus-frame">Look at one word at a time</p>

Attribute	Default	What it does
`data-motion-mode`	`auto`	Focus moves
`data-motion-interval`	`1500`	Time per word
`data-motion-blur`	`4`	Blur of the other words
`data-motion-color`	`#f6a04d`	Bracket color

Lens warp

1.8 KB gzip

A lens follows the pointer and swells the letters under it, with red and blue fringes at its rim; at rest it drifts across on its own.

Bend the moment

<p class="demo-num" data-motion="lens-warp">Bend the moment</p>

Attribute	Default	What it does
`data-motion-size`	`1.3`	Lens radius
`data-motion-strength`	`0.5`	How much it swells
`data-motion-idle`	`true`	Drift on its own when nobody points
`data-motion-color1`	`#ff2e63`	First fringe
`data-motion-color2`	`#08d9d6`	Second fringe

Outline draw

1.3 KB gzip

The letters' outlines draw themselves on, word after word, then flood with color.

Draw attention to it

<p class="demo-big" data-motion="outline-draw">Draw attention to it</p>

Attribute	Default	What it does
`data-motion-duration`	`1700`	Time to draw a word
`data-motion-fill`	`700`	Time to flood with color
`data-motion-stagger`	`140`	Delay between words
`data-motion-width`	`1.4`	Outline width
`data-motion-color`	`#f6a04d`	Outline color

Ring text

1.4 KB gzip

The letters sit around a circle that turns slowly; hovering speeds it up, slows it, pauses it or sends it spinning.

MOTION • TEXT • RING •

<p class="demo-big" data-motion="ring-text">MOTION • TEXT • RING •</p>

Attribute	Default	What it does
`data-motion-spin`	`18`	Time per turn
`data-motion-hover`	`fast`	On hover
`data-motion-direction`	`cw`	Direction
`data-motion-size`	`0`	Ring size (0 fits the text)

Scramble hover

1.0 KB gzip

Letters near the pointer break into random glyphs and settle back as it moves on.

Run the pointer over this line and the letters scatter.

<p class="demo-big" data-motion="scramble-hover">Run the pointer over this line and the letters scatter.</p>

Attribute	Default	What it does
`data-motion-radius`	`90`	Reach around the pointer
`data-motion-duration`	`650`	How long a letter stays scrambled
`data-motion-speed`	`45`	Time between glyph changes
`data-motion-glyphs`	`mixed`	Glyph set
`data-motion-color`	`#f6a04d`	Glyph color

Slot text

1.5 KB gzip

Each letter spins through a reel of random glyphs and lands on the real one, one after another.

Every letter lands in place.

<p class="demo-big" data-motion="slot-text">Every letter lands in place.</p>

Attribute	Default	What it does
`data-motion-trigger`	`both`	Plays on
`data-motion-dir`	`up`	Reel direction
`data-motion-times`	`8`	Glyphs on each reel
`data-motion-duration`	`750`	Spin time per letter
`data-motion-stagger`	`35`	Delay between letters
`data-motion-glyphs`	`upper`	Glyph set
`data-motion-color`	`#f6a04d`	Reel glyph color

Tumble

3.1 KB gzip

The words break loose and tumble into a pile you can drag and throw; click the pile and they fly home.

Some sentences are built to last. This one falls apart on contact.

<p class="demo-big" data-motion="tumble" data-motion-mark="falls apart">Some sentences are built to last. This one falls apart on contact.</p>

Attribute	Default	What it does
`data-motion-trigger`	`hover`	What makes the words fall
`data-motion-mark`	auto	Words to color (spaces or commas between them)
`data-motion-color`	`#f6a04d`	Color of the marked words
`data-motion-area`	`parent`	Where they fall: the parent's box or the element's own
`data-motion-gravity`	`1`	Gravity
`data-motion-again`	`0`	Fly home on their own after (0 = on a click)

Typewriter

1.6 KB gzip

Types the text letter by letter behind a blinking cursor; with phrases it erases each one and types the next.

Small files.

<p class="demo-big" data-motion="typewriter" data-motion-words="Small files.|Smooth motion.|No framework needed.">Small files.</p>

Attribute	Default	What it does
`data-motion-words`	auto	More phrases, separated by \|
`data-motion-speed`	`55`	Time per letter
`data-motion-back`	`28`	Time per erased letter
`data-motion-hold`	`1800`	Pause on a full phrase
`data-motion-cursor`	`\|`	Cursor
`data-motion-color`	`#f6a04d`	Cursor color
`data-motion-loop`	`true`	Keep going

Wire text

2.2 KB gzip

The letter under the pointer turns into a dashed vector outline with handles and its size, like a selection in a drawing app; the letters it leaves stay outlined a moment.

Vector type

<p class="demo-num" data-motion="wire-text">Vector type</p>

Attribute	Default	What it does
`data-motion-color`	`#f6a04d`	Selection color
`data-motion-reach`	`1`	Reach around the letters
`data-motion-trail`	`900`	How long a left letter stays outlined
`data-motion-label`	`true`	Show the letter's size
`data-motion-idle`	`true`	Step through the letters when nobody points

Word cycle

1.6 KB gzip

A word cycles through a list, letter by letter, on a colored pill that fits each word.

Make it gorgeous

<p class="demo-big">Make it&nbsp; <span data-motion="word-cycle" data-motion-words="gorgeous|smooth|tiny|yours">gorgeous</span></p>

Attribute	Default	What it does
`data-motion-words`	auto	The other words, separated by \|
`data-motion-interval`	`2200`	Time per word
`data-motion-stagger`	`22`	Delay between letters
`data-motion-from`	`below`	Letters arrive
`data-motion-align`	`start`	Word inside its slot
`data-motion-pill`	`true`	Colored pill
`data-motion-color`	`#f6a04d`	Pill color
`data-motion-ink`	`#111111`	Text color on the pill

Interaction

Magnet

0.8 KB gzip

An element leans toward the pointer when it comes near, then settles back.

<button type="button" class="demo-btn" data-motion="magnet">Come closer</button>

Attribute	Default	What it does
`data-motion-radius`	`70`	how far around the element it reacts, in pixels
`data-motion-strength`	`0.3`	how far it follows (0 to 1)

Click spark

1.0 KB gzip

Each click throws a ring of small sparks from the pointer.

<button type="button" class="demo-btn" data-motion="click-spark">Click me</button>

Attribute	Default	What it does
`data-motion-count`	`8`	sparks per click
`data-motion-size`	`12`	spark length in pixels
`data-motion-radius`	`26`	how far they fly, in pixels
`data-motion-duration`	`420`	milliseconds
`data-motion-color`	auto	spark color; auto is the text color

Reveal

0.7 KB gzip

Content slides and fades into place the first time it scrolls into view.

One

Two

Three

<div class="demo-row" data-motion="reveal" data-stagger="110">
  <div class="tile">One</div>
  <div class="tile">Two</div>
  <div class="tile">Three</div>
</div>

Attribute	Default	What it does
`data-motion-from`	`below`	where it comes from
`data-motion-distance`	`24`	how far it travels, in pixels
`data-motion-duration`	`700`	milliseconds
`data-motion-delay`	`0`	milliseconds before it starts
`data-motion-stagger`	`0`	reveal the children one by one, this many milliseconds apart

Card fan

1.7 KB gzip

A fan of cards bounces in; the one under the pointer straightens while the others make room.

<div class="m-card-fan" data-motion="card-fan">
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233b2a6b'/%3E%3Cstop offset='.55' stop-color='%23ff6b8b'/%3E%3Cstop offset='1' stop-color='%23ffb36b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='190' cy='238' r='44' fill='%23ffe2b0'/%3E%3Cpath d='M0 290 Q70 240 140 285 T300 270 V400 H0Z' fill='%238a3b6e'/%3E%3Cpath d='M0 330 Q90 290 170 330 T300 320 V400 H0Z' fill='%234a2152'/%3E%3Cpath d='M0 365 Q120 340 300 372 V400 H0Z' fill='%2324122e'/%3E%3C/svg%3E" alt="Evening hills"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%239be7ff'/%3E%3Cstop offset='.5' stop-color='%233b82f6'/%3E%3Cstop offset='1' stop-color='%23172554'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='220' cy='90' r='26' fill='%23f0fbff'/%3E%3Cpath d='M0 220 Q40 205 75 220 T150 220 T225 220 T300 220 V400 H0Z' fill='%232563eb' opacity='.7'/%3E%3Cpath d='M0 270 Q40 252 80 270 T160 270 T240 270 T320 270 V400 H0Z' fill='%231d4ed8' opacity='.8'/%3E%3Cpath d='M0 330 Q50 310 100 330 T200 330 T300 330 V400 H0Z' fill='%230f1f5c'/%3E%3C/svg%3E" alt="Open water"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='300' height='400' fill='%23ffd6c2'/%3E%3Ccircle cx='70' cy='90' r='110' fill='%23ff9f8a'/%3E%3Ccircle cx='250' cy='300' r='130' fill='%23ff6b8b' opacity='.85'/%3E%3Ccircle cx='190' cy='150' r='60' fill='%23ffe9a8'/%3E%3Ccircle cx='90' cy='320' r='50' fill='%23f6a04d' opacity='.9'/%3E%3C/svg%3E" alt="Soft shapes"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e6fbd6'/%3E%3Cstop offset='1' stop-color='%237dd3a8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Cpath d='M0 230 L60 160 L120 225 L190 140 L300 240 V400 H0Z' fill='%233f9f73'/%3E%3Cpath d='M0 290 L80 215 L150 280 L230 205 L300 260 V400 H0Z' fill='%23227552'/%3E%3Cpath d='M0 350 L100 290 L190 345 L300 300 V400 H0Z' fill='%230f3d2b'/%3E%3C/svg%3E" alt="Green ridges"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4b5fd'/%3E%3Cstop offset='1' stop-color='%234c1d95'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='220' cy='110' r='90' fill='%238a7dff' opacity='.8'/%3E%3Ccircle cx='80' cy='280' r='110' fill='%236d28d9' opacity='.7'/%3E%3Ccircle cx='170' cy='250' r='40' fill='%23f5d0fe'/%3E%3C/svg%3E" alt="Violet shapes">
</div>

Attribute	Default	What it does
`data-motion-spread`	`120`	pixels between card middles
`data-motion-angle`	`7`	how far the cards lean, in degrees
`data-motion-push`	`46`	how far the neighbors move aside
`data-motion-scale`	`1.08`	how much the held card grows
`data-motion-stagger`	`80`	milliseconds between cards bouncing in

Color lens

1.7 KB gzip

Grayscale cards get their color back under a soft lens that follows the pointer.

<div class="m-color-lens" data-motion="color-lens">
  <figure data-color="#f6a04d"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233b2a6b'/%3E%3Cstop offset='.55' stop-color='%23ff6b8b'/%3E%3Cstop offset='1' stop-color='%23ffb36b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='190' cy='238' r='44' fill='%23ffe2b0'/%3E%3Cpath d='M0 290 Q70 240 140 285 T300 270 V400 H0Z' fill='%238a3b6e'/%3E%3Cpath d='M0 330 Q90 290 170 330 T300 320 V400 H0Z' fill='%234a2152'/%3E%3Cpath d='M0 365 Q120 340 300 372 V400 H0Z' fill='%2324122e'/%3E%3C/svg%3E" alt=""><figcaption><b>Ember</b><span>Evening light</span></figcaption></figure>
  <figure data-color="#3b82f6"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%239be7ff'/%3E%3Cstop offset='.5' stop-color='%233b82f6'/%3E%3Cstop offset='1' stop-color='%23172554'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='220' cy='90' r='26' fill='%23f0fbff'/%3E%3Cpath d='M0 220 Q40 205 75 220 T150 220 T225 220 T300 220 V400 H0Z' fill='%232563eb' opacity='.7'/%3E%3Cpath d='M0 270 Q40 252 80 270 T160 270 T240 270 T320 270 V400 H0Z' fill='%231d4ed8' opacity='.8'/%3E%3Cpath d='M0 330 Q50 310 100 330 T200 330 T300 330 V400 H0Z' fill='%230f1f5c'/%3E%3C/svg%3E" alt=""><figcaption><b>Tide</b><span>Open water</span></figcaption></figure>
  <figure data-color="#22c55e"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e6fbd6'/%3E%3Cstop offset='1' stop-color='%237dd3a8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Cpath d='M0 230 L60 160 L120 225 L190 140 L300 240 V400 H0Z' fill='%233f9f73'/%3E%3Cpath d='M0 290 L80 215 L150 280 L230 205 L300 260 V400 H0Z' fill='%23227552'/%3E%3Cpath d='M0 350 L100 290 L190 345 L300 300 V400 H0Z' fill='%230f3d2b'/%3E%3C/svg%3E" alt=""><figcaption><b>Fern</b><span>High ridges</span></figcaption></figure>
  <figure data-color="#ff6b8b"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='300' height='400' fill='%23ffd6c2'/%3E%3Ccircle cx='70' cy='90' r='110' fill='%23ff9f8a'/%3E%3Ccircle cx='250' cy='300' r='130' fill='%23ff6b8b' opacity='.85'/%3E%3Ccircle cx='190' cy='150' r='60' fill='%23ffe9a8'/%3E%3Ccircle cx='90' cy='320' r='50' fill='%23f6a04d' opacity='.9'/%3E%3C/svg%3E" alt=""><figcaption><b>Coral</b><span>Soft shapes</span></figcaption></figure>
  <figure data-color="#8a7dff"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4b5fd'/%3E%3Cstop offset='1' stop-color='%234c1d95'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='220' cy='110' r='90' fill='%238a7dff' opacity='.8'/%3E%3Ccircle cx='80' cy='280' r='110' fill='%236d28d9' opacity='.7'/%3E%3Ccircle cx='170' cy='250' r='40' fill='%23f5d0fe'/%3E%3C/svg%3E" alt=""><figcaption><b>Iris</b><span>Deep color</span></figcaption></figure>
  <figure data-color="#f5b13d"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd9a0'/%3E%3Cstop offset='1' stop-color='%23f6a04d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='80' cy='120' r='30' fill='%23fff4dc'/%3E%3Cpath d='M0 250 C80 200 150 300 300 230 V400 H0Z' fill='%23e07b39'/%3E%3Cpath d='M0 310 C110 260 180 340 300 300 V400 H0Z' fill='%23b9541f'/%3E%3Cpath d='M0 360 C90 330 200 380 300 350 V400 H0Z' fill='%237a3212'/%3E%3C/svg%3E" alt=""><figcaption><b>Dune</b><span>Warm sand</span></figcaption></figure>
</div>

Attribute	Default	What it does
`data-motion-radius`	`260`	the lens radius in pixels
`data-motion-dim`	`0.22`	how much darker the gray part is, 0 to 1

Crosshair

2.0 KB gzip

Hairlines follow the pointer with its position and lock onto links and buttons to measure them.

Move the pointer around. Over a link or a button the lines lock on and measure it.

A link

<div class="m-crosshair" data-motion="crosshair">
  <p>Move the pointer around. Over a link or a button the lines lock on and measure it.</p>
  <div><a href="#crosshair">A link</a> <button type="button">A button</button> <button type="button" class="m-crosshair-big">A bigger one</button></div>
</div>

Attribute	Default	What it does
`data-motion-pad`	`6`	the frame's distance from a locked element, in pixels

Cube field

2.5 KB gzip

Outlined 3D cubes turn to face the pointer, spin when swept and ripple on click.

<div class="m-cube-field" data-motion="cube-field"></div>

Attribute	Default	What it does
`data-motion-size`	`56`	grid cell in pixels (each cube is a little over half of it)
`data-motion-active`	`#f6a04d`	cubes near the pointer and in a ripple
`data-motion-idle`	`true`	a slow wave while no pointer is near

Dodge

1.3 KB gzip

Children slip away from the pointer, then glide home when it rests.

Catchmeifyoucan

<div class="m-dodge" data-motion="dodge"><span>Catch</span><span>me</span><span>if</span><span>you</span><span>can</span></div>

Attribute	Default	What it does
`data-motion-radius`	`90`	how close, in pixels beyond a child's own size, the pointer may come
`data-motion-strength`	`1`	how far a child slips (1 keeps it just out of reach)
`data-motion-rest`	`900`	milliseconds of a still pointer before the children glide home

Edge glow

1.8 KB gzip

A gradient border glows on the side nearest the pointer, brightest at the edge.

Glow along the edgeBring the pointer close to the border: the colored light follows its direction and grows brighter at the edge.

<div class="m-edge-glow" data-motion="edge-glow"><svg viewBox="0 0 24 24" width="28" height="28" aria-hidden="true"><path d="M12 2l2.1 6.4L20.5 10l-6.4 2.1L12 18.5l-2.1-6.4L3.5 10l6.4-1.6z" fill="currentColor"/><path d="M19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9z" fill="currentColor"/></svg><b>Glow along the edge</b><span>Bring the pointer close to the border: the colored light follows its direction and grows brighter at the edge.</span></div>

Attribute	Default	What it does
`data-motion-colors`	`#f6a04d,#ff6b8b,#8a7dff`	up to three hex colors along the lit arc
`data-motion-width`	`2`	the ring's width in pixels
`data-motion-glow`	`16`	the blur of the glow in pixels
`data-motion-reach`	`90`	how far outside the element, in pixels, the pointer still lights it
`data-motion-spread`	`80`	half the lit arc, in degrees

Electric edge

2.6 KB gzip

Crackling strands of current wrap an element and surge near the pointer.

Electric edgeBring the pointer close

<div class="m-electric-edge" data-motion="electric-edge"><b>Electric edge</b><span>Bring the pointer close</span></div>

Attribute	Default	What it does
`data-motion-color`	`#5cc8ff`	the current's color (deepened on light pages)
`data-motion-amount`	`1`	how wild the strands are
`data-motion-strands`	`3`	how many strands
`data-motion-sparks`	`true`	sparks where the pointer is near

Fiber tunnel

1.2 KB gzip

Comets of light race down a swirling tunnel of fibers that the pointer steers.

<axi0-fiber-tunnel cover></axi0-fiber-tunnel>

Attribute	Default	What it does
`colors`	`#5cc8ff,#8a7dff`	the fibers' two colors
`fibers`	`40`	how many fibers run round the tunnel
`twist`	`1.1`	how much the tunnel swirls with depth
`speed`	`1`	how fast the comets race
`cover`	`false`	fill the nearest positioned parent, behind its content

Flip card

1.9 KB gzip

A two-faced card turns over on a click, drag or flick and settles on a spring.

TideClick, drag or flick me

The other side

Two faces, one card. It turns on a spring, and screen readers hear only the face you see.

<div class="m-flip-card" data-motion="flip-card">
  <div><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%239be7ff'/%3E%3Cstop offset='.5' stop-color='%233b82f6'/%3E%3Cstop offset='1' stop-color='%23172554'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='220' cy='90' r='26' fill='%23f0fbff'/%3E%3Cpath d='M0 220 Q40 205 75 220 T150 220 T225 220 T300 220 V400 H0Z' fill='%232563eb' opacity='.7'/%3E%3Cpath d='M0 270 Q40 252 80 270 T160 270 T240 270 T320 270 V400 H0Z' fill='%231d4ed8' opacity='.8'/%3E%3Cpath d='M0 330 Q50 310 100 330 T200 330 T300 330 V400 H0Z' fill='%230f1f5c'/%3E%3C/svg%3E" alt=""><b>Tide</b><span>Click, drag or flick me</span></div>
  <div class="m-flip-card-b"><b>The other side</b><p>Two faces, one card. It turns on a spring, and screen readers hear only the face you see.</p></div>
</div>

Attribute	Default	What it does
`data-motion-axis`	`y`	`y` turns sideways, `x` turns up and over
`data-motion-stiffness`	`180`	spring stiffness
`data-motion-damping`	`17`	spring damping (lower bounces more)
`data-motion-perspective`	`1100`	perspective distance in pixels

Foil card

1.9 KB gzip

A collectible card tilts toward the pointer while its foil and glitter catch the light.

Night owlNo. 042

Holo foil. Tilt the card and the light runs across it.

<article class="m-foil-card" data-motion="foil-card">
  <header><b>Night owl</b><span>No. 042</span></header>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23070b1f'/%3E%3Cstop offset='.6' stop-color='%2325195c'/%3E%3Cstop offset='1' stop-color='%233d2a7a'/%3E%3C/linearGradient%3E%3CradialGradient id='b' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%235effc4' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%235effc4' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Cellipse cx='150' cy='200' rx='190' ry='60' fill='url%28%23b%29'/%3E%3Ccircle cx='220' cy='80' r='22' fill='%23fdf6d8'/%3E%3Ccircle cx='60' cy='60' r='1.6' fill='%23fff'/%3E%3Ccircle cx='110' cy='120' r='1.2' fill='%23fff'/%3E%3Ccircle cx='260' cy='170' r='1.4' fill='%23fff'/%3E%3Ccircle cx='30' cy='160' r='1' fill='%23fff'/%3E%3Cpath d='M0 330 Q150 280 300 330 V400 H0Z' fill='%230b0a1f'/%3E%3C/svg%3E" alt="">
  <p>Holo foil. Tilt the card and the light runs across it.</p>
  <footer><span>★★★</span><span>Rare</span></footer>
</article>

Attribute	Default	What it does
`data-motion-max`	`14`	the largest tilt in degrees
`data-motion-scale`	`1.04`	how much the card grows while held
`data-motion-foil`	`0.7`	foil strength, 0 to 1
`data-motion-glitter`	`0.8`	glitter strength, 0 to 1

Glare sweep

1.3 KB gzip

A glossy streak of light sweeps across in the direction the pointer moves.

<div class="m-glare-sweep" data-motion="glare-sweep"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233b2a6b'/%3E%3Cstop offset='.55' stop-color='%23ff6b8b'/%3E%3Cstop offset='1' stop-color='%23ffb36b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='190' cy='238' r='44' fill='%23ffe2b0'/%3E%3Cpath d='M0 290 Q70 240 140 285 T300 270 V400 H0Z' fill='%238a3b6e'/%3E%3Cpath d='M0 330 Q90 290 170 330 T300 320 V400 H0Z' fill='%234a2152'/%3E%3Cpath d='M0 365 Q120 340 300 372 V400 H0Z' fill='%2324122e'/%3E%3C/svg%3E" alt="Evening hills under a low sun"></div>

Attribute	Default	What it does
`data-motion-color`	`#ffffff`	the streak's color
`data-motion-opacity`	`0.6`	how strong the streak is, 0 to 1
`data-motion-width`	`22`	the streak's width, in percent of the element's diagonal
`data-motion-duration`	`850`	milliseconds per sweep
`data-motion-back`	`true`	sweep again, outward, when the pointer leaves

Glow trail

2.2 KB gzip

Light pours from the pointer, drifts up and cools as it fades.

Move the pointer, or tap

<div class="m-glow-trail" data-motion="glow-trail"><p>Move the pointer, or tap</p></div>

Attribute	Default	What it does
`data-motion-colors`	`#fff4dc,#f6a04d,#ff6b8b,#8a7dff`	the cooling ramp, hot to cold
`data-motion-size`	`26`	the glow's radius in pixels
`data-motion-life`	`1200`	milliseconds a glow lives
`data-motion-rate`	`1`	how much light a move pours
`data-motion-drift`	`1`	how fast it rises (0 = floats in place)

Grain gradient

1.3 KB gzip

Flowing grainy gradients that the pointer stirs like paint.

<axi0-grain-gradient cover></axi0-grain-gradient>

Attribute	Default	What it does
`colors`	`#ff9a5a,#ff5f8f,#7c6cff,#1c1640`	four colors that flow into each other
`grain`	`0.09`	how strong the grain is (0 = smooth)
`speed`	`1`	how fast the colors flow
`stir`	`1`	how much the pointer swirls the colors
`cover`	`false`	fill the nearest positioned parent, behind its content

Halftone lens

2.1 KB gzip

A halftone print of a picture whose dots swell into the real photo under the pointer.

<figure class="m-halftone-lens" data-motion="halftone-lens"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233b2a6b'/%3E%3Cstop offset='.55' stop-color='%23ff6b8b'/%3E%3Cstop offset='1' stop-color='%23ffb36b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='190' cy='238' r='44' fill='%23ffe2b0'/%3E%3Cpath d='M0 290 Q70 240 140 285 T300 270 V400 H0Z' fill='%238a3b6e'/%3E%3Cpath d='M0 330 Q90 290 170 330 T300 320 V400 H0Z' fill='%234a2152'/%3E%3Cpath d='M0 365 Q120 340 300 372 V400 H0Z' fill='%2324122e'/%3E%3C/svg%3E" alt="An evening sky over layered hills"></figure>

Attribute	Default	What it does
`data-motion-cell`	`7`	the dot grid in pixels
`data-motion-radius`	`130`	the lens radius in pixels
`data-motion-color`	`true`	dots in the picture's colors; `false` for one ink

Image trail

1.5 KB gzip

Pictures appear along the pointer's path and fade behind it, in four styles.

Move the pointer across

<div class="m-image-trail" data-motion="image-trail">
  <p>Move the pointer across</p>
  <img hidden src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233b2a6b'/%3E%3Cstop offset='.55' stop-color='%23ff6b8b'/%3E%3Cstop offset='1' stop-color='%23ffb36b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='190' cy='238' r='44' fill='%23ffe2b0'/%3E%3Cpath d='M0 290 Q70 240 140 285 T300 270 V400 H0Z' fill='%238a3b6e'/%3E%3Cpath d='M0 330 Q90 290 170 330 T300 320 V400 H0Z' fill='%234a2152'/%3E%3Cpath d='M0 365 Q120 340 300 372 V400 H0Z' fill='%2324122e'/%3E%3C/svg%3E" alt=""><img hidden src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%239be7ff'/%3E%3Cstop offset='.5' stop-color='%233b82f6'/%3E%3Cstop offset='1' stop-color='%23172554'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='220' cy='90' r='26' fill='%23f0fbff'/%3E%3Cpath d='M0 220 Q40 205 75 220 T150 220 T225 220 T300 220 V400 H0Z' fill='%232563eb' opacity='.7'/%3E%3Cpath d='M0 270 Q40 252 80 270 T160 270 T240 270 T320 270 V400 H0Z' fill='%231d4ed8' opacity='.8'/%3E%3Cpath d='M0 330 Q50 310 100 330 T200 330 T300 330 V400 H0Z' fill='%230f1f5c'/%3E%3C/svg%3E" alt=""><img hidden src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='300' height='400' fill='%23d2f7ec'/%3E%3Crect x='-40' y='40' width='220' height='220' rx='110' fill='%236ee7c8'/%3E%3Crect x='150' y='190' width='200' height='240' rx='100' fill='%2314b8a6' opacity='.85'/%3E%3Ccircle cx='210' cy='110' r='44' fill='%23fef3c7'/%3E%3Ccircle cx='70' cy='330' r='36' fill='%230f766e'/%3E%3C/svg%3E" alt="">
  <img hidden src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd9a0'/%3E%3Cstop offset='1' stop-color='%23f6a04d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='80' cy='120' r='30' fill='%23fff4dc'/%3E%3Cpath d='M0 250 C80 200 150 300 300 230 V400 H0Z' fill='%23e07b39'/%3E%3Cpath d='M0 310 C110 260 180 340 300 300 V400 H0Z' fill='%23b9541f'/%3E%3Cpath d='M0 360 C90 330 200 380 300 350 V400 H0Z' fill='%237a3212'/%3E%3C/svg%3E" alt=""><img hidden src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4b5fd'/%3E%3Cstop offset='1' stop-color='%234c1d95'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='220' cy='110' r='90' fill='%238a7dff' opacity='.8'/%3E%3Ccircle cx='80' cy='280' r='110' fill='%236d28d9' opacity='.7'/%3E%3Ccircle cx='170' cy='250' r='40' fill='%23f5d0fe'/%3E%3C/svg%3E" alt=""><img hidden src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e6fbd6'/%3E%3Cstop offset='1' stop-color='%237dd3a8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Cpath d='M0 230 L60 160 L120 225 L190 140 L300 240 V400 H0Z' fill='%233f9f73'/%3E%3Cpath d='M0 290 L80 215 L150 280 L230 205 L300 260 V400 H0Z' fill='%23227552'/%3E%3Cpath d='M0 350 L100 290 L190 345 L300 300 V400 H0Z' fill='%230f3d2b'/%3E%3C/svg%3E" alt="">
</div>

Attribute	Default	What it does
`data-motion-variant`	`fade`	`fade`, `tilt`, `drift` or `zoom`
`data-motion-width`	`170`	picture width in pixels
`data-motion-spacing`	`70`	pixels of pointer travel between pictures
`data-motion-duration`	`1000`	milliseconds each picture lives

Jelly dots

2.4 KB gzip

A springy dot grid the pointer drags through like jelly, with click shockwaves.

Drag the pointer through the dots, or click

<div class="m-jelly-dots" data-motion="jelly-dots"><p>Drag the pointer through the dots, or click</p></div>

Attribute	Default	What it does
`data-motion-gap`	`26`	pixels between dots
`data-motion-size`	`2`	dot radius in pixels
`data-motion-active`	`#f6a04d`	the dots near the pointer and the moving ones
`data-motion-reach`	`120`	the pointer's reach in pixels
`data-motion-shock`	`true`	a click sends a shockwave

Light column

1.4 KB gzip

A swirling pillar of light ignites, leans toward the pointer and surges on a click.

<axi0-light-column cover></axi0-light-column>

Attribute	Default	What it does
`colors`	`#f6a04d,#8a7dff`	the color at the foot and at the top
`width`	`0.13`	the pillar's width, as a share of the box height
`speed`	`1`	how fast it swirls
`cover`	`false`	fill the nearest positioned parent, behind its content

Light rays

1.6 KB gzip

Volumetric rays pour from an edge; the pointer steers the beam and casts a shadow.

<axi0-light-rays cover></axi0-light-rays>

Attribute	Default	What it does
`color`	auto	the light's color (warm white, orange on light pages)
`origin`	`top`	the edge the light comes from
`spread`	`0.85`	how wide the beam opens, in radians
`speed`	`1`	how fast the rays shimmer
`cover`	`false`	fill the nearest positioned parent, behind its content

Light streaks

1.4 KB gzip

Streaks of light fall down a curved tunnel, bend around the pointer and warp while held.

<axi0-light-streaks cover></axi0-light-streaks>

Attribute	Default	What it does
`colors`	`#f6a04d,#ff6b8b`	the streaks' two colors
`columns`	`70`	how many lanes the streaks fall in
`speed`	`1`	how fast they fall
`cover`	`false`	fill the nearest positioned parent, behind its content

Lightning

1.7 KB gzip

A crackling, branching bolt bends toward the pointer and strikes where you click.

<axi0-lightning cover></axi0-lightning>

Attribute	Default	What it does
`color`	auto	the bolt's color (blue white, deep blue on light pages)
`rate`	`12`	how many times a second the bolt changes shape
`speed`	`1`	how fast it flickers
`cover`	`false`	fill the nearest positioned parent, behind its content

Melt card

1.4 KB gzip

A picture tears and melts as the pointer moves, then pulls itself back together.

<figure class="m-melt-card" data-motion="melt-card"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233b2a6b'/%3E%3Cstop offset='.55' stop-color='%23ff6b8b'/%3E%3Cstop offset='1' stop-color='%23ffb36b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='190' cy='238' r='44' fill='%23ffe2b0'/%3E%3Cpath d='M0 290 Q70 240 140 285 T300 270 V400 H0Z' fill='%238a3b6e'/%3E%3Cpath d='M0 330 Q90 290 170 330 T300 320 V400 H0Z' fill='%234a2152'/%3E%3Cpath d='M0 365 Q120 340 300 372 V400 H0Z' fill='%2324122e'/%3E%3C/svg%3E" alt="An evening sky over layered hills"><figcaption><b>Melt card</b><span>Sweep the pointer across the picture</span></figcaption></figure>

Attribute	Default	What it does
`data-motion-strength`	`1`	how much each move melts it
`data-motion-max`	`120`	the largest tear in pixels
`data-motion-recover`	`0.97`	how fast it pulls together (closer to 1 is slower)

Proximity list

1.2 KB gzip

List items lean out and light up as the pointer passes near them.

<nav class="m-proximity-list" aria-label="Sections"><ul data-motion="proximity-list">
  <li><a href="#proximity-list">Overview</a></li>
  <li><a href="#proximity-list" aria-current="page">Getting started</a></li>
  <li><a href="#proximity-list">Pointer effects</a></li>
  <li><a href="#proximity-list">Backgrounds</a></li>
  <li><a href="#proximity-list">Text</a></li>
  <li><a href="#proximity-list">Sounds</a></li>
  <li><a href="#proximity-list">Accessibility</a></li>
</ul></nav>

Attribute	Default	What it does
`data-motion-reach`	`80`	how far, in pixels above and below, the pointer reaches
`data-motion-shift`	`16`	how far the nearest item leans out, in pixels
`data-motion-color`	`#f6a04d`	the tick and highlight color

Veil

1.2 KB gzip

A silky veil of light drifts through the dark and bends around the pointer.

<axi0-veil cover></axi0-veil>

Attribute	Default	What it does
`colors`	`#6d5dfc,#2bb5ff,#ff7ad9`	left, right and the folds
`speed`	`1`	how fast it drifts
`bend`	`1`	how far it bends around the pointer
`cover`	`false`	fill the nearest positioned parent, behind its content

Components

Carousel

3.0 KB gzip

Slides that share one frame and change by slide, fade, scale, flip, stack or depth, with swipes, dots and an autoplay timer that waits while you read.

Plan the week

Lay every task on one shared board and see at a glance who is on what.

Sketch it out

Draw flows and screens right beside the notes that explain them.

Build in the open

Every change lands with its review, its tests and a note on why.

Ship with care

Release when it is ready, roll back in one step if it is not.

Watch it grow

Plain numbers on what people use, with nothing tracked behind their backs.

<div data-motion="carousel" aria-label="Product tour">
  <article><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="17" rx="3"/><path d="M8 2v4M16 2v4M3 10h18"/></svg><h3>Plan the week</h3><p>Lay every task on one shared board and see at a glance who is on what.</p></article>
  <article><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20l4-1 11-11-3-3L5 16z"/><path d="M14 6l3 3"/></svg><h3>Sketch it out</h3><p>Draw flows and screens right beside the notes that explain them.</p></article>
  <article><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5M13 4l-2 16"/></svg><h3>Build in the open</h3><p>Every change lands with its review, its tests and a note on why.</p></article>
  <article><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 15c-1.5 1.5-2 5-2 5s3.5-.5 5-2M9 15l-3-3c1-4 5-9 13-9 0 8-5 12-9 13z"/><circle cx="15" cy="9" r="1.6"/></svg><h3>Ship with care</h3><p>Release when it is ready, roll back in one step if it is not.</p></article>
  <article><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 20h18M6 16l4-5 3 3 5-7"/><path d="M15 7h3v3"/></svg><h3>Watch it grow</h3><p>Plain numbers on what people use, with nothing tracked behind their backs.</p></article>
</div>

Attribute	Default	What it does
`data-motion-transition`	`slide`	how one slide gives way to the next
`data-motion-autoplay`	`5000`	time on each slide; 0 turns the timer off
`data-motion-loop`	`true`	go round from the last slide to the first
`data-motion-label`	`Carousel`	the name read out when the element has no aria-label

Spotlight card

0.6 KB gzip

A soft light follows the pointer across a card.

Spotlight

Move the pointer over this card.

<div class="demo-card" data-motion="spotlight">
  <h4>Spotlight</h4>
  <p>Move the pointer over this card.</p>
</div>

Attribute	Default	What it does
`data-motion-color`	auto	any CSS color, best with some transparency; auto is a soft orange glow
`data-motion-size`	`280`	the light's radius in pixels

Dock

2.5 KB gzip

A row of icons that swell toward the pointer and part to make room, with labels that rise above them, launch bounces and badges.

<div data-motion="dock" aria-label="Apps">
  <button type="button" aria-label="Home" aria-pressed="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z"/></svg></button>
  <button type="button" aria-label="Search" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></svg></button>
  <button type="button" aria-label="Mail" aria-pressed="false" data-badge="3"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M4 7l8 6 8-6"/></svg></button>
  <button type="button" aria-label="Music" aria-pressed="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18V5l11-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="17" cy="16" r="3"/></svg></button>
  <button type="button" aria-label="Photos" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="3"/><circle cx="9" cy="10" r="1.8"/><path d="M21 16l-5-5-9 9"/></svg></button>
  <button type="button" aria-label="Settings" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M4.9 4.9L7 7M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1L7 17M17 7l2.1-2.1"/></svg></button>
</div>

Attribute	Default	What it does
`data-motion-magnify`	`1.7`	how big the icon under the pointer grows
`data-motion-reach`	`150`	how far from the pointer icons still grow
`data-motion-size`	`54`	the icons' resting size
`data-motion-launch`	`true`	pressed toggle buttons bounce and keep a dot below them
`data-motion-label`	`Dock`	the toolbar's name when the element has no aria-label

Tilt card

1.0 KB gzip

A card leans toward the pointer in 3D, with a soft glare.

Tilt

The card leans toward the pointer.

<div class="demo-card" data-motion="tilt">
  <h4>Tilt</h4>
  <p>The card leans toward the pointer.</p>
</div>

Attribute	Default	What it does
`data-motion-max`	`8`	the largest lean, in degrees
`data-motion-scale`	`1.02`	how much it grows while leaning
`data-motion-perspective`	`900`	perspective distance in pixels
`data-motion-glare`	`true`	a soft glare that follows the lean

Marquee

0.8 KB gzip

A row of items scrolls sideways without end and speeds up while the page scrolls.

Text · Cards · Scroll · Backgrounds · WebAssembly ·

<div class="demo-marquee" data-motion="marquee" data-speed="50"><span>Text</span> · <span>Cards</span> · <span>Scroll</span> · <span>Backgrounds</span> · <span>WebAssembly</span> ·</div>

Attribute	Default	What it does
`data-motion-speed`	`60`	pixels per second
`data-motion-direction`	`left`	`left` or `right`
`data-motion-velocity`	`1`	how much page scrolling speeds it up (0 = none)
`data-motion-pause`	`true`	stops while the pointer is over it

Stepper

2.8 KB gzip

A flow in steps: numbered marks joined by lines that fill, a ring that glides to the current step and panels that slide in from the side they come from.

Welcome aboard

Three short steps and your space is ready. You can change every answer later.

What should we call you?

Your name

Pick a home

Choose where new notes land first. Everything stays on this device until you share it.

All set

Press Complete and we will open your space with everything in place.

<div data-motion="stepper" aria-label="Create your space">
  <section><h3>Welcome aboard</h3><p>Three short steps and your space is ready. You can change every answer later.</p></section>
  <section><h3>What should we call you?</h3><label>Your name <input type="text" name="name" autocomplete="name" placeholder="Sam Rivera"></label></section>
  <section><h3>Pick a home</h3><p>Choose where new notes land first. Everything stays on this device until you share it.</p></section>
  <section><h3>All set</h3><p>Press Complete and we will open your space with everything in place.</p></section>
</div>

Attribute	Default	What it does
`data-motion-layout`	`horizontal`	marks in a row above the panel, or in a column beside it
`data-motion-back`	`Back`	the Back button's text
`data-motion-next`	`Continue`	the Continue button's text
`data-motion-finish`	`Complete`	the last step's button text
`data-motion-label`	`Progress`	the name of the list of steps

Toast

3.0 KB gzip

Short messages that stack in a corner, burn a thin fuse for the time they have left, spread out under the pointer and swipe away.

<div class="demo-row">
  <button type="button" class="demo-btn" data-motion="toast" data-motion-inline="true" data-motion-show="true" data-motion-tone="success" data-motion-title="Draft saved" data-motion-text="A copy stays on this device too.">Save draft</button>
  <button type="button" class="demo-btn" data-motion="toast" data-motion-inline="true" data-motion-text="Invite sent to Sam" data-motion-action="Undo">Send invite</button>
  <button type="button" class="demo-btn" data-motion="toast" data-motion-inline="true" data-motion-tone="error" data-motion-title="Upload failed" data-motion-text="The file is over 25 MB.">Upload</button>
</div>

Attribute	Default	What it does
`data-motion-text`	`Saved`	the message
`data-motion-title`	auto	a bold first line (optional)
`data-motion-tone`	`info`	the icon and color; error toasts are read at once
`data-motion-action`	auto	a button inside the toast, such as Undo (it fires a toast-action event on the trigger)
`data-motion-duration`	`6000`	how long it stays; 0 keeps it until it is closed
`data-motion-inline`	`false`	stack the toasts at the bottom of the trigger's parent instead of the page
`data-motion-show`	`false`	raise one toast as soon as the trigger comes into view

Rise nav

2.2 KB gzip

Links in a pill bar: under the pointer a fill rises through a link while its label rolls over, a dot glides under the current page, and narrow screens get a menu button.

<nav data-motion="rise-nav" aria-label="Main">
  <a href="#" data-logo aria-label="Home page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="1.6" fill="currentColor"/></svg></a>
  <a href="#" aria-current="page">Home</a>
  <a href="#">Work</a>
  <a href="#">Studio</a>
  <a href="#">Journal</a>
  <a href="#">Contact</a>
</nav>

Attribute	Default	What it does
`data-motion-fill`	auto	the color that rises through a link (empty: the accent)
`data-motion-collapse`	`560`	below this page width the links fold into a menu button
`data-motion-menu`	`Menu`	the menu button's name

Blob nav

1.9 KB gzip

A nav bar whose active pill breaks into drops of goo that flow over to the link you pick.

<nav data-motion="blob-nav" aria-label="Sections">
  <a href="#" aria-current="page">Home</a>
  <a href="#">About</a>
  <a href="#">Work</a>
  <a href="#">Notes</a>
  <a href="#">Contact</a>
</nav>

Attribute	Default	What it does
`data-motion-particles`	`12`	how many drops burst from the link you pick
`data-motion-spread`	`70`	how far the drops fly
`data-motion-duration`	`700`	how long the burst lasts

Pop select

2.8 KB gzip

A select chip whose list pops open from its corner while the highlight glides from row to row; it drives the real select underneath.

Sort by

<label for="sort-by">Sort by</label>
<select id="sort-by" data-motion="pop-select">
  <option>Newest first</option>
  <option>Oldest first</option>
  <option>Most liked</option>
  <option>Most discussed</option>
  <option>Title, A to Z</option>
</select>

Attribute	Default	What it does
`data-motion-placement`	`auto`	where the list opens (auto: below, or above when there is more room there)

Stretch switch

1.6 KB gzip

A switch whose thumb stretches with its speed and squashes against the end it hits; flick it, drag it or press Space.

Wi-Fi

Bluetooth

Do not disturb

<div class="demo-card" role="group" aria-label="Quick settings">
  <p><label>Wi-Fi <input type="checkbox" role="switch" data-motion="stretch-switch" checked></label></p>
  <p><label>Bluetooth <input type="checkbox" role="switch" data-motion="stretch-switch"></label></p>
  <p><label>Do not disturb <input type="checkbox" role="switch" data-motion="stretch-switch" checked></label></p>
</div>

Attribute	Default	What it does
`data-motion-stretch`	`1`	how much the thumb stretches and squashes (0: none)
`data-motion-color`	auto	the track's color when on (empty: the accent)

1.8 KB gzip

A round menu button that bursts big pill links over its box, each popping in a beat after the last with its own tilt and hover color.

<nav data-motion="burst-menu" aria-label="Main">
  <a href="#" data-logo><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" aria-hidden="true"><circle cx="12" cy="12" r="7"/></svg>Studio</a>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Projects</a>
  <a href="#">Journal</a>
  <a href="#">Contact</a>
</nav>

Attribute	Default	What it does
`data-motion-colors`	`#f6a04d,#4ea1ff,#3ccf8e,#c084fc,#ff6b8b`	hover colors, comma separated, one per link in turn
`data-motion-menu`	`Menu`	the menu button's name

2.1 KB gzip

A menu button that sweeps colored layers and then a panel in from the side, its numbered links rising one after another.

<nav data-motion="cascade-menu" aria-label="Main">
  <a href="#" data-logo><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" aria-hidden="true"><circle cx="12" cy="12" r="7"/></svg>Studio</a>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
  <p data-extra>hello@studio.example · Mon to Fri, 9 to 6</p>
</nav>

Attribute	Default	What it does
`data-motion-side`	`right`	the side the panel slides in from
`data-motion-colors`	`#f6a04d,#ffd6a8`	the layers that sweep in before the panel, comma separated
`data-motion-menu`	`Menu`	the button's label while closed
`data-motion-close`	`Close`	the button's label while open

Card drawer

1.9 KB gzip

A floating nav bar that springs open into a row of cards, each a group of links, revealed by a clip that only repaints.

<nav data-motion="card-drawer" aria-label="Main">
  <a href="#" data-logo><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" aria-hidden="true"><circle cx="12" cy="12" r="7"/></svg>Studio</a>
  <a href="#" data-cta>Get started</a>
  <section><h3>About</h3><a href="#">Company</a><a href="#">Careers</a></section>
  <section><h3>Projects</h3><a href="#">Featured</a><a href="#">Case studies</a></section>
  <section><h3>Contact</h3><a href="#">Email</a><a href="#">Office hours</a></section>
</nav>

Attribute	Default	What it does
`data-motion-menu`	`Menu`	the button's label
`data-motion-tint`	`14`	how much accent each card takes, rising card by card

1.3 KB gzip

Big menu rows: under the pointer a band slides in from the edge it entered by, carrying a running marquee of the item's name and picture.

<nav data-motion="marquee-menu" aria-label="Places">
  <a href="#" data-image="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='110' viewBox='0 0 240 110'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%231d1033'/%3E%3Cstop offset='1' stop-color='%23f08a4b'/%3E%3C/linearGradient%3E%3Crect width='240' height='110' fill='url(%23s)'/%3E%3Ccircle cx='82' cy='30' r='9' fill='%23ffd27a'/%3E%3Cpath d='M0 58 Q30 67 60 58 T120 61 T180 56 T240 58 V110 H0Z' fill='%237a3b52'/%3E%3Cpath d='M0 72 Q30 83 60 63 T120 72 T180 65 T240 72 V110 H0Z' fill='%234a2440'/%3E%3Cpath d='M0 88 Q30 79 60 84 T120 90 T180 82 T240 88 V110 H0Z' fill='%2324132b'/%3E%3C/svg%3E">Dunes</a>
  <a href="#" data-image="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='110' viewBox='0 0 240 110'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%230b2340'/%3E%3Cstop offset='1' stop-color='%235fa8d3'/%3E%3C/linearGradient%3E%3Crect width='240' height='110' fill='url(%23s)'/%3E%3Ccircle cx='130' cy='29' r='10' fill='%23f4f1de'/%3E%3Cpath d='M0 56 Q30 46 60 49 T120 52 T180 50 T240 56 V110 H0Z' fill='%232f5d7c'/%3E%3Cpath d='M0 73 Q30 66 60 66 T120 70 T180 67 T240 73 V110 H0Z' fill='%231d3f5a'/%3E%3Cpath d='M0 91 Q30 98 60 86 T120 90 T180 86 T240 91 V110 H0Z' fill='%230f2638'/%3E%3C/svg%3E">Harbor</a>
  <a href="#" data-image="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='110' viewBox='0 0 240 110'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%230f2b1d'/%3E%3Cstop offset='1' stop-color='%237fb685'/%3E%3C/linearGradient%3E%3Crect width='240' height='110' fill='url(%23s)'/%3E%3Ccircle cx='150' cy='35' r='8' fill='%23f2e8cf'/%3E%3Cpath d='M0 60 Q30 53 60 59 T120 62 T180 59 T240 60 V110 H0Z' fill='%233a6b47'/%3E%3Cpath d='M0 75 Q30 65 60 71 T120 78 T180 66 T240 75 V110 H0Z' fill='%2324492f'/%3E%3Cpath d='M0 88 Q30 80 60 82 T120 88 T180 86 T240 88 V110 H0Z' fill='%23132a1b'/%3E%3C/svg%3E">Forest</a>
  <a href="#" data-image="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='110' viewBox='0 0 240 110'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%2310141f'/%3E%3Cstop offset='1' stop-color='%233c4f76'/%3E%3C/linearGradient%3E%3Crect width='240' height='110' fill='url(%23s)'/%3E%3Ccircle cx='87' cy='30' r='8' fill='%23e6e9f2'/%3E%3Cpath d='M0 56 Q30 62 60 55 T120 54 T180 55 T240 56 V110 H0Z' fill='%232a3550'/%3E%3Cpath d='M0 75 Q30 69 60 74 T120 77 T180 71 T240 75 V110 H0Z' fill='%231b2338'/%3E%3Cpath d='M0 89 Q30 78 60 88 T120 88 T180 82 T240 89 V110 H0Z' fill='%230d111c'/%3E%3C/svg%3E">Peaks</a>
</nav>

Attribute	Default	What it does
`data-motion-speed`	`14`	seconds for the marquee to run once round
`data-motion-repeat`	`4`	how many name and picture pairs make one run

Masonry

1.6 KB gzip

Pictures in columns of their own heights that rise into place the first time they come into view, glide to new places when the columns change and open full size.

A low sun over three rows of dunes at dusk — Dunes at dusk

A pale moon over a calm blue harbor — Harbor night

Red canyon walls under a peach morning sky — Canyon morning

Green hills rolling away under a soft sun — Green hills

Purple ridges under a pink sunset — Violet hour

Orange desert ridges at noon — High desert

Dark peaks under a moonlit sky — Moonlit peaks

Icy blue hills by a frozen lake — Frozen lake

Dusk falling over red dunes — Last light

<div data-motion="masonry" aria-label="Field notes">
  <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='520' viewBox='0 0 400 520'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%231d1033'/%3E%3Cstop offset='1' stop-color='%23f08a4b'/%3E%3C/linearGradient%3E%3Crect width='400' height='520' fill='url(%23s)'/%3E%3Ccircle cx='137' cy='146' r='35' fill='%23ffd27a'/%3E%3Cpath d='M0 275 Q50 317 100 275 T200 289 T300 264 T400 275 V520 H0Z' fill='%237a3b52'/%3E%3Cpath d='M0 344 Q50 395 100 300 T200 342 T300 310 T400 344 V520 H0Z' fill='%234a2440'/%3E%3Cpath d='M0 419 Q50 377 100 397 T200 430 T300 391 T400 419 V520 H0Z' fill='%2324132b'/%3E%3C/svg%3E" alt="A low sun over three rows of dunes at dusk" width="400" height="520"><figcaption>Dunes at dusk</figcaption></figure>
  <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%230b2340'/%3E%3Cstop offset='1' stop-color='%235fa8d3'/%3E%3C/linearGradient%3E%3Crect width='400' height='300' fill='url(%23s)'/%3E%3Ccircle cx='217' cy='79' r='29' fill='%23f4f1de'/%3E%3Cpath d='M0 153 Q50 125 100 135 T200 143 T300 138 T400 153 V300 H0Z' fill='%232f5d7c'/%3E%3Cpath d='M0 199 Q50 181 100 181 T200 191 T300 183 T400 199 V300 H0Z' fill='%231d3f5a'/%3E%3Cpath d='M0 249 Q50 269 100 235 T200 248 T300 234 T400 249 V300 H0Z' fill='%230f2638'/%3E%3C/svg%3E" alt="A pale moon over a calm blue harbor" width="400" height="300"><figcaption>Harbor night</figcaption></figure>
  <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='460' viewBox='0 0 400 460'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%23ffb48a'/%3E%3Cstop offset='1' stop-color='%23ffe3c4'/%3E%3C/linearGradient%3E%3Crect width='400' height='460' fill='url(%23s)'/%3E%3Ccircle cx='205' cy='147' r='47' fill='%23fff4e0'/%3E%3Cpath d='M0 236 Q50 196 100 209 T200 220 T300 235 T400 236 V460 H0Z' fill='%23e07a5f'/%3E%3Cpath d='M0 307 Q50 348 100 287 T200 300 T300 273 T400 307 V460 H0Z' fill='%23b85042'/%3E%3Cpath d='M0 389 Q50 357 100 387 T200 399 T300 361 T400 389 V460 H0Z' fill='%237a2e2e'/%3E%3C/svg%3E" alt="Red canyon walls under a peach morning sky" width="400" height="460"><figcaption>Canyon morning</figcaption></figure>
  <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='340' viewBox='0 0 400 340'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%230f2b1d'/%3E%3Cstop offset='1' stop-color='%237fb685'/%3E%3C/linearGradient%3E%3Crect width='400' height='340' fill='url(%23s)'/%3E%3Ccircle cx='250' cy='110' r='26' fill='%23f2e8cf'/%3E%3Cpath d='M0 186 Q50 166 100 185 T200 192 T300 183 T400 186 V340 H0Z' fill='%233a6b47'/%3E%3Cpath d='M0 233 Q50 203 100 220 T200 243 T300 204 T400 233 V340 H0Z' fill='%2324492f'/%3E%3Cpath d='M0 273 Q50 248 100 254 T200 272 T300 266 T400 273 V340 H0Z' fill='%23132a1b'/%3E%3C/svg%3E" alt="Green hills rolling away under a soft sun" width="400" height="340"><figcaption>Green hills</figcaption></figure>
  <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='560' viewBox='0 0 400 560'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%232b1055'/%3E%3Cstop offset='1' stop-color='%23d53a9d'/%3E%3C/linearGradient%3E%3Crect width='400' height='560' fill='url(%23s)'/%3E%3Ccircle cx='82' cy='121' r='35' fill='%23ffdd99'/%3E%3Cpath d='M0 299 Q50 331 100 291 T200 307 T300 294 T400 299 V560 H0Z' fill='%237e3aa1'/%3E%3Cpath d='M0 384 Q50 431 100 359 T200 382 T300 365 T400 384 V560 H0Z' fill='%234a2071'/%3E%3Cpath d='M0 475 Q50 506 100 447 T200 472 T300 469 T400 475 V560 H0Z' fill='%23200b3a'/%3E%3C/svg%3E" alt="Purple ridges under a pink sunset" width="400" height="560"><figcaption>Violet hour</figcaption></figure>
  <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%23f6a04d'/%3E%3Cstop offset='1' stop-color='%23ffd8a8'/%3E%3C/linearGradient%3E%3Crect width='400' height='300' fill='url(%23s)'/%3E%3Ccircle cx='233' cy='79' r='31' fill='%23fff7ea'/%3E%3Cpath d='M0 150 Q50 176 100 135 T200 142 T300 142 T400 150 V300 H0Z' fill='%23d9824a'/%3E%3Cpath d='M0 199 Q50 179 100 189 T200 208 T300 187 T400 199 V300 H0Z' fill='%23a65a2e'/%3E%3Cpath d='M0 243 Q50 219 100 239 T200 243 T300 243 T400 243 V300 H0Z' fill='%235c2f17'/%3E%3C/svg%3E" alt="Orange desert ridges at noon" width="400" height="300"><figcaption>High desert</figcaption></figure>
  <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='420' viewBox='0 0 400 420'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%2310141f'/%3E%3Cstop offset='1' stop-color='%233c4f76'/%3E%3C/linearGradient%3E%3Crect width='400' height='420' fill='url(%23s)'/%3E%3Ccircle cx='145' cy='114' r='29' fill='%23e6e9f2'/%3E%3Cpath d='M0 217 Q50 239 100 210 T200 208 T300 210 T400 217 V420 H0Z' fill='%232a3550'/%3E%3Cpath d='M0 288 Q50 266 100 285 T200 295 T300 272 T400 288 V420 H0Z' fill='%231b2338'/%3E%3Cpath d='M0 340 Q50 301 100 337 T200 336 T300 313 T400 340 V420 H0Z' fill='%230d111c'/%3E%3C/svg%3E" alt="Dark peaks under a moonlit sky" width="400" height="420"><figcaption>Moonlit peaks</figcaption></figure>
  <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='360' viewBox='0 0 400 360'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%23a1d6e2'/%3E%3Cstop offset='1' stop-color='%23f1f1f2'/%3E%3C/linearGradient%3E%3Crect width='400' height='360' fill='url(%23s)'/%3E%3Ccircle cx='314' cy='74' r='38' fill='%23ffffff'/%3E%3Cpath d='M0 188 Q50 223 100 156 T200 176 T300 153 T400 188 V360 H0Z' fill='%237fb3c8'/%3E%3Cpath d='M0 241 Q50 262 100 227 T200 231 T300 233 T400 241 V360 H0Z' fill='%234f8aa3'/%3E%3Cpath d='M0 288 Q50 307 100 283 T200 283 T300 273 T400 288 V360 H0Z' fill='%232c5d73'/%3E%3C/svg%3E" alt="Icy blue hills by a frozen lake" width="400" height="360"><figcaption>Frozen lake</figcaption></figure>
  <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='480' viewBox='0 0 400 480'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%231d1033'/%3E%3Cstop offset='1' stop-color='%23f08a4b'/%3E%3C/linearGradient%3E%3Crect width='400' height='480' fill='url(%23s)'/%3E%3Ccircle cx='133' cy='163' r='46' fill='%23ffd27a'/%3E%3Cpath d='M0 240 Q50 196 100 210 T200 218 T300 203 T400 240 V480 H0Z' fill='%237a3b52'/%3E%3Cpath d='M0 321 Q50 277 100 288 T200 330 T300 306 T400 321 V480 H0Z' fill='%234a2440'/%3E%3Cpath d='M0 400 Q50 352 100 357 T200 381 T300 369 T400 400 V480 H0Z' fill='%2324132b'/%3E%3C/svg%3E" alt="Dusk falling over red dunes" width="400" height="480"><figcaption>Last light</figcaption></figure>
</div>

Attribute	Default	What it does
`data-motion-columns`	`3`	the most columns it uses
`data-motion-width`	`150`	the narrowest a column may get before it drops one
`data-motion-gap`	`14`	space between pictures
`data-motion-stagger`	`55`	the beat between pictures as they rise in

Arc gallery

2.0 KB gzip

Picture cards on the rim of a wide wheel that you drag, flick, scroll sideways or step with the arrow keys; the front one opens full size.

<div data-motion="arc-gallery" aria-label="Places">
  <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='400' viewBox='0 0 300 400'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%231d1033'/%3E%3Cstop offset='1' stop-color='%23f08a4b'/%3E%3C/linearGradient%3E%3Crect width='300' height='400' fill='url(%23s)'/%3E%3Ccircle cx='102' cy='112' r='26' fill='%23ffd27a'/%3E%3Cpath d='M0 212 Q37 244 75 211 T150 223 T225 203 T300 212 V400 H0Z' fill='%237a3b52'/%3E%3Cpath d='M0 264 Q37 304 75 231 T150 263 T225 239 T300 264 V400 H0Z' fill='%234a2440'/%3E%3Cpath d='M0 323 Q37 290 75 305 T150 330 T225 301 T300 323 V400 H0Z' fill='%2324132b'/%3E%3C/svg%3E" alt="A low sun over three rows of dunes at dusk" width="300" height="400"><figcaption>Afterglow</figcaption></figure>
  <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='400' viewBox='0 0 300 400'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%230b2340'/%3E%3Cstop offset='1' stop-color='%235fa8d3'/%3E%3C/linearGradient%3E%3Crect width='300' height='400' fill='url(%23s)'/%3E%3Ccircle cx='162' cy='105' r='29' fill='%23f4f1de'/%3E%3Cpath d='M0 204 Q37 167 75 180 T150 191 T225 185 T300 204 V400 H0Z' fill='%232f5d7c'/%3E%3Cpath d='M0 266 Q37 241 75 241 T150 255 T225 245 T300 266 V400 H0Z' fill='%231d3f5a'/%3E%3Cpath d='M0 332 Q37 359 75 313 T150 330 T225 313 T300 332 V400 H0Z' fill='%230f2638'/%3E%3C/svg%3E" alt="A pale moon over a calm blue harbor" width="300" height="400"><figcaption>Harbor</figcaption></figure>
  <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='400' viewBox='0 0 300 400'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%230f2b1d'/%3E%3Cstop offset='1' stop-color='%237fb685'/%3E%3C/linearGradient%3E%3Crect width='300' height='400' fill='url(%23s)'/%3E%3Ccircle cx='188' cy='130' r='23' fill='%23f2e8cf'/%3E%3Cpath d='M0 219 Q37 196 75 217 T150 226 T225 216 T300 219 V400 H0Z' fill='%233a6b47'/%3E%3Cpath d='M0 274 Q37 239 75 258 T150 286 T225 240 T300 274 V400 H0Z' fill='%2324492f'/%3E%3Cpath d='M0 322 Q37 291 75 299 T150 320 T225 313 T300 322 V400 H0Z' fill='%23132a1b'/%3E%3C/svg%3E" alt="Green hills rolling away under a soft sun" width="300" height="400"><figcaption>Meadow</figcaption></figure>
  <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='400' viewBox='0 0 300 400'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%232b1055'/%3E%3Cstop offset='1' stop-color='%23d53a9d'/%3E%3C/linearGradient%3E%3Crect width='300' height='400' fill='url(%23s)'/%3E%3Ccircle cx='62' cy='86' r='26' fill='%23ffdd99'/%3E%3Cpath d='M0 213 Q37 236 75 208 T150 219 T225 210 T300 213 V400 H0Z' fill='%237e3aa1'/%3E%3Cpath d='M0 274 Q37 308 75 257 T150 273 T225 261 T300 274 V400 H0Z' fill='%234a2071'/%3E%3Cpath d='M0 339 Q37 361 75 319 T150 337 T225 335 T300 339 V400 H0Z' fill='%23200b3a'/%3E%3C/svg%3E" alt="Purple ridges under a pink sunset" width="300" height="400"><figcaption>Violet hour</figcaption></figure>
  <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='400' viewBox='0 0 300 400'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%23f6a04d'/%3E%3Cstop offset='1' stop-color='%23ffd8a8'/%3E%3C/linearGradient%3E%3Crect width='300' height='400' fill='url(%23s)'/%3E%3Ccircle cx='175' cy='105' r='31' fill='%23fff7ea'/%3E%3Cpath d='M0 201 Q37 235 75 180 T150 190 T225 189 T300 201 V400 H0Z' fill='%23d9824a'/%3E%3Cpath d='M0 265 Q37 238 75 252 T150 277 T225 249 T300 265 V400 H0Z' fill='%23a65a2e'/%3E%3Cpath d='M0 324 Q37 292 75 319 T150 325 T225 324 T300 324 V400 H0Z' fill='%235c2f17'/%3E%3C/svg%3E" alt="Orange desert ridges at noon" width="300" height="400"><figcaption>High desert</figcaption></figure>
  <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='400' viewBox='0 0 300 400'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%2310141f'/%3E%3Cstop offset='1' stop-color='%233c4f76'/%3E%3C/linearGradient%3E%3Crect width='300' height='400' fill='url(%23s)'/%3E%3Ccircle cx='108' cy='109' r='22' fill='%23e6e9f2'/%3E%3Cpath d='M0 206 Q37 228 75 200 T150 198 T225 200 T300 206 V400 H0Z' fill='%232a3550'/%3E%3Cpath d='M0 274 Q37 254 75 272 T150 280 T225 259 T300 274 V400 H0Z' fill='%231b2338'/%3E%3Cpath d='M0 324 Q37 287 75 321 T150 320 T225 298 T300 324 V400 H0Z' fill='%230d111c'/%3E%3C/svg%3E" alt="Dark peaks under a moonlit sky" width="300" height="400"><figcaption>Night peaks</figcaption></figure>
  <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='400' viewBox='0 0 300 400'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%23a1d6e2'/%3E%3Cstop offset='1' stop-color='%23f1f1f2'/%3E%3C/linearGradient%3E%3Crect width='300' height='400' fill='url(%23s)'/%3E%3Ccircle cx='236' cy='83' r='31' fill='%23ffffff'/%3E%3Cpath d='M0 209 Q37 248 75 173 T150 196 T225 171 T300 209 V400 H0Z' fill='%237fb3c8'/%3E%3Cpath d='M0 268 Q37 291 75 253 T150 257 T225 259 T300 268 V400 H0Z' fill='%234f8aa3'/%3E%3Cpath d='M0 320 Q37 341 75 315 T150 315 T225 303 T300 320 V400 H0Z' fill='%232c5d73'/%3E%3C/svg%3E" alt="Icy blue hills by a frozen lake" width="300" height="400"><figcaption>Frozen lake</figcaption></figure>
</div>

Attribute	Default	What it does
`data-motion-bend`	`3`	how strongly the row curves (0: a straight row)
`data-motion-gap`	`34`	space between cards
`data-motion-label`	`Gallery`	the name read out when the element has no aria-label

Card deck

2.4 KB gzip

A 3D stack of cards set up and back from one another; on a timer, a fling or Next the front card drops away and slides in at the back.

Blue hour

Violet sky

Desert noon

Moonrise

<div data-motion="card-deck" aria-label="This week">
  <article><h3>Blue hour</h3><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='230' viewBox='0 0 400 230'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%230b2340'/%3E%3Cstop offset='1' stop-color='%235fa8d3'/%3E%3C/linearGradient%3E%3Crect width='400' height='230' fill='url(%23s)'/%3E%3Ccircle cx='217' cy='60' r='22' fill='%23f4f1de'/%3E%3Cpath d='M0 117 Q50 96 100 103 T200 110 T300 106 T400 117 V230 H0Z' fill='%232f5d7c'/%3E%3Cpath d='M0 153 Q50 138 100 138 T200 146 T300 140 T400 153 V230 H0Z' fill='%231d3f5a'/%3E%3Cpath d='M0 190 Q50 206 100 180 T200 190 T300 180 T400 190 V230 H0Z' fill='%230f2638'/%3E%3C/svg%3E" alt="A pale moon over a calm blue harbor"></article>
  <article><h3>Violet sky</h3><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='230' viewBox='0 0 400 230'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%232b1055'/%3E%3Cstop offset='1' stop-color='%23d53a9d'/%3E%3C/linearGradient%3E%3Crect width='400' height='230' fill='url(%23s)'/%3E%3Ccircle cx='82' cy='49' r='20' fill='%23ffdd99'/%3E%3Cpath d='M0 122 Q50 135 100 119 T200 126 T300 120 T400 122 V230 H0Z' fill='%237e3aa1'/%3E%3Cpath d='M0 158 Q50 177 100 147 T200 157 T300 150 T400 158 V230 H0Z' fill='%234a2071'/%3E%3Cpath d='M0 195 Q50 208 100 183 T200 194 T300 192 T400 195 V230 H0Z' fill='%23200b3a'/%3E%3C/svg%3E" alt="Purple ridges under a pink sunset"></article>
  <article><h3>Desert noon</h3><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='230' viewBox='0 0 400 230'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%23f6a04d'/%3E%3Cstop offset='1' stop-color='%23ffd8a8'/%3E%3C/linearGradient%3E%3Crect width='400' height='230' fill='url(%23s)'/%3E%3Ccircle cx='233' cy='60' r='24' fill='%23fff7ea'/%3E%3Cpath d='M0 115 Q50 135 100 103 T200 109 T300 109 T400 115 V230 H0Z' fill='%23d9824a'/%3E%3Cpath d='M0 152 Q50 137 100 145 T200 159 T300 143 T400 152 V230 H0Z' fill='%23a65a2e'/%3E%3Cpath d='M0 186 Q50 168 100 183 T200 187 T300 186 T400 186 V230 H0Z' fill='%235c2f17'/%3E%3C/svg%3E" alt="Orange desert ridges at noon"></article>
  <article><h3>Moonrise</h3><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='230' viewBox='0 0 400 230'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%2310141f'/%3E%3Cstop offset='1' stop-color='%233c4f76'/%3E%3C/linearGradient%3E%3Crect width='400' height='230' fill='url(%23s)'/%3E%3Ccircle cx='145' cy='62' r='17' fill='%23e6e9f2'/%3E%3Cpath d='M0 118 Q50 131 100 115 T200 114 T300 115 T400 118 V230 H0Z' fill='%232a3550'/%3E%3Cpath d='M0 158 Q50 146 100 156 T200 161 T300 149 T400 158 V230 H0Z' fill='%231b2338'/%3E%3Cpath d='M0 186 Q50 165 100 184 T200 184 T300 171 T400 186 V230 H0Z' fill='%230d111c'/%3E%3C/svg%3E" alt="Dark peaks under a moonlit sky"></article>
</div>

Attribute	Default	What it does
`data-motion-delay`	`5000`	time on each card; 0 turns the timer off
`data-motion-dx`	`56`	how far right each card behind sits
`data-motion-dy`	`48`	how far up each card behind sits
`data-motion-skew`	`4`	the slant of the deck
`data-motion-label`	`Cards`	the name read out when the element has no aria-label

Doc folder

1.7 KB gzip

A folder whose papers peek out under the pointer and fan out above it when it opens; each paper is a link you can pick.

Launch plan Brand guide Moodboard

<div data-motion="doc-folder" aria-label="Project files">
  <a href="#">Launch plan</a>
  <a href="#">Brand guide</a>
  <a href="#">Moodboard</a>
</div>

Attribute	Default	What it does
`data-motion-size`	`200`	the folder's width
`data-motion-color`	auto	the folder's color (empty: the accent)
`data-motion-label`	`Folder`	the button's name when the element has no aria-label

Tick slider

1.2 KB gzip

A range slider drawn as a row of fine bars with no thumb; dragging fast raises a wake of taller bars around the handle that settles behind it.

Volume

<label class="demo-card">Volume <input type="range" data-motion="tick-slider" min="0" max="100" value="62"></label>

Attribute	Default	What it does
`data-motion-bars`	`44`	how many bars make the track
`data-motion-wake`	`1`	how tall the wake grows with speed (0: none)
`data-motion-unit`	auto	text after the shown value, such as %

Ring dial

1.9 KB gzip

A dial of fine ticks you turn by angle: the value arc fills behind a bright head that drags a comet tail when you spin it fast.

Brightness

<label class="demo-card">Brightness <input type="range" data-motion="ring-dial" min="0" max="100" value="62"></label>

Attribute	Default	What it does
`data-motion-size`	`200`	the dial's width
`data-motion-unit`	`%`	text after the value in the middle

Slide confirm

1.8 KB gzip

A slide-to-confirm handle: drag it to the end, it spins while the action runs and unfurls into a done pill; Enter or Space confirms from the keyboard.

<button type="button" data-motion="slide-confirm" data-motion-done="Sent">Slide to send</button>

Attribute	Default	What it does
`data-motion-done`	`Done`	the label once the action finished
`data-motion-wait`	`1400`	how long the spinner shows when nobody answers the confirm event
`data-motion-reset`	`4000`	when the done pill turns back into the slider; 0 keeps it

Wheel picker

2.0 KB gzip

A curved picker that spins with a drag, the scroll wheel or the arrow keys, tilting the options away from the chosen one; it drives the real select underneath.

Genre

<div class="demo-card">
<label for="genre">Genre</label>
<select id="genre" data-motion="wheel-picker">
  <option>Ambient</option>
  <option>House</option>
  <option>Techno</option>
  <option selected>Jazz</option>
  <option>Lo-fi</option>
  <option>Synthwave</option>
  <option>Soul</option>
</select>
</div>

Attribute	Default	What it does
`data-motion-rows`	`5`	how many rows show (odd)
`data-motion-tilt`	`22`	how far each row tilts away

Tick check

1.2 KB gzip

A checkbox row where one spring fills the box, draws the tick and strikes through the label.

Ship the build Update the changelog Rotate the launch card

<div class="demo-card" role="group" aria-label="Launch list">
  <label><input type="checkbox" data-motion="tick-check"> Ship the build</label>
  <label><input type="checkbox" data-motion="tick-check"> Update the changelog</label>
  <label><input type="checkbox" data-motion="tick-check" checked> Rotate the launch card</label>
</div>

Attribute	Default	What it does
`data-motion-strike`	`true`	strike through the label when checked
`data-motion-color`	auto	the fill (empty: the accent)

Swell radio

1.1 KB gzip

A radio group of chips where the chosen one swells with a wobble and nudges its neighbors outward.

<fieldset data-motion="swell-radio">
  <legend>Speed</legend>
  <label><input type="radio" name="speed" value="off"> Off</label>
  <label><input type="radio" name="speed" value="low"> Low</label>
  <label><input type="radio" name="speed" value="medium" checked> Medium</label>
  <label><input type="radio" name="speed" value="high"> High</label>
  <label><input type="radio" name="speed" value="max"> Max</label>
</fieldset>

Attribute	Default	What it does
`data-motion-push`	`6`	how far the neighbors move aside

Segmented

1.2 KB gzip

A segmented control whose thumb stretches across the gap as it travels and squashes into place.

Range Day Week Month Year

<fieldset data-motion="segmented">
  <legend>Range</legend>
  <label><input type="radio" name="range" value="day"> Day</label>
  <label><input type="radio" name="range" value="week" checked> Week</label>
  <label><input type="radio" name="range" value="month"> Month</label>
  <label><input type="radio" name="range" value="year"> Year</label>
</fieldset>

Attribute	Default	What it does
`data-motion-stretch`	`1`	how much the thumb stretches on its way (0: none)

Notify toggle

1.1 KB gzip

A pill toggle: pressing it rings the bell, crossfades the label and floods the pill with color.

<button type="button" data-motion="notify-toggle" aria-pressed="false">Notify me</button>

Attribute	Default	What it does
`data-motion-on`	`Notifying`	the label while it is on

Hold confirm

1.2 KB gzip

A button you press and hold to confirm: a fill sweeps across while you hold, drains back if you let go early and fires the action when it is full.

<button type="button" data-motion="hold-confirm">Hold to delete</button>

Attribute	Default	What it does
`data-motion-hold`	`1200`	how long to hold
`data-motion-done`	`Deleted`	the label once confirmed
`data-motion-color`	`#d63c41`	the fill

Fuse undo

1.5 KB gzip

An action button whose done state carries an Undo on a burning fuse; the action commits only when the fuse runs out.

<button type="button" data-motion="fuse-undo">Archive</button>

Attribute	Default	What it does
`data-motion-done`	`Archived`	the label after the press
`data-motion-window`	`5000`	how long Undo stays

Like heart

1.4 KB gzip

A like button whose heart squeezes to a dot, flips color and bursts back while the count rolls over to the next number.

<button type="button" data-motion="like-heart" aria-pressed="false" data-motion-count="1204">Like</button>

Attribute	Default	What it does
`data-motion-count`	`0`	the count before your like
`data-motion-color`	`#ff4d6d`	the heart's color when liked

Code input

1.4 KB gzip

A one-time code field drawn as slots: digits spring into place as you type or paste, and the slots flash when the code is complete.

Enter the 6-digit code we sent you

<label class="demo-card">Enter the 6-digit code we sent you <input data-motion="code-input" inputmode="numeric" autocomplete="one-time-code" maxlength="6" value="48"></label>

Attribute	Default	What it does
`data-motion-slots`	`6`	how many characters (the input's maxlength wins)

Frost icons

1.3 KB gzip

Icon tiles of frosted glass over a tilted color plate that swings up and lights the glass when you point at or focus them.

<div data-motion="frost-icons" aria-label="Apps">
  <a href="#" aria-label="Files"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/></svg></a>
  <a href="#" aria-label="Books"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4h11a2 2 0 0 1 2 2v14H7a2 2 0 0 1-2-2zM5 18a2 2 0 0 1 2-2h11"/></svg></a>
  <a href="#" aria-label="Health"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg></a>
  <a href="#" aria-label="Weather"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18h10a4 4 0 0 0 .5-8A6 6 0 0 0 6 11a3.5 3.5 0 0 0 1 7z"/></svg></a>
  <a href="#" aria-label="Notes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4h12v16H6zM9 9h6M9 13h6M9 17h3"/></svg></a>
  <a href="#" aria-label="Stats"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 20V10M12 20V4M19 20v-7"/></svg></a>
</div>

Attribute	Default	What it does
`data-motion-colors`	`#4f7cff,#a259ff,#ff4f7b,#6c63ff,#ff9f3d,#22c38e`	plate colors, comma separated, used in turn (an item's data-color wins)
`data-motion-size`	`72`	tile size

Tip group

1.3 KB gzip

Tooltips for a row of icon buttons: the first one waits a beat, then its neighbors open at once while the group is warm, the tip gliding from one to the next.

<div data-motion="tip-group" role="toolbar" aria-label="Formatting">
  <button type="button" aria-label="Bold"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z"/></svg></button>
  <button type="button" aria-label="Italic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M10 5h8M6 19h8M14 5l-4 14"/></svg></button>
  <button type="button" aria-label="Underline"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M7 4v7a5 5 0 0 0 10 0V4M5 20h14"/></svg></button>
  <button type="button" aria-label="Link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg></button>
  <button type="button" aria-label="Insert picture"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="5" width="16" height="14" rx="2"/><path d="M20 15l-4-4-8 8"/></svg></button>
</div>

Attribute	Default	What it does
`data-motion-delay`	`500`	the wait before the first tip
`data-motion-warm`	`600`	how long the group stays warm after a tip closes

Scrub number

1.9 KB gzip

A number field becomes a chip you drag sideways to change, with rubber-band ends and a fill for where the value sits; click it to type.

<div class="demo-row"><input type="number" value="24" min="0" max="64" aria-label="Radius" data-motion="scrub-number" data-motion-unit="px"> <input type="number" value="0.8" min="0" max="1" step="0.05" aria-label="Opacity" data-motion="scrub-number"> <input type="number" value="12" min="0" max="40" aria-label="Blur" data-motion="scrub-number" data-motion-unit="px"></div>

Attribute	Default	What it does
`data-motion-label`	auto	Label in the chip (empty uses the field's aria-label)
`data-motion-unit`	auto	Unit after the value
`data-motion-speed`	`2.5`	Steps per 10 pixels of drag
`data-motion-color`	`#f6a04d`	Fill and focus color

Backgrounds

Aurora

0.7 KB gzip

Soft curtains of colored light drift across a background.

<axi0-aurora cover colors="#f6a04d,#ff6b8b,#8a7dff"></axi0-aurora>

Attribute	Default	What it does
`colors`	`#f6a04d,#ff6b8b,#8a7dff`	three colors, left to right
`speed`	`1`	how fast it drifts
`amplitude`	`1`	how far the curtain folds up and down
`glow`	`0.85`	brightness (0 to 1)
`cover`	`false`	fill the nearest positioned parent, behind its content

Silk

0.7 KB gzip

Folds of fabric ripple slowly across a background, with a fine film grain.

<axi0-silk cover color="#7b6cff"></axi0-silk>

Attribute	Default	What it does
`color`	`#7b6cff`	the fabric's color
`speed`	`1`	how fast the folds move
`scale`	`1`	larger numbers make smaller folds
`rotation`	`0`	turns the pattern, in degrees
`grain`	`1`	film grain (0 turns it off)
`cover`	`false`	fill the nearest positioned parent, behind its content

Particles

1.3 KB gzip

Balls fall, bounce and collide in a scene computed in WebAssembly.

<axi0-particles cover count="70" seed="7"></axi0-particles>

Attribute	Default	What it does
`count`	`70`	how many balls
`seed`	`7`	the same seed always gives the same scene
`gravity`	`1`	1 is about 1,400 pixels per second squared
`bounce`	`0.55`	how much speed a bounce keeps
`size`	`1`	ball size factor (radius 6 to 16 pixels at 1)
`colors`	`#f6a04d,#ff6b8b,#8a7dff,#3ad0c1`	comma separated
`cover`	`false`	fill the nearest positioned parent, behind its content

Blob merge

0.9 KB gzip

Glossy liquid blobs drift, merge, stretch and pinch apart; one more follows the pointer through them.

<axi0-blob-merge cover></axi0-blob-merge>

Attribute	Default	What it does
`count`	`7`	How many blobs
`size`	`1`	Blob size
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Block warp

1.2 KB gzip

A picture that breaks into a grid of blocks where the pointer moves and settles back into place.

<axi0-block-warp cover></axi0-block-warp>

Attribute	Default	What it does
`src`	auto	An image to show (same origin); empty draws a moonlit field
`grid`	`16`	Blocks across
`strength`	`1`	How far the blocks move
`relax`	`3`	How fast they settle
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Chrome pool

0.8 KB gzip

Soft ribbons of liquid chrome swirl through a pool, catch the light and ripple under the pointer.

<axi0-chrome-pool cover></axi0-chrome-pool>

Attribute	Default	What it does
`scale`	`1.35`	Size of the ribbons
`ripple`	`1`	Strength of the pointer ripple
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Color fold

0.7 KB gzip

Broad ribbons of glowing color bend and fold across the frame in slow, smooth sweeps.

<axi0-color-fold cover></axi0-color-fold>

Attribute	Default	What it does
`bands`	`3`	How many ribbons
`bend`	`1`	How far the ribbons bend
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

CRT glow

1.0 KB gzip

A blocky plasma glows on a curved tube screen with scanlines, phosphor dots, afterglow and a power-on intro.

<axi0-crt-glow cover></axi0-crt-glow>

Attribute	Default	What it does
`blocks`	`22`	Blocks across the screen height
`curve`	`1`	How curved the glass is
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Dither veil

1.5 KB gzip

A one-bit dithered picture that the pointer burns through to full color; it knits back cell by cell.

<axi0-dither-veil cover></axi0-dither-veil>

Attribute	Default	What it does
`src`	auto	An image to show (same origin); empty draws a sunset
`dot`	`2`	Dither dot size in CSS pixels
`cell`	`14`	Burn cell size in CSS pixels
`radius`	`70`	Burn radius in CSS pixels
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Dot lens

0.7 KB gzip

A fine field of gradient dots seen through a lens that follows the pointer: it magnifies, pinches or swirls.

<axi0-dot-lens cover></axi0-dot-lens>

Attribute	Default	What it does
`spacing`	`14`	Dot spacing in CSS pixels
`dot`	`0.34`	Dot size, as a share of the spacing
`lens`	`1`	Lens size
`mode`	`magnify`	What the lens does
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Ember eye

1.0 KB gzip

A fiery eye with a living iris, a slit pupil that watches the pointer and flames licking outward.

<axi0-ember-eye cover></axi0-ember-eye>

Attribute	Default	What it does
`size`	`1`	Eye size
`fire`	`1`	How far the flames reach
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Ferro sea

1.0 KB gzip

A glossy sea of magnetic fluid: swells of spikes roll in, and the pointer raises a crown of them.

<axi0-ferro-sea cover></axi0-ferro-sea>

Attribute	Default	What it does
`spikes`	`1`	Spike density
`height`	`1`	Spike height
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Fiber veil

0.8 KB gzip

Layered ribbons of fine glowing fibers twist, fold and drift, the far ones soft as if out of focus.

<axi0-fiber-veil cover></axi0-fiber-veil>

Attribute	Default	What it does
`fibers`	`22`	Fibers per ribbon
`focus`	`0.2`	Which depth is sharp (0 near, 1 far)
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Glass tiles

1.0 KB gzip

A rolling field of glossy rounded tiles in perspective, lit by two colored lights that drift across it.

<axi0-glass-tiles cover></axi0-glass-tiles>

Attribute	Default	What it does
`size`	`0.55`	Tile size
`waves`	`1`	Height of the rolling waves
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Ink flow

1.5 KB gzip

A glowing liquid swirls under the pointer in a real fluid simulation, colored by how fast it flows.

<axi0-ink-flow cover></axi0-ink-flow>

Attribute	Default	What it does
`force`	`1`	How hard the pointer stirs
`swirl`	`1`	Extra curl in the flow
`fade`	`1`	How fast the ink fades
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Lift field

1.1 KB gzip

A field of particles that lifts into a glowing ring around the pointer and bursts outward on a click.

<axi0-lift-field cover></axi0-lift-field>

Attribute	Default	What it does
`count`	`1`	Particle density
`ring`	`1`	Ring size
`spin`	`1`	How fast the ring orbits
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Light road

1.2 KB gzip

A night highway of glowing light trails on a winding road; press and hold to warp into hyperspace.

<axi0-light-road cover></axi0-light-road>

Attribute	Default	What it does
`lanes`	`3`	Lanes each way
`curve`	`2.2`	How much the road winds
`traffic`	`0.85`	How busy the road is
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Liquid cursor

1.4 KB gzip

A liquid blob follows the pointer, stretches and sloshes behind it and throws droplets, in four materials.

<axi0-liquid-cursor cover></axi0-liquid-cursor>

Attribute	Default	What it does
`material`	`chrome`	The liquid
`size`	`1`	Blob size
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Live wire

1.5 KB gzip

Turns a word or a logo into a living lightning outline, with arcs that leap off its edges toward the pointer.

<axi0-live-wire cover></axi0-live-wire>

Attribute	Default	What it does
`text`	`axi0`	The word to electrify
`src`	auto	Or an image of a logo (white or dark on transparent), same origin
`arcs`	`1`	How many arcs leap off
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Needle field

0.8 KB gzip

A field of short needles that swing toward the pointer like compass needles, ripple outward and spin on click.

<axi0-needle-field cover></axi0-needle-field>

Attribute	Default	What it does
`spacing`	`28`	Needle spacing in CSS pixels
`length`	`0.95`	Needle length, as a share of the spacing
`width`	`3`	Needle width in CSS pixels
`mode`	`point`	Point at the pointer or circle it
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Oil film

0.7 KB gzip

A liquid film of soft rainbow folds that shifts on its own and ripples where the pointer moves.

<axi0-oil-film cover></axi0-oil-film>

Attribute	Default	What it does
`scale`	`1`	Size of the folds
`flow`	`1`	How fast the folds move
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Paint swirl

0.8 KB gzip

Thick paint swirls around the middle in crisp pixels; the pointer stirs it and a click spins a whirlpool.

<axi0-paint-swirl cover></axi0-paint-swirl>

Attribute	Default	What it does
`pixel`	`4`	Pixel size
`spin`	`1`	How hard the paint turns around the middle
`bands`	`5`	Paint bands (fewer reads flatter)
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Plasma ribbons

0.8 KB gzip

Two glowing ribbons of plasma curl through each other, twisting as they go, with white-hot cores.

<axi0-plasma-ribbons cover></axi0-plasma-ribbons>

Attribute	Default	What it does
`thickness`	`1`	Ribbon thickness
`glow`	`1`	Glow around the ribbons
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Polar lights

0.8 KB gzip

Soft bands of northern lights drift across the frame in slowly cycling colors, with rays that flicker upward.

<axi0-polar-lights cover></axi0-polar-lights>

Attribute	Default	What it does
`height`	`0.5`	Where the bands sit, from the bottom
`width`	`1`	How thick the bands are
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Shape tide

0.8 KB gzip

A field of circles, squares and triangles that brighten and grow as rolling waves pass through it.

<axi0-shape-tide cover></axi0-shape-tide>

Attribute	Default	What it does
`spacing`	`22`	Spacing in CSS pixels
`shape`	`mixed`	Which shapes
`wavelength`	`1`	How close the waves are
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Slat sea

0.9 KB gzip

A wall of tiny slats tips over into a rolling sea in perspective, with glints on every crest.

<axi0-slat-sea cover></axi0-slat-sea>

Attribute	Default	What it does
`size`	`1`	Slat size
`tilt`	`1`	Final view: 0 a wall, 1 a sea
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Smoke trail

0.9 KB gzip

A ghost of glowing smoke floats after the pointer and curls away as it rises and fades.

<axi0-smoke-trail cover></axi0-smoke-trail>

Attribute	Default	What it does
`size`	`2.4`	Puff size
`life`	`2.4`	Seconds a puff lasts
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Star warp

1.2 KB gzip

An endless flight through twinkling stars that jumps to warp now and then; stars part around the pointer.

<axi0-star-warp cover></axi0-star-warp>

Attribute	Default	What it does
`density`	`0.24`	Share of the sky with stars
`jump`	`9`	Seconds between warp jumps (0: only while pressed)
`repel`	`1`	How far stars part around the pointer
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Storm orb

1.0 KB gzip

A glass orb with a crackling electric rim and glowing dust inside that swirls with the pointer.

<axi0-storm-orb cover></axi0-storm-orb>

Attribute	Default	What it does
`size`	`1`	Orb size
`crackle`	`1`	How busy the electric rim is
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Swarm

1.3 KB gzip

A liquid swarm of particles flows after the pointer, curls into eddies and pours around buttons.

<axi0-swarm cover></axi0-swarm>

Attribute	Default	What it does
`count`	`1`	Particle density
`flow`	`1`	How much the swarm curls
`avoid`	`button, a, [data-swarm-avoid]`	What the swarm pours around (a CSS selector, searched in the parent)
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Tile wall

0.8 KB gzip

A tilted wall of gradient tiles drifts in alternating rows, slides with the pointer and lights up where it rests.

<axi0-tile-wall cover></axi0-tile-wall>

Attribute	Default	What it does
`rows`	`3.5`	Tiles per frame height
`angle`	`-15`	Tilt of the wall in degrees
`slide`	`1`	How far the pointer slides the rows
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Water ripple

1.7 KB gzip

Water ripples spread from the pointer, warp the picture under them and leave a wake that fades.

<axi0-water-ripple cover></axi0-water-ripple>

Attribute	Default	What it does
`src`	auto	An image under the water (same origin); empty draws a pool floor
`strength`	`1`	How hard the pointer pushes the water
`damping`	`0.985`	How long waves last
`rain`	`1`	Raindrops per second while idle
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Sounds

Mute switch

0.2 KB gzip

A button that mutes and unmutes every sound on the page, in memory only, so a reload starts fresh.

<div class="demo-row"><button class="demo-btn" type="button" data-sound="mute-switch" aria-pressed="false">Mute sounds</button> <button class="demo-btn" type="button" data-sound="tap-round">Try a sound</button></div>

Round tap

0.1 KB gzip

A soft round tap with a warm body, for primary buttons.

<button class="demo-btn" type="button" data-sound="tap-round">Continue</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.04`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Tiny tick

0.1 KB gzip

A tiny, gentle tick for small controls such as icons and chips.

<button class="demo-btn" type="button" data-sound="tap-tiny">Pin</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Metal tap

0.1 KB gzip

A small, bright metallic tap for links and icon buttons.

<button class="demo-btn" type="button" data-sound="tap-metal">Open link</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.06`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Air tap

0.1 KB gzip

A breathy, toneless tap for quiet, minimal interfaces.

<button class="demo-btn" type="button" data-sound="tap-air">Next</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Felt press

0.1 KB gzip

A muted, padded press for quiet secondary buttons.

<button class="demo-btn" type="button" data-sound="tap-felt">Cancel</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Cushion press

0.2 KB gzip

A cushioned press that springs back, for cards and large buttons.

<button class="demo-btn" type="button" data-sound="tap-cushion">Open card</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.05`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Glass bead

0.1 KB gzip

A small glassy ping for picking one item from a set.

<button class="demo-btn" type="button" data-sound="tap-glass">Pick</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.12`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Marble click

0.2 KB gzip

A smooth glassy click for carousels and pickers.

<button class="demo-btn" type="button" data-sound="tap-marble">Next slide</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Pure dot

0.1 KB gzip

A pure, minimal tone for radio buttons and dots.

<button class="demo-btn" type="button" data-sound="tap-dot">Select</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Rubber boop

0.1 KB gzip

A playful, rubbery pop for friendly buttons.

<button class="demo-btn" type="button" data-sound="tap-boop">Say hi</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Mouth pop

0.1 KB gzip

A round mouth pop for playful motion graphics.

<button class="demo-btn" type="button" data-sound="tap-blop">Pop</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Wood tock

0.1 KB gzip

A dry little woodblock knock for checking a box.

Check

<label class="demo-btn"><input type="checkbox" data-sound="tap-wood"> Check</label>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

String pluck

0.1 KB gzip

A soft plucked string for picking from a list.

<button class="demo-btn" type="button" data-sound="tap-pluck">Choose</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.1`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Step tick

0.1 KB gzip

A soft plucked tick for each step completed.

<button class="demo-btn" type="button" data-sound="tap-tick">Done step</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Warm confirm

0.1 KB gzip

A warm, open fifth for choosing a card.

<button class="demo-btn" type="button" data-sound="tap-halo">Choose this</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.18`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Two petals

0.1 KB gzip

Two light notes for picking a swatch or a card.

<button class="demo-btn" type="button" data-sound="tap-petal">Pick color</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.12`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Switch click

0.2 KB gzip

A soft two-step click that turns a switch on, and its mirror that turns it off.

Wi-Fi

<label class="demo-btn"><input type="checkbox" data-sound="switch-click"> Wi-Fi</label>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Rocker switch

0.2 KB gzip

A sturdy two-part click for big switches, lower on the way off.

Main power

<label class="demo-btn"><input type="checkbox" data-sound="switch-rocker"> Main power</label>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Spring toggle

0.2 KB gzip

A playful springy wobble for fun toggles, bending up for on and down for off.

Party mode

<label class="demo-btn"><input type="checkbox" data-sound="switch-spring"> Party mode</label>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Detent notch

0.1 KB gzip

A soft detent for steppers, sliders and tabs.

<input type="range" min="0" max="10" value="5" aria-label="Amount" data-sound="step-notch">

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`input`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Tuned step

0.1 KB gzip

A tiny tuned detent for volume and value steps.

<input type="range" min="0" max="10" value="5" aria-label="Volume" data-sound="step-level">

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`input`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Tab flick

0.1 KB gzip

A crisp little flick for switching tabs.

<button class="demo-btn" type="button" data-sound="tab-flick">Next tab</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Tab glide

0.1 KB gzip

A smooth, rounded slide for moving between tabs.

<button class="demo-btn" type="button" data-sound="tab-glide">Next tab</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Seal

0.1 KB gzip

A soft, settled click for saving and locking.

<button class="demo-btn" type="button" data-sound="lock-seal">Save</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.04`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Unlock

0.2 KB gzip

A soft click that opens into air, for unlocking.

<button class="demo-btn" type="button" data-sound="unlock-air">Unlock</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Plug in, plug out

0.2 KB gzip

A rounded click and rise for connecting a device, and the fall and click for letting it go.

Headphones

<label class="demo-btn"><input type="checkbox" data-sound="device-plug"> Headphones</label>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Light and dark

0.2 KB gzip

A bright little rise for switching to light mode and a soft settle for dark.

Light mode

<label class="demo-btn"><input type="checkbox" data-sound="theme-switch"> Light mode</label>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.2`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Expand and collapse

0.2 KB gzip

A soft flutter that opens a section, and the matching one that tucks it away.

Details

<label class="demo-btn"><input type="checkbox" data-sound="fold-flutter"> Details</label>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Power on, power off

0.2 KB gzip

A rising glow for powering on or connecting, and a falling fade for powering off.

Power

<label class="demo-btn"><input type="checkbox" data-sound="power-glow"> Power</label>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.3`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

0.1 KB gzip

A tiny lift for opening menus and popovers.

<button class="demo-btn" type="button" data-sound="menu-pop">Menu</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Grid snap

0.2 KB gzip

A quick pull and a crisp snap onto a grid or a slot.

<button class="demo-btn" type="button" data-sound="snap-grid">Snap</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Record start and stop

0.2 KB gzip

A clear double beep when recording starts and a falling pair when it stops.

Record

<label class="demo-btn"><input type="checkbox" data-sound="record-beep"> Record</label>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Play and pause

0.2 KB gzip

A quick spin up for starting playback and a soft spin down for pausing.

Play

<label class="demo-btn"><input type="checkbox" data-sound="play-pause"> Play</label>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Bloom

0.1 KB gzip

Two warm notes that rise into a quiet success.

<button class="demo-btn" type="button" data-sound="done-bloom">Finish</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.22`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Crest

0.2 KB gzip

A brighter four-note lift for bigger wins.

<button class="demo-btn" type="button" data-sound="done-crest">Claim</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.25`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Settle

0.1 KB gzip

A single warm note that quietly says done.

<button class="demo-btn" type="button" data-sound="done-settle">Mark done</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.28`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Summit

0.2 KB gzip

A quick climbing run that opens into a chord when everything is complete.

<button class="demo-btn" type="button" data-sound="done-summit">Complete all</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.32`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Coin

0.1 KB gzip

A bright two-note coin for rewards and points.

<button class="demo-btn" type="button" data-sound="reward-coin">Collect</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.08`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Sparkle

0.2 KB gzip

A quick sparkle for small wins.

<button class="demo-btn" type="button" data-sound="reward-sparkle">Nice</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.28`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Heart pulse

0.2 KB gzip

A warm double pulse for likes and favorites.

<label class="demo-btn"><input type="checkbox" data-sound="like-pulse"> Like</label>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.12`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Reaction pop

0.1 KB gzip

A bright little pop for adding a reaction.

<button class="demo-btn" type="button" data-sound="react-pop">React</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.08`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Level up

0.2 KB gzip

A rising power-up for leveling up.

<button class="demo-btn" type="button" data-sound="level-up">Level up</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.25`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Wooden run

0.1 KB gzip

A quick wooden run for keeping a streak alive.

<button class="demo-btn" type="button" data-sound="streak-wood">Keep streak</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.15`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Treasure

0.2 KB gzip

A warm thump that opens into a shimmering chord.

<button class="demo-btn" type="button" data-sound="chest-open">Open</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.4`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Confetti

0.2 KB gzip

A soft pop and a shower of sparkles for celebrations.

<button class="demo-btn" type="button" data-sound="confetti">Celebrate</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.3`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Accept

0.2 KB gzip

A smooth rising tick for accepting a suggestion.

<button class="demo-btn" type="button" data-sound="accept-fill">Accept</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Send

0.2 KB gzip

A quick airy lift for sending a message.

<button class="demo-btn" type="button" data-sound="send-lift">Send</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.12`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Read receipt

0.2 KB gzip

Two tiny ticks for delivered and read.

<button class="demo-btn" type="button" data-sound="read-receipt">Deliver</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Upload done

0.2 KB gzip

A rising breath and a bright ping when an upload finishes.

<button class="demo-btn" type="button" data-sound="upload-done">Upload</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.28`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Download done

0.2 KB gzip

A falling breath that lands softly when a download finishes.

<button class="demo-btn" type="button" data-sound="download-done">Download</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.22`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Shake

0.2 KB gzip

A quick, muted shake for input that does not fit.

<button class="demo-btn" type="button" data-sound="error-shake">Wrong code</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Not quite

0.1 KB gzip

A gentle falling pair that says not quite.

<button class="demo-btn" type="button" data-sound="error-shrug">Try again</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.18`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Crunch

0.2 KB gzip

A crunchy digital hit for errors in tech scenes.

<button class="demo-btn" type="button" data-sound="error-crunch">Break it</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Blocked

0.1 KB gzip

A low, firm double buzz for an action that is blocked.

<button class="demo-btn" type="button" data-sound="error-buzz">Delete all</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Low power

0.2 KB gzip

A dim, flickering tone for low battery and fading power.

<button class="demo-btn" type="button" data-sound="warn-low">Battery</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.15`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Alert pulse

0.1 KB gzip

A clear repeating pulse for time-sensitive alerts.

<button class="demo-btn" type="button" data-sound="alert-pulse">Alert</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Nudge

0.1 KB gzip

A soft double tap that asks for attention.

<button class="demo-btn" type="button" data-sound="attention-nudge">Nudge</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Spring back

0.1 KB gzip

A springy return when a drag is canceled.

<button class="demo-btn" type="button" data-sound="drag-cancel">Let go</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Undo

0.2 KB gzip

A soft little rewind for undo and revert.

<button class="demo-btn" type="button" data-sound="undo-rewind">Undo</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Three bells

0.2 KB gzip

Three soft bells for a new notification.

<button class="demo-btn" type="button" data-sound="notify-chime">Notify</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.32`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Clear ping

0.1 KB gzip

One clear bell with a quiet tail.

<button class="demo-btn" type="button" data-sound="notify-ping">Ping</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.28`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Ding

0.1 KB gzip

A clean bell ding for highlights.

<button class="demo-btn" type="button" data-sound="notify-ding">Highlight</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.28`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Chat bubble

0.1 KB gzip

Two round notes for a message in an open chat.

<button class="demo-btn" type="button" data-sound="message-bubble">Message</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.08`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Incoming

0.1 KB gzip

Two round blips for an incoming message.

<button class="demo-btn" type="button" data-sound="message-ripple">Incoming</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.1`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Mention

0.2 KB gzip

A clear rising pair for when someone mentions you.

<button class="demo-btn" type="button" data-sound="mention-call">Mention</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.18`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Kalimba

0.2 KB gzip

A plucked kalimba pair for friendly notifications.

<button class="demo-btn" type="button" data-sound="notify-kalimba">Notify</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.22`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Wooden reminder

0.2 KB gzip

A mellow wooden pair for calm reminders.

<button class="demo-btn" type="button" data-sound="remind-wood">Remind me</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.2`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Hint

0.1 KB gzip

A neutral, airy tone for tips and info.

<button class="demo-btn" type="button" data-sound="info-hint">Show tip</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.28`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Coming up

0.1 KB gzip

A gentle three-note rise for upcoming events.

<button class="demo-btn" type="button" data-sound="event-cue">Starts soon</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.28`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Someone joined

0.2 KB gzip

A soft vibraphone two-tone for someone joining.

<button class="demo-btn" type="button" data-sound="join-vibes">Join</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.28`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Join call

0.2 KB gzip

A warm rising chord for joining a call.

<button class="demo-btn" type="button" data-sound="call-join">Join call</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.32`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Typing dots

0.1 KB gzip

Three faint dots for someone typing.

<button class="demo-btn" type="button" data-sound="typing-dots">Typing</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Countdown

0.2 KB gzip

Three beeps and a go, for starts and launches.

<button class="demo-btn" type="button" data-sound="countdown">Start</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Clock tick

0.1 KB gzip

A dry clock tick for countdowns and timers.

<button class="demo-btn" type="button" data-sound="timer-tick">Tick</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Focus

0.2 KB gzip

A small focus whir and two confirm beeps for emphasis.

<button class="demo-btn" type="button" data-sound="camera-focus">Focus</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Shutter

0.2 KB gzip

A soft mechanical shutter for photos and screenshots.

<button class="demo-btn" type="button" data-sound="camera-shutter">Snap photo</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Swish

0.1 KB gzip

A short, airy swipe for sliding panels.

<button class="demo-btn" type="button" data-sound="swipe-swish">Slide panel</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Sheet open

0.2 KB gzip

A soft rise for opening a sheet or a modal.

<button class="demo-btn" type="button" data-sound="sheet-open">Open sheet</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.2`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Sheet close

0.2 KB gzip

A falling breath for closing and dismissing.

<button class="demo-btn" type="button" data-sound="sheet-close">Close</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.15`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Drawer

0.2 KB gzip

A sliding glide that lands with a soft stop.

<button class="demo-btn" type="button" data-sound="drawer-slide">Open drawer</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Flick away

0.1 KB gzip

A very short flick for swiping something away.

<button class="demo-btn" type="button" data-sound="dismiss-flick">Dismiss</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Page turn

0.2 KB gzip

A soft paper turn for pages and steps.

<button class="demo-btn" type="button" data-sound="page-turn">Next page</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Shuffle

0.1 KB gzip

A light double slide for reordering items.

<button class="demo-btn" type="button" data-sound="reorder-shuffle">Reorder</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Fly by

0.2 KB gzip

A light, quick pass from one side to the other.

<button class="demo-btn" type="button" data-sound="fly-pass">Fly by</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Gust

0.2 KB gzip

A full, soft whoosh that passes from left to right.

<button class="demo-btn" type="button" data-sound="whoosh-gust">Whoosh</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.2`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Gale

0.2 KB gzip

A heavy, wide whoosh with low weight under it.

<button class="demo-btn" type="button" data-sound="whoosh-gale">Whoosh</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.3`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Swoop

0.2 KB gzip

A fast, deep swoop with a tonal edge.

<button class="demo-btn" type="button" data-sound="whoosh-swoop">Swoop</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Spin

0.1 KB gzip

A whirling whoosh that circles around.

<button class="demo-btn" type="button" data-sound="whoosh-spin">Spin</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.2`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Silk

0.2 KB gzip

A smooth, silky swish like fabric.

<button class="demo-btn" type="button" data-sound="swish-silk">Swish</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Whip

0.2 KB gzip

A sharp, quick whip for snappy cuts.

<button class="demo-btn" type="button" data-sound="whip-crack">Whip</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Twin pass

0.1 KB gzip

Two quick passes, one after the other.

<button class="demo-btn" type="button" data-sound="whoosh-twin">Pass twice</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Drift

0.1 KB gzip

A slow, airy pass with a gentle tail.

<button class="demo-btn" type="button" data-sound="whoosh-drift">Drift</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.4`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Tonal wipe

0.1 KB gzip

A clean tonal sweep for wipes and slides.

<button class="demo-btn" type="button" data-sound="wipe-tone">Wipe</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.2`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Zoom in

0.2 KB gzip

A punchy zoom-in with a tonal rise and a landing.

<button class="demo-btn" type="button" data-sound="zoom-in">Zoom</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.2`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Step forward

0.1 KB gzip

A light step up for next and forward.

<button class="demo-btn" type="button" data-sound="nav-next">Next</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Step back

0.1 KB gzip

A light step down for back and previous.

<button class="demo-btn" type="button" data-sound="nav-back">Back</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Dive in

0.2 KB gzip

A quick dip for drilling into a folder.

<button class="demo-btn" type="button" data-sound="folder-dive">Open folder</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Pick up

0.2 KB gzip

A soft lift as an item is picked up.

<button class="demo-btn" type="button" data-sound="drag-pick">Pick up</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`press`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Put down

0.1 KB gzip

A gentle landing as an item is put down.

<button class="demo-btn" type="button" data-sound="drag-drop">Put down</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Stack

0.2 KB gzip

A soft cascade as items stack together.

<button class="demo-btn" type="button" data-sound="stack-cascade">Stack</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

0.2 KB gzip

A clean sweep and a click for lower thirds and banners.

<button class="demo-btn" type="button" data-sound="title-banner">Show banner</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Title slide

0.1 KB gzip

A short tonal slide that lands, for titles moving in.

<button class="demo-btn" type="button" data-sound="title-slide">Slide in</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Ready glow

0.1 KB gzip

A faint glow when a drop target is ready or a pointer arrives.

<button class="demo-btn" type="button" data-sound="hover-glow">Hover me</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.2`	how much of the soft room around it
`data-motion-on`	`hover`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Laptop keys

0.2 KB gzip

Laptop key presses with a slightly different take on every keystroke.

<input class="demo-btn" type="text" placeholder="Type here" aria-label="Type here" data-sound="key-laptop">

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`key`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Deep keys

0.2 KB gzip

Deeper key presses with a rounded, muted body.

<input class="demo-btn" type="text" placeholder="Type here" aria-label="Type here" data-sound="key-thock">

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`key`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Low keys

0.2 KB gzip

Light, low-profile key taps like a thin modern keyboard.

<input class="demo-btn" type="text" placeholder="Type here" aria-label="Type here" data-sound="key-chiclet">

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`key`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Typewriter keys

0.2 KB gzip

Crisp mechanical key clicks for type-on titles.

<input class="demo-btn" type="text" placeholder="Type a title" aria-label="Type a title" data-sound="key-type">

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`key`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Enter key

0.2 KB gzip

A key press that lands with a soft confirm, for Enter and submit.

<button class="demo-btn" type="button" data-sound="key-enter">Submit</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.1`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Erase key

0.2 KB gzip

A softer key with a little sweep, for delete and backspace.

<button class="demo-btn" type="button" data-sound="key-erase">Delete</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Ticker

0.2 KB gzip

Rapid soft ticks for text that appears letter by letter.

<button class="demo-btn" type="button" data-sound="text-ticker">Type it out</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Counting ticks

0.1 KB gzip

Fast rising ticks for numbers counting up.

<button class="demo-btn" type="button" data-sound="count-ticks">Count up</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Calm pad

0.2 KB gzip

A warm, quiet pad for calm scenes.

<button class="demo-btn" type="button" data-sound="pad-calm">Play pad</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.4`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Space pad

0.2 KB gzip

A soft, airy pad for space scenes.

<button class="demo-btn" type="button" data-sound="pad-nebula">Play pad</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.6`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Room tone

0.1 KB gzip

A quiet room tone to fill silence.

<button class="demo-btn" type="button" data-sound="room-tone">Play room</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Rain on glass

0.2 KB gzip

Soft rain on a window pane.

<button class="demo-btn" type="button" data-sound="rain-glass">Play rain</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Soft wind

0.2 KB gzip

A soft wind with gentle gusts.

<button class="demo-btn" type="button" data-sound="wind-soft">Play wind</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.3`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Night drone

0.2 KB gzip

A dark, slow drone with faint insects in the night.

<button class="demo-btn" type="button" data-sound="night-drone">Play night</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.4`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Underwater

0.2 KB gzip

A muffled underwater drone with a few bubbles.

<button class="demo-btn" type="button" data-sound="water-deep">Dive</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.3`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Loading pulse

0.1 KB gzip

A calm, breathing pulse while something loads.

<button class="demo-btn" type="button" data-sound="loading-pulse">Load</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.3`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Syncing

0.2 KB gzip

A circling shimmer for syncing.

<button class="demo-btn" type="button" data-sound="sync-orbit">Sync</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.45`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Heartbeat

0.2 KB gzip

A slow, deep heartbeat for suspense.

<button class="demo-btn" type="button" data-sound="heartbeat-slow">Listen</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Trembling air

0.2 KB gzip

High, trembling tones that hang in the air.

<button class="demo-btn" type="button" data-sound="tremble-high">Listen</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.5`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Uneasy drone

0.2 KB gzip

A low, uneasy drone that beats against itself.

<button class="demo-btn" type="button" data-sound="drone-unease">Listen</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.3`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Slam

0.2 KB gzip

A tight, punchy hit for hard cuts.

<button class="demo-btn" type="button" data-sound="hit-slam">Hit</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Timber

0.2 KB gzip

A dry wooden thud for warm cuts.

<button class="demo-btn" type="button" data-sound="hit-timber">Hit</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Velvet hit

0.2 KB gzip

A soft, round hit with a warm low tail.

<button class="demo-btn" type="button" data-sound="hit-velvet">Hit</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.3`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Anvil

0.2 KB gzip

A resonant metal strike with a ringing tail.

<button class="demo-btn" type="button" data-sound="hit-anvil">Strike</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.3`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Crystal hit

0.2 KB gzip

A clear glassy impact with a shimmering tail.

<button class="demo-btn" type="button" data-sound="hit-crystal">Strike</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.5`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Thunder

0.2 KB gzip

A deep cinematic boom with a long rumble.

<button class="demo-btn" type="button" data-sound="boom-thunder">Boom</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.5`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Distant boom

0.1 KB gzip

A far-off boom with a long echo.

<button class="demo-btn" type="button" data-sound="boom-distant">Boom</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.6`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Sub drop

0.2 KB gzip

A deep sub drop that lands heavy.

<button class="demo-btn" type="button" data-sound="drop-plunge">Drop</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Quick riser

0.1 KB gzip

A quick, airy swell for fast cuts.

<button class="demo-btn" type="button" data-sound="riser-lift">Rise</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Cymbal swell

0.2 KB gzip

A reversed cymbal swell that pulls into the hit.

<button class="demo-btn" type="button" data-sound="riser-swell">Swell</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Inhale

0.1 KB gzip

A soft reversed swell that pulls into the cut.

<button class="demo-btn" type="button" data-sound="breath-in">Inhale</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Exhale

0.1 KB gzip

A gentle breath out after the cut.

<button class="demo-btn" type="button" data-sound="breath-out">Exhale</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Piano sting

0.2 KB gzip

A minimal piano-like sting for logos.

<button class="demo-btn" type="button" data-sound="sting-emblem">Play sting</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.4`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Logo reveal

0.2 KB gzip

A soft swell into a warm chord for logo reveals.

<button class="demo-btn" type="button" data-sound="logo-reveal">Reveal</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.5`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Circuit sting

0.2 KB gzip

A clean electronic logo sting.

<button class="demo-btn" type="button" data-sound="sting-circuit">Play sting</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.35`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Tape stop

0.2 KB gzip

A tape stop that winds the scene down.

<button class="demo-btn" type="button" data-sound="tape-stop">Stop</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Rewind

0.2 KB gzip

A quick tape rewind for flashbacks.

<button class="demo-btn" type="button" data-sound="tape-rewind">Rewind</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.2`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Wand

0.2 KB gzip

A quick magical flourish.

<button class="demo-btn" type="button" data-sound="magic-wand">Cast</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.45`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Portal

0.2 KB gzip

A swirling warp for magical transitions.

<button class="demo-btn" type="button" data-sound="magic-portal">Warp</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.55`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Shimmer rise

0.2 KB gzip

A bright, glittering rise of high tones.

<button class="demo-btn" type="button" data-sound="shimmer-rise">Shine</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.55`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Twinkles

0.1 KB gzip

A few soft twinkles that settle.

<button class="demo-btn" type="button" data-sound="twinkle-dust">Twinkle</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.5`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Balloon pop

0.1 KB gzip

A soft balloon pop without the harsh edge.

<button class="demo-btn" type="button" data-sound="pop-balloon">Pop</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.1`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Cork pop

0.2 KB gzip

A round cork pop with a little fizz after it.

<button class="demo-btn" type="button" data-sound="pop-cork">Uncork</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.1`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Rising bubbles

0.1 KB gzip

A string of bubbles rising.

<button class="demo-btn" type="button" data-sound="bubbles-rise">Bubble</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.15`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Fizz

0.2 KB gzip

A cluster of tiny bubbles.

<button class="demo-btn" type="button" data-sound="fizz-bubbles">Fizz</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Sprout

0.1 KB gzip

A springy little pop for elements appearing.

<button class="demo-btn" type="button" data-sound="pop-sprout">Add</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Pop in

0.1 KB gzip

A soft pop for text popping in.

<button class="demo-btn" type="button" data-sound="pop-appear">Show</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Vanish

0.2 KB gzip

A soft airy fade for text disappearing.

<button class="demo-btn" type="button" data-sound="fade-vanish">Hide</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.3`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Squeak

0.2 KB gzip

A soft rubber squeak for cute moments.

<button class="demo-btn" type="button" data-sound="squeak-toy">Squeeze</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Zap

0.2 KB gzip

A quick electric zap.

<button class="demo-btn" type="button" data-sound="electric-zap">Zap</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Spark

0.1 KB gzip

A tiny electric spark for callouts.

<button class="demo-btn" type="button" data-sound="spark-tiny">Spark</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Scramble

0.2 KB gzip

A fast scramble of tones for tech reveals.

<button class="demo-btn" type="button" data-sound="glitch-scramble">Decode</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.2`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Stutter

0.2 KB gzip

A short digital stutter.

<button class="demo-btn" type="button" data-sound="glitch-stutter">Glitch</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Data chirp

0.2 KB gzip

A quick chirp of digital data.

<button class="demo-btn" type="button" data-sound="data-chirp">Transmit</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Pixel blips

0.1 KB gzip

Tiny eight-bit blips for pixel graphics.

<button class="demo-btn" type="button" data-sound="pixel-blip">Blip</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Punchline

0.2 KB gzip

A playful drum sting for comic beats.

<button class="demo-btn" type="button" data-sound="drum-punch">Joke</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0.2`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Marker stroke

0.1 KB gzip

A quick marker stroke for underlines and circles.

<button class="demo-btn" type="button" data-sound="marker-stroke">Underline</button>

Attribute	Default	What it does
`data-motion-volume`	`1`	loudness of this sound on top of the page level, which starts quiet
`data-motion-pitch`	`0`	semitones up or down
`data-motion-tone`	`0`	darker below 0, brighter above 0
`data-motion-length`	`1`	stretches (above 1) or shortens (below 1) the sound
`data-motion-space`	`0`	how much of the soft room around it
`data-motion-on`	`click`	click, press (pointer down), hover (mouse only), focus, key (typing in a field) or input (a slider moving)

Where Rust pays, and where not

Text and DOM motion: small JavaScript and CSS. The browser already animates transform and opacity off the main thread; a WebAssembly module would only add a download and a bridge.
Shader backgrounds: GLSL on the graphics card, with one shared WebGL runner of about 2 KB. The work happens on the GPU either way.
Heavy simulation: Rust compiled to WebAssembly. Particles test every pair of balls 120 times a second, and the same seed gives the same scene, bit for bit, on every machine. The module has no dependencies and no imports.
The build and CDN tool: Rust. It content-hashes every file, moves a file to a new ?v= number only when its bytes change, writes the sha384 integrity hashes, checks the size budgets and renders this page.

A page with a strict script-src needs 'wasm-unsafe-eval' only when it uses particles; everything else runs under script-src 'self' and style-src 'self'.

Sizes and budgets

Measured by the build at the strongest gzip level; a test fails the build when a file grows past its budget.

File	Bytes	Gzip	Budget
`accept-fill.js`	164	154	307 B gzip
`alert-pulse.js`	176	150	307 B gzip
`arc-gallery.js`	4470	2056	4671 B gzip
`attention-nudge.js`	169	149	307 B gzip
`aurora.js`	1402	735	5120 B gzip
`backgrounds-kit.js`	8178	3465	4335 B gzip
`blob-merge.js`	1671	875	5120 B gzip
`blob-nav.js`	4485	1984	4607 B gzip
`block-warp.js`	2491	1245	5120 B gzip
`blur-text.js`	154	142	4096 B gzip
`boom-distant.js`	166	146	307 B gzip
`boom-thunder.js`	183	164	307 B gzip
`breath-in.js`	134	138	307 B gzip
`breath-out.js`	134	138	307 B gzip
`bubbles-rise.js`	156	149	307 B gzip
`burst-menu.js`	4502	1846	5035 B gzip
`call-join.js`	209	167	307 B gzip
`camera-focus.js`	180	162	307 B gzip
`camera-shutter.js`	207	171	307 B gzip
`card-deck.js`	6199	2421	5086 B gzip
`card-drawer.js`	5268	1938	5207 B gzip
`card-fan.js`	3910	1693	4397 B gzip
`carousel.js`	8467	3120	5300 B gzip
`cascade-menu.js`	5957	2169	5247 B gzip
`chest-open.js`	263	190	307 B gzip
`chrome-pool.js`	1591	819	5120 B gzip
`click-spark.js`	2104	1069	4185 B gzip
`code-input.js`	2903	1407	4745 B gzip
`color-fold.js`	1312	704	5120 B gzip
`color-lens.js`	4212	1771	4802 B gzip
`components-kit.js`	10070	3943	5264 B gzip
`confetti.js`	184	164	307 B gzip
`core.js`	3290	1401	4096 B gzip
`count-ticks.js`	167	152	307 B gzip
`count-up.js`	1822	938	4234 B gzip
`countdown.js`	170	155	307 B gzip
`crosshair.js`	4847	2061	4784 B gzip
`crt-glow.js`	2255	1071	5120 B gzip
`cube-field.js`	5976	2570	4273 B gzip
`curve-marquee.js`	4258	1842	4404 B gzip
`data-chirp.js`	175	157	307 B gzip
`decode.js`	2539	1138	4194 B gzip
`device-plug.js`	230	180	307 B gzip
`dismiss-flick.js`	146	140	307 B gzip
`dither-veil.js`	3030	1498	5120 B gzip
`doc-folder.js`	4666	1770	4981 B gzip
`dock.js`	6773	2608	5152 B gzip
`dodge.js`	2627	1290	4424 B gzip
`done-bloom.js`	176	151	307 B gzip
`done-crest.js`	252	169	307 B gzip
`done-settle.js`	161	149	307 B gzip
`done-summit.js`	229	175	307 B gzip
`dot-lens.js`	1380	755	5120 B gzip
`download-done.js`	174	160	307 B gzip
`drag-cancel.js`	142	141	307 B gzip
`drag-drop.js`	147	145	307 B gzip
`drag-pick.js`	172	162	307 B gzip
`drawer-slide.js`	192	168	307 B gzip
`drone-unease.js`	198	157	307 B gzip
`drop-plunge.js`	175	158	307 B gzip
`drum-punch.js`	220	173	307 B gzip
`dust-type.js`	4712	2045	4275 B gzip
`edge-glow.js`	4088	1812	4660 B gzip
`electric-edge.js`	5991	2622	4375 B gzip
`electric-zap.js`	190	167	307 B gzip
`ember-eye.js`	1987	980	5120 B gzip
`error-buzz.js`	170	148	307 B gzip
`error-crunch.js`	189	167	307 B gzip
`error-shake.js`	172	155	307 B gzip
`error-shrug.js`	178	153	307 B gzip
`event-cue.js`	171	148	307 B gzip
`fade-vanish.js`	172	159	307 B gzip
`ferro-sea.js`	1992	1034	5120 B gzip
`fiber-tunnel.js`	2344	1222	5319 B gzip
`fiber-veil.js`	1571	840	5120 B gzip
`fizz-bubbles.js`	179	164	307 B gzip
`flip-board.js`	4621	2081	4703 B gzip
`flip-card.js`	4344	1969	4705 B gzip
`fly-pass.js`	171	161	307 B gzip
`focus-frame.js`	2934	1330	4441 B gzip
`foil-card.js`	4693	1987	5079 B gzip
`fold-flutter.js`	264	181	307 B gzip
`folder-dive.js`	170	160	307 B gzip
`frost-icons.js`	3121	1300	4855 B gzip
`fuse-undo.js`	3789	1506	4686 B gzip
`gl.js`	4114	2128	4096 B gzip
`glare-sweep.js`	2829	1298	4590 B gzip
`glass-tiles.js`	1971	976	5120 B gzip
`glitch-scramble.js`	181	163	307 B gzip
`glitch-stutter.js`	170	155	307 B gzip
`glow-trail.js`	4869	2214	4397 B gzip
`gradient-text.js`	839	505	4300 B gzip
`grain-gradient.js`	2493	1287	5312 B gzip
`halftone-lens.js`	4948	2177	4350 B gzip
`heartbeat-slow.js`	195	164	307 B gzip
`hit-anvil.js`	181	166	307 B gzip
`hit-crystal.js`	227	195	307 B gzip
`hit-slam.js`	162	155	307 B gzip
`hit-timber.js`	166	154	307 B gzip
`hit-velvet.js`	174	157	307 B gzip
`hold-confirm.js`	3021	1265	4594 B gzip
`hover-glow.js`	155	145	307 B gzip
`image-trail.js`	3458	1510	4418 B gzip
`info-hint.js`	147	144	307 B gzip
`ink-flow.js`	3807	1564	5120 B gzip
`jelly-dots.js`	5751	2489	4360 B gzip
`join-vibes.js`	216	172	307 B gzip
`key-chiclet.js`	165	155	307 B gzip
`key-enter.js`	176	159	307 B gzip
`key-erase.js`	188	170	307 B gzip
`key-laptop.js`	196	172	307 B gzip
`key-thock.js`	177	162	307 B gzip
`key-type.js`	190	163	307 B gzip
`lens-warp.js`	4320	1876	4247 B gzip
`level-up.js`	193	167	307 B gzip
`lift-field.js`	2366	1164	4096 B gzip
`light-column.js`	2802	1405	5329 B gzip
`light-rays.js`	3152	1624	5325 B gzip
`light-road.js`	2434	1216	5120 B gzip
`light-streaks.js`	2868	1443	5309 B gzip
`lightning.js`	3539	1776	5323 B gzip
`like-heart.js`	3378	1434	4805 B gzip
`like-pulse.js`	186	159	307 B gzip
`liquid-cursor.js`	2893	1437	5120 B gzip
`live-wire.js`	3248	1536	5120 B gzip
`loading-pulse.js`	171	147	307 B gzip
`lock-seal.js`	167	153	307 B gzip
`logo-reveal.js`	249	184	307 B gzip
`magic-portal.js`	243	182	307 B gzip
`magic-wand.js`	180	166	307 B gzip
`magnet.js`	1619	816	4201 B gzip
`marker-stroke.js`	156	151	307 B gzip
`marquee-menu.js`	2961	1349	4627 B gzip
`marquee.js`	1654	846	4203 B gzip
`masonry.js`	3641	1656	4684 B gzip
`melt-card.js`	2891	1407	4377 B gzip
`mention-call.js`	183	157	307 B gzip
`menu-pop.js`	145	144	307 B gzip
`message-bubble.js`	168	151	307 B gzip
`message-ripple.js`	168	152	307 B gzip
`motion.css`	2163	707	none
`motion.js`	5300	2731	3 KB gzip
`mute-switch.js`	412	239	307 B gzip
`nav-back.js`	154	146	307 B gzip
`nav-next.js`	157	147	307 B gzip
`needle-field.js`	1464	777	5120 B gzip
`night-drone.js`	202	170	307 B gzip
`notify-chime.js`	214	159	307 B gzip
`notify-ding.js`	154	147	307 B gzip
`notify-kalimba.js`	217	177	307 B gzip
`notify-ping.js`	156	148	307 B gzip
`notify-toggle.js`	2629	1177	4732 B gzip
`oil-film.js`	1283	715	5120 B gzip
`outline-draw.js`	3132	1364	4511 B gzip
`pad-calm.js`	222	164	307 B gzip
`pad-nebula.js`	231	188	307 B gzip
`page-turn.js`	169	160	307 B gzip
`paint-swirl.js`	1569	829	5120 B gzip
`particles.js`	2666	1302	4096 B gzip
`particles.wasm`	5378	2924	40 KB
`pixel-blip.js`	163	144	307 B gzip
`plasma-ribbons.js`	1602	836	5120 B gzip
`play-pause.js`	244	178	307 B gzip
`polar-lights.js`	1520	820	5120 B gzip
`pop-appear.js`	152	148	307 B gzip
`pop-balloon.js`	145	143	307 B gzip
`pop-cork.js`	183	169	307 B gzip
`pop-select.js`	7921	2902	5027 B gzip
`pop-sprout.js`	156	152	307 B gzip
`power-glow.js`	312	209	307 B gzip
`proximity-list.js`	2795	1232	4666 B gzip
`rain-glass.js`	200	176	307 B gzip
`react-pop.js`	151	146	307 B gzip
`read-receipt.js`	197	161	307 B gzip
`record-beep.js`	208	160	307 B gzip
`remind-wood.js`	186	155	307 B gzip
`reorder-shuffle.js`	160	150	307 B gzip
`reveal.js`	1648	724	4271 B gzip
`reward-coin.js`	161	149	307 B gzip
`reward-sparkle.js`	179	162	307 B gzip
`ring-dial.js`	4360	1938	4599 B gzip
`ring-text.js`	3073	1421	4288 B gzip
`rise-nav.js`	6250	2205	5078 B gzip
`riser-lift.js`	139	140	307 B gzip
`riser-swell.js`	169	155	307 B gzip
`room-tone.js`	177	150	307 B gzip
`scramble-hover.js`	2298	1045	4194 B gzip
`scrub-number.js`	5128	1993	4728 B gzip
`segmented.js`	2439	1207	4602 B gzip
`send-lift.js`	168	158	307 B gzip
`shape-tide.js`	1456	818	5120 B gzip
`sheet-close.js`	167	158	307 B gzip
`sheet-open.js`	167	155	307 B gzip
`shimmer-rise.js`	187	166	307 B gzip
`shiny.js`	744	423	4368 B gzip
`silk.js`	1328	709	5120 B gzip
`slat-sea.js`	1739	924	5120 B gzip
`slide-confirm.js`	4492	1803	4938 B gzip
`slot-text.js`	3752	1552	4536 B gzip
`smoke-trail.js`	1649	938	5120 B gzip
`snap-grid.js`	187	167	307 B gzip
`sounds-kit.js`	10072	3822	4096 B gzip
`spark-tiny.js`	155	150	307 B gzip
`split-text.js`	3059	1286	4342 B gzip
`spotlight.js`	1077	584	4387 B gzip
`squeak-toy.js`	175	158	307 B gzip
`stack-cascade.js`	171	156	307 B gzip
`star-warp.js`	2337	1179	5120 B gzip
`step-level.js`	149	145	307 B gzip
`step-notch.js`	150	145	307 B gzip
`stepper.js`	8098	2841	5547 B gzip
`sting-circuit.js`	200	168	307 B gzip
`sting-emblem.js`	194	157	307 B gzip
`storm-orb.js`	1990	991	5120 B gzip
`streak-wood.js`	171	150	307 B gzip
`stretch-switch.js`	3396	1599	4657 B gzip
`swarm.js`	2847	1331	4096 B gzip
`swell-radio.js`	2189	1084	4676 B gzip
`swipe-swish.js`	145	142	307 B gzip
`swish-silk.js`	165	157	307 B gzip
`switch-click.js`	304	190	307 B gzip
`switch-rocker.js`	320	192	307 B gzip
`switch-spring.js`	260	173	307 B gzip
`sync-orbit.js`	220	171	307 B gzip
`tab-flick.js`	145	145	307 B gzip
`tab-glide.js`	166	146	307 B gzip
`tap-air.js`	136	139	307 B gzip
`tap-blop.js`	141	141	307 B gzip
`tap-boop.js`	151	144	307 B gzip
`tap-cushion.js`	183	164	307 B gzip
`tap-dot.js`	111	119	307 B gzip
`tap-felt.js`	163	152	307 B gzip
`tap-glass.js`	157	150	307 B gzip
`tap-halo.js`	164	152	307 B gzip
`tap-marble.js`	165	154	307 B gzip
`tap-metal.js`	153	150	307 B gzip
`tap-petal.js`	142	141	307 B gzip
`tap-pluck.js`	148	146	307 B gzip
`tap-round.js`	151	146	307 B gzip
`tap-tick.js`	143	144	307 B gzip
`tap-tiny.js`	141	142	307 B gzip
`tap-wood.js`	158	150	307 B gzip
`tape-rewind.js`	200	170	307 B gzip
`tape-stop.js`	205	163	307 B gzip
`text-kit.js`	6320	2667	4300 B gzip
`text-ticker.js`	173	154	307 B gzip
`theme-switch.js`	274	203	307 B gzip
`tick-check.js`	2415	1200	4595 B gzip
`tick-slider.js`	2401	1226	4573 B gzip
`tile-wall.js`	1556	822	5120 B gzip
`tilt.js`	2074	973	4373 B gzip
`timer-tick.js`	158	148	307 B gzip
`tip-group.js`	2956	1351	4599 B gzip
`title-banner.js`	201	173	307 B gzip
`title-slide.js`	155	145	307 B gzip
`toast.js`	7592	3025	5141 B gzip
`tremble-high.js`	213	175	307 B gzip
`tumble.js`	8222	3166	4367 B gzip
`twinkle-dust.js`	159	150	307 B gzip
`typewriter.js`	3694	1599	4432 B gzip
`typing-dots.js`	158	146	307 B gzip
`undo-rewind.js`	180	163	307 B gzip
`unlock-air.js`	186	168	307 B gzip
`upload-done.js`	175	162	307 B gzip
`veil.js`	2343	1259	5346 B gzip
`warn-low.js`	195	160	307 B gzip
`water-deep.js`	202	170	307 B gzip
`water-ripple.js`	3728	1709	5120 B gzip
`wheel-picker.js`	4495	2039	4596 B gzip
`whip-crack.js`	162	156	307 B gzip
`whoosh-drift.js`	150	146	307 B gzip
`whoosh-gale.js`	202	174	307 B gzip
`whoosh-gust.js`	170	159	307 B gzip
`whoosh-spin.js`	157	153	307 B gzip
`whoosh-swoop.js`	205	172	307 B gzip
`whoosh-twin.js`	154	150	307 B gzip
`wind-soft.js`	201	171	307 B gzip
`wipe-tone.js`	166	149	307 B gzip
`wire-text.js`	5610	2253	4735 B gzip
`word-cycle.js`	3878	1592	4605 B gzip
`zoom-in.js`	226	186	307 B gzip