Tailwind Admin
componentanimated-text-background-motionsource: ok · hit
Animated Text Background Motion
A text component with animated gradient background.
npx shadcn add "https://tailwind-admin.com/r/animated-text-background-motion.json"free
Visual style
gradient
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Dependencies
Bundle weight · mediumanimationframer-motion
Files1 · source cached 10/12/2026, 9:50:08 AM
src/app/components/animatedComponents/text-animation/animated-text-background/AnimatedTextBackgroundMotion.tsx
"use client";
import { motion } from "framer-motion";
export default function AnimatedTextBackgroundMotion() {
return (
<main className="grid">
<motion.h1
className="text-3xl font-bold text-start bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent"
animate={{
backgroundImage: [
"linear-gradient(to right, hsl(98 100% 62%), hsl(204 100% 59%))",
"linear-gradient(to right, hsl(210 100% 59%), hsl(310 100% 59%))",
],
}}
transition={{
duration: 2,
repeat: Infinity,
repeatType: "reverse",
ease: "linear",
}}
>
Animated Gradient Text
</motion.h1>
</main>
);
}