TextReveal Text

Reveal Text

Reveals text with a fade or slide-in effect, optionally triggered on scroll into view.

Reveal text with fade/slide!

Slide in from left

Delayed reveal

This reveals when in view

Code

Install with shadcn Beta

Terminal

npx shadcn@latest add "https://smoothui.dev/r/reveal-text.json"

Or install the demo

Terminal

npx shadcn@latest add "https://smoothui.dev/r/reveal-text-demo.json"

How to use

Demo.tsx

"use client"

import RevealText from "@/components/smoothui/ui/RevealText"

export default function RevealTextDemo() {
  return (
    <div className="relative max-w-md space-y-6">
      <div>
        <RevealText>Reveal text with fade/slide!</RevealText>
        <div>
          <RevealText direction="left" className="text-brand text-lg font-bold">
            Slide in from left
          </RevealText>
        </div>
        <div>
          <RevealText delay={500} className="text-2xl font-semibold">
            Delayed reveal
          </RevealText>
        </div>
        <div style={{ height: 100 }} />
        <RevealText triggerOnView className="text-xl font-bold">
          This reveals when in view
        </RevealText>
      </div>
    </div>
  )
}

Props

Prop	Type	Default
children	string	-
direction?	"up" \| "down" \| "left" \| "right"	-
delay?	number	-
triggerOnView?	boolean	-
className?	string	-

Wave Text

Animates each letter in a wave pattern using Framer Motion.