---
name: axi0-motion
description: Use when a web page needs motion with axi0 Motion: text entrances, pointer and hover effects, components, animated backgrounds or interface sounds.
---

# axi0 Motion

A small framework-free motion library with 295 effects. Effects are HTML
attributes and custom elements; one loader fetches only the effects a page uses.

## Load it once, in the head

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

That one line works on any site: the loader brings its own small stylesheet
and checks every effect file against its hash. To have the base styles from
the very first paint (a marquee, a background that covers its section), add
this line above it:

<link rel="stylesheet" href="https://search.axi0.io/axi0/motion/motion.css">

## Use an effect

- Enhancers: data-motion="ID" on an element. Several: data-motion="reveal tilt".
- Their options: data-motion-NAME="value" on the same element.
- Backgrounds and components: <axi0-ID option="value"></axi0-ID>; the
  attribute cover makes a background fill its parent.
- Sounds: data-sound="ID" on a button, or axi0Motion.sound("ID") from code
  (it loads the sound the first time).
- React: import { PascalName } from "./motion/react/PascalName";
  Vue: import PascalName from "./motion/vue/PascalName.vue";
  (download both wrappers from the effect's page).

## Find the right effect

- Every effect with its summary and the attribute that uses it:
  https://search.axi0.io/motion/llms.txt
- One effect: https://search.axi0.io/motion/ID/ (live demo, options, defaults,
  code for HTML, React, Vue and JavaScript).

## Rules

- One background per section and one entrance per heading; motion should help
  the reader, not compete with the text.
- Do not write reduced-motion code: every effect already shows its final state
  when the system asks for reduced motion, and pauses off screen.
- Keep text over a background at a high contrast; background layers are
  decorative and hidden from screen readers.
- A site with a Content-Security-Policy allows https://search.axi0.io in
  script-src, style-src and connect-src (and 'wasm-unsafe-eval' in script-src
  for the particles background).
- Check the page with a keyboard: interactive effects must keep focus visible.