shadcn.io is not affiliated with official shadcn/ui
Photo Booth Strip Gallery Block for Svelte
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 Svelte with Ark 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.