componentanimated-text-01source: ok · refreshed

Animated Text-01 - Shiny Text

Animated Text component

npx shadcn add "https://builder.shadcnspace.com/r/animated-text-01.json"

free

No selection tags yet — empty means no evidence, not lack of support.

Files2 · source cached 10/2/2026, 8:31:31 PM

src/components/shadcn-space/animated-text/animated-text-01.tsx

import "@/components/shadcn-space/animated-text/animated-text-01.css";

const AnimatedShinyText = () => {
  return (
    <>
      <p className="shiny inline-block bg-[linear-gradient(120deg,rgba(0,0,0,0)_40%,rgba(0,0,0,0.8)_50%,rgba(0,0,0,0)_60%)] dark:bg-[linear-gradient(120deg,rgba(255,255,255,0)_40%,rgba(255,255,255,0.8)_50%,rgba(255,255,255,0)_60%)]  bg-[length:200%_100%] bg-clip-text text-xl sm:text-2xl font-medium text-blue-500/70">
        Shiny Button Text
      </p>
    </>
  );
};

export default AnimatedShinyText;

src/components/shadcn-space/animated-text/animated-text-01.css

.shiny {
  animation: shine 3s linear infinite;
}

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

More from Shadcnspace Builder

About Us 01 - Impact Metricsblock Accordion-01 - Defaultcomponent Accordion-02 - Multi-levelcomponent Animated Text-02 - Gradient Textcomponent Animated Text-03 - Typingcomponent Animated Text-04 - Rolling Textcomponent Animated Text-05 - Shimmer Textcomponent

Browse all components in this library →