Command Palette

Search for a command to run...

Command Palette

Search for a command to run...

Components
PreviousNext

Shimmering Text

Smooth, light-sweeping shimmer animation for text.

Loading…
import { ShimmeringText } from "@/components/shimmering-text"
 
export default function ShimmeringTextDemo1() {
  return (
    <ShimmeringText className="text-2xl font-medium" text="Shimmering Text" />
  )
}

Installation

Add the registry

Skip if already installed

$ pnpm dlx shadcn@latest registry add @carlos-dubon=https://carlosdubon.dev/r/{name}.json

Add the component

$ pnpm dlx shadcn@latest add @carlos-dubon/shimmering-text

Usage

import { ShimmeringText } from "@/components/shimmering-text"
<ShimmeringText text="slide to unlock" />

API Reference

ShimmeringText

Prop

Type

Examples

Custom Color

Loading…
import { ShimmeringText } from "@/components/shimmering-text"
 
export default 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)