shadcn.io is not affiliated with official shadcn/ui
True Scale Artwork Gallery Block for Vue
A gallery wall at true scale: six framed works as wide and tall as their stated sizes, a Show scale switch that hangs a 170 cm figure beside them, and a wall label on hover and focus.
Installation
Overview
An art gallery for Vue with Ark UI. Six framed works hang on one eye-level line of a wall of fixed size, each as wide and as tall as its stated size in centimetres, so a 40 by 50 cm drawing is small beside a 150 by 100 cm canvas. A "Show scale" switch draws a 170 cm figure at the end of the wall and writes each frame's size under it. Pointing at or focusing a frame opens its wall label: title, artist, year, medium and size. On a phone the wall becomes a grid two across, with the label under every frame, and there is no figure. The wall is a tinted band that ends the block, with its marks at the top. The works are drawn compositions in the theme's greys, never photographs. It's built from Guides, Switch and Hover Card, with CSS transitions for the entrance. For galleries, auction previews, studios and any place where size matters.
FAQ
How is the scale kept true?
The wall is typed in centimetres (WALL_HEIGHT, the eye line, the gaps) and every frame's width and height too. Each frame's position, width and height are percentages of the wall worked out from those numbers, and the wall keeps its aspect ratio, so the proportions are exact at any width.
What does Show scale do?
It makes the 170 cm figure and each frame's dimension line visible. They are always in the page but hidden, so the wall never moves; switch it off and they go. A polite line says which state it is in.
Does the wall label work without a mouse?
Yes: it opens on focus as well as on hover, and each frame is a button named with its title, artist, year and size. On a touch screen a tap opens the label, and on a phone it is also written under each frame.
How do I add a work?
Add an entry to WORKS with its size in centimetres and a scene for the picture, and the wall's width grows to fit it: the positions are computed in order. With photographs, replace Scene with an <img> in the frame.