Line By Line Slide

Renders text line by line with a slide-in animation from the left. Each line appears with a staggered delay. Use for headings or short text blocks that need a flowing reveal effect.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/line-by-line-slide

npx layro-cli add @educlopez/line-by-line-slide

npx layro-cli add @educlopez/line-by-line-slide

bunx layro-cli add @educlopez/line-by-line-slide

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { motion, useInView, useReducedMotion } from "motion/react";
import { useRef } from "react";

export interface LineByLineSlideProps {
  /** Text content. Use "\n" to separate lines, or pass `lines` instead. */
  children?: string;
  className?: string;
  /** Delay before the animation starts, in milliseconds. */
  delay?: number;
  /** Explicit line array. Takes precedence over children. */
  lines?: string[];
  /** Per-line stagger, in milliseconds. */