Hero made by @ybouane.

@crazygl/hero-hover-text-highlight

A heading whose words light up on hover — a coloured backdrop wipes in from one side, and out the other when the cursor leaves. Pick Background (full bleed) or Underline (band only).

Demo

Hover Text Highlight

Install

npm install @crazygl/hero-hover-text-highlight

Usage

import HoverTextHighlight from '@crazygl/hero-hover-text-highlight';

export default function Page() {
  return (
    <HoverTextHighlight
      heading={"Highlight every word\non hover."}
      hoverStyle="Background"
      wipeDirection="leftToRight"
      effectColor="#01a3ff"
    />
  );
}

Customise

• Effect — hoverStyle (Background full-bleed vs Underline band), wipeDirection (leftToRight / rightToLeft), transitionDuration (snappy at 0.3s, luxurious at 0.6s+), underlineThickness, previewAutoHover.
• Colours — textColor (heading at rest), effectColor (the highlight band).
• Typography — textAlign, fontSize, lineHeight, letterSpacing, headingFontFamily, headingFontWeight.
• Backdrop — bgColor, transparentBackground to compose over the page.

Best for

• Editorial and portfolio landing pages where the headline invites interaction
• Brand mission statements and "We do X. Y. And Z." product pages
• Agency / studio site headers and tech-blog hero stories

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.