shadcn.io is not affiliated with official shadcn/ui
Photographer EXIF Inspector Profile Block for Svelte
A photographer profile as a contact sheet beside an inspector: nine drawn frames of mixed shapes with a category filter that dims instead of reflowing, and the picked frame's camera, lens, aperture, shutter, ISO, date and a tone histogram.
Installation
Overview
Let a client read how a picture was made, with this photographer profile for Svelte with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the photographer: initials, name, role and place. The start cell is a contact sheet: nine frames of mixed shapes, drawn in greyscale, in columns, with a Toggle Group above them for the category (All, Portrait, Landscape or Street), each with its count. A category dims the other frames and takes them out of the tab order, so the sheet never reflows and the panel keeps its height. The frames are native radio buttons, so they are one group with arrow keys. The end cell (under the sheet on a phone) is the inspector for the picked frame: a Data List of camera, lens, focal length, aperture, shutter, ISO and the day it was taken, and a histogram of the frame's tones whose shadow, midtone and highlight shares are worked out from its bars and add up to 100. The foot, ruled by Guides, holds a status line beside a Shine Button that checks a typed list of free dates. It's built from Toggle Group, Data List, Badge, Avatar, Shine Button and Guides, with a CSS entrance only. The photographer, frames and settings are invented. For a portfolio site, a photographer's booking page or any gallery that shows its settings.
FAQ
How do I fill it with my own photographs?
Edit FRAMES. A frame has a title, a category, the camera, lens, focal length, aperture, shutter, ISO and the day it was taken, its width over height as ratio, and a tones pair (where its tones sit from 0 to 1, and how wide they spread) that the histogram is drawn from. In your app replace the drawn Scene with an img that fills its box (object-cover), and read the settings from the file's EXIF data; the inspector and the filter stay as they are. The counts, the shares and the status line are worked out from the frames, so nothing is typed twice.
Where does the histogram come from?
It is drawn from the frame's tones numbers, not read from pixels: fifteen bars in a bell around the mean. The three shares under it are the sums of the first five, the middle five and the last five bars as whole percentages that add up to 100. To make it real, build the bars from the photograph's own luminance counts and keep the same thirds.
Why does the filter dim the frames instead of hiding them?
So nothing moves. Frames in other categories fade and drop out of the tab order, the sheet keeps its columns and the panel keeps its height. If the picked frame is not in the chosen category, the first frame of that category is picked, and the status line says how many frames are shown. The filter is a single choice that is never empty.
What does Check my date do?
Nothing leaves the page. It reads the first date after AS_OF in FREE_DATES and says it in the status line ("Next free: Sat 17 Oct. Nothing was sent."). To make it real, ask your calendar for the dates and keep the answer in the same line. AS_OF is the day the page treats as today, so nothing reads the clock.
Is the sheet accessible?
Each frame is a radio button named by its title and category; the drawings are hidden from assistive technology and everything they stand for is written in the inspector. The group of frames is one tab stop and the arrow keys move between the frames that are shown. The status line is a polite live region present from the start. Dates, settings and counts keep their order in a right-to-left layout.
How does it look on a phone?
The frames sit two across with the category chips scrolling sideways above them, and the inspector follows under the sheet. The foot stays pinned to the bottom of the screen while the panel scrolls, so Check my date is always in reach, and settles at the panel's end from the medium breakpoint.