Scramble Hover

Animated text scramble effect on hover for React. Creates playful, Matrix-style character animations with customizable speed and duration. Built with Motion.

Open in v0

Last updated: January 29, 2026

Scramble Hover Examples

Installation

pnpm dlx shadcn add @smoothui/scramble-hover
npx shadcn@latest add @smoothui/scramble-hover
yarn dlx shadcn add @smoothui/scramble-hover
bunx shadcn add @smoothui/scramble-hover

Features

  • Character scrambling on hover with duration and speed controls
  • Works with headings and inline text
  • Smooth and performant
  • Built with Framer Motion
  • Accessible fallbacks

Props

Typewriter Text

Animated typewriter text effect for React with character-by-character reveal and looping support. Ideal for hero sections, landing pages, and AI chat interfaces.

Scroll Reveal Paragraph

Reveal paragraphs as they enter the viewport with subtle motion and fade.

On this page

Installation
Features
Props

Created by

Edu Calvo's avatar
Edu Calvo