Split Text
Free
Letters that spring into place one by one when the text scrolls into view.
Ready for launch
Customize
0.035s
From
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/split-text.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/split-text.tsx.
Usage
import { SplitText } from "@/components/ui/split-text";
<h2 className="text-5xl font-black uppercase">
<SplitText text="Ready for launch" from="bottom" />
</h2>Props
5 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text to reveal, split into letters. |
| stagger | number | 0.035 | Seconds between one letter and the next. |
| from | "bottom" | "top" | "bottom" | Where the letters come from. |
| once | boolean | true | Play only the first time the text enters the viewport. |
| className | string | — | Extra classes for the text. |
Dependencies: motion