Hero made by @ybouane.

@crazygl/hero-autocover

Magazine-style cover that auto-cycles through a stack — large title, issue number, vertical spine text, with a pointer-driven tilt, a per-cover link, six entrance modes, and an optional pause-on-cover-hover.

Demo

Auto Cover

Install

npm install @crazygl/hero-autocover

Usage

import AutoCover from '@crazygl/hero-autocover';

export default function Hero() {
  return (
    <AutoCover
      cover1Title="Drift"
      cover1Image="/covers/winter.jpg"
      cycleSec={3.4}
      transitionMode="slide"
    />
  );
}

Customise

• Covers — three slots, each with a title, issue line, image, and optional url (turns the cover into a link; external URLs open in a new tab).
• Motion — cycleSec hold time, transitionMode (slide/fade/flip/lift/drop/zoom), transitionMs duration, pointerTilt strength, and pauseOnHover.
• Style — titleColor, issueColor, spineColor, headingFontFamily (Google font), headingFontWeight.
• Backdrop — transparentBackground and bgColor.

Best for

• Publication, magazine, or editorial landing pages.
• Showcasing a rotating set of featured stories or issues.
• Portfolio or product launch heroes that need a tactile, print-like feel.

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.