Hero made by @ybouane.

@crazygl/hero-colorful-typemotion

Each letter cycles through a hue palette on a phase offset — moving colour without a moving gradient. Pick from eight curated palettes spanning soft pastels to electric neon.

Demo

Colorful Type Motion

Install

npm install @crazygl/hero-colorful-typemotion

Usage

import ColorfulTypeMotion from '@crazygl/hero-colorful-typemotion';

export default function Hero() {
  return (
    <ColorfulTypeMotion
      heading="colour in motion"
      palette="neon"
      speed={0.8}
    />
  );
}

Customise

• Content — heading.
• Palette — palette: one of pastel, rainbow, neon, candy, sunset, ocean, forest, mono.
• Motion — speed (cycle rate), phaseStep (per-letter hue offset in degrees).
• Typography — fontSize, headingFontFamily, headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• Bold, playful product and event landing pages.
• Creative studios and music/art brands wanting vivid motion.
• Announcement banners where colour energy carries the message.

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.