React Scrambled Text Effect

Most interactive text effects respond to simple hover states that feel binary and disconnected from cursor position. This component creates proximity-based character scrambling that responds dynamically to cursor distance, making text feel reactive and organic to mouse movement.

Proximity-based character scrambling

Text that scrambles individual characters based on cursor proximity with customizable radius:

import ScrambledText from '@/components/ui/shadcn-io/scrambled-text';const ScrambledTextDemo = () => {  return (    <div className="flex items-center justify-center min-h-screen w-full p-4 sm:p-8">      <ScrambledText        className="text-center"        radius={120}        duration={1}        speed={0.6}        scrambleChars="!@#$%^&*()_+"        style={{           color: 'currentColor',          fontSize: 'clamp(1rem, 3vw, 1.5rem)',          fontFamily: 'inherit'        }}      >        Move your cursor over this text to see the scrambling effect in action.         Each character will scramble when your mouse gets close to it.      </ScrambledText>    </div>  );};export default ScrambledTextDemo;

import React, { useEffect, useRef } from 'react';import { gsap } from 'gsap';import { SplitText } from 'gsap/SplitText';import { ScrambleTextPlugin } from 'gsap/ScrambleTextPlugin';gsap.registerPlugin(SplitText, ScrambleTextPlugin);export interface ScrambledTextProps {  radius?: number;  duration?: number;  speed?: number;  scrambleChars?: string;  className?: string;  style?: React.CSSProperties;  children: React.ReactNode;}const ScrambledText: React.FC<ScrambledTextProps> = ({  radius = 100,  duration = 1.2,  speed = 0.5,  scrambleChars = '.:',  className = '',  style = {},  children}) => {  const rootRef = useRef<HTMLDivElement | null>(null);  useEffect(() => {    if (!rootRef.current) return;    const split = SplitText.create(rootRef.current.querySelector('p'), {      type: 'chars',      charsClass: 'inline-block will-change-transform'    });    split.chars.forEach(el => {      const c = el as HTMLElement;      gsap.set(c, { attr: { 'data-content': c.innerHTML } });    });    const handleMove = (e: PointerEvent) => {      split.chars.forEach(el => {        const c = el as HTMLElement;        const { left, top, width, height } = c.getBoundingClientRect();        const dx = e.clientX - (left + width / 2);        const dy = e.clientY - (top + height / 2);        const dist = Math.hypot(dx, dy);        if (dist < radius) {          gsap.to(c, {            overwrite: true,            duration: duration * (1 - dist / radius),            scrambleText: {              text: c.dataset.content || '',              chars: scrambleChars,              speed            },            ease: 'none'          });        }      });    };    const el = rootRef.current;    el.addEventListener('pointermove', handleMove);    return () => {      el.removeEventListener('pointermove', handleMove);      split.revert();    };  }, [radius, duration, speed, scrambleChars]);  return (    <div      ref={rootRef}      className={`m-[7vw] max-w-[800px] font-mono text-[clamp(14px,4vw,32px)] text-white ${className}`}      style={style}    >      <p>{children}</p>    </div>  );};export default ScrambledText;

Built with TypeScript for React applications, using GSAP's SplitText and ScrambleTextPlugin for high-performance character-level scrambling with distance-based triggering and customizable scramble characters.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/scrambled-text.json

npx shadcn@latest add https://www.shadcn.io/registry/scrambled-text.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/scrambled-text.json

bunx shadcn@latest add https://www.shadcn.io/registry/scrambled-text.json

Usage

import ScrambledText from "@/components/text/scrambled-text";

<div className="flex items-center justify-center min-h-screen w-full p-4 sm:p-8">
  <ScrambledText
    className="text-center"
    radius={120}
    duration={1}
    speed={0.6}
    scrambleChars="!@#$%^&*()_+"
    style={{ 
      color: 'currentColor',
      fontSize: 'clamp(1rem, 3vw, 1.5rem)',
      fontFamily: 'inherit'
    }}
  >
    Move your cursor over this text to see the scrambling effect in action.
  </ScrambledText>
</div>

Why hover states feel disconnected

Traditional text interactions use binary on/off hover states—approaches that don't reflect the continuous nature of cursor movement and distance. Simple hover effects lack the organic, responsive quality that makes interactions feel natural and engaging.

This React component uses GSAP's ScrambleTextPlugin with distance calculations to create character-level scrambling that responds to cursor proximity. Characters scramble with intensity based on distance, creating smooth, organic interactions that feel connected to mouse movement.

The key insight: proximity-based interactions feel more natural. When text responds gradually to cursor distance rather than binary hover states, it creates more engaging and realistic interactive experiences.

Features

• Proximity-based character scrambling with customizable detection radius and distance-based intensity
• GSAP ScrambleTextPlugin integration for smooth character-level animations and performance optimization
• Customizable scramble character sets with support for symbols, letters, numbers, or custom patterns
• Responsive typography with clamp-based font sizing and flexible styling options
• Distance-based animation timing where closer proximity creates faster scrambling effects
• Performance optimized with character reuse and efficient event handling for smooth interactions
• Free open source component compatible with Next.js and shadcn/ui design systems

API Reference

ScrambledText

Proximity-based text scrambling component with GSAP integration.

Proximity Behavior

Distance-based interaction customization:

Character Sets

Scramble pattern customization:

Common gotchas

Performance with long text: Each character becomes an interactive element with distance calculations. Very long paragraphs (500+ characters) might impact performance on lower-end devices. Consider breaking long content into multiple components.

Mobile touch behavior: The component uses pointer events which work on touch devices, but the proximity effect behaves differently with touch since there's no hovering cursor. Consider providing alternative interactions for touch devices.

Font loading timing: Character scrambling depends on proper font metrics for distance calculations. Ensure fonts are loaded before the component initializes, or scrambling positions might be inaccurate.

Rapid mouse movement: Very fast cursor movement might skip over characters without triggering scrambling. The current implementation handles most cases, but extremely rapid movement might miss some characters.

Memory usage with complex scramble patterns: Using very long scrambleChars strings or complex character sets might increase memory usage. Keep character sets reasonably sized for optimal performance.

Related text components you will also like

Questions developers actually ask