Componentschevron_rightTextScramble

TextScramble

A text animation that scrambles characters before revealing the final text.

9:41

signal_cellular_altwifibattery_full

Text Scramble

Preview Controls

Animation

Opacity fades from 0 to 1

This is a CSS-based preview of the animation. The actual React Native component uses physics-based springs for a more natural feel.

Installation

Usage

Example.tsx

import { TextScramble } from './components/TextScramble';

export default function App() {
  return (
    <TextScramble style={{ fontSize: 24, fontWeight: 'bold' }}>
      Hello World
    </TextScramble>
  );
}

Full Component Code

TextScramble.tsx

1import React, { useEffect, useState } from 'react';
2import { Text, StyleSheet } from 'react-native';
3
4const defaultChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
5
6export const TextScramble = ({ children, duration = 0.8, speed = 0.04, characterSet = defaultChars, trigger = true, onScrambleComplete, style }) => {
7  const [displayText, setDisplayText] = useState(children);
8  const [isAnimating, setIsAnimating] = useState(false);
9  const text = children;
10
11  useEffect(() => {
12    if (!trigger || isAnimating) return;
13    setIsAnimating(true);
14
15    const steps = duration / speed;
16    let step = 0;
17
18    const interval = setInterval(() => {
19      let scrambled = '';
20      const progress = step / steps;
21
22      for (let i = 0; i < text.length; i++) {
23        if (text[i] === ' ') {
24          scrambled += ' ';
25          continue;
26        }
27
28        if (progress * text.length > i) {
29          scrambled += text[i];
30        } else {
31          scrambled += characterSet[Math.floor(Math.random() * characterSet.length)];
32        }
33      }
34
35      setDisplayText(scrambled);
36      step++;
37
38      if (step > steps) {
39        clearInterval(interval);
40        setDisplayText(text);
41        setIsAnimating(false);
42        onScrambleComplete?.();
43      }
44    }, speed * 1000);
45
46    return () => clearInterval(interval);
47  }, [trigger, children, duration, speed, characterSet]);
48
49  return <Text style={style}>{displayText}</Text>;
50};

Props

Name	Type	Default	Description
children	string	-	Text content
duration	number	0.8	Animation duration (s)
speed	number	0.04	Speed of character change (s)
characterSet	string	A-Z, a-z, 0-9	Characters to use for scrambling
trigger	boolean	true	Trigger animation
onScrambleComplete	() => void	-	Callback when finished

arrow_backTextShimmer

SlidingNumberarrow_forward