Hero made by @ybouane.

@crazygl/hero-hover-text-reveal

A row of phrases where hovering one expands a stagger-typed paragraph beside it — the kind of FAQ heading-list interaction premium SaaS sites use.

Demo

Hover Text Reveal

Install

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

Usage

import HoverTextReveal from '@crazygl/hero-hover-text-reveal';

export default function Page() {
  return (
    <HoverTextReveal
      item1Title="What we do"
      item1Body="We design and build motion-rich product experiences end to end."
    />
  );
}

Customise

• Items — item1Title/item1Body, item2Title/item2Body, item3Title/item3Body.
• Style — titleColor, bodyColor, accentColor (active title), titleSize, bodySize, headingFontFamily, headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• FAQ or "how it works" sections that need to stay compact
• Agency and studio landing pages introducing services
• Premium SaaS heroes that reward exploration with a hover interaction
• Editorial intro blocks where each line opens into a short statement

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.