Text Char Slide

Text 6

About

A headline text animation that slides each character in from the side with a clean stagger. Easy to tune with delay and duration, great for hero titles and section headings.

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

Code

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

Usage.tsx

"use client";

import * as React from "react";
import { TextCharSlide } from "@/components/ui/text-char-slide";

const settings = {
  text: "Slide left by character",
  delay: 0,
  duration: 0.3,
  replay: 0,
};

const previewClass =
  "font-display text-4xl font-semibold tracking-tight text-foreground sm:text-5xl";

export function TextCharSlidePreview(props: Partial<typeof settings> = {}) {
  const state = { ...settings, ...props };

  return (
    <div className="grid min-h-[360px] w-full place-items-center px-4 py-12 text-center sm:px-8">
      <TextCharSlide
        key={state.replay}
        text={state.text || "Slide left by character"}
        animation="slideLeft"
        by="character"
        as="h1"
        delay={state.delay}
        duration={state.duration}
        startOnView={false}
        className={previewClass}
      />
    </div>
  );
}

export default function Demo(props: Partial<typeof settings>) {
  return <TextCharSlidePreview {...props} />;
}