Hero made by @ybouane.

@crazygl/hero-text-hover-icon

A sentence where designated keywords morph into a glyph on hover and bounce back to text on leave — the words become controls.

Demo

Text Hover Icon

Install

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

Usage

import TextHoverIcon from '@crazygl/hero-text-hover-icon';

export default function Hero() {
  return (
    <TextHoverIcon
      prefix="We"
      keyword1="love" icon1="heart"
      between="what we"
      keyword2="build" icon2="spark"
      suffix="."
    />
  );
}

Customise

• Content — prefix, keyword1 + icon1, between, keyword2 + icon2, suffix. Icons: heart, star, spark, bolt, smile, music, eye.
• Behaviour — idleLoop (auto-demo hover when no pointer is present).
• Typography — textColor, iconColor, fontSize, headingFontFamily, headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• Marketing / SaaS statement headlines with a playful twist.
• Brand and agency landing heroes.
• Product taglines where keywords double as iconography.

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.