CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/cinematic-contact-sheet

Cinematic Contact Sheet

Multiple frames behave like a cinematic contact sheet, bending through depth and holding a warm editorial mood.

ReactWebGL3DImageInteractiveFont#three#3d#screenshot#stack#cards#saas#templates#dashboards#modules#editorial#portfolio

Usage

import CinematicContactSheet from '@crazygl/hero-cinematic-contact-sheet';

export default function Page() {
  return (
    <CinematicContactSheet
      heading={"Every frame\nstill counts."}
      screenshot1="/shots/one.avif"
      screenshot2="/shots/two.avif"
      flipCycle
      cycleInterval={2.9}
    />
  );
}

Customise

  • Content — contentType (heading / two-columns / custom), heading, subheading.
  • Screenshots — screenshot1…screenshot5, the images on each card (1 is front).
  • Stack — cardCount, stackOffsetX/Y/Z, cardSize, groupOffsetX/Y, cardCornerRadius.
  • Flip cycle — flipCycle, cycleInterval (seconds between flips).
  • Motion — cursorTilt pointer parallax, ambientFloat continuous bob.
  • Style / Lighting — edgeGlowColor/edgeGlowStrength, shadowStrength, keyColor, fillColor, screenBrightness.
  • Background — bgTop, bgBottom gradient.

Best for

  • Photographer and studio portfolios built from layered stills.
  • Product launch pages showing multiple app screens or modules.
  • Design-agency and editorial/template-marketplace landing pages.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-cinematic-contact-sheet
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 CinematicContactSheet from '@crazygl/hero-cinematic-contact-sheet';

export default function Landing() {
  return (
    <CinematicContactSheet />
  );
}
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 CinematicContactSheet from '@crazygl/hero-cinematic-contact-sheet';

export default function Page() {
  return (
    <section>
      <CinematicContactSheet
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Draggable Portfolio Cards

Portfolio cards float behind the headline and can be dragged with momentum, making the hero feel tactile and playful.

Screenshot as a 3D Card Stack

Your main product screenshot sits on top of a stack of secondary UI cards. The front card swoops up and over to the back at a configurable interval, autonomously cycling through every screen. Soft drop shadows, a cyan edge glow on the top card, cursor parallax tilt.

App Screenshot Fan Stack

Your product screenshots pop up from below and arrange in a soft fan — every few seconds the lead card drifts away and the next slides forward in a smooth, looping reveal.

Collage in Zero Gravity

Images, textures, and product screens float together in a controlled zero-gravity collage around the hero copy.

Magazine Cover Product Hero

A product visual plays like a moving magazine cover, with large type sharing the frame and layered imagery adding subtle editorial depth.

Torn Poster Hero

Layered torn posters build a premium campaign collage with depth, shadows, and a subtle peel-away motion.Live customizer

Cinematic Contact Sheet

Screenshot 1 (top)The screenshot shown on the top card — front and centre.Screenshot 2Screenshot 3Screenshot 4Screenshot 5 (bottom)Card count5Stack offset X0.06How far each card sits to the right of the one above it (resting).Stack offset Y0.04How far each card sits below the one above it (resting).Stack offset Z0.04Spacing between cards along the depth axis. Larger = the stack is taller.Card size2.4World-units width of the cards. Larger = the stack fills more of the canvas.Group offset X0worldHorizontal position of the whole card stack. 0 = centered.Group offset Y0worldVertical position of the whole card stack. 0 = centered.Corner radius0.07relAuto-cycle cardsAutomatically cycle the front card to the back, revealing the next screen.Cycle interval2.9sSeconds between flips. The front card swoops up and around to the back of the stack.Cursor tilt0.7Strength of the pointer-driven parallax tilt. 0 = no tilt.Ambient float0.35Gentle continuous bob of the whole stack so it never reads as a static screenshot.Edge glow colorEdge glow strength0.5Card shadow strength0.55Opacity of the soft shadow each card casts on the one below.Key lightFill lightScreen brightness0.4Emissive boost on each card's screenshot. 0 = unlit, 1 = self-illuminated.Background topBackground bottomHeading fontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.