Command Palette

Search for a command to run...

1.2k
Components
PreviousNext

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)