Animated Shiny Text

Text with an animated shimmer effect that creates a premium, dynamic appearance. Perfect for announcements and highlights.

Preview

✨ Introducing Nyxhora UI

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/animated-shiny-text.json

Usage

tsx
9 lines
1
2
3
4
5
6
7
8
9
import { AnimatedShinyText } from "@/components/ui/animated-shiny-text"

export default function Announcement() {
  return (
    <AnimatedShinyText shimmerWidth={100}>
      ✨ New Feature Released!
    </AnimatedShinyText>
  )
}

Examples

Standalone Text

Premium Quality Text

Wide Shimmer

Wider shimmer effect ✨

Props

PropTypeDefaultDescription
childrenReactNoderequiredThe text content to display with the shimmer effect
shimmerWidthnumber100Width of the shimmer gradient in pixels
classNamestringundefinedAdditional CSS classes for styling

Tailwind Configuration

Add the following animation to your tailwind.config.js:

tailwind.config.js

javascript
19 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
  theme: {
    extend: {
      animation: {
        "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",
          },
        },
      },
    },
  },
}