Loading hero…

@crazygl/text-hover-reveal

Text Hover Reveal

Each item shows a default heading; on hover the heading scrolls up and a secondary line scrolls in from below — list-of-services interaction.

React

Interactive

Font

#hover

#reveal

#typography

Usage

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

export default function Hero() {
  return (
    <TextHoverReveal
      items={
        "Brand identity | from logo to ledger | /work/brand\n" +
        "Motion design | shipped without crunch | /work/motion"
      }
    />
  );
}

Customise

Content — items: one row per line, label | reveal | url (the URL is optional; external links open in a new tab). idleLoop cycles the reveal automatically when nothing is hovered.
Typography — textColor, revealColor, fontSize, headingFontFamily, headingFontWeight.
Backdrop — transparentBackground, bgColor.

Best for

Agency / studio service lists and capability menus.
Portfolio and about-page navigation.
Any minimal, type-forward interactive list.

01 · Install the package

One command, zero config.

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

02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx

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

export default function Landing() {
  return (
    <TextHoverReveal />
  );
}

03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx

// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <TextHoverReveal
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}

Similar heroes

Live customizer