Hero made by @ybouane.

@crazygl/hero-text-image-cursor

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

Demo

Text Image Cursor

Install

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

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.

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.