Text Reveal

Text revealed by a sliding mask on scroll entry. Clean clip-path animation, viewport-triggered.

Revealed by a sliding mask →

Code

import { TextReveal } from "@/components/ui/text-reveal"

export default function Example() {
  return (
    <TextReveal
      text="Revealed by a sliding mask"
      className="text-3xl font-bold"
    />
  )
}

Installation

$npx particleui-cli add text-reveal

Usage

TSX

import { TextReveal } from "@/components/ui/text-reveal"

export default function Example() {
  return (
    <TextReveal
      text="Revealed by a sliding mask"
      className="text-3xl font-bold"
    />
  )
}

Props

Prop	Type	Default	Required
text	string	—	yes
className	string	—	no
delay	number	`0`	no

Details

Source filecomponents/ui/text-reveal.tsx

Typeui

Categoriestext, particles

npm dependencies

Registry deps

Claude skill—