Delta Components

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

"use client"
 
import { useRef } from "react"
 
import ScrambleText, {
  ScrambleTextHandle,
} from "@/registry/animations/scramble-text"
 
export function Component() {
  const scrambleRef = useRef<ScrambleTextHandle>(null)
 
  return (
    <div className="space-y-4">
      <ScrambleText
        ref={scrambleRef}
        text="Welcome to Delta Components"
        className="text-4xl font-bold"
        speed={120}
        onComplete={() => console.log("Animation completed!")}
      />
 
      <button
        onClick={() => scrambleRef.current?.start()}
        className="px-4 py-2 bg-primary text-primary-foreground rounded"
      >
        Replay Animation
      </button>
    </div>
  )
}

API Reference

Props

Handle Methods

When using a ref, the component exposes these methods:

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

Examples

Basic Scramble Text

Dynamic text animation with customizable scramble effect for hero sections.

Intersection Observer

Text that scrambles into view when scrolled, with options for retrigger and hover effects.

Album Track List

Cascading scramble effect showcasing multiple text elements with staggered timing.