React Shuffle Text Effect

Advanced GSAP-powered text shuffling animation with character-level transformations, scroll triggers, and customizable reveal patterns. Perfect for dynamic reveals.

Want to create shuffling text animations?

Join our Discord community for help from other developers.

Most text reveal animations use simple fades or slides that don't capture the mechanical, slot-machine-like feeling of characters shuffling into place. This component creates sophisticated character-level shuffling effects using GSAP's SplitText plugin with customizable directions, timing, and reveal patterns.

GSAP-powered character shuffling

Text that shuffles characters horizontally before revealing the final message:

Loading component...

import React, { useRef, useEffect, useState } from 'react';import { gsap } from 'gsap';import { ScrollTrigger } from 'gsap/ScrollTrigger';import { SplitText as GSAPSplitText } from 'gsap/SplitText';gsap.registerPlugin(ScrollTrigger, GSAPSplitText);export interface ShuffleProps {  text: string;  className?: string;  style?: React.CSSProperties;  shuffleDirection?: 'left' | 'right';  duration?: number;  maxDelay?: number;  ease?: string | ((t: number) => number);  threshold?: number;  rootMargin?: string;  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';  textAlign?: React.CSSProperties['textAlign'];  onShuffleComplete?: () => void;  shuffleTimes?: number;  animationMode?: 'random' | 'evenodd';  loop?: boolean;  loopDelay?: number;  stagger?: number;  scrambleCharset?: string;  colorFrom?: string;  colorTo?: string;  triggerOnce?: boolean;  respectReducedMotion?: boolean;  triggerOnHover?: boolean;}const Shuffle: React.FC<ShuffleProps> = ({  text,  className = '',  style = {},  shuffleDirection = 'right',  duration = 0.35,  maxDelay = 0,  ease = 'power3.out',  threshold = 0.1,  rootMargin = '-100px',  tag = 'p',  textAlign = 'center',  onShuffleComplete,  shuffleTimes = 1,  animationMode = 'evenodd',  loop = false,  loopDelay = 0,  stagger = 0.03,  scrambleCharset = '',  colorFrom,  colorTo,  triggerOnce = true,  respectReducedMotion = true,  triggerOnHover = true}) => {  const ref = useRef<HTMLElement>(null);  const [fontsLoaded, setFontsLoaded] = useState(false);  const [ready, setReady] = useState(false);  const splitRef = useRef<GSAPSplitText | null>(null);  const wrappersRef = useRef<HTMLElement[]>([]);  const tlRef = useRef<gsap.core.Timeline | null>(null);  const playingRef = useRef(false);  const hoverHandlerRef = useRef<((e: Event) => void) | null>(null);  useEffect(() => {    if ('fonts' in document) {      if (document.fonts.status === 'loaded') setFontsLoaded(true);      else document.fonts.ready.then(() => setFontsLoaded(true));    } else setFontsLoaded(true);  }, []);  useEffect(() => {      if (!ref.current || !text || !fontsLoaded) return;      if (respectReducedMotion && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {        onShuffleComplete?.();        return;      }      const el = ref.current as HTMLElement;      const startPct = (1 - threshold) * 100;      const mm = /^(-?\d+(?:\.\d+)?)(px|em|rem|%)?$/.exec(rootMargin || '');      const mv = mm ? parseFloat(mm[1]) : 0;      const mu = mm ? mm[2] || 'px' : 'px';      const sign = mv === 0 ? '' : mv < 0 ? `-=${Math.abs(mv)}${mu}` : `+=${mv}${mu}`;      const start = `top ${startPct}%${sign}`;      const removeHover = () => {        if (hoverHandlerRef.current && ref.current) {          ref.current.removeEventListener('mouseenter', hoverHandlerRef.current);          hoverHandlerRef.current = null;        }      };      const teardown = () => {        if (tlRef.current) {          tlRef.current.kill();          tlRef.current = null;        }        if (wrappersRef.current.length) {          wrappersRef.current.forEach(wrap => {            const inner = wrap.firstElementChild as HTMLElement | null;            const orig = inner?.querySelector('[data-orig="1"]') as HTMLElement | null;            if (orig && wrap.parentNode) wrap.parentNode.replaceChild(orig, wrap);          });          wrappersRef.current = [];        }        try {          splitRef.current?.revert();        } catch {}        splitRef.current = null;        playingRef.current = false;      };      const build = () => {        teardown();        splitRef.current = new GSAPSplitText(el, {          type: 'chars',          charsClass: 'shuffle-char',          wordsClass: 'shuffle-word',          linesClass: 'shuffle-line',          smartWrap: true,          reduceWhiteSpace: false        });        const chars = (splitRef.current.chars || []) as HTMLElement[];        wrappersRef.current = [];        const rolls = Math.max(1, Math.floor(shuffleTimes));        const rand = (set: string) => set.charAt(Math.floor(Math.random() * set.length)) || '';        chars.forEach(ch => {          const parent = ch.parentElement;          if (!parent) return;          const w = ch.getBoundingClientRect().width;          if (!w) return;          const wrap = document.createElement('span');          wrap.className = 'inline-block overflow-hidden align-baseline text-left';          Object.assign(wrap.style, { width: w + 'px' });          const inner = document.createElement('span');          inner.className = 'inline-block whitespace-nowrap will-change-transform origin-left transform-gpu';          parent.insertBefore(wrap, ch);          wrap.appendChild(inner);          const firstOrig = ch.cloneNode(true) as HTMLElement;          firstOrig.className = 'inline-block text-left';          Object.assign(firstOrig.style, { width: w + 'px' });          ch.setAttribute('data-orig', '1');          ch.className = 'inline-block text-left';          Object.assign(ch.style, { width: w + 'px' });          inner.appendChild(firstOrig);          for (let k = 0; k < rolls; k++) {            const c = ch.cloneNode(true) as HTMLElement;            if (scrambleCharset) c.textContent = rand(scrambleCharset);            c.className = 'inline-block text-left';            Object.assign(c.style, { width: w + 'px' });            inner.appendChild(c);          }          inner.appendChild(ch);          const steps = rolls + 1;          let startX = 0;          let finalX = -steps * w;          if (shuffleDirection === 'right') {            const firstCopy = inner.firstElementChild as HTMLElement | null;            const real = inner.lastElementChild as HTMLElement | null;            if (real) inner.insertBefore(real, inner.firstChild);            if (firstCopy) inner.appendChild(firstCopy);            startX = -steps * w;            finalX = 0;          }          gsap.set(inner, { x: startX, force3D: true });          if (colorFrom) (inner.style as any).color = colorFrom;          inner.setAttribute('data-final-x', String(finalX));          inner.setAttribute('data-start-x', String(startX));          wrappersRef.current.push(wrap);        });      };      const inners = () => wrappersRef.current.map(w => w.firstElementChild as HTMLElement);      const randomizeScrambles = () => {        if (!scrambleCharset) return;        wrappersRef.current.forEach(w => {          const strip = w.firstElementChild as HTMLElement;          if (!strip) return;          const kids = Array.from(strip.children) as HTMLElement[];          for (let i = 1; i < kids.length - 1; i++) {            kids[i].textContent = scrambleCharset.charAt(Math.floor(Math.random() * scrambleCharset.length));          }        });      };      const cleanupToStill = () => {        wrappersRef.current.forEach(w => {          const strip = w.firstElementChild as HTMLElement;          if (!strip) return;          const real = strip.querySelector('[data-orig="1"]') as HTMLElement | null;          if (!real) return;          strip.replaceChildren(real);          strip.style.transform = 'none';          strip.style.willChange = 'auto';        });      };      const play = () => {        const strips = inners();        if (!strips.length) return;        playingRef.current = true;        const tl = gsap.timeline({          smoothChildTiming: true,          repeat: loop ? -1 : 0,          repeatDelay: loop ? loopDelay : 0,          onRepeat: () => {            if (scrambleCharset) randomizeScrambles();            gsap.set(strips, { x: (i, t: HTMLElement) => parseFloat(t.getAttribute('data-start-x') || '0') });            onShuffleComplete?.();          },          onComplete: () => {            playingRef.current = false;            if (!loop) {              cleanupToStill();              if (colorTo) gsap.set(strips, { color: colorTo });              onShuffleComplete?.();              armHover();            }          }        });        const addTween = (targets: HTMLElement[], at: number) => {          tl.to(            targets,            {              x: (i, t: HTMLElement) => parseFloat(t.getAttribute('data-final-x') || '0'),              duration,              ease,              force3D: true,              stagger: animationMode === 'evenodd' ? stagger : 0            },            at          );          if (colorFrom && colorTo) tl.to(targets, { color: colorTo, duration, ease }, at);        };        if (animationMode === 'evenodd') {          const odd = strips.filter((_, i) => i % 2 === 1);          const even = strips.filter((_, i) => i % 2 === 0);          const oddTotal = duration + Math.max(0, odd.length - 1) * stagger;          const evenStart = odd.length ? oddTotal * 0.7 : 0;          if (odd.length) addTween(odd, 0);          if (even.length) addTween(even, evenStart);        } else {          strips.forEach(strip => {            const d = Math.random() * maxDelay;            tl.to(              strip,              {                x: parseFloat(strip.getAttribute('data-final-x') || '0'),                duration,                ease,                force3D: true              },              d            );            if (colorFrom && colorTo) tl.fromTo(strip, { color: colorFrom }, { color: colorTo, duration, ease }, d);          });        }        tlRef.current = tl;      };      const armHover = () => {        if (!triggerOnHover || !ref.current) return;        removeHover();        const handler = () => {          if (playingRef.current) return;          build();          if (scrambleCharset) randomizeScrambles();          play();        };        hoverHandlerRef.current = handler;        ref.current.addEventListener('mouseenter', handler);      };      const create = () => {        build();        if (scrambleCharset) randomizeScrambles();        play();        armHover();        setReady(true);      };      const st = ScrollTrigger.create({        trigger: el,        start,        once: triggerOnce,        onEnter: create      });      return () => {        st.kill();        removeHover();        teardown();        setReady(false);      };  }, [    text,    duration,    maxDelay,    ease,    threshold,    rootMargin,    fontsLoaded,    shuffleDirection,    shuffleTimes,    animationMode,    loop,    loopDelay,    stagger,    scrambleCharset,    colorFrom,    colorTo,    triggerOnce,    respectReducedMotion,    triggerOnHover  ]);  const baseTw = 'inline-block whitespace-normal break-words will-change-transform uppercase text-[4rem] leading-none';  const commonStyle: React.CSSProperties = {    textAlign,    fontFamily: `'Press Start 2P', sans-serif`,    ...style  };  const classes = `${baseTw} ${ready ? 'visible' : 'invisible'} ${className}`.trim();  const Tag = (tag || 'p') as keyof React.JSX.IntrinsicElements;  return React.createElement(Tag, { ref: ref as any, className: classes, style: commonStyle }, text);};export default Shuffle;

Built with TypeScript for React applications, using GSAP's SplitText plugin and ScrollTrigger for high-performance character-level animations with precise control over shuffle direction, timing, and scrambling effects.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/shuffle.json

npx shadcn@latest add https://www.shadcn.io/registry/shuffle.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/shuffle.json

bunx shadcn@latest add https://www.shadcn.io/registry/shuffle.json

Usage

import Shuffle from "@/components/text/shuffle";

<div className="flex items-center justify-center min-h-screen w-full p-4 sm:p-8">
  <div className="text-center">
    <Shuffle
      text="SHADCN"
      shuffleDirection="right"
      duration={0.5}
      animationMode="evenodd"
      shuffleTimes={2}
      ease="power3.out"
      stagger={0.05}
      threshold={0.1}
      triggerOnce={false}
      triggerOnHover={true}
      respectReducedMotion={true}
      className="text-foreground"
      style={{
        fontSize: 'clamp(2rem, 8vw, 4rem)',
        fontFamily: 'inherit'
      }}
    />
  </div>
</div>

Why simple reveals aren't dynamic enough

Traditional text animations use basic opacity or position changes—approaches that don't create the mechanical, satisfying feeling of characters physically shuffling into position. Static reveals lack the kinetic energy and visual interest that makes shuffling effects compelling.

This React component uses GSAP's SplitText to break text into individual characters, then creates horizontal shuffling animations where characters slide into their final positions. Multiple shuffle cycles, scrambling characters, and customizable directions create slot-machine-like reveals that feel mechanical and engaging.

The key insight: character-level shuffling feels more satisfying than word-level animations. When individual letters move horizontally through multiple positions before settling, it creates more convincing mechanical animation than simple fades or slides.

Features

Advanced GSAP SplitText integration with character-level manipulation and horizontal sliding animations
Multiple shuffle cycles with customizable character scrambling and randomization between shuffles
Flexible trigger system supporting scroll-based reveals, hover interactions, and one-time animations
Even/odd stagger patterns for alternating character timing and sophisticated reveal sequences
Color transition support with customizable from/to colors synchronized with shuffle animations
Accessibility-first design respecting reduced motion preferences and semantic HTML structure
Free open source component compatible with Next.js and shadcn/ui design systems

API Reference

Shuffle

GSAP-powered text shuffling component with character-level animations.

Prop	Type	Default	Description
`text`	`string`	-	Text content to shuffle
`className`	`string`	`''`	Additional CSS classes
`style`	`React.CSSProperties`	`{}`	Inline styles
`shuffleDirection`	`'left' \| 'right'`	`'right'`	Character slide direction
`duration`	`number`	`0.35`	Animation duration in seconds
`maxDelay`	`number`	`0`	Maximum random delay for random mode
`ease`	`string \| function`	`'power3.out'`	GSAP easing curve
`threshold`	`number`	`0.1`	Scroll trigger threshold (0-1)
`rootMargin`	`string`	`'-100px'`	Scroll trigger margin
`tag`	`HTMLElement`	`'p'`	HTML tag to render
`textAlign`	`CSS property`	`'center'`	Text alignment
`onShuffleComplete`	`function`	-	Callback when shuffle completes
`shuffleTimes`	`number`	`1`	Number of shuffle cycles
`animationMode`	`'random' \| 'evenodd'`	`'evenodd'`	Character stagger pattern
`loop`	`boolean`	`false`	Enable continuous looping
`loopDelay`	`number`	`0`	Delay between loop cycles
`stagger`	`number`	`0.03`	Delay between character animations
`scrambleCharset`	`string`	`''`	Characters to use for scrambling
`colorFrom`	`string`	-	Starting color for transitions
`colorTo`	`string`	-	Ending color for transitions
`triggerOnce`	`boolean`	`true`	Trigger animation only once
`respectReducedMotion`	`boolean`	`true`	Respect accessibility preferences
`triggerOnHover`	`boolean`	`true`	Enable hover re-triggering

Animation Modes

Character stagger pattern options:

Mode	Behavior	Best For
evenodd	Alternating even/odd character timing	Smooth, wave-like reveals
random	Random delays within maxDelay	Chaotic, scattered reveals

Shuffle Directions

Character movement patterns:

Direction	Effect	Visual Result
right	Characters slide in from left	Left-to-right mechanical feeling
left	Characters slide in from right	Right-to-left reverse effect

Common gotchas

GSAP SplitText license: SplitText is a premium GSAP plugin requiring a license for commercial use. Ensure you have proper licensing before deploying to production environments.

Font loading timing: The component waits for fonts to load before initializing. Custom fonts might cause delays in animation start. Consider preloading fonts or using font-display: swap for better performance.

Performance with long text: Each character creates multiple DOM elements for shuffling. Very long text (50+ characters) might impact performance. Consider breaking long text into multiple components.

Responsive sizing conflicts: The component uses fixed character widths for shuffling. Responsive font sizes might cause layout issues during animation. Test across different screen sizes carefully.

Scroll trigger conflicts: Multiple shuffle components might interfere with each other's scroll triggers. Ensure proper spacing and unique trigger points for optimal performance.

React Shuffle Text Effect

GSAP-powered character shuffling

Installation

Usage

Why simple reveals aren't dynamic enough

Features

API Reference

Shuffle

Animation Modes

Shuffle Directions

Common gotchas

Decrypted Text

Scrambled Text

Glitch Text

Rolling Text

Splitting Text

Text Generate Effect

Questions developers actually ask

On this page

React Shuffle Text Effect

Reactshuffle

Decrypted Text

Scrambled Text

Glitch Text

Rolling Text

Splitting Text

Text Generate Effect

How do I control shuffle timing and direction?

How does character scrambling work?

How can I optimize performance?

How do I customize the appearance?

How do I customize scroll triggers?

How do color transitions work?

How does this handle accessibility?

On this page