componentanimated-text-02source: ok · refreshed

Animated Text-02 - Gradient Text

Animated Gradient Text component

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

free

Shadcnspace Builder

Visual style

gradient

Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.

Files1 · source cached 10/3/2026, 12:44:52 AM

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

"use client";

import { motion } from "motion/react";

const AnimatedTextGradientMotion = () => {
  return (
    <>
      <motion.p
        className="text-xl sm:text-2xl font-bold text-start bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent"
        animate={{
          backgroundImage: [
            "linear-gradient(to right, hsl(172 66% 50%), hsl(27 96% 61%))",
            "linear-gradient(to right, hsl(27 96% 61%), hsl(172 66% 50%))",
          ],
        }}
        transition={{
          duration: 2,
          repeat: Infinity,
          repeatType: "reverse",
          ease: "linear",
        }}
      >
        Animated Gradient Text
      </motion.p>
    </>
  );
};

export default AnimatedTextGradientMotion;

More from Shadcnspace Builder

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

Browse all components in this library →