Raising the bar at Animata

Animata grew for a while the way a lot of open component libraries do: take a PR, ship a preview, add another sidebar link. Fine when you want volume. Less fine when someone is trying to paste your code into a real app and make it hold up.

Since early 2026 we've been tightening what counts as an Animata component and reshaping the site around that. This is what actually shipped, and why we bothered.

Two lanes: reference and context

What we didn't have until May was the second lane. Each demo route is a full-page composition with light chrome (prev/next, search, refresh, fullscreen) and recipe notes when you scroll past the fold. Notes point at component docs; component docs point back with "Used in demos" when something shows up in a composition.

pnpm build validates the demo registry, so a demo can't keep pointing at a component we quietly removed. Dry, maybe, but it keeps the showcase and the docs from drifting.

Try the demos

Specific layouts, not three new "page types" in the catalog. The goal is taste, not more grid tiles.

Composition over monolith props

New work (and serious reworks) should read like UI you'd write in your own codebase.

Tabs are the obvious case. Gooey, Fluid, and Shift share the same compound shape: List, Tab, optional Icon / Label, instead of one component with a dozen boolean props. Keyboard and focus logic live in animata/tabs/shared.ts and ship with each tab install from the shadcn registry, so you're not pasting the same a11y block three times.

April's text batch did something similar one layer down: nineteen presets on one TextAnimator runtime, so you can swap effects without relearning timing or reduced-motion behavior.

Composition also keeps Storybook, MDX, and the demo source panel honest. We'd rather show the parts than bury the API under variant="fancy".

Accessibility as a default, not a follow-up issue

We got tired of pretty 400px previews that only worked with a mouse.

The bar that sticks is per component: if you can click it, you should be able to run it without a pointer.

Unpublishing and rework instead of catalog inflation

Not everything in animata/ should keep a docs page.

We unpublished the feature-cards category and Commit Graph when they stopped clearing the bar. Scrolling Testimonials left as a standalone component; the layout lives in the browse demo now, as a recipe, not a vague "testimonials" block.

Glowing Card got a layout fix plus @theme docs for blur/glow tokens people were still copying from old v3 notes. Animated Border Trail install steps no longer send you hunting for global CSS the file doesn't use; @property and keyframes stay inline, like the source.

Fluid and Shift weren't renamed copies of old markup. They were rebuilt to match Gooey's API and the shared a11y module. More work than a one-line changelog, but you end up with one pattern and three skins instead of three cousins.

Registry, toolchain, and docs honesty

In April everything got a shadcn registry URL:

npx shadcn add https://animata.design/r/tabs/fluid-tabs.json

In May we fixed tabs: installs need shared.ts, and for a bit the registry pointed at a dependency that wasn't there. Tab JSON bundles the helper now, with a ./shared import that resolves after install.

Under the hood: pnpm, Tailwind 4.3, a shadcn/ui resync, Biome (March), Next.js 16, Storybook 10. None of that is interesting on its own. It matters because we can run the same checks everywhere and stop lying in class names (explicit transition-* instead of bare transition, dialog transforms that don't fight Tailwind v4 centering).

Docs got the same treatment: Instrument Sans in the shell, inline code chips that don't bleed into fenced blocks, line numbers on Shiki output, install steps that match what you paste.

What shipped this cycle

What we're actually optimizing for

• Publish less, but better. Demote or unpublish what doesn't hold up.
• Compound APIs, shared modules, one runtime where it makes sense.
• Context via demos and recipes, not lonely previews in gray boxes.
• A11y you can explain in a review, not apologize for later.

The project remains open source and continues to accept contributions. "Merged" now means it meets the bar, not that we needed another card in the grid.

Questions or ideas? Open an issue or say hi in Discord.