# Chromatic Text Reveal

> Reveal rotating words with a moving multicolor edge.

Source: https://www.honestui.com/docs/animated/chromatic-text-reveal

```tsx
import { ChromaticTextReveal } from "@/registry/default/animated/chromatic-text-reveal";

export function ChromaticTextRevealDemo() {
  return (
    <ChromaticTextReveal
      prefix="Make every interaction feel"
      words={["clear", "natural", "polished"]}
      once={false}
      className="w-full justify-center px-6 text-center text-xl font-semibold sm:text-3xl"
    />
  );
}

```

## Overview [#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 [#installation]

<CliBlock commands="[&#x22;chromatic-text-reveal&#x22;]" />

## Usage [#usage]

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

<ChromaticTextReveal prefix="Made to stay" words={["useful", "calm", "clear"]} />
```

## Accessibility [#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 [#api-reference]


  ### `prefix`

type: `string`

Text that remains fixed.

  ### `words`

type: `string[]`

Words revealed in order.

  ### `colors`

type: `string[]`

Colors along the reveal edge.

  ### `duration`

type: `number` · default: `1.2`

Sweep duration in seconds.

  ### `pauseDuration`

type: `number` · default: `0.8`

Rest between words in seconds.

  ### `loop`

type: `boolean` · default: `true`

Returns to the first word.

  ### `startOnView`

type: `boolean` · default: `true`

Waits until the text enters the viewport.

  ### `once`

type: `boolean` · default: `true`

Observes only the first viewport entry.