Text Reveal

Installation

Usage

import { TextReveal } from '@/components/odysseyui/text-reveal';

export default function Page() {
  return (
    <TextReveal speed={20} preset="cyberpunk" className="text-4xl font-mono">
      Odyssey UI
    </TextReveal>
  );
}

How It Works

• The animation runs in two phases: scramble (random characters expand outward) then reveal (characters lock in left-to-right).
• During scramble, each step adds one more random character to the visible range, avoiding consecutive duplicates.
• During reveal, characters resolve one-by-one with a blinking _ cursor marking the current position.
• speed controls the interval in milliseconds between each animation step.
• delay defers the start by the given number of seconds.
• triggerOnView uses an Intersection Observer to start the animation only when the element enters the viewport.
• once controls whether the view trigger fires only on first entry or re-fires on every re-entry.
• preset selects a built-in scramble character pool; pass characters to use a custom pool instead.

API Reference

TextReveal

CharacterPreset