Text

Split Reveal

Masks text and reveals lines, words, or characters on mount or scroll. Framework-agnostic Custom Element.

lit
gsap

Preview

Masks text and reveals lines, words, or characters on mount or scroll.

Attributes

Installation

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/split-reveal.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/split-reveal.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/split-reveal.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/split-reveal.json

Usage

---
import "@/components/motion-kit/split-reveal-element.ts";
---

<motion-split-reveal text="Hello World" mode="lines"></motion-split-reveal>

import "@/components/motion-kit/split-reveal-element.ts";

export default function Page() {
  return (
    <motion-split-reveal text="Hello World" mode="lines" />
  );
}

<script setup>
import "@/components/motion-kit/split-reveal-element.ts";
</script>

<template>
  <motion-split-reveal text="Hello World" mode="lines" />
</template>

<script>
  import "@/components/motion-kit/split-reveal-element.ts";
</script>

<motion-split-reveal text="Hello World" mode="lines" />

<script type="module" src="/components/motion-kit/split-reveal-element.js"></script>

<motion-split-reveal text="Hello World" mode="lines"></motion-split-reveal>

API Reference

Attribute	Type	Default
`text`	`string`	`""`
`mode`	`"lines" \| "words" \| "chars"`	`"lines"`
`delay`	`number`	`0`
`trigger-on-scroll`	`boolean`	`false`
`scroll-element`	`string`	`""`
`duration`	`number`	`0`
`stagger`	`number`	`0`