Text Wave Reveal

Elastic wave reveal with rotation. Stagger from left, center (default), or right.

Installation

Requires MotionProvider and gsap. Add the text wave reveal component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/text-wave-reveal.json

Usage

import { TextWaveReveal } from "@/void/text/text-wave-reveal"

<TextWaveReveal split="char" from="center" rotation={12}>
  Wave reveal
</TextWaveReveal>

Examples

From left

Code

<TextWaveReveal from="left" split="char">Wave from left</TextWaveReveal>

From center

Code

<TextWaveReveal from="center" split="char">Wave from center</TextWaveReveal>

From right

Code

<TextWaveReveal from="right" split="char">Wave from right</TextWaveReveal>