# axi0 Motion

> 295 small, framework-free motion effects for the web: text, interaction, components, backgrounds and interface sounds. One script tag loads only the effects a page uses, on any site. Every effect has a live demo, options and code for HTML, React, Vue and JavaScript.

Load it once, in the head of any page:

```html
<script src="https://search.axi0.io/axi0/motion/motion.js" defer></script>
```

Then mark what should move: `data-motion="ID"` on an element, `<axi0-ID>` for backgrounds and components, `data-sound="ID"` on a button (or `axi0Motion.sound("ID")` from code). Options are attributes: `data-motion-NAME` beside `data-motion`, plain attributes on `<axi0-ID>`. With reduced motion every effect shows its final state, and each one pauses off screen and in hidden tabs.

## Pages

- [Skill file](https://search.axi0.io/motion/skill.md): instructions that teach a coding assistant to use the library
- [Background Studio](https://search.axi0.io/motion/studio/): pick a background, tune it on a large stage and copy its code
- [For coding assistants](https://search.axi0.io/motion/ai/): A skill file to hand the assistant that writes your code, and a plain index of every axi0 Motion effect with its group and size.
- [Get started](https://search.axi0.io/motion/get-started/): Add axi0 Motion to any site with one script tag and your first effect in two lines; sounds from code, the React and Vue wrappers, reduced motion, sizes, browser support and a copy you host yourself.
- [Pro](https://search.axi0.io/motion/pro/): axi0 Motion Pro: premium effects, page blocks, complete templates and an agent kit, from $129 once or $79 a year. The library on this site stays free. Payments open soon.
- [Showcase](https://search.axi0.io/motion/showcase/): Pages that run axi0 Motion today, listed only when they really load the library.
- [Tools](https://search.axi0.io/motion/tools/): Background Studio: pick an axi0 Motion background, tune every option live on a large stage and copy the code for HTML, React, Vue or JavaScript.
- [Files and hashes](https://search.axi0.io/axi0/motion/manifest.json): every published file with its size and integrity hash

## Text

- [Split text](https://search.axi0.io/motion/split-text/): Words, or letters, rise into place one after another the first time the text scrolls into view. Use: `data-motion="split-text"`
- [Blur text](https://search.axi0.io/motion/blur-text/): Words, or letters, come into focus out of a soft blur, one after another. Use: `data-motion="blur-text"`
- [Shiny text](https://search.axi0.io/motion/shiny/): A band of light sweeps across the text, again and again. Use: `data-motion="shiny"`
- [Gradient text](https://search.axi0.io/motion/gradient-text/): The text fills with colors that flow slowly along it. Use: `data-motion="gradient-text"`
- [Count up](https://search.axi0.io/motion/count-up/): A number counts up to its value when it scrolls into view, in the page's own format. Use: `data-motion="count-up"`
- [Curve marquee](https://search.axi0.io/motion/curve-marquee/): 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. Use: `data-motion="curve-marquee"`
- [Decode](https://search.axi0.io/motion/decode/): Random glyphs cycle under every letter until each one locks into the real text. Use: `data-motion="decode"`
- [Dust type](https://search.axi0.io/motion/dust-type/): The text gathers out of drifting dust; the pointer scatters it and a click blows it apart before it settles back. Use: `data-motion="dust-type"`
- [Flip board](https://search.axi0.io/motion/flip-board/): A split-flap board: every tile clacks through the letters to the next phrase. Use: `data-motion="flip-board"`
- [Focus frame](https://search.axi0.io/motion/focus-frame/): One word at a time comes into focus inside gliding corner brackets while the rest stay soft. Use: `data-motion="focus-frame"`
- [Lens warp](https://search.axi0.io/motion/lens-warp/): 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. Use: `data-motion="lens-warp"`
- [Outline draw](https://search.axi0.io/motion/outline-draw/): The letters' outlines draw themselves on, word after word, then flood with color. Use: `data-motion="outline-draw"`
- [Ring text](https://search.axi0.io/motion/ring-text/): The letters sit around a circle that turns slowly; hovering speeds it up, slows it, pauses it or sends it spinning. Use: `data-motion="ring-text"`
- [Scramble hover](https://search.axi0.io/motion/scramble-hover/): Letters near the pointer break into random glyphs and settle back as it moves on. Use: `data-motion="scramble-hover"`
- [Slot text](https://search.axi0.io/motion/slot-text/): Each letter spins through a reel of random glyphs and lands on the real one, one after another. Use: `data-motion="slot-text"`
- [Tumble](https://search.axi0.io/motion/tumble/): The words break loose and tumble into a pile you can drag and throw; click the pile and they fly home. Use: `data-motion="tumble"`
- [Typewriter](https://search.axi0.io/motion/typewriter/): Types the text letter by letter behind a blinking cursor; with phrases it erases each one and types the next. Use: `data-motion="typewriter"`
- [Wire text](https://search.axi0.io/motion/wire-text/): 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. Use: `data-motion="wire-text"`
- [Word cycle](https://search.axi0.io/motion/word-cycle/): A word cycles through a list, letter by letter, on a colored pill that fits each word. Use: `data-motion="word-cycle"`

## Interaction

- [Magnet](https://search.axi0.io/motion/magnet/): An element leans toward the pointer when it comes near, then settles back. Use: `data-motion="magnet"`
- [Click spark](https://search.axi0.io/motion/click-spark/): Each click throws a ring of small sparks from the pointer. Use: `data-motion="click-spark"`
- [Reveal](https://search.axi0.io/motion/reveal/): Content slides and fades into place the first time it scrolls into view. Use: `data-motion="reveal"`
- [Bento glow](https://search.axi0.io/motion/bento-glow/): A grid of cards lit by one light that follows the pointer across them, catching every nearby edge, with a wave of light on click. Use: `<div class="my-grid" data-motion="bento-glow"> ...cards... </div>`
- [Card fan](https://search.axi0.io/motion/card-fan/): A fan of cards bounces in; the one under the pointer straightens while the others make room. Use: `data-motion="card-fan"`
- [Card pile](https://search.axi0.io/motion/card-pile/): A pile of cards you drag, flick or click through; a thrown card flies off and tucks back in at the bottom of the pile. Use: `<div data-motion="card-pile"> ...cards... </div>`
- [Color lens](https://search.axi0.io/motion/color-lens/): Grayscale cards get their color back under a soft lens that follows the pointer. Use: `data-motion="color-lens"`
- [Crosshair](https://search.axi0.io/motion/crosshair/): Hairlines follow the pointer with its position and lock onto links and buttons to measure them. Use: `data-motion="crosshair"`
- [Cube field](https://search.axi0.io/motion/cube-field/): Outlined 3D cubes turn to face the pointer, spin when swept and ripple on click. Use: `data-motion="cube-field"`
- [Dither cloud](https://search.axi0.io/motion/dither-cloud/): Soft drifting clouds drawn in ordered-dither pixels, violet to pale lilac as they thicken, that glow up under the pointer and ripple outward on click. Use: `<axi0-dither-cloud cover></axi0-dither-cloud>`
- [Dodge](https://search.axi0.io/motion/dodge/): Children slip away from the pointer, then glide home when it rests. Use: `data-motion="dodge"`
- [Edge glow](https://search.axi0.io/motion/edge-glow/): A gradient border glows on the side nearest the pointer, brightest at the edge. Use: `data-motion="edge-glow"`
- [Electric edge](https://search.axi0.io/motion/electric-edge/): Crackling strands of current wrap an element and surge near the pointer. Use: `data-motion="electric-edge"`
- [Fiber tunnel](https://search.axi0.io/motion/fiber-tunnel/): Comets of light race down a swirling tunnel of fibers that the pointer steers. Use: `<axi0-fiber-tunnel cover></axi0-fiber-tunnel>`
- [Flip card](https://search.axi0.io/motion/flip-card/): A two-faced card turns over on a click, drag or flick and settles on a spring. Use: `data-motion="flip-card"`
- [Foil card](https://search.axi0.io/motion/foil-card/): A collectible card tilts toward the pointer while its foil and glitter catch the light. Use: `data-motion="foil-card"`
- [Glare sweep](https://search.axi0.io/motion/glare-sweep/): A glossy streak of light sweeps across in the direction the pointer moves. Use: `data-motion="glare-sweep"`
- [Glint button](https://search.axi0.io/motion/glint-button/): A glass button whose rim catches the light, with a highlight that glides toward the pointer and drifts round the edge at rest. Use: `<button data-motion="glint-button">Get started</button>`
- [Glow trail](https://search.axi0.io/motion/glow-trail/): Light pours from the pointer, drifts up and cools as it fades. Use: `data-motion="glow-trail"`
- [Glow web](https://search.axi0.io/motion/glow-web/): Glowing threads weave across the dark and meet at luminous pinch points; they light up under the pointer and carry pulses of light on click. Use: `<axi0-glow-web cover></axi0-glow-web>`
- [Grain gradient](https://search.axi0.io/motion/grain-gradient/): Flowing grainy gradients that the pointer stirs like paint. Use: `<axi0-grain-gradient cover></axi0-grain-gradient>`
- [Halftone lens](https://search.axi0.io/motion/halftone-lens/): A halftone print of a picture whose dots swell into the real photo under the pointer. Use: `data-motion="halftone-lens"`
- [Halo orb](https://search.axi0.io/motion/halo-orb/): A glowing ring of swirling color breathes slowly, trails an orbiting light round its rim and reaches toward the pointer. Use: `<axi0-halo-orb cover></axi0-halo-orb>`
- [Image trail](https://search.axi0.io/motion/image-trail/): Pictures appear along the pointer's path and fade behind it, in four styles. Use: `data-motion="image-trail"`
- [Jelly dots](https://search.axi0.io/motion/jelly-dots/): A springy dot grid the pointer drags through like jelly, with click shockwaves. Use: `data-motion="jelly-dots"`
- [Light column](https://search.axi0.io/motion/light-column/): A swirling pillar of light ignites, leans toward the pointer and surges on a click. Use: `<axi0-light-column cover></axi0-light-column>`
- [Light prism](https://search.axi0.io/motion/light-prism/): A glass pyramid turns slowly in the dark, its edges glowing in light split into a spectrum; the pointer tilts it toward itself. Use: `<axi0-light-prism cover></axi0-light-prism>`
- [Light rays](https://search.axi0.io/motion/light-rays/): Volumetric rays pour from an edge; the pointer steers the beam and casts a shadow. Use: `<axi0-light-rays cover></axi0-light-rays>`
- [Light streaks](https://search.axi0.io/motion/light-streaks/): Streaks of light fall down a curved tunnel, bend around the pointer and warp while held. Use: `<axi0-light-streaks cover></axi0-light-streaks>`
- [Lightning](https://search.axi0.io/motion/lightning/): A crackling, branching bolt bends toward the pointer and strikes where you click. Use: `<axi0-lightning cover></axi0-lightning>`
- [Line sway](https://search.axi0.io/motion/line-sway/): Dense vertical lines sway like silk, bend away from the pointer, glow where they are pushed and spring back into place. Use: `<axi0-line-sway cover></axi0-line-sway>`
- [Melt card](https://search.axi0.io/motion/melt-card/): A picture tears and melts as the pointer moves, then pulls itself back together. Use: `data-motion="melt-card"`
- [Molten flow](https://search.axi0.io/motion/molten-flow/): Swirling caustic filaments glow from deep violet to white-hot, heat up under the pointer and flare outward on click. Use: `<axi0-molten-flow cover></axi0-molten-flow>`
- [Near type](https://search.axi0.io/motion/near-type/): Letters grow bolder the closer the pointer comes, and their neighbors slide apart to make room, so the line breathes without moving the page. Use: `<h2 data-motion="near-type">Bring the pointer close</h2>`
- [Orbit border](https://search.axi0.io/motion/orbit-border/): A twinkling star runs the exact outline of any button, pill or card, trailing light and stardust, and speeds up under the pointer. Use: `<button data-motion="orbit-border">Get started</button>`
- [Pixel bloom](https://search.axi0.io/motion/pixel-bloom/): A card fills with twinkling pixels while it is pointed at or focused, rippling out from where the pointer came in, and drains away when it leaves. Use: `<a class="card" href="/pro" data-motion="pixel-bloom"> ... </a>`
- [Pixel flurry](https://search.axi0.io/motion/pixel-flurry/): Pixel-art snowflakes drift down in layers of depth, the near ones big and bright, and the pointer brushes them aside as it moves. Use: `<axi0-pixel-flurry cover></axi0-pixel-flurry>`
- [Pixel goo](https://search.axi0.io/motion/pixel-goo/): Glossy pixels melt into a goo trail behind the pointer, warming from cream to violet as they age, with drops that drip away. Use: `<axi0-pixel-goo cover></axi0-pixel-goo>`
- [Pixel wipe](https://search.axi0.io/motion/pixel-wipe/): A second picture builds in over the first pixel by pixel, in a springy wave that starts wherever the pointer comes in, and pulls back out the same way. Use: `<div data-motion="pixel-wipe"><img src="day.jpg" alt="..."><img src="night.jpg" alt="..."></div>`
- [Proximity list](https://search.axi0.io/motion/proximity-list/): List items lean out and light up as the pointer passes near them. Use: `data-motion="proximity-list"`
- [Pulse rings](https://search.axi0.io/motion/pulse-rings/): Glowing rings pulse outward in a slow wave, swell toward the pointer and flare with a shock ring on click. Use: `<axi0-pulse-rings cover></axi0-pulse-rings>`
- [Radar sweep](https://search.axi0.io/motion/radar-sweep/): A radar scope whose sweep leaves a phosphor afterglow and picks up moving contacts, the pointer among them, with a ping on click. Use: `<axi0-radar-sweep cover></axi0-radar-sweep>`
- [Ribbon trail](https://search.axi0.io/motion/ribbon-trail/): Springy ribbons chase the pointer, each on its own spring so they part on turns and gather when it rests, in lens, comet or even shapes. Use: `<axi0-ribbon-trail cover></axi0-ribbon-trail>`
- [Shape lattice](https://search.axi0.io/motion/shape-lattice/): A drifting grid of squares, circles, triangles or hexagons lights up under the pointer and leaves a fading rainbow trail that drifts with it. Use: `<axi0-shape-lattice cover></axi0-shape-lattice>`
- [Snap reticle](https://search.axi0.io/motion/snap-reticle/): A reticle follows the pointer, spinning gently, and its corner brackets snap around buttons and links, matching their size and corners. Use: `<div data-motion="snap-reticle"> ...buttons and links... </div>`
- [Spectral burst](https://search.axi0.io/motion/spectral-burst/): A burst of prismatic light rays fans out from a bright core, leans toward the pointer and sends a wave of light outward on click. Use: `<axi0-spectral-burst cover></axi0-spectral-burst>`
- [Star rate](https://search.axi0.io/motion/star-rate/): A star rating whose stars lift in a wave up to the pointer, name the score above it and pop when one is chosen. Use: `<input type="range" min="0" max="5" step="1" value="4" data-motion="star-rate">`
- [Veil](https://search.axi0.io/motion/veil/): A silky veil of light drifts through the dark and bends around the pointer. Use: `<axi0-veil cover></axi0-veil>`
- [Wave grid](https://search.axi0.io/motion/wave-grid/): A crisp grid ripples like water around the pointer, bending and lighting up as each wave passes, with a splash ring on click. Use: `<axi0-wave-grid cover></axi0-wave-grid>`

## Components

- [Carousel](https://search.axi0.io/motion/carousel/): 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. Use: `data-motion="carousel"`
- [Spotlight card](https://search.axi0.io/motion/spotlight/): A soft light follows the pointer across a card. Use: `data-motion="spotlight"`
- [Dock](https://search.axi0.io/motion/dock/): A row of icons that swell toward the pointer and part to make room, with labels that rise above them, launch bounces and badges. Use: `data-motion="dock"`
- [Tilt card](https://search.axi0.io/motion/tilt/): A card leans toward the pointer in 3D, with a soft glare. Use: `data-motion="tilt"`
- [Marquee](https://search.axi0.io/motion/marquee/): A row of items scrolls sideways without end and speeds up while the page scrolls. Use: `data-motion="marquee"`
- [Stepper](https://search.axi0.io/motion/stepper/): 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. Use: `data-motion="stepper"`
- [Toast](https://search.axi0.io/motion/toast/): 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. Use: `data-motion="toast"`
- [Rise nav](https://search.axi0.io/motion/rise-nav/): 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. Use: `<nav data-motion="rise-nav" aria-label="Main">…links…</nav>`
- [Blob nav](https://search.axi0.io/motion/blob-nav/): A nav bar whose active pill breaks into drops of goo that flow over to the link you pick. Use: `<nav data-motion="blob-nav" aria-label="Main">…links…</nav>`
- [Pop select](https://search.axi0.io/motion/pop-select/): A select chip whose list pops open from its corner while the highlight glides from row to row; it drives the real select underneath. Use: `<select data-motion="pop-select">…</select>`
- [Stretch switch](https://search.axi0.io/motion/stretch-switch/): A switch whose thumb stretches with its speed and squashes against the end it hits; flick it, drag it or press Space. Use: `<label>Wi-Fi <input type="checkbox" role="switch" data-motion="stretch-switch"></label>`
- [Burst menu](https://search.axi0.io/motion/burst-menu/): 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. Use: `<nav data-motion="burst-menu" aria-label="Main">…links…</nav>`
- [Cascade menu](https://search.axi0.io/motion/cascade-menu/): A menu button that sweeps colored layers and then a panel in from the side, its numbered links rising one after another. Use: `<nav data-motion="cascade-menu" aria-label="Main">…links…</nav>`
- [Card drawer](https://search.axi0.io/motion/card-drawer/): A floating nav bar that springs open into a row of cards, each a group of links, revealed by a clip that only repaints. Use: `<nav data-motion="card-drawer" aria-label="Main">…sections of links…</nav>`
- [Marquee menu](https://search.axi0.io/motion/marquee-menu/): 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. Use: `<nav data-motion="marquee-menu" aria-label="Places">…links with data-image…</nav>`
- [Masonry](https://search.axi0.io/motion/masonry/): 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. Use: `<div data-motion="masonry">…figures with img and figcaption…</div>`
- [Arc gallery](https://search.axi0.io/motion/arc-gallery/): 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. Use: `<div data-motion="arc-gallery" aria-label="Places">…figures…</div>`
- [Card deck](https://search.axi0.io/motion/card-deck/): 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. Use: `<div data-motion="card-deck" aria-label="Highlights">…cards…</div>`
- [Doc folder](https://search.axi0.io/motion/doc-folder/): 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. Use: `<div data-motion="doc-folder" aria-label="Project files">…links…</div>`
- [Tick slider](https://search.axi0.io/motion/tick-slider/): 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. Use: `<input type="range" data-motion="tick-slider" aria-label="Volume">`
- [Ring dial](https://search.axi0.io/motion/ring-dial/): 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. Use: `<input type="range" data-motion="ring-dial" aria-label="Level">`
- [Slide confirm](https://search.axi0.io/motion/slide-confirm/): 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. Use: `<button type="button" data-motion="slide-confirm">Slide to pay</button>`
- [Wheel picker](https://search.axi0.io/motion/wheel-picker/): 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. Use: `<select data-motion="wheel-picker" aria-label="Genre">…</select>`
- [Tick check](https://search.axi0.io/motion/tick-check/): A checkbox row where one spring fills the box, draws the tick and strikes through the label. Use: `<label><input type="checkbox" data-motion="tick-check"> Ship the build</label>`
- [Swell radio](https://search.axi0.io/motion/swell-radio/): A radio group of chips where the chosen one swells with a wobble and nudges its neighbors outward. Use: `<fieldset data-motion="swell-radio">…labels with radio inputs…</fieldset>`
- [Segmented](https://search.axi0.io/motion/segmented/): A segmented control whose thumb stretches across the gap as it travels and squashes into place. Use: `<fieldset data-motion="segmented">…labels with radio inputs…</fieldset>`
- [Notify toggle](https://search.axi0.io/motion/notify-toggle/): A pill toggle: pressing it rings the bell, crossfades the label and floods the pill with color. Use: `<button type="button" data-motion="notify-toggle" aria-pressed="false">Notify me</button>`
- [Hold confirm](https://search.axi0.io/motion/hold-confirm/): 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. Use: `<button type="button" data-motion="hold-confirm">Hold to delete</button>`
- [Fuse undo](https://search.axi0.io/motion/fuse-undo/): An action button whose done state carries an Undo on a burning fuse; the action commits only when the fuse runs out. Use: `<button type="button" data-motion="fuse-undo">Archive</button>`
- [Like heart](https://search.axi0.io/motion/like-heart/): A like button whose heart squeezes to a dot, flips color and bursts back while the count rolls over to the next number. Use: `<button type="button" data-motion="like-heart" aria-pressed="false" data-motion-count="1204">Like</button>`
- [Code input](https://search.axi0.io/motion/code-input/): 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. Use: `<input data-motion="code-input" inputmode="numeric" autocomplete="one-time-code" maxlength="6" aria-label="Code">`
- [Frost icons](https://search.axi0.io/motion/frost-icons/): Icon tiles of frosted glass over a tilted color plate that swings up and lights the glass when you point at or focus them. Use: `<div data-motion="frost-icons">…links or buttons with an icon and aria-label…</div>`
- [Tip group](https://search.axi0.io/motion/tip-group/): 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. Use: `<div data-motion="tip-group" role="toolbar" aria-label="Formatting">…buttons with aria-label…</div>`
- [Scrub number](https://search.axi0.io/motion/scrub-number/): 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. Use: `data-motion="scrub-number"`

## Backgrounds

- [Aurora](https://search.axi0.io/motion/aurora/): Soft curtains of colored light drift across a background. Use: `<axi0-aurora></axi0-aurora>`
- [Silk](https://search.axi0.io/motion/silk/): Folds of fabric ripple slowly across a background, with a fine film grain. Use: `<axi0-silk></axi0-silk>`
- [Particles](https://search.axi0.io/motion/particles/): Balls fall, bounce and collide in a scene computed in WebAssembly. Use: `<axi0-particles></axi0-particles>`
- [Blob merge](https://search.axi0.io/motion/blob-merge/): Glossy liquid blobs drift, merge, stretch and pinch apart; one more follows the pointer through them. Use: `<axi0-blob-merge cover></axi0-blob-merge>`
- [Block warp](https://search.axi0.io/motion/block-warp/): A picture that breaks into a grid of blocks where the pointer moves and settles back into place. Use: `<axi0-block-warp cover></axi0-block-warp>`
- [Chrome pool](https://search.axi0.io/motion/chrome-pool/): Soft ribbons of liquid chrome swirl through a pool, catch the light and ripple under the pointer. Use: `<axi0-chrome-pool cover></axi0-chrome-pool>`
- [Color fold](https://search.axi0.io/motion/color-fold/): Broad ribbons of glowing color bend and fold across the frame in slow, smooth sweeps. Use: `<axi0-color-fold cover></axi0-color-fold>`
- [CRT glow](https://search.axi0.io/motion/crt-glow/): A blocky plasma glows on a curved tube screen with scanlines, phosphor dots, afterglow and a power-on intro. Use: `<axi0-crt-glow cover></axi0-crt-glow>`
- [Dither veil](https://search.axi0.io/motion/dither-veil/): A one-bit dithered picture that the pointer burns through to full color; it knits back cell by cell. Use: `<axi0-dither-veil cover></axi0-dither-veil>`
- [Dot lens](https://search.axi0.io/motion/dot-lens/): A fine field of gradient dots seen through a lens that follows the pointer: it magnifies, pinches or swirls. Use: `<axi0-dot-lens cover></axi0-dot-lens>`
- [Ember eye](https://search.axi0.io/motion/ember-eye/): A fiery eye with a living iris, a slit pupil that watches the pointer and flames licking outward. Use: `<axi0-ember-eye cover></axi0-ember-eye>`
- [Ferro sea](https://search.axi0.io/motion/ferro-sea/): A glossy sea of magnetic fluid: swells of spikes roll in, and the pointer raises a crown of them. Use: `<axi0-ferro-sea cover></axi0-ferro-sea>`
- [Fiber veil](https://search.axi0.io/motion/fiber-veil/): Layered ribbons of fine glowing fibers twist, fold and drift, the far ones soft as if out of focus. Use: `<axi0-fiber-veil cover></axi0-fiber-veil>`
- [Glass tiles](https://search.axi0.io/motion/glass-tiles/): A rolling field of glossy rounded tiles in perspective, lit by two colored lights that drift across it. Use: `<axi0-glass-tiles cover></axi0-glass-tiles>`
- [Ink flow](https://search.axi0.io/motion/ink-flow/): A glowing liquid swirls under the pointer in a real fluid simulation, colored by how fast it flows. Use: `<axi0-ink-flow cover></axi0-ink-flow>`
- [Lift field](https://search.axi0.io/motion/lift-field/): A field of particles that lifts into a glowing ring around the pointer and bursts outward on a click. Use: `<axi0-lift-field cover></axi0-lift-field>`
- [Light road](https://search.axi0.io/motion/light-road/): A night highway of glowing light trails on a winding road; press and hold to warp into hyperspace. Use: `<axi0-light-road cover></axi0-light-road>`
- [Liquid cursor](https://search.axi0.io/motion/liquid-cursor/): A liquid blob follows the pointer, stretches and sloshes behind it and throws droplets, in four materials. Use: `<axi0-liquid-cursor cover></axi0-liquid-cursor>`
- [Live wire](https://search.axi0.io/motion/live-wire/): Turns a word or a logo into a living lightning outline, with arcs that leap off its edges toward the pointer. Use: `<axi0-live-wire cover></axi0-live-wire>`
- [Needle field](https://search.axi0.io/motion/needle-field/): A field of short needles that swing toward the pointer like compass needles, ripple outward and spin on click. Use: `<axi0-needle-field cover></axi0-needle-field>`
- [Oil film](https://search.axi0.io/motion/oil-film/): A liquid film of soft rainbow folds that shifts on its own and ripples where the pointer moves. Use: `<axi0-oil-film cover></axi0-oil-film>`
- [Paint swirl](https://search.axi0.io/motion/paint-swirl/): Thick paint swirls around the middle in crisp pixels; the pointer stirs it and a click spins a whirlpool. Use: `<axi0-paint-swirl cover></axi0-paint-swirl>`
- [Plasma ribbons](https://search.axi0.io/motion/plasma-ribbons/): Two glowing ribbons of plasma curl through each other, twisting as they go, with white-hot cores. Use: `<axi0-plasma-ribbons cover></axi0-plasma-ribbons>`
- [Polar lights](https://search.axi0.io/motion/polar-lights/): Soft bands of northern lights drift across the frame in slowly cycling colors, with rays that flicker upward. Use: `<axi0-polar-lights cover></axi0-polar-lights>`
- [Shape tide](https://search.axi0.io/motion/shape-tide/): A field of circles, squares and triangles that brighten and grow as rolling waves pass through it. Use: `<axi0-shape-tide cover></axi0-shape-tide>`
- [Slat sea](https://search.axi0.io/motion/slat-sea/): A wall of tiny slats tips over into a rolling sea in perspective, with glints on every crest. Use: `<axi0-slat-sea cover></axi0-slat-sea>`
- [Smoke trail](https://search.axi0.io/motion/smoke-trail/): A ghost of glowing smoke floats after the pointer and curls away as it rises and fades. Use: `<axi0-smoke-trail cover></axi0-smoke-trail>`
- [Star warp](https://search.axi0.io/motion/star-warp/): An endless flight through twinkling stars that jumps to warp now and then; stars part around the pointer. Use: `<axi0-star-warp cover></axi0-star-warp>`
- [Storm orb](https://search.axi0.io/motion/storm-orb/): A glass orb with a crackling electric rim and glowing dust inside that swirls with the pointer. Use: `<axi0-storm-orb cover></axi0-storm-orb>`
- [Swarm](https://search.axi0.io/motion/swarm/): A liquid swarm of particles flows after the pointer, curls into eddies and pours around buttons. Use: `<axi0-swarm cover></axi0-swarm>`
- [Tile wall](https://search.axi0.io/motion/tile-wall/): A tilted wall of gradient tiles drifts in alternating rows, slides with the pointer and lights up where it rests. Use: `<axi0-tile-wall cover></axi0-tile-wall>`
- [Water ripple](https://search.axi0.io/motion/water-ripple/): Water ripples spread from the pointer, warp the picture under them and leave a wake that fades. Use: `<axi0-water-ripple cover></axi0-water-ripple>`

## Sounds

- [Mute switch](https://search.axi0.io/motion/mute-switch/): A button that mutes and unmutes every sound on the page, in memory only, so a reload starts fresh. Use: `data-sound="mute-switch"`
- [Round tap](https://search.axi0.io/motion/tap-round/): A soft round tap with a warm body, for primary buttons. Use: `data-sound="tap-round"`
- [Tiny tick](https://search.axi0.io/motion/tap-tiny/): A tiny, gentle tick for small controls such as icons and chips. Use: `data-sound="tap-tiny"`
- [Metal tap](https://search.axi0.io/motion/tap-metal/): A small, bright metallic tap for links and icon buttons. Use: `data-sound="tap-metal"`
- [Air tap](https://search.axi0.io/motion/tap-air/): A breathy, toneless tap for quiet, minimal interfaces. Use: `data-sound="tap-air"`
- [Felt press](https://search.axi0.io/motion/tap-felt/): A muted, padded press for quiet secondary buttons. Use: `data-sound="tap-felt"`
- [Cushion press](https://search.axi0.io/motion/tap-cushion/): A cushioned press that springs back, for cards and large buttons. Use: `data-sound="tap-cushion"`
- [Glass bead](https://search.axi0.io/motion/tap-glass/): A small glassy ping for picking one item from a set. Use: `data-sound="tap-glass"`
- [Marble click](https://search.axi0.io/motion/tap-marble/): A smooth glassy click for carousels and pickers. Use: `data-sound="tap-marble"`
- [Pure dot](https://search.axi0.io/motion/tap-dot/): A pure, minimal tone for radio buttons and dots. Use: `data-sound="tap-dot"`
- [Rubber boop](https://search.axi0.io/motion/tap-boop/): A playful, rubbery pop for friendly buttons. Use: `data-sound="tap-boop"`
- [Mouth pop](https://search.axi0.io/motion/tap-blop/): A round mouth pop for playful motion graphics. Use: `data-sound="tap-blop"`
- [Wood tock](https://search.axi0.io/motion/tap-wood/): A dry little woodblock knock for checking a box. Use: `data-sound="tap-wood"`
- [String pluck](https://search.axi0.io/motion/tap-pluck/): A soft plucked string for picking from a list. Use: `data-sound="tap-pluck"`
- [Step tick](https://search.axi0.io/motion/tap-tick/): A soft plucked tick for each step completed. Use: `data-sound="tap-tick"`
- [Warm confirm](https://search.axi0.io/motion/tap-halo/): A warm, open fifth for choosing a card. Use: `data-sound="tap-halo"`
- [Two petals](https://search.axi0.io/motion/tap-petal/): Two light notes for picking a swatch or a card. Use: `data-sound="tap-petal"`
- [Switch click](https://search.axi0.io/motion/switch-click/): A soft two-step click that turns a switch on, and its mirror that turns it off. Use: `data-sound="switch-click"`
- [Rocker switch](https://search.axi0.io/motion/switch-rocker/): A sturdy two-part click for big switches, lower on the way off. Use: `data-sound="switch-rocker"`
- [Spring toggle](https://search.axi0.io/motion/switch-spring/): A playful springy wobble for fun toggles, bending up for on and down for off. Use: `data-sound="switch-spring"`
- [Detent notch](https://search.axi0.io/motion/step-notch/): A soft detent for steppers, sliders and tabs. Use: `data-sound="step-notch"`
- [Tuned step](https://search.axi0.io/motion/step-level/): A tiny tuned detent for volume and value steps. Use: `data-sound="step-level"`
- [Tab flick](https://search.axi0.io/motion/tab-flick/): A crisp little flick for switching tabs. Use: `data-sound="tab-flick"`
- [Tab glide](https://search.axi0.io/motion/tab-glide/): A smooth, rounded slide for moving between tabs. Use: `data-sound="tab-glide"`
- [Seal](https://search.axi0.io/motion/lock-seal/): A soft, settled click for saving and locking. Use: `data-sound="lock-seal"`
- [Unlock](https://search.axi0.io/motion/unlock-air/): A soft click that opens into air, for unlocking. Use: `data-sound="unlock-air"`
- [Plug in, plug out](https://search.axi0.io/motion/device-plug/): A rounded click and rise for connecting a device, and the fall and click for letting it go. Use: `data-sound="device-plug"`
- [Light and dark](https://search.axi0.io/motion/theme-switch/): A bright little rise for switching to light mode and a soft settle for dark. Use: `data-sound="theme-switch"`
- [Expand and collapse](https://search.axi0.io/motion/fold-flutter/): A soft flutter that opens a section, and the matching one that tucks it away. Use: `data-sound="fold-flutter"`
- [Power on, power off](https://search.axi0.io/motion/power-glow/): A rising glow for powering on or connecting, and a falling fade for powering off. Use: `data-sound="power-glow"`
- [Menu lift](https://search.axi0.io/motion/menu-pop/): A tiny lift for opening menus and popovers. Use: `data-sound="menu-pop"`
- [Grid snap](https://search.axi0.io/motion/snap-grid/): A quick pull and a crisp snap onto a grid or a slot. Use: `data-sound="snap-grid"`
- [Record start and stop](https://search.axi0.io/motion/record-beep/): A clear double beep when recording starts and a falling pair when it stops. Use: `data-sound="record-beep"`
- [Play and pause](https://search.axi0.io/motion/play-pause/): A quick spin up for starting playback and a soft spin down for pausing. Use: `data-sound="play-pause"`
- [Bloom](https://search.axi0.io/motion/done-bloom/): Two warm notes that rise into a quiet success. Use: `data-sound="done-bloom"`
- [Crest](https://search.axi0.io/motion/done-crest/): A brighter four-note lift for bigger wins. Use: `data-sound="done-crest"`
- [Settle](https://search.axi0.io/motion/done-settle/): A single warm note that quietly says done. Use: `data-sound="done-settle"`
- [Summit](https://search.axi0.io/motion/done-summit/): A quick climbing run that opens into a chord when everything is complete. Use: `data-sound="done-summit"`
- [Coin](https://search.axi0.io/motion/reward-coin/): A bright two-note coin for rewards and points. Use: `data-sound="reward-coin"`
- [Sparkle](https://search.axi0.io/motion/reward-sparkle/): A quick sparkle for small wins. Use: `data-sound="reward-sparkle"`
- [Heart pulse](https://search.axi0.io/motion/like-pulse/): A warm double pulse for likes and favorites. Use: `data-sound="like-pulse"`
- [Reaction pop](https://search.axi0.io/motion/react-pop/): A bright little pop for adding a reaction. Use: `data-sound="react-pop"`
- [Level up](https://search.axi0.io/motion/level-up/): A rising power-up for leveling up. Use: `data-sound="level-up"`
- [Wooden run](https://search.axi0.io/motion/streak-wood/): A quick wooden run for keeping a streak alive. Use: `data-sound="streak-wood"`
- [Treasure](https://search.axi0.io/motion/chest-open/): A warm thump that opens into a shimmering chord. Use: `data-sound="chest-open"`
- [Confetti](https://search.axi0.io/motion/confetti/): A soft pop and a shower of sparkles for celebrations. Use: `data-sound="confetti"`
- [Accept](https://search.axi0.io/motion/accept-fill/): A smooth rising tick for accepting a suggestion. Use: `data-sound="accept-fill"`
- [Send](https://search.axi0.io/motion/send-lift/): A quick airy lift for sending a message. Use: `data-sound="send-lift"`
- [Read receipt](https://search.axi0.io/motion/read-receipt/): Two tiny ticks for delivered and read. Use: `data-sound="read-receipt"`
- [Upload done](https://search.axi0.io/motion/upload-done/): A rising breath and a bright ping when an upload finishes. Use: `data-sound="upload-done"`
- [Download done](https://search.axi0.io/motion/download-done/): A falling breath that lands softly when a download finishes. Use: `data-sound="download-done"`
- [Shake](https://search.axi0.io/motion/error-shake/): A quick, muted shake for input that does not fit. Use: `data-sound="error-shake"`
- [Not quite](https://search.axi0.io/motion/error-shrug/): A gentle falling pair that says not quite. Use: `data-sound="error-shrug"`
- [Crunch](https://search.axi0.io/motion/error-crunch/): A crunchy digital hit for errors in tech scenes. Use: `data-sound="error-crunch"`
- [Blocked](https://search.axi0.io/motion/error-buzz/): A low, firm double buzz for an action that is blocked. Use: `data-sound="error-buzz"`
- [Low power](https://search.axi0.io/motion/warn-low/): A dim, flickering tone for low battery and fading power. Use: `data-sound="warn-low"`
- [Alert pulse](https://search.axi0.io/motion/alert-pulse/): A clear repeating pulse for time-sensitive alerts. Use: `data-sound="alert-pulse"`
- [Nudge](https://search.axi0.io/motion/attention-nudge/): A soft double tap that asks for attention. Use: `data-sound="attention-nudge"`
- [Spring back](https://search.axi0.io/motion/drag-cancel/): A springy return when a drag is canceled. Use: `data-sound="drag-cancel"`
- [Undo](https://search.axi0.io/motion/undo-rewind/): A soft little rewind for undo and revert. Use: `data-sound="undo-rewind"`
- [Three bells](https://search.axi0.io/motion/notify-chime/): Three soft bells for a new notification. Use: `data-sound="notify-chime"`
- [Clear ping](https://search.axi0.io/motion/notify-ping/): One clear bell with a quiet tail. Use: `data-sound="notify-ping"`
- [Ding](https://search.axi0.io/motion/notify-ding/): A clean bell ding for highlights. Use: `data-sound="notify-ding"`
- [Chat bubble](https://search.axi0.io/motion/message-bubble/): Two round notes for a message in an open chat. Use: `data-sound="message-bubble"`
- [Incoming](https://search.axi0.io/motion/message-ripple/): Two round blips for an incoming message. Use: `data-sound="message-ripple"`
- [Mention](https://search.axi0.io/motion/mention-call/): A clear rising pair for when someone mentions you. Use: `data-sound="mention-call"`
- [Kalimba](https://search.axi0.io/motion/notify-kalimba/): A plucked kalimba pair for friendly notifications. Use: `data-sound="notify-kalimba"`
- [Wooden reminder](https://search.axi0.io/motion/remind-wood/): A mellow wooden pair for calm reminders. Use: `data-sound="remind-wood"`
- [Hint](https://search.axi0.io/motion/info-hint/): A neutral, airy tone for tips and info. Use: `data-sound="info-hint"`
- [Coming up](https://search.axi0.io/motion/event-cue/): A gentle three-note rise for upcoming events. Use: `data-sound="event-cue"`
- [Someone joined](https://search.axi0.io/motion/join-vibes/): A soft vibraphone two-tone for someone joining. Use: `data-sound="join-vibes"`
- [Join call](https://search.axi0.io/motion/call-join/): A warm rising chord for joining a call. Use: `data-sound="call-join"`
- [Typing dots](https://search.axi0.io/motion/typing-dots/): Three faint dots for someone typing. Use: `data-sound="typing-dots"`
- [Countdown](https://search.axi0.io/motion/countdown/): Three beeps and a go, for starts and launches. Use: `data-sound="countdown"`
- [Clock tick](https://search.axi0.io/motion/timer-tick/): A dry clock tick for countdowns and timers. Use: `data-sound="timer-tick"`
- [Focus](https://search.axi0.io/motion/camera-focus/): A small focus whir and two confirm beeps for emphasis. Use: `data-sound="camera-focus"`
- [Shutter](https://search.axi0.io/motion/camera-shutter/): A soft mechanical shutter for photos and screenshots. Use: `data-sound="camera-shutter"`
- [Swish](https://search.axi0.io/motion/swipe-swish/): A short, airy swipe for sliding panels. Use: `data-sound="swipe-swish"`
- [Sheet open](https://search.axi0.io/motion/sheet-open/): A soft rise for opening a sheet or a modal. Use: `data-sound="sheet-open"`
- [Sheet close](https://search.axi0.io/motion/sheet-close/): A falling breath for closing and dismissing. Use: `data-sound="sheet-close"`
- [Drawer](https://search.axi0.io/motion/drawer-slide/): A sliding glide that lands with a soft stop. Use: `data-sound="drawer-slide"`
- [Flick away](https://search.axi0.io/motion/dismiss-flick/): A very short flick for swiping something away. Use: `data-sound="dismiss-flick"`
- [Page turn](https://search.axi0.io/motion/page-turn/): A soft paper turn for pages and steps. Use: `data-sound="page-turn"`
- [Shuffle](https://search.axi0.io/motion/reorder-shuffle/): A light double slide for reordering items. Use: `data-sound="reorder-shuffle"`
- [Fly by](https://search.axi0.io/motion/fly-pass/): A light, quick pass from one side to the other. Use: `data-sound="fly-pass"`
- [Gust](https://search.axi0.io/motion/whoosh-gust/): A full, soft whoosh that passes from left to right. Use: `data-sound="whoosh-gust"`
- [Gale](https://search.axi0.io/motion/whoosh-gale/): A heavy, wide whoosh with low weight under it. Use: `data-sound="whoosh-gale"`
- [Swoop](https://search.axi0.io/motion/whoosh-swoop/): A fast, deep swoop with a tonal edge. Use: `data-sound="whoosh-swoop"`
- [Spin](https://search.axi0.io/motion/whoosh-spin/): A whirling whoosh that circles around. Use: `data-sound="whoosh-spin"`
- [Silk](https://search.axi0.io/motion/swish-silk/): A smooth, silky swish like fabric. Use: `data-sound="swish-silk"`
- [Whip](https://search.axi0.io/motion/whip-crack/): A sharp, quick whip for snappy cuts. Use: `data-sound="whip-crack"`
- [Twin pass](https://search.axi0.io/motion/whoosh-twin/): Two quick passes, one after the other. Use: `data-sound="whoosh-twin"`
- [Drift](https://search.axi0.io/motion/whoosh-drift/): A slow, airy pass with a gentle tail. Use: `data-sound="whoosh-drift"`
- [Tonal wipe](https://search.axi0.io/motion/wipe-tone/): A clean tonal sweep for wipes and slides. Use: `data-sound="wipe-tone"`
- [Zoom in](https://search.axi0.io/motion/zoom-in/): A punchy zoom-in with a tonal rise and a landing. Use: `data-sound="zoom-in"`
- [Step forward](https://search.axi0.io/motion/nav-next/): A light step up for next and forward. Use: `data-sound="nav-next"`
- [Step back](https://search.axi0.io/motion/nav-back/): A light step down for back and previous. Use: `data-sound="nav-back"`
- [Dive in](https://search.axi0.io/motion/folder-dive/): A quick dip for drilling into a folder. Use: `data-sound="folder-dive"`
- [Pick up](https://search.axi0.io/motion/drag-pick/): A soft lift as an item is picked up. Use: `data-sound="drag-pick"`
- [Put down](https://search.axi0.io/motion/drag-drop/): A gentle landing as an item is put down. Use: `data-sound="drag-drop"`
- [Stack](https://search.axi0.io/motion/stack-cascade/): A soft cascade as items stack together. Use: `data-sound="stack-cascade"`
- [Banner](https://search.axi0.io/motion/title-banner/): A clean sweep and a click for lower thirds and banners. Use: `data-sound="title-banner"`
- [Title slide](https://search.axi0.io/motion/title-slide/): A short tonal slide that lands, for titles moving in. Use: `data-sound="title-slide"`
- [Ready glow](https://search.axi0.io/motion/hover-glow/): A faint glow when a drop target is ready or a pointer arrives. Use: `data-sound="hover-glow"`
- [Laptop keys](https://search.axi0.io/motion/key-laptop/): Laptop key presses with a slightly different take on every keystroke. Use: `data-sound="key-laptop"`
- [Deep keys](https://search.axi0.io/motion/key-thock/): Deeper key presses with a rounded, muted body. Use: `data-sound="key-thock"`
- [Low keys](https://search.axi0.io/motion/key-chiclet/): Light, low-profile key taps like a thin modern keyboard. Use: `data-sound="key-chiclet"`
- [Typewriter keys](https://search.axi0.io/motion/key-type/): Crisp mechanical key clicks for type-on titles. Use: `data-sound="key-type"`
- [Enter key](https://search.axi0.io/motion/key-enter/): A key press that lands with a soft confirm, for Enter and submit. Use: `data-sound="key-enter"`
- [Erase key](https://search.axi0.io/motion/key-erase/): A softer key with a little sweep, for delete and backspace. Use: `data-sound="key-erase"`
- [Ticker](https://search.axi0.io/motion/text-ticker/): Rapid soft ticks for text that appears letter by letter. Use: `data-sound="text-ticker"`
- [Counting ticks](https://search.axi0.io/motion/count-ticks/): Fast rising ticks for numbers counting up. Use: `data-sound="count-ticks"`
- [Calm pad](https://search.axi0.io/motion/pad-calm/): A warm, quiet pad for calm scenes. Use: `data-sound="pad-calm"`
- [Space pad](https://search.axi0.io/motion/pad-nebula/): A soft, airy pad for space scenes. Use: `data-sound="pad-nebula"`
- [Room tone](https://search.axi0.io/motion/room-tone/): A quiet room tone to fill silence. Use: `data-sound="room-tone"`
- [Rain on glass](https://search.axi0.io/motion/rain-glass/): Soft rain on a window pane. Use: `data-sound="rain-glass"`
- [Soft wind](https://search.axi0.io/motion/wind-soft/): A soft wind with gentle gusts. Use: `data-sound="wind-soft"`
- [Night drone](https://search.axi0.io/motion/night-drone/): A dark, slow drone with faint insects in the night. Use: `data-sound="night-drone"`
- [Underwater](https://search.axi0.io/motion/water-deep/): A muffled underwater drone with a few bubbles. Use: `data-sound="water-deep"`
- [Loading pulse](https://search.axi0.io/motion/loading-pulse/): A calm, breathing pulse while something loads. Use: `data-sound="loading-pulse"`
- [Syncing](https://search.axi0.io/motion/sync-orbit/): A circling shimmer for syncing. Use: `data-sound="sync-orbit"`
- [Heartbeat](https://search.axi0.io/motion/heartbeat-slow/): A slow, deep heartbeat for suspense. Use: `data-sound="heartbeat-slow"`
- [Trembling air](https://search.axi0.io/motion/tremble-high/): High, trembling tones that hang in the air. Use: `data-sound="tremble-high"`
- [Uneasy drone](https://search.axi0.io/motion/drone-unease/): A low, uneasy drone that beats against itself. Use: `data-sound="drone-unease"`
- [Slam](https://search.axi0.io/motion/hit-slam/): A tight, punchy hit for hard cuts. Use: `data-sound="hit-slam"`
- [Timber](https://search.axi0.io/motion/hit-timber/): A dry wooden thud for warm cuts. Use: `data-sound="hit-timber"`
- [Velvet hit](https://search.axi0.io/motion/hit-velvet/): A soft, round hit with a warm low tail. Use: `data-sound="hit-velvet"`
- [Anvil](https://search.axi0.io/motion/hit-anvil/): A resonant metal strike with a ringing tail. Use: `data-sound="hit-anvil"`
- [Crystal hit](https://search.axi0.io/motion/hit-crystal/): A clear glassy impact with a shimmering tail. Use: `data-sound="hit-crystal"`
- [Thunder](https://search.axi0.io/motion/boom-thunder/): A deep cinematic boom with a long rumble. Use: `data-sound="boom-thunder"`
- [Distant boom](https://search.axi0.io/motion/boom-distant/): A far-off boom with a long echo. Use: `data-sound="boom-distant"`
- [Sub drop](https://search.axi0.io/motion/drop-plunge/): A deep sub drop that lands heavy. Use: `data-sound="drop-plunge"`
- [Quick riser](https://search.axi0.io/motion/riser-lift/): A quick, airy swell for fast cuts. Use: `data-sound="riser-lift"`
- [Cymbal swell](https://search.axi0.io/motion/riser-swell/): A reversed cymbal swell that pulls into the hit. Use: `data-sound="riser-swell"`
- [Inhale](https://search.axi0.io/motion/breath-in/): A soft reversed swell that pulls into the cut. Use: `data-sound="breath-in"`
- [Exhale](https://search.axi0.io/motion/breath-out/): A gentle breath out after the cut. Use: `data-sound="breath-out"`
- [Piano sting](https://search.axi0.io/motion/sting-emblem/): A minimal piano-like sting for logos. Use: `data-sound="sting-emblem"`
- [Logo reveal](https://search.axi0.io/motion/logo-reveal/): A soft swell into a warm chord for logo reveals. Use: `data-sound="logo-reveal"`
- [Circuit sting](https://search.axi0.io/motion/sting-circuit/): A clean electronic logo sting. Use: `data-sound="sting-circuit"`
- [Tape stop](https://search.axi0.io/motion/tape-stop/): A tape stop that winds the scene down. Use: `data-sound="tape-stop"`
- [Rewind](https://search.axi0.io/motion/tape-rewind/): A quick tape rewind for flashbacks. Use: `data-sound="tape-rewind"`
- [Wand](https://search.axi0.io/motion/magic-wand/): A quick magical flourish. Use: `data-sound="magic-wand"`
- [Portal](https://search.axi0.io/motion/magic-portal/): A swirling warp for magical transitions. Use: `data-sound="magic-portal"`
- [Shimmer rise](https://search.axi0.io/motion/shimmer-rise/): A bright, glittering rise of high tones. Use: `data-sound="shimmer-rise"`
- [Twinkles](https://search.axi0.io/motion/twinkle-dust/): A few soft twinkles that settle. Use: `data-sound="twinkle-dust"`
- [Balloon pop](https://search.axi0.io/motion/pop-balloon/): A soft balloon pop without the harsh edge. Use: `data-sound="pop-balloon"`
- [Cork pop](https://search.axi0.io/motion/pop-cork/): A round cork pop with a little fizz after it. Use: `data-sound="pop-cork"`
- [Rising bubbles](https://search.axi0.io/motion/bubbles-rise/): A string of bubbles rising. Use: `data-sound="bubbles-rise"`
- [Fizz](https://search.axi0.io/motion/fizz-bubbles/): A cluster of tiny bubbles. Use: `data-sound="fizz-bubbles"`
- [Sprout](https://search.axi0.io/motion/pop-sprout/): A springy little pop for elements appearing. Use: `data-sound="pop-sprout"`
- [Pop in](https://search.axi0.io/motion/pop-appear/): A soft pop for text popping in. Use: `data-sound="pop-appear"`
- [Vanish](https://search.axi0.io/motion/fade-vanish/): A soft airy fade for text disappearing. Use: `data-sound="fade-vanish"`
- [Squeak](https://search.axi0.io/motion/squeak-toy/): A soft rubber squeak for cute moments. Use: `data-sound="squeak-toy"`
- [Zap](https://search.axi0.io/motion/electric-zap/): A quick electric zap. Use: `data-sound="electric-zap"`
- [Spark](https://search.axi0.io/motion/spark-tiny/): A tiny electric spark for callouts. Use: `data-sound="spark-tiny"`
- [Scramble](https://search.axi0.io/motion/glitch-scramble/): A fast scramble of tones for tech reveals. Use: `data-sound="glitch-scramble"`
- [Stutter](https://search.axi0.io/motion/glitch-stutter/): A short digital stutter. Use: `data-sound="glitch-stutter"`
- [Data chirp](https://search.axi0.io/motion/data-chirp/): A quick chirp of digital data. Use: `data-sound="data-chirp"`
- [Pixel blips](https://search.axi0.io/motion/pixel-blip/): Tiny eight-bit blips for pixel graphics. Use: `data-sound="pixel-blip"`
- [Punchline](https://search.axi0.io/motion/drum-punch/): A playful drum sting for comic beats. Use: `data-sound="drum-punch"`
- [Marker stroke](https://search.axi0.io/motion/marker-stroke/): A quick marker stroke for underlines and circles. Use: `data-sound="marker-stroke"`