Slide Text

Text 1

About

A heading or paragraph where each word, character, or line rises into place from below its own baseline, either on page load or when it scrolls into view.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Slide Text to your project and fits it to your theme.

Code

How Slide Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { SlideText } from "@/components/ui/slide-text";

export default function SlideTextDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
      <div className="w-full max-w-xl rounded-lg border bg-background p-6 md:p-10">
        <SlideText
          as="h2"
          split="characters"
          from="center"
          className="text-4xl tracking-tight text-foreground md:text-5xl"
        >
          Weigh anchor
        </SlideText>
      </div>
    </div>
  );
}