Scramble TextTwo words scramble continuously in a pixel cipher.
hover to decrypt
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/scramble-textFor dark mode, add the dark class to your <html> element:
<html class="dark">This component uses GeistPixelGrid from geist. Install the package:
npm install geistInstall 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 Scramble Text
Scramble Text is two words running a continuous scramble effect, each letter flickering through a constrained glyph set, until you hover the container, at which point they resolve one letter at a time and settle into the real words. Move away and they scramble back into noise. Motion drives both the scramble loop and the reveal sequencing; the glyph set is intentionally constrained so the noise reads as deliberate. Use it for hero headlines, portfolio splash sections, AI-product tags, and any interaction where the act of reading is part of the experience.
Built with
Frequently asked questions
- Is Scramble Text free to use?
- Yes. Scramble Text 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 Scramble Text?
- One command: npx shadcn@latest add https://aicanvas.me/r/scramble-text.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Scramble Text 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 Scramble Text built with?
- Scramble Text is built with React and TypeScript, using Motion and Tailwind CSS.
- Where would I use Scramble Text?
- Common uses include Hero section, Portfolio, and AI product. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Scramble Text with AI?
- Yes. Scramble Text ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas