Decode Text

'use client'

import { useEffect, useRef, useState } from 'react'

export interface DecodeTextProps {
  text: string
  /** Glyphs used while scrambling. */
  glyphs?: string
  /** Total duration in ms. */
  duration?: number
  /** When to run: on mount, when scrolled into view, or on hover/focus. */
  trigger?: 'mount' | 'view' | 'hover'
  as?: 'span' | 'h1' | 'h2' | 'h3' | 'p'
  className?: string
  style?: React.CSSProperties
}

const GLYPHS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&*+=/<>'

/**
 * Text that resolves out of noise, left to right. Each character keeps its
 * final width (monospace grid per character), so nothing reflows while it runs.
 */
export function DecodeText({ text, glyphs = GLYPHS, duration = 1100, trigger = 'view', as: Tag = 'span', className, style }: DecodeTextProps) {
  const ref = useRef<HTMLElement>(null)
  const [out, setOut] = useState(text)
  const raf = useRef(0)

  const run = () => {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return setOut(text)
    cancelAnimationFrame(raf.current)
    const start = performance.now()
    const chars = Array.from(text)
    const tick = (now: number) => {
      const t = Math.min(1, (now - start) / duration)
      const next = chars
        .map((c, i) => {
          if (c === ' ') return ' '
          // Each character resolves at its own moment, front-weighted.
          const at = (i / chars.length) * 0.7 + 0.25
          return t >= at ? c : glyphs[(Math.random() * glyphs.length) | 0]
        })
        .join('')
      setOut(next)
      if (t < 1) raf.current = requestAnimationFrame(tick)
    }
    raf.current = requestAnimationFrame(tick)
  }

  useEffect(() => {
    if (trigger === 'mount') run()
    if (trigger !== 'view' || !ref.current) return
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        run()
        io.disconnect()
      }
    })
    io.observe(ref.current)
    return () => {
      io.disconnect()
      cancelAnimationFrame(raf.current)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [text, trigger])

  const T = Tag as React.ElementType
  return (
    <T
      ref={ref}
      className={className}
      style={style}
      aria-label={text}
      onMouseEnter={trigger === 'hover' ? run : undefined}
      onFocus={trigger === 'hover' ? run : undefined}
    >
      <span aria-hidden="true" style={{ display: 'inline-block', whiteSpace: 'pre-wrap' }}>
        {Array.from(out).map((c, i) => (
          <span
            key={i}
            style={{
              display: 'inline-block',
              // Hold each character to the width of its final glyph.
              width: text[i] === ' ' ? '0.3em' : undefined,
              minWidth: '0.55em',
              textAlign: 'center',
              opacity: c === text[i] ? 1 : 0.55,
              transition: 'opacity 160ms',
            }}
          >
            {c}
          </span>
        ))}
      </span>
    </T>
  )
}