Hero made by @ybouane.

@crazygl/hero-motion-colour-text

Heading filled with a constantly drifting multi-stop conic gradient — like aurora moving through the letterforms.

Demo

Motion Colour Text

Install

npm install @crazygl/hero-motion-colour-text

Usage

import MotionColourText from '@crazygl/hero-motion-colour-text';

export default function Hero() {
  return (
    <MotionColourText
      heading="Make it move."
      spinSpeed={8}
      panSpeed={14}
    />
  );
}

Customise

• Content — heading, optional subheading.
• Motion — spinSpeed (seconds per hue turn), panSpeed (seconds per drift cycle), saturation, lightness.
• Typography — fontSize (px), headingFontFamily (Google font), headingFontWeight, subColor.
• Backdrop — transparentBackground, bgColor.

Best for

• Bold typographic landing-page headlines that need energy.
• Product, launch, and event pages wanting an eye-catching title.
• Creative / agency and portfolio sites with a colourful brand voice.

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.