Hero made by @ybouane.

@crazygl/hero-highlight-cycling

A coloured highlighter sweeps across the line one word at a time — like a presenter underlining the key word as they speak it.

Demo

Highlight Cycling

Install

npm install @crazygl/hero-highlight-cycling

Usage

import HighlightCycling from '@crazygl/hero-highlight-cycling';

export default function Hero() {
  return (
    <HighlightCycling
      heading="Design intentional. Ship ruthlessly."
      highlightColor="#ffd86b"
      stepMs={900}
    />
  );
}

Customise

• Content — heading text (split on whitespace into highlightable words).
• Highlight — highlightColor, stepMs (dwell time per word).
• Typography — textColor, highlightTextColor, fontSize, headingFontFamily, headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• Marketing / SaaS landing headlines that need to draw the eye.
• Agency and portfolio statement heroes.
• Talk/conference and pitch-deck style title slides.

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.