Slide Up Text

Renders text with a slide-up animation from the bottom. Each word or character animates in sequence with a stagger effect. Use for adding dynamic text effects on scroll or interaction.

bytom from Spell

Installation

terminal

pnpm dlx layro-cli add @xxtomm/slide-up-text

npx layro-cli add @xxtomm/slide-up-text

npx layro-cli add @xxtomm/slide-up-text

bunx layro-cli add @xxtomm/slide-up-text

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

Code

Demo

"use client";

import { AnimationOptions, motion } from "motion/react";
import {
  forwardRef,
  useCallback,
  useEffect,
  useImperativeHandle,
  useMemo,
  useState,
} from "react";

import { cn } from "@/lib/utils";