Chromatic Text Reveal

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="Made to stay" words={["useful", "calm", "clear"]} />

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

Prop	Type	Default	Description
prefix*	string	–	Text that remains fixed.
words*	string[]	–	Words revealed in order.
colors	string[]	–	Colors along the reveal edge.
duration	number	1.2	Sweep duration in seconds.
pauseDuration	number	0.8	Rest between words in seconds.
loop	boolean	true	Returns to the first word.
startOnView	boolean	true	Waits until the text enters the viewport.
once	boolean	true	Observes only the first viewport entry.

Bouncy AccordionA connected accordion whose rows separate and settle around expanded content.

DockA compact action dock with a shared animated active indicator.

On This Page

Overview Installation Usage Accessibility API Reference