Animated Shiny Text

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

✨ Introducing HiUI

Installation

Copy and paste the following code into your project.

import { CSSProperties, FC, ReactNode } from "react"
 
import { cn } from "@/lib/utils"
 
interface AnimatedShinyTextProps {
  children: ReactNode
  className?: string
  shimmerWidth?: number
}
 
export const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({
  children,
  className,
  shimmerWidth = 100,
}) => {
  return (
    <p
      style={
        {
          "--shimmer-width": `${shimmerWidth}px`,
        } as CSSProperties
      }
      className={cn(
        "mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70",
 
        // Shimmer effect
        "animate-shimmer bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shimmer-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
 
        // Shimmer gradient
        "bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80",
 
        className
      )}
    >
      {children}
    </p>
  )
}

Update the import paths to match your project setup.

Update tailwind.config.js

Add the following animations to your tailwind.config.js file:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        shimmer: "shimmer 8s infinite",
      },
      keyframes: {
        shimmer: {
          "0%, 90%, 100%": {
            "background-position": "calc(-100% - var(--shimmer-width)) 0",
          },
          "30%, 60%": {
            "background-position": "calc(100% + var(--shimmer-width)) 0",
          },
        },
      },
    },
  },
}

Props

PropTypeDescriptionDefault
childrenThe text to be shimmered.
classNamestringThe class name to be applied to the shimmer.
shimmerWidthnumberThe width of the shimmer in pixels.100
Number TickerAnimated Gradient Text