axi0motion

AI-ready

For coding assistants

Give the assistant that writes your code this skill file. It tells it how to load the library, how to mark up an effect and where each effect's options live, so it uses axi0 Motion the way a person would.

The skill file

Save it as axi0-motion/SKILL.md in your assistant's skills folder, or paste it into its instructions. Both files are plain text at fixed addresses, so an assistant can also fetch them itself.

Download SKILL.mdOpen llms.txt

---
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.

Every effect

The same list as Markdown, with the attribute that uses each effect: llms.txt. 295 effects: text 19, interaction 49, components 34, backgrounds 32, sounds 161.