_{Hero made by @ybouane.}

@crazygl/hero-hovertext-link

A list of inline links with an animated underline-fill on hover — the text gets a coloured wipe that grows from left.

Demo

Hover Text Link

Install

npm install @crazygl/hero-hovertext-link

Usage

import HoverTextLink from '@crazygl/hero-hovertext-link';

export default function Page() {
  return (
    <HoverTextLink
      intro="We design,"
      link1Label="build"
      link1Url="/build"
      mid=", and"
      link2Label="ship"
      link2Url="/ship"
      outro="products that earn trust."
      hoverFill="#5b8def"
    />
  );
}

Customise

• Content — intro, link1Label/link1Url, mid, link2Label/link2Url, outro.
• Style — textColor, linkColor, hoverFill (the colour that rises in), fontSize, headingFontFamily, headingFontWeight.
• Backdrop — transparentBackground toggle and bgColor.

Best for

• Agency, studio, and portfolio headers where the headline doubles as navigation.
• Minimal landing pages that want one expressive, interactive statement.
• Anywhere an inline link should feel intentional and tactile rather than a plain underline.

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.