Text

Split Reveal

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

Preview

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

Attributes

Installation

pnpm dlx motion-blocks add split-reveal

npx motion-blocks add split-reveal

bunx --bun motion-blocks add split-reveal

yarn dlx motion-blocks add split-reveal

Usage

---import "@/components/motion-blocks/split-reveal-element.ts";--- <motion-split-reveal text="Hello World" mode="lines"></motion-split-reveal>

import "@/components/motion-blocks/split-reveal-element.ts"; export default function Page() {  return (    <motion-split-reveal text="Hello World" mode="lines" />  );}

<script setup>import "@/components/motion-blocks/split-reveal-element.ts";</script> <template>  <motion-split-reveal text="Hello World" mode="lines" /></template>

<script>  import "@/components/motion-blocks/split-reveal-element.ts";</script> <motion-split-reveal text="Hello World" mode="lines" />

<script type="module" src="/components/motion-blocks/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`