Animated Shiny Text

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

Usage

Code

import React, { CSSProperties, ReactNode } from "react";
import { cnBase } from "tailwind-variants";

interface AnimatedShinyTextProps {
  children: ReactNode;
  className?: string;
  shimmerWidth?: number;
}

export const AnimatedShinyText: React.FC<AnimatedShinyTextProps> = ({
  children,
  className,
  shimmerWidth = 100,
}) => {
  return (
    <p
      style={
        {
          "--shimmer-width": `${shimmerWidth}px`,
        } as CSSProperties
      }
      className={cnBase(
        "mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70",

        // Shimmer effect
        "animate-shimmer-ui 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 `tailwind.config.js`

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

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

Props

Attribute	Type	Description	Default
children	`React.ReactNode`	The text to be shimmered.	`undefined`
className	`string`	The class name to be applied to the shimmer.	`undefined`
shimmerWidth	`number`	The width of the shimmer in pixels.	`100`

Animated Shiny Text

Usage

Code

Update tailwind.config.js

Props

Update `tailwind.config.js`