Reveal Text

Directional text reveal with animated box overlay that slides away on scroll into view

Revealtextwithdirection

import { RevealText } from "@/components/vritti/reveal-text";

export function RevealTextExample() {
  return (
    <div className="relative flex h-[200px] w-full items-center justify-center overflow-hidden rounded-lg border">
      <RevealText
        mode="auto"
        direction="down"
        className="text-3xl font-bold"
        stagger={0.15}
      >
        Reveal text with direction
      </RevealText>
    </div>
  );
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/reveal-text"

Dependencies


pnpm add motion