# Text Reveal Effects Demo

> Example usage of Text Reveal.

A shadcn/ui block from the [@mizzle](https://mizzle.saddy.me/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/mizzle/text-reveal-effects-demo).

- Page, with a live preview: https://shadcn.exchange/r/mizzle/text-reveal-effects-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/mizzle/text-reveal-effects-demo-light-53a4ce6e5acb230e.png
- Registry item: https://mizzle.saddy.me/r/text-reveal-effects-demo.json
- Categories: text
- Listed: 2026-10-17, source last changed 2026-10-17

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/mizzle/text-reveal-effects-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@mizzle/text-reveal`

## Notes from the registry

Docs: https://mizzle.saddy.me/docs/components/text/text-reveal

## Files

### `registry/demos/text/text-reveal-effects-demo.tsx`

```tsx
import {
  TextReveal,
  type TextRevealEffect,
} from "@/components/mizzle/text/text-reveal"

const EFFECTS: {
  effect: TextRevealEffect
  by: "chars" | "words" | "lines"
  stagger: number
}[] = [
  { effect: "mask", by: "lines", stagger: 0.12 },
  { effect: "blur", by: "chars", stagger: 0.015 },
  { effect: "fade", by: "words", stagger: 0.05 },
]

const capitalize = (word: string) =>
  word.charAt(0).toUpperCase() + word.slice(1)

export default function TextRevealEffectsDemo() {
  return (
    <div className="flex max-w-[34ch] flex-col gap-6 text-[16px]/6 font-medium tracking-[-0.01em] text-foreground">
      {EFFECTS.map(({ effect, by, stagger }, i) => (
        <TextReveal
          key={effect}
          effect={effect}
          by={by}
          inView={false}
          delay={i * 0.6}
          stagger={stagger}
        >
          {`${capitalize(effect)} by ${by}: the same stagger, a different arrival.`}
        </TextReveal>
      ))}
    </div>
  )
}
```