shadcn.io is not affiliated with official shadcn/ui
Photo Booth Strip Gallery Block for React
A photo-booth strip of four frames on a perforated paper strip that fills one frame at a time, 3, 2, 1 and a flash for each, with a drawn pose in every frame and a button to print it again.
Installation
Overview
A photo-booth gallery for React with Base UI, for Stripwell, an events-booth rental. On a wide screen the strip sits at the start of a split, on a tinted table inside a framed figure with + marks on its corners, and the copy sits at the end; on a phone the copy comes first and the strip lies under it. The strip is four frames, already printed when the page loads, on card-coloured paper with a torn, perforated top and foot. "Take a strip", the Shine Button, runs the booth: for each frame the count goes 3, 2, 1, a flash goes off, and the frame fills with a drawn pose (a head in a hat, a star, glasses, a cheer), one frame after another. "Reprint" clears the strip, ready for the next sitting. A list beside the strip ticks off the four poses as they are taken. The poses are drawn, not photographed, in your theme's own greys. It's built from ShineButton, Button and Guides, with CSS transitions and your theme's tokens for every colour. The company and its poses are made up for the example.
FAQ
How do I use my own photographs?
Each frame is a Shot in SHOTS with a kind, a name and a line that describes it. Replace the Pose inside Frame with <img alt="" className="size-full object-cover" src={…} /> (the frame keeps its read-out text), and take the pictures from a camera, with getUserMedia, in the "Take a strip" handler. The block only shows the sequence.
How does the booth run?
One number, the step, goes from 0 to 15: the frame is the step divided by four, and the beat is 3, 2, 1 and then the flash. A timer moves the step on every half second, a little less for the flash, and it is cleared if the block goes away or you press "Reprint". The frame being taken shows the count in large type, flashes, and then holds its pose; frames before it already do. Pressing the button while the booth runs does nothing.
How does it work with a keyboard?
Tab reaches "Take a strip" and "Reprint"; Enter or Space presses them. A polite line says where the booth is ("Photo 2 of 4: 3", then "Photo 2 of 4: flash") and, at the end, "Strip printed: 4 of 4 photos". The strip itself is a list that says, for each frame, whether it is taken and what it shows.
What happens with reduced motion?
There is no countdown and no flash: pressing the button fills all four frames at once, and the status line says the strip is printed.
Related
- Pro
Instant Print Gallery
Walls and tablesSix drawn instant prints lying a degree off square on a faint table band, each faded and blurred until you hover, focus or tap it, with a button that develops the whole tray one print after another.
- 0102Pro
Photo Booth Strip Features
Documents and objectsA vertical strip of four frames showing one card as empty, loading, error and success, with a numbered spine, held timecodes, a sticky header and a split divider.
- Pro
Printed Photo Album Gallery
Walls and tablesAn open photo album on a tinted table that opens on its cover and turns like leaves onto four spreads of drawn pictures in corner mounts, with Previous and Next, a spread counter and arrow keys.
- Pro
Film Strip Ribbon Gallery
Rows and bandsA 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.
- Pro
Bring-to-Front Collage Gallery
Walls and tablesSix drawn scraps overlap at slight angles on a dot field in a framed figure: choose one to bring it to the front and straighten it, press Escape to put it back, and Shuffle through three arrangements.
- Pro
Mood Board Gallery
Walls and tablesA pinboard of twelve pieces of five kinds (pictures, paint chips, materials, words and type) pinned a degree off square, with a lens that dims the other kinds without moving anything.