Stagger From Center

A text animation component that reveals characters from the center outward. Each character animates with a staggered delay based on its distance from the center. It is used to highlight text with a smooth, centered reveal effect. Ideal for emphasizing key phrases or titles.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/stagger-from-center

npx layro-cli add @educlopez/stagger-from-center

npx layro-cli add @educlopez/stagger-from-center

bunx layro-cli add @educlopez/stagger-from-center

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 StaggerFromCenterProps {
  children: string;
  className?: string;
  /** Delay before the animation starts, in milliseconds. */
  delay?: number;
  /** Per-step stagger between characters, in milliseconds. */
  stagger?: number;
  /** Animate only once the text scrolls into view. */
  triggerOnView?: boolean;