Film Strip Ribbon Gallery Block for React

Each frame in FRAMES has an id (its number), a title, a description and a scene. Replace <Scene ratio={1.5} scene={frame.scene} /> with <img alt="" className="size-full object-cover" src={…} /> in a 3:2 box, and set grayscale on it if your pictures are colour; the caption already names each one.

The base is a flat mix of your foreground and background. Each frame carries two rows of eight holes, each a small rounded span in your background colour, so the page shows through at every size and in both themes. The frame number sits in the margin between the picture and the lower holes, in a monospace weight. Nothing is an image: it is a few elements and a colour mix.

The strip is one tab stop (a scroll region with a name); with focus on it the arrow keys scroll sideways and the snap settles on a frame. "Rewind" scrolls to the start; it dims when you are already there. Each frame is a figure whose caption gives its number, its title and what it shows, so a screen reader can read the strip in order.

A frame is 78% of the screen wide, so the next one peeks in at the edge as the cue to swipe. The header and the Rewind button sit above it.

Nothing moves by itself, ever. The strip scrolls only when you do, and "Rewind" jumps instead of gliding.

Yes. The film base is a deep mix of your foreground and background, so it is a dark strip in a light theme and a pale one in a dark theme, and the frames and the holes use the same tokens. The block ends on the strip with no closing line, so the next section's top rule closes it.