Whisper Text

Text 238

About

A scroll-triggered animation that reveals words with a smooth, staggered fade and slide, like a whisper on screen. Perfect for subtle UI transitions. Named “Whisper” for its soft and delicate entrance, quiet yet expressive.

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

Code

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

Usage.tsx


import WhisperText from "@/components/ui/whisper-text";

export default function WhisperPreview() {
  return (
      <div className="flex justify-center items-center min-h-screen w-full select-none">
      <WhisperText
        text="Your ideas, whisper style."
        className="font-semibold text-primary text-2xl sm:text-4xl"
        delay={100}
        duration={0.5}
        x={-20}
        y={0}
      />
    </div>
  );
}