Hero made by @ybouane.

@crazygl/hero-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.

Demo

Animated Text Gradient

Install

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

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.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.