Animated Shiny Text

Text with a shining shimmer highlight that sweeps across periodically using an animated linear gradient.

css javascript vue svelte

Targets: TS JS HTML React Vue Svelte

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0a0a0a;
}

.container {
  text-align: center;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* --- Shiny Text --- */
.shiny-text {
  --shine-color: rgba(255, 255, 255, 0.9);
  --shine-speed: 3s;

  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #333;

  background: linear-gradient(
    120deg,
    #555 0%,
    #555 40%,
    var(--shine-color) 50%,
    #555 60%,
    #555 100%
  );
  background-size: 250% 100%;
  background-position: 100% center;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: shine-sweep var(--shine-speed) ease-in-out infinite;
}

@keyframes shine-sweep {
  0% {
    background-position: 100% center;
  }
  40% {
    background-position: -100% center;
  }
  100% {
    background-position: -100% center;
  }
}

/* --- Shiny Badges --- */
.badge-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.shiny-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #888;

  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.05) 40%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.05) 60%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 250% 100%;
  background-position: 100% center;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: shine-sweep 3s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.shiny-badge:nth-child(2) {
  --delay: 0.4s;
}
.shiny-badge:nth-child(3) {
  --delay: 0.8s;
}

.subtitle {
  font-size: 1rem;
  color: #666;
  letter-spacing: 0.01em;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .shiny-text,
  .shiny-badge {
    animation: none;
    background-position: 0% center;
  }
}

// Animated Shiny Text — pure CSS effect, no JS required.
// This script is intentionally minimal; the shimmer animation is handled entirely by CSS.
(function () {
  "use strict";
  // The shine sweep runs via CSS @keyframes.
  // You can optionally use JS to dynamically adjust --shine-speed:
  // document.querySelector('.shiny-text')?.style.setProperty('--shine-speed', '4s');
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Animated Shiny Text</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1 class="shiny-text">Animated Shiny Text</h1>
    <p class="subtitle">A shimmer highlight sweeps across the text</p>

    <div class="badge-row">
      <span class="shiny-badge">NEW</span>
      <span class="shiny-badge">PRO</span>
      <span class="shiny-badge">PREMIUM</span>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

import type { CSSProperties, ReactNode } from "react";

interface AnimatedShinyTextProps {
  children: ReactNode;
  shineColor?: string;
  speed?: string;
  className?: string;
  style?: CSSProperties;
}

export function AnimatedShinyText({
  children,
  shineColor = "rgba(255, 255, 255, 0.9)",
  speed = "3s",
  className = "",
  style = {},
}: AnimatedShinyTextProps) {
  const shinyStyle: CSSProperties = {
    backgroundImage: `linear-gradient(120deg, #555 0%, #555 40%, ${shineColor} 50%, #555 60%, #555 100%)`,
    backgroundSize: "250% 100%",
    backgroundPosition: "100% center",
    WebkitBackgroundClip: "text",
    backgroundClip: "text",
    WebkitTextFillColor: "transparent",
    animation: `shine-sweep ${speed} ease-in-out infinite`,
    lineHeight: 1.1,
    ...style,
  };

  return (
    <>
      <style>{`
        @keyframes shine-sweep {
          0% { background-position: 100% center; }
          40% { background-position: -100% center; }
          100% { background-position: -100% center; }
        }
        @media (prefers-reduced-motion: reduce) {
          .animated-shiny-text { animation: none !important; background-position: 0% center !important; }
        }
      `}</style>
      <span className={`animated-shiny-text ${className}`} style={shinyStyle}>
        {children}
      </span>
    </>
  );
}

// Demo usage
export default function AnimatedShinyTextDemo() {
  return (
    <div
      style={{
        minHeight: "100vh",
        display: "grid",
        placeItems: "center",
        background: "#0a0a0a",
        fontFamily: "system-ui, -apple-system, sans-serif",
        textAlign: "center",
        padding: "2rem",
      }}
    >
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "2rem" }}>
        <h1>
          <AnimatedShinyText
            style={{
              fontSize: "clamp(2.5rem, 6vw, 5rem)",
              fontWeight: 800,
              letterSpacing: "-0.03em",
            }}
          >
            Animated Shiny Text
          </AnimatedShinyText>
        </h1>
        <p style={{ color: "#666", fontSize: "1rem" }}>
          A shimmer highlight sweeps across the text
        </p>
        <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap", justifyContent: "center" }}>
          {["NEW", "PRO", "PREMIUM"].map((label, i) => (
            <AnimatedShinyText key={label} speed={`${3 + i * 0.3}s`}>
              <span
                style={{
                  fontSize: "0.8rem",
                  fontWeight: 700,
                  letterSpacing: "0.12em",
                  padding: "0.5rem 1.25rem",
                  border: "1px solid rgba(255,255,255,0.15)",
                  borderRadius: "999px",
                  display: "inline-block",
                }}
              >
                {label}
              </span>
            </AnimatedShinyText>
          ))}
        </div>
      </div>
    </div>
  );
}

<script setup>
import { computed } from "vue";

const props = defineProps({
  shineColor: { type: String, default: "rgba(255, 255, 255, 0.9)" },
  speed: { type: String, default: "3s" },
});

const badges = [
  { label: "NEW", speed: "3s" },
  { label: "PRO", speed: "3.3s" },
  { label: "PREMIUM", speed: "3.6s" },
];

function shinyStyle(s) {
  return {
    display: "inline-block",
    lineHeight: "1.2",
    backgroundImage: `linear-gradient(120deg, #555 0%, #555 40%, ${props.shineColor} 50%, #555 60%, #555 100%)`,
    backgroundSize: "250% 100%",
    backgroundPosition: "100% center",
    WebkitBackgroundClip: "text",
    backgroundClip: "text",
    WebkitTextFillColor: "transparent",
    animationDuration: s,
  };
}
</script>

<template>
  <div
    style="min-height: 100vh; display: grid; place-items: center; background: #0a0a0a; font-family: system-ui, -apple-system, sans-serif; text-align: center; padding: 2rem;"
  >
    <div style="display: flex; flex-direction: column; align-items: center; gap: 2rem;">
      <h1>
        <span class="animated-shiny-text" :style="shinyStyle(props.speed)">
          <span style="font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 800; letter-spacing: -0.03em;">
            Animated Shiny Text
          </span>
        </span>
      </h1>
      <p style="color: #666; font-size: 1rem;">
        A shimmer highlight sweeps across the text
      </p>
      <div style="display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;">
        <span
          v-for="badge in badges"
          :key="badge.label"
          class="animated-shiny-text"
          :style="shinyStyle(badge.speed)"
        >
          <span
            style="font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; padding: 0.5rem 1.25rem; border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; display: inline-block;"
          >
            {{ badge.label }}
          </span>
        </span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.animated-shiny-text {
  animation: shine-sweep ease-in-out infinite;
}
@keyframes shine-sweep {
  0% { background-position: 100% center; }
  40% { background-position: -100% center; }
  100% { background-position: -100% center; }
}
@media (prefers-reduced-motion: reduce) {
  .animated-shiny-text { animation: none !important; background-position: 0% center !important; }
}
</style>

<script>
export let shineColor = "rgba(255, 255, 255, 0.9)";
export let speed = "3s";

const badges = [
  { label: "NEW", speed: "3s" },
  { label: "PRO", speed: "3.3s" },
  { label: "PREMIUM", speed: "3.6s" },
];

function shinyStyle(s) {
  return `display: inline-block; line-height: 1.2; background-image: linear-gradient(120deg, #555 0%, #555 40%, ${shineColor} 50%, #555 60%, #555 100%); background-size: 250% 100%; background-position: 100% center; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation-duration: ${s};`;
}
</script>

<div
  style="min-height: 100vh; display: grid; place-items: center; background: #0a0a0a; font-family: system-ui, -apple-system, sans-serif; text-align: center; padding: 2rem;"
>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 2rem;">
    <h1>
      <span class="animated-shiny-text" style={shinyStyle(speed)}>
        <span style="font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 800; letter-spacing: -0.03em;">
          Animated Shiny Text
        </span>
      </span>
    </h1>
    <p style="color: #666; font-size: 1rem;">
      A shimmer highlight sweeps across the text
    </p>
    <div style="display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;">
      {#each badges as badge}
        <span class="animated-shiny-text" style={shinyStyle(badge.speed)}>
          <span
            style="font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; padding: 0.5rem 1.25rem; border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; display: inline-block;"
          >
            {badge.label}
          </span>
        </span>
      {/each}
    </div>
  </div>
</div>

<style>
  .animated-shiny-text {
    animation: shine-sweep ease-in-out infinite;
  }
  @keyframes shine-sweep {
    0% { background-position: 100% center; }
    40% { background-position: -100% center; }
    100% { background-position: -100% center; }
  }
  @media (prefers-reduced-motion: reduce) {
    .animated-shiny-text { animation: none !important; background-position: 0% center !important; }
  }
</style>

Animated Shiny Text

A text effect where a bright shimmer highlight sweeps across the text periodically, creating a polished, premium feel.

How it works

A linear gradient with a narrow bright band is applied to the text via background-clip: text
The gradient is oversized (background-size: 200%) so the shine band starts off-screen
A CSS @keyframes animation moves background-position to slide the bright band across the text
The animation uses a pause via timing — the sweep happens once then holds before repeating

Customization

--shine-color controls the highlight color (default: white)
--shine-speed controls the sweep duration (default: 3s)
--shine-width controls how wide the bright band is

When to use it

Premium brand text or luxury product names
Badge labels like “NEW” or “PRO”
Any heading that benefits from subtle motion