CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/film-strip-journey

Film Strip Product Journey

A product demo broken into frames along a 3D film strip that curves through the hero, with sprocket holes, drifting light leaks and grain, and a CTA where the strip ends.

ReactWebGL3DImageInteractiveFont#three#3d#film#filmstrip#cinematic#video#product-tour#storytelling#saas#screenshot

Usage

import FilmStripJourney from '@crazygl/hero-film-strip-journey';

export default function Page() {
  return (
    <FilmStripJourney
      frameCount={5}
      frame1="https://crazygl.com/samples/screenshot-dashboard-dark.avif"
      ctaLabel="Play the demo"
      onCTAClick="/demo"
    />
  );
}

Customise

  • Frames — frameCount (3–8) and frame1…frame8 media slots (image or MP4/WebM/MOV video, cover-fit). Videos load and loop in the gate.
  • Call to action — ctaLabel and onCTAClick (URL string or function); empty label hides it.
  • Strip — stripCurvature, stripSpan, stripWidth, stripOffsetX/Y/Z, stripTilt place and shape the ribbon.
  • Motion — driftSpeed (ambient reel pull), scrollRange (frames advanced per scroll), parallaxStrength.
  • Film look — lightLeakStrength + leakColor, grainStrength, sprocketColor, accentColor, frameBrightness, vignetteStrength.
  • Backdrop — bgTop, bgBottom.

Best for

  • SaaS product tours and onboarding walkthroughs
  • Video and creative tooling launch pages
  • Storytelling-led landing pages that need a narrative spine
  • Demo-driven announcements where screenshots carry the message
01 · Install the package

One command, zero config.

npm install @crazygl/hero-film-strip-journey
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 FilmStripProductJourney from '@crazygl/hero-film-strip-journey';

export default function Landing() {
  return (
    <FilmStripProductJourney />
  );
}
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 FilmStripProductJourney from '@crazygl/hero-film-strip-journey';

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

Product UI in Zero Gravity

Five product screens drift weightlessly in a dark space. The main screen sits in focus at the front; four secondary feature screens float at varying depths behind it, with soft shadows and depth fog selling the void.

Black Glass Product Reveal

An almost-black canvas. A slow horizontal light sweeps left to right, revealing a glossy product screenshot inside a ceramic black-glass frame. Cinematic reveal for luxury SaaS, fintech, and premium B2B tools.

Floating Movie Scene

Your product demo presented like a launch trailer: a floating screen drifts on a dark 3D stage while volumetric spotlights sweep across it, dust hangs in the beams, and a soft reflection pools on the floor. Slow cinematic camera drift; scroll pushes the camera in.

Collage in Zero Gravity

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

Floating Screen Recording

A product demo screenshot or video floats on a screen panel with an animated cursor, a glowing motion trail, expanding click ripples, and a zoom-lens magnifier that highlights UI moments.

Scroll-to-Assemble Product

A 3D product begins disassembled and clicks together as you scroll the page. Once whole, the camera eases in and benefit labels fade in around it. Cinematic three-point studio lighting with HDRI reflections.Live customizer

Film Strip Product Journey

CTA labelText on the button anchored where the strip ends in the foreground. Leave empty to hide it.On CTA clickURL to navigate to when the CTA is clicked. From code you can also pass a function — same prop name, type-detected at runtime.Frame count5How many demo frames are threaded onto the strip. Each frame gets its own media slot below.Frame 1Image or video for the first frame. Video URLs (.mp4/.webm/.mov) load and play on the strip.Frame 2Frame 3Frame 4Frame 5Curvature1How far the strip bows toward or away from the camera along its length. 0 = flat ribbon; positive bows toward camera first then away (S-curve), negative mirrors it (bows away first then toward).Span0.99Length of the visible strip. Larger packs more frames into view; smaller makes each frame bigger.Strip width1.07Height of the film ribbon (perpendicular to its travel). Sweet spot 1.0-1.35.Strip offset X1.15worldPush the whole strip left/right so heading copy can sit opposite. 0 = centered.Strip offset Y-0.5worldPush the whole strip up/down.Strip offset Z0worldZ position of the strip (positive = closer to camera, negative = further away).Strip tilt17°Diagonal lean of the strip across the frame.Drift speed0.4Ambient scroll of the strip when interactivity is pointer/none. 0 = frozen, ~0.4 = a gentle reel pull.Scroll travel0.7In scroll mode, how many frames the strip advances across the full scroll of the hero.Pointer parallax0.76How much the camera leans with the pointer. 0 = locked.Light leak0.34Drifting warm analog light leaks across the strip. 0 = none, sweet spot 0.3-0.7, above 1 starts to wash the frames.Light leak colorGrain0.1Filmic grain over the whole frame. 0.08-0.16 reads as 35mm; above 0.25 looks noisy.Sprocket / film colorColor of the film base between frames and around the sprocket holes.Accent colorFrame edge glow and CTA accent.Frame brightness1Emissive boost on the demo frames so they glow like a projector gate.Vignette0.62Backdrop topBackdrop bottomInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.