useTextScramble

React hook that creates a hacker-style text scramble effect — characters cycle through random glyphs before resolving left to right. Returns the animated text, a scramble trigger function, and loading state. Configurable speed, character set, and step rate. Perfect for hero headings, loading states, and text transitions.

Created by

Installation

npx shadcn@latest add https://21st.dev/r/dev.yadhakim/use-text-scramble

import { Component } from "@/components/ui/use-text-scramble";

export default function Demo() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-background">
      <Component />
    </div>
  );
}