shadcn.io is not affiliated with official shadcn/ui
Instant Print Gallery Block for Solid
Six 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.
Installation
Overview
An instant-print gallery for Solid with Ark UI, for Dayglow Instant, an instant-camera brand. A compact header, "Develop all" and "Start over" buttons and a count ("2 of 6 developed") sit over six Polaroid-style prints that lie a degree or two off square on a faint table band, which ends the block. Four of the prints start faded and blurred, as instant film does in its first seconds, and two are already up. Hover it with a mouse, focus it or tap it and the picture sharpens over a second and a half while the print straightens; "Develop all" brings the whole tray up one print after another, 150 ms apart, and "Start over" puts the film back. Each print is a picture on card-coloured paper with its title, place and date written in the margin. The pictures are drawn, not photographed: a small kit of scenes (hills, a lake, a plate on a table, a plant, a desk, a bridge) in your theme's own greys. It's built from Button and Guides, with CSS transitions and your theme's tokens for every colour. The brand, places and dates are made up for the example.
FAQ
How do I use my own photographs?
Each print in PRINTS has a title, a place, a date, a description and a scene. Add your image's address to it, then replace <Scene ratio={1} scene={item.scene} /> in PrintCard with <img alt="" className="size-full object-cover" src={…} />. The button and the caption already name the print, and the fade and blur on the wrapper work on an image just as they do on the drawing.
How does a print develop?
Each print's picture sits in a wrapper that is faded (40% opacity, blurred, low contrast) until the print's id is in the block's developed list. A CSS transition on opacity and filter does the rest, over 1.6 seconds. Hovering with a mouse, focusing the print and pressing it all add its id; touch screens use the press. "Develop all" adds every id and gives each print a --wait delay of 150 ms times its place, so they come up in turn; "Start over" empties the list.
How does it work with a keyboard?
Tab reaches each print, which develops it, and the buttons are in the header. A developed print reads out its title and what it shows; one still in the tray reads "Develop" and its title. A polite status line says "3 of 6 prints developed". Nothing depends on hover.
What happens with reduced motion?
All six prints are developed and nothing fades or straightens: the transitions are off and the tilt stays as it is. "Start over" still puts the film back, without a fade.