Hero made by @ybouane.

@crazygl/hero-card-expand-reveal

Horizontal accordion of cards — the active card stretches to reveal an inner story, others compress to vertical labels. Auto-cycles on idle.

Demo

Card Expand Reveal

Install

npm install @crazygl/hero-card-expand-reveal

Usage

import CardExpandReveal from '@crazygl/hero-card-expand-reveal';

export default function Page() {
  return (
    <CardExpandReveal
      card1Label="Design"
      card1Body="Brand identity from logo to ledger."
      card1Color="#ff5c8a"
      autoCycleSec={3.2}
    />
  );
}

Customise

• Cards — four slots, each with cardNLabel, cardNBody, and onCardNClick (URL or function).
• Cycle — autoCycleSec, the idle dwell time per card before advancing.
• Colours — per-card cardNColor, plus labelColor, bodyColor, headingFontFamily, headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• Service/process overviews (Design → Build → Ship)
• Product feature highlights and pricing-tier teasers
• Portfolio or agency landing sections that reward exploration

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.