Shimmering Text
Smooth shimmering text animation built with Motion.
Loading...
import { ShimmeringText } from "@/components/ncdai/shimmering-text";
export function ShimmeringTextDemo1() {
return (
<ShimmeringText className="text-2xl font-medium" text="Shimmering Text" />
);
}Installation
pnpm dlx shadcn add @ncdai/shimmering-text
Usage
import { ShimmeringText } from "@/components/ncdai/shimmering-text";<ShimmeringText text="slide to unlock" />Examples
Custom Color
Loading...
import { ShimmeringText } from "@/components/ncdai/shimmering-text";
export function ShimmeringTextDemo2() {
return (
<ShimmeringText
className="font-medium [--color:#fbbf24] [--shimmering-color:#ca8a04] dark:[--color:#f59e0b] dark:[--shimmering-color:#fcd34d]"
text="Processing your request with AI ..."
/>
);
}CSS Variables explanation:
--color: Base text color (the default/resting state of characters)--shimmering-color: Peak highlight color (the bright color characters transition to during the shimmer effect)