CrazyGLAuto Cover
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.
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,issueline,image, and optionalurl(turns the cover into a link; external URLs open in a new tab). - Motion —
cycleSechold time,transitionMode(slide/fade/flip/lift/drop/zoom),transitionMsduration,pointerTiltstrength, andpauseOnHover. - Style —
titleColor,issueColor,spineColor,headingFontFamily(Google font),headingFontWeight. - Backdrop —
transparentBackgroundandbgColor.
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.
One command, zero config.
npm install @crazygl/hero-autocoverImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import AutoCover from '@crazygl/hero-autocover';
export default function Landing() {
return (
<AutoCover />
);
}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.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import AutoCover from '@crazygl/hero-autocover';
export default function Page() {
return (
<section>
<AutoCover
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
