Words Stagger

A text component that animates words one by one with blur and transform effects. It shows each word with a delay and smooth transition. Use it to create a dynamic text display on scroll or interaction.

bytom from Spell

Installation

terminal

pnpm dlx layro-cli add @xxtomm/words-stagger

npx layro-cli add @xxtomm/words-stagger

npx layro-cli add @xxtomm/words-stagger

bunx layro-cli add @xxtomm/words-stagger

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

Code

Demo

"use client";

import React from "react";
import { motion, Transition } from "motion/react";
import { cn } from "@/lib/utils";

interface WordsStaggerProps {
  children: React.ReactNode;
  className?: string;
  delay?: number;
  stagger?: number;
  speed?: number;
  autoStart?: boolean;
  onStart?: () => void;