Components
Gradient Shimmer Text
A zero-dependency text shimmer that sweeps a multi-stop gradient highlight across your text using the Web Animations API, with built-in palettes, easing presets, and off-screen/reduced-motion pausing. Ported to React from the original gradient-shimmer by @mona_biasia.
import GradientShimmer from "@/components/ui/gradient-shimmer";
export default function GradientShimmerDemo() {
return (
<div className="flex min-h-[440px] w-full flex-col items-center justify-center gap-12 bg-background px-6 py-16 text-foreground">
<GradientShimmer
gradient="sunrise"
className="text-5xl font-semibold tracking-tight"
>
gradient-shimmer
</GradientShimmer>
<div className="flex flex-col items-center gap-3 text-2xl font-medium">
<GradientShimmer gradient="mint">
building your project…
</GradientShimmer>
<GradientShimmer gradient="twilight">memory-research</GradientShimmer>
<GradientShimmer gradient="bay">shipping soon</GradientShimmer>
</div>
<div className="w-full max-w-xs rounded-xl border border-border p-2">
<p className="px-3 pb-2 pt-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
In the channel sidebar
</p>
<ul className="space-y-0.5 text-sm text-muted-foreground">
<li className="flex items-center gap-2 rounded-md px-3 py-1.5">
<span className="text-muted-foreground">#</span> general
</li>
<li className="flex items-center gap-2 rounded-md bg-muted px-3 py-1.5 text-foreground">
<span className="text-muted-foreground">#</span>
<GradientShimmer gradient="sunrise" className="font-medium">
gradient-shimmer
</GradientShimmer>
</li>
<li className="flex items-center gap-2 rounded-md px-3 py-1.5">
<span className="text-muted-foreground">#</span> design-sync
</li>
<li className="flex items-center gap-2 rounded-md px-3 py-1.5">
<span className="text-muted-foreground">#</span> release-notes
</li>
</ul>
</div>
</div>
);
}