A Matrix style text decode and scramble animation built with plain HTML CSS and JavaScript. Hover the text to see a cybernetic scramble that decodes back into the original text. Great for hero sections interactive UI demos and learning DOM animation techniques.
https://dev-hamza03.github.io/matrix-text-effect/
https://dev-hamza03.github.io/matrix-text-effect/
- Matrix style text scramble and decode animation
- Hover to scramble then reveal original text
- Pure HTML CSS and JavaScript no libraries
- Lightweight responsive and easy to customize
- Great for portfolio demos headers and UI experiments
(Upload a screenshot to assets/images/screenshot.png then update the file)
HTML5 SCSS JavaScript (Vanilla)
matrix-text-effect
├── index.html
├── style.css
├── script.js
└── assets
└── images
git clone https://github.com/dev-hamza03/matrix-text-effect
Then open index.html in your browser
- The original text is stored in JavaScript
- On hover a timed interval replaces characters with random letters
- Iteration advances to progressively restore original characters
- The interval is cleared when the text is fully decoded
document.addEventListener("mouseenter", ...) updates text by mapping each character to either the original character or a random character until the full text is restored
- Change the character set in script.js to adjust scramble style
- Modify timing interval for faster or slower decode
- Add color glow or CSS animation to enhance the Matrix vibe
- Use different fonts or letter spacing for stronger aesthetic
- Mobile touch support
- Configurable speed and character sets via data attributes
- Recording or replay option for animations
- Multiple concurrent text elements support
If you like this project please star the repository ⭐ Your support helps me create more UI experiments
This project is open source and free to use