||

Chromatic Text Reveal

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Reveal rotating words with a moving multicolor edge.

chromatic-text-reveal-demo

Overview

Chromatic Text Reveal keeps a sentence prefix fixed while revealing a sequence of final words. Use it for a focused product statement, not for essential instructions or rapidly changing status.

Installation
npx honestui@latest add chromatic-text-reveal

Usage

 
import { ChromaticTextReveal } from "@/components/animated/chromatic-text-reveal"

<ChromaticTextReveal prefix="Built to feel" words={["fast", "clear", "human"]} />

Accessibility

The current full word remains available to assistive technology while visual gradient layers are hidden. Reduced motion shows the word without the sweep.

API Reference
PropTypeDefaultDescription
prefix*string–Text that remains fixed.
words*string[]–Words revealed in order.
colorsstring[]–Colors along the reveal edge.
durationnumber1.2Sweep duration in seconds.
pauseDurationnumber0.8Rest between words in seconds.
loopbooleantrueReturns to the first word.
startOnViewbooleantrueWaits until the text enters the viewport.
oncebooleantrueObserves only the first viewport entry.