ComponentsBlocksDocsExamples

Marquee
GitHub Button
Avatar Group
Typing Text
Word Rotate
Video Text
SVG Text
Counting Number
Sliding Number
Shimmering Text
Text Reveal
Gradient Background
Grid Background
Hover Background
Clock Widget
Components

Text Reveal

UI Library:

Animate text with various reveal effects including fade, slide, scale, blur, typewriter, wave, stagger, rotate, and elastic animations.

Installation

pnpm dlx shadcn@latest add @toui/text-reveal

Examples

Slide Variants

Scale

Blur

Typewriter

Wave

Stagger

Rotate

Elastic

Neon Glow

Fire Magic

API Reference

This component is built using Motion primitives and includes the following custom props:

TextReveal

PropTypeDefault
children string
variant enum "fade"
className string
style React.CSSProperties
delay number0
duration number0.6
staggerDelay number0.03
once booleantrue
startOnView booleantrue
wordLevel booleanfalse
onComplete () => void

Credits

  • Built with Motion.
PreviouseShimmering TextNextGradient Background

On This Page

  • Installation
  • Examples
    • Slide Variants
    • Scale
    • Blur
    • Typewriter
    • Wave
    • Stagger
    • Rotate
    • Elastic
    • Neon Glow
    • Fire Magic
  • API Reference
    • TextReveal
  • Credits

We use cookies

We use cookies to ensure you get the best experience on our website. For more information on how we use cookies, please see our cookie policy.

By clicking Accept, you agree to our use of cookies.
Learn more.

Token UI

Components

  • Overview
  • Pricing
  • Marketplace
  • Features
  • Integrations
  • Pricing

Blocks

  • Charts
  • Team
  • Blog
  • Careers
  • Contact
  • Privacy

Examples

  • Help
  • Sales
  • Advertise

Docs

  • Twitter
  • Instagram
  • LinkedIn

© 2025 TOUI.dev. All rights reserved.

  • Terms and Conditions
  • Privacy Policy