Animated Shiny Text

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

✨ Introducing Spark UI

Edit on GitHub

Copy code

Show code

<script setup lang="ts">
import ArrowRight from "@/components/icons/arrow-right.vue";
import AnimatedShinyText from "@/components/animated-shiny-text/animated-shiny-text.vue";
import { cn } from "@/libs/utils";
</script>

<template>
  <div class="grid place-items-center min-h-screen w-full">
    <div class="z-10 flex min-h-[16rem] items-center justify-center">
      <div
        :class="
          cn(
            'group rounded-full border border-black/5 bg-neutral-100 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800',
          )
        "
      >
        <AnimatedShinyText
          class="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400"
        >
          <span>✨ Introducing Spark UI</span>
          <ArrowRight
            class="ml-1 text-neutral-400 w-5 h-5 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5"
          />
        </AnimatedShinyText>
      </div>
    </div>
  </div>
</template>

Installation

Copy and paste the following code into your project:

animated-shiny-text.vue

<script setup lang="ts">
import { cn } from "@/lib/utils";

interface AnimatedShinyTextProps {
  class?: string;
  shimmerWidth?: number;
}

const props = withDefaults(defineProps<AnimatedShinyTextProps>(), {
  shimmerWidth: 100,
});

const 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",

  props.class,
);
</script>

<template>
  <p :style="{ '--shimmer-width': `${props.shimmerWidth}px` }" :class="className">
    <slot />
  </p>
</template>

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

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      animation: {
        "shiny-text": "shiny-text 8s infinite",
      },
      keyframes: {
        "shiny-text": {
          "0%, 90%, 100%": {
            "background-position": "calc(-100% - var(--shimmer-width)) 0",
          },
          "30%, 60%": {
            "background-position": "calc(100% + var(--shimmer-width)) 0",
          },
        },
      },
    },
  },
};

Props

Prop	Type	Description	Default
class	string	The class to be applied.	""
shimmerWidth	number	The width of the shimmer in pixels.	100