Shader Button

A pill button with a thermal shader border: a heatmap ring of blue, gold, and red flows around the machined icon well. Hovering doubles the heat, shifts in a hot magenta, and blooms a halo; pressing compresses the button. Built on Paper Shaders.

Feels like

Hover/Tap/Glow

Built with

React 19Tailwind v4Paper Shaders

Steal it

npx shadcn@latest add https://1iad.com/r/shader-button

One self-contained file. Paste the prompt into your AI agent and it does the rest.

Good to know

No config. Nothing to set up beyond Tailwind.
Respects prefers-reduced-motion out of the box.
Sound and haptics only fire after a user gesture.

Credits

Built in public by Sunny JoshiMIT licensed. Free to steal.

Back

Shader Button

A pill button with a thermal shader border: a heatmap ring of blue, gold, and red flows around the machined icon well. Hovering doubles the heat, shifts in a hot magenta, and blooms a halo; pressing compresses the button. Built on Paper Shaders. Install: npx shadcn@latest add https://1iad.com/r/shader-button

Shader Button006