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

<Dialog.Content data-motion="scale-fade" />

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 is the same list the types come from.