35mm Film Strip Gallery

Quick Start

1. Add to your HTML <head> (the probe is required: it hides the fallback photo row before first paint on browsers that are about to get the canvas):

Code snippet omitted: it ships with the download.

2. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

If your page already loads three.js as a module, set window.THREE from it and load script.js after that instead.

3. Add the gallery markup anywhere in your <body>:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

What the effect needs from your markup: a .film-strip root with a .film-strip__stage containing the .film-strip__track list, one .film-frame per photograph. Each frame holds an <img> and, optionally, a .film-frame__caption, which feeds the caption bar and the lightbox (the image's alt is the fallback). data-full on an image is the larger file the lightbox swaps in once it has loaded. The caption bar is optional: the script fills [data-film-index] and [data-film-title] and wires [data-film-prev] / [data-film-next] when they exist. Several galleries on one page each work independently.

What is only the demo's styling: the dark ground, Mona Sans, the red accent on the frame number and focus rule, the round buttons, the cue line and the light paper lightbox. Recolour the film with two custom properties on .film-strip, each a hex colour: --film-base (the film itself), --film-mark (edge numbers). Set the frame size with --pitch, the width of one frame; everything else on the strip, including the rolls, scales from it. The canvas, rolls, sprocket holes, edge numbers and lightbox are generated; you do not author them.

CSS the effect depends on:

• html.gl (from the head probe) gives the stage its height and clips the photo list to a screen-reader-only box, so the fallback row never flashes before the canvas.
• .film-strip.is-live fades the canvas in and reveals the caption bar once the first frame has drawn.
• .film-strip__gauge is an invisible ruler var(--pitch) wide; the script reads the frame width from it.
• The stage uses touch-action: pan-y, so a vertical swipe still scrolls a phone page.
• Without html.gl (no JavaScript, no WebGL, or three.js failed to load) the same markup is a plain, scroll-snapping row of photographs with visible captions.

Options

Set these on the .film-strip element.

Accessibility

• Ends: at the first and last frame a short run of black leader leads onto a nearly empty roll; dragging past either end resists and springs back.
• Keyboard: the stage is focusable and shows an accent rule under the centred frame when focused. Left and Right step frame by frame, Home and End go to the first and last photograph, Enter or Space opens the centred frame.
• Screen readers: the photographs stay in the document with their real alt text and captions while the canvas draws them; the canvas is hidden from assistive technology. The caption bar is a polite live region that announces the frame now at the centre. Edge numbers are drawn into the canvas, so they are neither read nor contrast-checked.
• Lightbox: a native <dialog>, so focus moves into it and returns to the strip, Escape closes it, and so do the Close button and a click on the backdrop.
• Reduced motion: every frame shows developed, there is no momentum or blur, the rolls stay still, and arrow keys, buttons and wheel step instantly. The lightbox opens without animation. Changing the preference while the page is open rebuilds the gallery on the same frame.
• No JavaScript or no WebGL: the markup is an ordinary scrollable row of photographs with captions.
• Touch: horizontal swipes drive the strip; vertical swipes still scroll the page. The wheel and trackpad move the strip whenever the pointer is over it.

Dependencies

Required:

• GSAP 3.12+ (core only; no plugins). GSAP moves the strip (throw, settle, steps and wheel glide), animates the lightbox, supplies the frame clock and handles the reduced-motion rebuild and teardown. The demo is pinned to GSAP 3.15.0.
• three.js (demo pinned to 0.180.0), loaded as an ES module through the import map above. The shaders draw the film, its bend round the rolls, the develop and the blur.

Browser Support and Performance

Any browser with WebGL 2 draws the strip; anything else gets the photo row. The whole strip is one draw call over one texture of all the photographs, plus two small rolls, and it only renders while the strip moves or resizes. If you need to lighten it, lower data-blur first (each blurred pixel samples the film seven times), then use smaller source images.