Animated Shiny Text

A light glare effect which pans across text making it appear as if it is shimmering.

Preview

✨ Introducing Vibe UI Shimmer

Installation

pnpm dlx vibe-ui-kit@latest add animated-shiny-text

Global Configuration (CSS Styles)

Ensure the following CSS keyframes and animations are configured in your global theme file:

@theme {
  --animate-shiny-text: shiny-text 8s infinite;

  @keyframes shiny-text {
    0%,
    90%,
    100% {
      background-position: calc(-100% - var(--shiny-width)) 0;
    }
    30%,
    60% {
      background-position: calc(100% + var(--shiny-width)) 0;
    }
  }
}

Usage

import { AnimatedShinyText } from "@/components/ui/animated-shiny-text"

<AnimatedShinyText shimmerWidth={100}>
  Shimmering text
</AnimatedShinyText>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	`""`	Text content to apply shimmer glare effect
`shimmerWidth`	`number`	`100`	Width of the shimmering glare in pixels
`className`	`string?`	`""`	Additional classes for the element

This AnimatedShinyText component creates a light glare effect panning across text to simulate shimmering.

Contributors

Jenish Sabhadiya