Loading hero…

@crazygl/text-image-cursor

Text Image Cursor

A list of items where hovering each row reveals a thumbnail that follows the cursor — case-study index pattern, magazine-grade.

React

Image

Interactive

Font

#cursor

#image

#list

#typography

Usage

import TextImageCursor from '@crazygl/hero-text-image-cursor';

export default function Hero() {
  return (
    <TextImageCursor
      item1Label="Driftwood Studio"
      item1Image="/work/driftwood.jpg"
      thumbW={280}
    />
  );
}

Customise

Items — four slots, each with a label and an image.
Style — textColor (idle), hoverColor (active row), fontSize, thumbW (thumbnail width), headingFontFamily (Google font), headingFontWeight.
Backdrop — transparentBackground, bgColor.

Best for

Portfolio / case-study indexes and work listings.
Agency and studio landing pages.
Editorial or collection menus where each entry has a hero image.

01 · Install the package

One command, zero config.

npm install @crazygl/hero-text-image-cursor

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 TextImageCursor from '@crazygl/hero-text-image-cursor';

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

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 TextImageCursor from '@crazygl/hero-text-image-cursor';

export default function Page() {
  return (
    <section>
      <TextImageCursor
        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