# TailMotion

> A tested motion language for product interfaces. Scoped personalities, state-driven presence, native HTML motion, product recipes and scroll-driven reveals — zero runtime, pure CSS.

## Docs

- [Introduction](https://docs.tailmotion.moumen.dev/docs/index.md): A tested motion language for product interfaces, with good decisions already made.
- [Quickstart](https://docs.tailmotion.moumen.dev/docs/quickstart.md): From an empty project to four behaviours that normally need a runtime.
- [Installation](https://docs.tailmotion.moumen.dev/docs/install.md): Tailwind v3, Tailwind v4, standalone CSS, the CDN, and the optional plugin.
- [The motion model](https://docs.tailmotion.moumen.dev/docs/concepts/motion-model.md): Seven categories, four token groups, and one override order that explains every class.
- [Motion personalities](https://docs.tailmotion.moumen.dev/docs/concepts/personalities.md): Change the feel of a whole interface with one class, without touching a single animation class.
- [State-driven presence](https://docs.tailmotion.moumen.dev/docs/concepts/presence.md): Animate the open and closed states your application already manages.
- [Choreography](https://docs.tailmotion.moumen.dev/docs/concepts/choreography.md): Stagger that can enter, exit and reverse — without reordering the DOM.
- [Transform safety](https://docs.tailmotion.moumen.dev/docs/concepts/transform-safety.md): Why 32 keyframes moved off `transform`, which ones did not, and what still cannot stack.
- [The zero-runtime boundary](https://docs.tailmotion.moumen.dev/docs/concepts/zero-runtime.md): Exactly what TailMotion does, what your application does, and why the line is there.
- [Framework integration](https://docs.tailmotion.moumen.dev/docs/guides/frameworks.md): React, Vue, Svelte, plain HTML and headless UI libraries — one CSS API, four identical integrations.
- [Native elements](https://docs.tailmotion.moumen.dev/docs/guides/native-elements.md): Real entrances and exits for [popover], <dialog> and <details>, with the browser keeping focus and semantics.
- [Product recipes](https://docs.tailmotion.moumen.dev/docs/guides/recipes.md): Menu, dialog, toast, tooltip, accordion, tabs, loading-to-success and hold-to-confirm — as motion only.
- [Scroll-driven motion](https://docs.tailmotion.moumen.dev/docs/guides/scroll.md): CSS view timelines. No observer, no listener, and content stays visible where the browser has none.
- [Structured recipes](https://docs.tailmotion.moumen.dev/docs/guides/structured-recipes.md): The classes that need a documented child structure — avatar group, view morph, count reveal, text flip and liquid button.
- [Accessibility](https://docs.tailmotion.moumen.dev/docs/guides/accessibility.md): Reduced motion, right-to-left, focus, and the states motion must never be the only signal for.
- [Theming and color](https://docs.tailmotion.moumen.dev/docs/guides/theming.md): How effects inherit your palette, and the small set of variables that override them.
- [Class reference](https://docs.tailmotion.moumen.dev/docs/reference/classes.md): Every class, its trigger, its states, its timing, and the markup it requires.
- [CSS variables](https://docs.tailmotion.moumen.dev/docs/reference/variables.md): Every --tm-* custom property, what reads it, and what it defaults to.
- [Tailwind plugin](https://docs.tailmotion.moumen.dev/docs/reference/plugin.md): Every utility the optional plugin generates, and every option it accepts.
- [Imports and bundle size](https://docs.tailmotion.moumen.dev/docs/reference/imports.md): Every entry point, what it costs, and the two things worth being honest about.
- [Browser support](https://docs.tailmotion.moumen.dev/docs/reference/browser-support.md): Every guarded feature, the version it needs, and exactly what happens without it.
- [Migration](https://docs.tailmotion.moumen.dev/docs/migration.md): What changed in 0.8 and 0.6, and what you have to do about it.
- [Support and non-goals](https://docs.tailmotion.moumen.dev/docs/support.md): What is supported, what will never be built, and where to ask.