# Introduction A dependency-free CSS layer that animates any component already signalling open and closed state. One attribute, zero JavaScript. easeful is a CSS layer that adds enter and exit animations to any component that already signals open and closed state. No JavaScript ships to the browser, and the whole API is one HTML attribute: `data-motion`. Most components already know when they are open. Radix writes `data-state="open"`, Base UI writes `data-starting-style`, a native `` gets the `open` attribute. The state is already in the DOM. easeful reads it and animates, so nothing has to be wired up and no JavaScript ships to do it. ## The whole API One attribute, and a vocabulary of 4 presets. There is no provider, no hook, no config file, and no import in your component. ```tsx ``` ## What it does not do Motion only. Behaviour, focus trapping, positioning and ARIA stay with the host component, and that boundary is deliberate rather than a gap: those things are hard to get right and Radix and Base UI already have. easeful never competes with them. ## Why the vocabulary is small 4 presets is the whole list, and it is exhaustive on purpose. A named preset an agent can typecheck against beats an open-ended API it can guess wrong, which is why the preset names, the CSS and the TypeScript types are all generated from one manifest instead of maintained beside each other. The [attribute reference](/docs/reference) is the same list the types come from.