Glitch ButtonA terminal-inspired button with a text scramble glitch effect on hover.

Add to your project

One command adds this component to your project.

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

About Glitch Button

Glitch Button is a terminal-aesthetic button that runs a text scramble on hover: each letter cycles through random glyphs before locking back to its intended character. The effect is a short Motion-driven cipher loop, fast enough to feel like signal rather than noise. It pairs naturally with monospace typefaces and dark surfaces, which makes it a good pick for hero CTAs on portfolio sites, game UI, AI products, and any landing page leaning into a hacker or sci-fi tone.

Built with

Frequently asked questions

Is Glitch Button free to use?

Yes. Glitch Button is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.

How do I install Glitch Button?

One command: npx shadcn@latest add https://aicanvas.me/r/glitch-button.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Glitch Button for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.

What is Glitch Button built with?

Glitch Button is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.

Where would I use Glitch Button?

Common uses include Hero section, Game UI, and Portfolio. Like every AI Canvas component, it is self-contained and drops into any React project.

Can I remix Glitch Button with AI?

Yes. Glitch Button ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.

Featured in collections