Text & Numbers

Text Animate

Animate text in word by word, character by character or line by line.

Text Animate splits a string into segments and staggers a preset animation across them. Words, characters and lines are all supported, and the split keeps its whitespace intact so the line never reflows mid-animation.

The animation starts when the text scrolls into view, and is skipped entirely for visitors who have asked for reduced motion.

Usage

Interfaces that move with intent.

<template>
  <div class="flex h-40 w-full items-center justify-center rounded-xl border border-default bg-default px-6">
    <MTextAnimate
      as="h2"
      text="Interfaces that move with intent."
      by="words"
      preset="blurInUp"
      class="max-w-md text-center text-2xl font-semibold text-highlighted"
    />
  </div>
</template>

Examples

Customize

Interfaces that move with intent.

Customize

Asp

Bywords

Delay0.1

Duration0.3

Once

PresetfadeIn

Segment Class

Start On View

TextInterfaces that move with intent.

Props

Prop	Type	Default	Description
`text`	`string`	`''`	Text to animate. The default slot wins if both are given.
`by`	`'words' \| 'characters' \| 'lines'`	`'words'`	Split the text by words, characters or lines.
`preset`	`TextAnimatePreset`	`'fadeIn'`	Animation to play: `fadeIn`, `blurIn`, `blurInUp`, `blurInDown`, `slideUp`, `slideDown`, `slideLeft`, `slideRight`, `scaleUp`, `scaleDown` or `spinIn`.
`delay`	`number`	`0.1`	Seconds between one segment starting and the next.
`duration`	`number`	`0.3`	Seconds each segment takes to settle.
`startOnView`	`boolean`	`true`	Hold the animation until the text scrolls into view.
`once`	`boolean`	`false`	Only play once when `startOnView` is on. With `false` the text replays every time it re-enters the viewport.
`as`	`string`	`'p'`	Element to render the text as.
`segmentClass`	`string`	`''`	CSS classes to apply to each animated segment.
`class`	`string`	`''`	CSS classes to apply to the root element.

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.textAnimate in app.config.ts.

Prop	Type	Default	Description
`ui`	`object`	-	Per-slot classes merged over the theme defaults.

Slot	Props	Description
`root`	-	`inline-block`
`segment`	-	`inline-block whitespace-pre`
`space`	-	`whitespace-pre`

Edit this pageorReport an issue

Stagger From Edges

Text that closes inward from both ends, meeting in the middle.

Text motion

Splits a string into characters, words or lines and staggers a preset reveal across them.