Hero made by @ybouane.

@crazygl/hero-gradient-text

Heading filled with a slowly drifting multi-stop linear gradient — three configurable colours, customizable angle, optional animation.

Demo

Gradient Text

Install

npm install @crazygl/hero-gradient-text

Usage

import GradientText from '@crazygl/hero-gradient-text';

export default function Page() {
  return (
    <GradientText
      heading="spectrum"
      color1="#ff5c8a"
      color2="#ffd86b"
      color3="#5b8def"
      angle={100}
      speed={8}
    />
  );
}

Customise

• Content — heading, subheading.
• Gradient — color1/color2/color3, angle, animate, speed.
• Typography — fontSize, headingFontFamily, headingFontWeight, subColor.
• Backdrop — transparentBackground, bgColor.

Best for

• Bold one-word brand statements and landing-page headlines
• Product, app, or design-studio hero sections
• Section dividers and feature callouts that need a pop of color

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.