Loading hero…

@crazygl/animated-text-gradient

Animated Text Gradient

A heading filled with a slowly-shifting multi-stop gradient that loops across up to five user colours, with controllable angle and speed.

React

Font

#gradient

#animated

#typography

#background-clip

Usage

import AnimatedTextGradient from '@crazygl/hero-animated-text-gradient';

export default function Hero() {
  return (
    <AnimatedTextGradient
      heading={"Animated\nGradient Text"}
      color1="#ff6b6b"
      color2="#4ecdc4"
      useColor3
      color3="#45b7d1"
      animationSpeed={8}
      gradientAngle={90}
    />
  );
}

Customise

Content — heading (supports \n line breaks).
Gradient — color1/color2 plus optional color3–color5 (each gated by a useColorN toggle), gradientAngle (0–360°) and animationSpeed (full loop in seconds).
Typography — fontSize, letterSpacing, textAlign, headingFontFamily (Google Font), headingFontWeight.
Backdrop — transparentBackground toggle and bgColor.

Best for

Brand wordmarks and design-system showcases that lean on an accent palette.
AI / fintech / e-commerce landing hero blocks needing a lively but tasteful headline.
Agency and portfolio sites where the type itself is the centerpiece.

01 · Install the package

One command, zero config.

npm install @crazygl/hero-animated-text-gradient

02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx

import AnimatedTextGradient from '@crazygl/hero-animated-text-gradient';

export default function Landing() {
  return (
    <AnimatedTextGradient />
  );
}

03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx

// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import AnimatedTextGradient from '@crazygl/hero-animated-text-gradient';

export default function Page() {
  return (
    <section>
      <AnimatedTextGradient
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}

Similar heroes

Live customizer