componentshiny-text-motionsource: ok · hit

Shiny Text Motion

A text component that shines.

npx shadcn add "https://tailwind-admin.com/r/shiny-text-motion.json"

free

Tailwind Admin

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

Dependencies

Bundle weight · light

Registry dependencies

card

Files2 · source cached 10/15/2026, 8:10:31 AM

src/app/components/animatedComponents/text-animation/shiny-text/ShinyTextAnimation.tsx



import { Card } from "@/components/ui/card";
import "./shinyText.css";

export default function ShinyTextAnimation() {
  return (
    <>
      <Card className="bg-primary w-full" >
       <div className='shiny font-medium text-lg'>Shine bright like a diamond</div>
      </Card>
    </>
  );
}

src/app/components/animatedComponents/text-animation/shiny-text/shinyText.css

.shiny {
  color: #00ceffa4;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
  animation: shine 3s linear infinite;
}

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

More from Tailwind Admin

Action Tracking Motioncomponent Alert Card Motioncomponent Animate Border Card Motioncomponent Animate Table Motioncomponent Animated List Motioncomponent Animated Tab Motioncomponent Animated Text Background Motioncomponent Animated Tooltip Motioncomponent

Browse all components in this library →