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.
"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} />;
}