Shimmer Text

A span of text with a soft band of light sweeping across it now and then, built with one paused CSS animation that stops when scrolled off screen and falls back to plain text under reduced motion.

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

import { ShimmerText } from "@/components/ui/shimmer-text";

export default function ShimmerTextDemo() {
  return (
    <div className="flex h-screen w-full items-center justify-center bg-background">
      <ShimmerText className="text-2xl font-medium text-muted-foreground">
        Charting a course…
      </ShimmerText>
    </div>
  );
}