Shimmer text
Text with a light sweep, for thinking and loading states.
$
pnpm dlx shadcn@latest add https://lodeui.com/r/shimmer-text.jsonThinking about your question…
Generating reportcomponents/examples/shimmer-text-demo.tsx
"use client";
import { Brain } from "lucide-react";
import { ShimmerText } from "@/components/ui/shimmer-text";
export default function ShimmerTextDemo() {
return (
<div className="flex flex-col items-center gap-4">
<p className="flex items-center gap-2 text-sm"><Brain className="size-4 text-muted-foreground" /><ShimmerText>Thinking about your question…</ShimmerText></p>
<ShimmerText className="text-3xl font-semibold tracking-tight">Generating report</ShimmerText>
</div>
);
}When to use
- Pending states like Thinking… or Generating…
When not to use
- Static headings.
Installation
$
pnpm dlx shadcn@latest add https://lodeui.com/r/shimmer-text.json1Copy the source into your project
components/ui/shimmer-text.tsximport { cn } from "@/lib/utils"; /** Text with a light sweeping across it, e.g. for "Thinking…" states. */ export function ShimmerText({ children, className }: { children: React.ReactNode; className?: string }) { return ( <span className={cn( "inline-block bg-[linear-gradient(110deg,var(--muted-foreground)_35%,var(--foreground)_50%,var(--muted-foreground)_65%)] bg-[length:250%_100%] bg-clip-text text-transparent", "animate-[lode-text-shimmer_2.2s_linear_infinite] motion-reduce:animate-none", className, )} > {children} </span> ); }
Usage
Import it from @/components/ui/shimmer-text after installing.
example.tsx
import { ShimmerText } from "@/components/ui/shimmer-text";
export function Thinking() {
return <ShimmerText>Thinking…</ShimmerText>;
}API reference
ShimmerText
Text with a light sweeping across it.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | – | The text. |
Accessibility
- Plain text; stops animating under reduced motion.
Motion
- A gradient sweeps every 2.2s.
Responsive behavior
- Inline.
Performance
- CSS animation.
Notes for AI
- Pair with aria-live on the container when status changes.
This page as Markdown, for assistants and coding agents:
/components/shimmer-text/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt