"use client"

import * as React from "react"

const CHARS = "!<>-_\\/[]{}-=+*^?#abcdef0123456789"

export interface TextScrambleProps {
  text: string
  duration?: number
  trigger?: "hover" | "mount"
  className?: string
}

export function TextScramble({ text, duration = 550, trigger = "hover", className }: TextScrambleProps) {
  const [display, setDisplay] = React.useState(text)
  const rafRef = React.useRef<number | undefined>(undefined)

  const run = React.useCallback(() => {
    if (rafRef.current) cancelAnimationFrame(rafRef.current)
    const start = performance.now()
    const tick = (now: number) => {
      const progress = Math.min((now - start) / duration, 1)
      const revealed = progress * text.length
      let out = ""
      for (let i = 0; i < text.length; i++) {
        if (text[i] === " ") out += " "
        else if (i < revealed) out += text[i]
        else out += CHARS[Math.floor(Math.random() * CHARS.length)]
      }
      setDisplay(out)
      if (progress < 1) rafRef.current = requestAnimationFrame(tick)
      else setDisplay(text)
    }
    rafRef.current = requestAnimationFrame(tick)
  }, [text, duration])

  React.useEffect(() => {
    if (trigger === "mount") run()
    return () => {
      if (rafRef.current) cancelAnimationFrame(rafRef.current)
    }
  }, [trigger, run])

  return (
    <span
      onMouseEnter={trigger === "hover" ? run : undefined}
      className={className}
      style={{ fontVariantNumeric: "tabular-nums" }}
    >
      {display}
    </span>
  )
}
Text Scramble

Installation

Usage
