shadcn.io is not affiliated with official shadcn/ui
Film Strip Ribbon Gallery Block for Solid
A strip of film with real sprocket holes and frame numbers carrying eight drawn black-and-white scenes in a snapping, keyboard-scrollable band, with a Rewind button back to the first frame.
Installation
Overview
A film-strip gallery for Solid with Ark UI, for Celluloid Lab, a film lab. A centred header and a "Rewind" button sit over one long strip of film on a band that runs from rail to rail, with + marks on its top rule, and ends the block. The film base is a deep mix of your foreground and background colours, with a row of rounded sprocket holes along the top and the foot of every frame (the page shows through them) and a frame number in the margin ("12A", "13"). Eight 3:2 black-and-white scenes (a harbour under the moon, roofs, a coast, a forest) sit in it, each with its title. The strip is a focusable scroll region with a gentle snap, so the arrow keys, a drag or a swipe move along it, and the next frame always peeks past the edge. "Rewind" scrolls back to the first frame, smoothly unless motion is reduced. The pictures are drawn, not photographed, in your theme's own greys. It's built from Button and Guides, with CSS scroll snapping and your theme's tokens for every colour. The lab and its roll are made up for the example.
FAQ
How do I use my own frames?
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.
How is the film drawn?
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.
How does it work with a keyboard?
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.
How does it fit on a phone?
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.
What happens with reduced motion?
Nothing moves by itself, ever. The strip scrolls only when you do, and "Rewind" jumps instead of gliding.
Does it follow my theme?
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.