Text
Text
Line Slide
Multi-line statement where each line slides up from behind a mask, one line after another.
Install
Usage
<Center>
<LineSlide text={"Write the script.\nRender the story."} align="left" />
</Center>Props
| Name | Type | Default | Description |
|---|---|---|---|
font? | "mono" | "heading" | "body" | — | |
delay? | number | — | Frames to wait before entering. |
duration? | number | — | Enter duration in frames. Defaults to 0.6s. |
exit? | number | boolean | — | Exit at the end of the parent `<Sequence>`. `false` keeps it on screen, a number sets the exit length in frames. |
motion? | MotionPreset | — | Override the theme's motion personality. |
stagger? | number | — | Frames between units. Defaults at 30fps: char 1, word 2, line 5. |
style? | CSSProperties | — | |
className? | string | — | |
text | string | — | |
size? | number | — | Font size in design units. |
weight? | number | — | |
color? | string | — | |
accentColor? | string | — | |
accentWords? | string[] | — | Words painted in the accent color. Case and punctuation are ignored. |
align? | "left" | "right" | "center" | — |
Use
- Two- or three-line statements, with lines separated by "\n"
- Manifesto-style sequences and closing statements
Avoid
- A single word or name — use
char-rise
Dependencies
Source
registry/items/line-slide.tsx
/**
* @title Line Slide
* @category text
* @description Multi-line statement where each line slides up from behind a mask, one line after another.
* @duration 30
* @use Two- or three-line statements, with lines separated by "\n"
* @use Manifesto-style sequences and closing statements
* @avoid A single word or name — use `char-rise`
* @tags lines, mask, slide, statement, stagger
* @preset text-reveal
* @example
* <Center>
* <LineSlide text={"Write the script.\nRender the story."} align="left" />
* </Center>
*/
import { TextReveal, type TextRevealProps } from "./text-reveal";
export type LineSlideProps = Omit<TextRevealProps, "effect" | "split">;
export function LineSlide(props: LineSlideProps) {
return <TextReveal {...props} split="line" effect="mask" />;
}