Vertical Cut Reveal

Text reveal animation with vertical cut effect, supporting word, character, and line-level splitting

import VerticalCutReveal from "@/components/vritti/vertical-cut-reveal"

export function VerticalCutRevealExample() {
  return (
    <div className="flex flex-col items-center justify-center gap-8 p-8">
      <VerticalCutReveal
        splitBy="characters"
        staggerDuration={0.04}
        containerClassName="text-4xl font-bold"
      >
        Vertical Cut Reveal
      </VerticalCutReveal>
    </div>
  )
}

Installation


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

Dependencies


pnpm add motion