One source, every stack
5 frameworks


A library of premium buttons, toggles & micro-interactions. Pick one, paste the code into your AI agent, ship in seconds.

Every interaction below is live. Try it, then copy it for your framework and paste it into your agent.

Try these interactions. Free, no sign-up.
View all interactions
Choose a framework
Choose a framework
Choose a framework
Choose a framework
How it works

01
Pick an interaction

Browse the library and find the button, toggle or effect you want. Every preview is live. Try it before you take it.

02
Copy & paste into your LLM

One click copies agent-ready code. Paste it into Claude, Cursor, or whatever you build with.

03
That's it.

Your agent wires it in. A premium interaction, shipped in seconds instead of hours.

You ship products at agent speed, but polished micro-interactions still take hours of hand-tuning easing curves and hover states. That's the gap between "works" and "feels premium". We closed it.

Agent-ready code

Every snippet is clean, scoped and zero-dependency, structured so an LLM integrates it on the first try.

Premium by default

Hand-tuned timing, easing and states. The details that make a product feel expensive, without the hours.

Every framework

Authored once, delivered for Vanilla, React, Next.js, Astro and Svelte. Same interaction, your stack.

FAQ

Which frameworks are supported?+

Every interaction is authored once and delivered for Vanilla HTML/CSS/JS, React (and Next.js), Astro, and Svelte. Pick your stack with the framework switcher and copy code that's idiomatic for it, not a mechanical port.

Is it free?+

Yes. Every interaction is free to browse, try live and copy. No sign-up, no account, no paywall.

Do I need an AI agent to use these?+

No. Each interaction is plain HTML, CSS and JS (or a plain component for your framework). Copy the files into your project by hand and they work exactly the same. The agent workflow is just the fastest path.

How do copies work with AI agents?+

Each snippet is self-contained and scoped to a single root element, with zero dependencies, exactly the shape LLMs integrate best. Paste it into Claude, Cursor, or any coding agent with a one-line instruction and it drops in cleanly.

Can I customize colors and timing?+

Yes. Every interaction exposes its design tokens as CSS variables at the top of the stylesheet: accent color, duration, easing. Change one line and the whole interaction follows your brand.

Can I use interactions commercially?+

Yes. Use them in unlimited personal, commercial and client projects, no attribution required. The only thing you can't do is repackage and resell the library itself.


Explore the library