Delta Components

Docs

Scramble Text

A dynamic text animation component that creates an engaging scramble effect with customizable speed, intersection observer support, and accessibility features.

27 views

3 downloads

Demo

Code

Open in

Overview

The Scramble Text component creates captivating text reveal animations where characters scramble through random symbols before settling into the final text, perfect for hero sections, loading states, and attention-grabbing headlines. It features intersection observer support for scroll-triggered animations, customizable speed controls, and accessibility-focused design with screen reader compatibility. Ideal for creating modern, engaging user interfaces that enhance the visual storytelling experience.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/scramble-text.json

Usage

1"use client"
2
3import { useRef } from "react"
4
5import ScrambleText, {
6  ScrambleTextHandle,
7} from "@/registry/animations/scramble-text"
8
9export function Component() {
10  const scrambleRef = useRef<ScrambleTextHandle>(null)
11
12  return (
13    <div className="space-y-4">
14      <ScrambleText
15        ref={scrambleRef}
16        text="Welcome to Delta Components"
17        className="text-4xl font-bold"
18        speed={120}
19        onComplete={() => console.log("Animation completed!")}
20      />
21
22      <button
23        onClick={() => scrambleRef.current?.start()}
24        className="px-4 py-2 bg-primary text-primary-foreground rounded"
25      >
26        Replay Animation
27      </button>
28    </div>
29  )
30}

API Reference

Props

Prop	Type	Default	Description
`text`	`string`	-	The text that will be scrambled and displayed (required)
`speed`	`number`	`80`	Speed of the scrambling effect (higher is faster)
`className`	`string`	`""`	Optional custom CSS class for the container
`autoStart`	`boolean`	`true`	Whether to start the animation automatically when mounted
`useIntersectionObserver`	`boolean`	`false`	Whether to use intersection observer to trigger animation when visible
`retriggerOnIntersection`	`boolean`	`false`	Whether to retrigger animation when element comes into view again
`intersectionThreshold`	`number`	`0.3`	Threshold for intersection observer (0-1)
`intersectionRootMargin`	`string`	`"0px"`	Root margin for intersection observer
`scrambleOnHover`	`boolean`	`false`	Whether to scramble text on hover
`onComplete`	`() => void`	`undefined`	Callback function when animation completes

Handle Methods

When using a ref, the component exposes these methods:

1interface ScrambleTextHandle {
2  start: () => void // Start/replay the scramble animation
3  reset: () => void // Reset and restart the animation
4}