shadcn.io is not affiliated with official shadcn/ui
Concert Photo Gallery Music Block for Vue
Ten drawn stage scenes on shared hairlines, captioned with song, time and photographer, filtered by set moment, with a lightbox that has a counter, arrow keys and a real PNG download.
Installation
Overview
Let people relive a night by the moment it happened, with this concert photo gallery for Vue with Ark UI. Floorframe, a gig photo archive, shows Okonkwo Drift at Marrow Street Club in a hairline frame with a plus mark on each corner: ten pictures in a grid on shared lines, each captioned with its song and time ("River Ledger, 21:12") and a photographer. The pictures are drawn greyscale scenes (a lit doorway, a lone microphone, a keyboard, a performer under three beams, a guitarist, a drum kit, a crowd seen from behind, raised hands, a bar of stage lights, an amp stack), never photographs. A Toggle Group filters All, Opener, Main set and Encore; the pictures that do not match stay in the grid, unseen, so the panel never changes height. Pressing a picture opens a lightbox Dialog with the whole picture, a counter, Previous and Next, the arrow keys and Escape, and a Download button that draws the scene into a real PNG through a canvas (Download Trigger). Focus returns to the picture last shown. It's built from Toggle Group, Dialog, Download Trigger, Button and Guides, with a CSS entrance only. For gig archives, fan sites and tour recaps.
FAQ
How do I use my own pictures?
Edit PICTURES: each has a title, a time, a moment (opener, main or encore), a photographer, an alt text and a scene of a kind and a seed. To use real photographs, replace the Scene component with an img of the same shape (aspect-16/10, object-cover) and keep the captions; the filter, the lightbox and the counter do not depend on how a picture is drawn. For the download, return the image's own file instead of pngOf.
How does the filter keep the page still?
The grid always holds all ten cells. The matching pictures come first in order, and the rest are drawn unseen and inert in the cells after them, so the panel keeps its height whichever moment is chosen. The count and the polite status line say how many are showing ("Showing 5 of 10 pictures: Main set.").
How does the lightbox work from the keyboard?
Enter or Space on a picture opens it. Inside, the left and right arrow keys step through the pictures that the filter shows (mirrored in a right-to-left page), Home and End jump to the first and last, Escape closes it, and Tab cycles through Close, Previous, Next and Download. On touch, a swipe steps. Closing returns focus to the frame of the picture last shown.
What does Download save?
A real PNG, 1600 by 1000 pixels. The scene's paths are written into an SVG in named greys, loaded as an image and drawn through a canvas, which the Download Trigger saves as floorframe-<picture>.png. It is a drawing of the scene, not a copy of the page, and it works the same in light and dark themes.