Loading hero…

@crazygl/card-expand-reveal

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.

React

Interactive

Font

#accordion

#expand

#typography

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

01 · Install the package

One command, zero config.

npm install @crazygl/hero-card-expand-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 CardExpandReveal from '@crazygl/hero-card-expand-reveal';

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

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 CardExpandReveal from '@crazygl/hero-card-expand-reveal';

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