API Reference · 2 min read

ScrambleText API

Complete API reference for the ScrambleText component

ScrambleText API

Complete API reference for the ScrambleText component.

Import

import { ScrambleText } from "dot-anime-react";
import type { ScrambleTextConfig, ScrambleTextProps } from "dot-anime-react";

Props

Prop	Type	Default	Description
`text`*	`string`	-	The text content to display. Animation triggers when this value changes.
`duration`	`number`	300	Total duration of the scramble animation in milliseconds.
`interval`	`number`	50	Time between character update cycles in milliseconds.
`chars`	`string`	'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'	Character set used for the scramble effect.
`animate`	`boolean`	true	Whether to animate text changes. Set to false for instant updates.
`onComplete`	`() => void`	-	Callback function invoked when the animation completes.
`style`	`CSSProperties`	-	CSS styles applied to the span element.
`className`	`string`	-	CSS class name for the span element.

Types

ScrambleTextConfig

Configuration type for ScrambleText (excludes text):

type ScrambleTextConfig = Omit<ScrambleTextProps, "text">;

ScrambleTextProps

Full props type including all HTML span attributes:

interface ScrambleTextProps extends HTMLAttributes<HTMLSpanElement> {
  text: string;
  duration?: number;
  interval?: number;
  chars?: string;
  animate?: boolean;
  onComplete?: () => void;
}

Animation Behavior

When text prop changes, animation begins
Characters scramble randomly from the chars set
Characters progressively lock into their final positions
Animation completes after duration milliseconds
onComplete callback fires when animation ends

Character Set Presets

// Alphanumeric (default)
const alphanumeric = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

// Binary
const binary = "01";

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

// Katakana
const katakana = "アイウエオカキクケコサシスセソタチツテトナニヌネノ";