Components · 2 min read

ScrambleText

Text scramble animation component for creating decode effects

ScrambleText

The ScrambleText component creates a text scramble/decode animation effect when the text content changes.

Basic Usage

import { ScrambleText } from "dot-anime-react";

<ScrambleText
  text="Hello World"
  duration={400}
  interval={30}
/>

Props

Prop	Type	Default	Description
`text`*	`string`	-	The text to display and animate
`duration`	`number`	300	Total animation duration in milliseconds
`interval`	`number`	50	Interval between character updates
`chars`	`string`	'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'	Characters to use for scrambling
`animate`	`boolean`	true	Whether to animate text changes
`onComplete`	`() => void`	-	Callback fired when animation completes

Examples

Custom Scramble Characters

// Binary style
<ScrambleText
  text="Loading..."
  chars="01"
/>

// Symbols
<ScrambleText
  text="Processing"
  chars="!@#$%^&*()_+-=[]{}|;:,.<>?"
/>

// Japanese Katakana
<ScrambleText
  text="アニメーション"
  chars="アイウエオカキクケコサシスセソタチツテト"
/>

Controlled Animation

import { useState } from "react";

function ControlledScramble() {
  const [text, setText] = useState("Initial");

  return (
    <div>
      <ScrambleText text={text} />
      <button onClick={() => setText("Updated!")}>
        Change Text
      </button>
    </div>
  );
}

With Callback

<ScrambleText
  text="Complete"
  onComplete={() => console.log("Animation finished!")}
/>

Disable Animation

<ScrambleText
  text="No animation"
  animate={false}
/>

Styling

ScrambleText accepts standard HTML attributes and can be styled with className or style:

<ScrambleText
  text="Styled Text"
  className="text-2xl font-bold text-emerald-400"
  style={{ letterSpacing: "0.1em" }}
/>