shadcn.io is not affiliated with official shadcn/ui
Stepped Before and After Gallery Block for Svelte
One drawn room in three layers, bare plaster, mid-job and finished, revealed from the foot of the picture by a slider with three stops, with room tabs and a line on each visit.
Installation
Overview
A stepped before-and-after for Svelte with Ark UI, for Plasterwork, a renovation studio. Under a compact header, a split holds the room tabs (Kitchen, Living room, Bathroom), the visit in words with its week and what changed, and three facts about the job. At the end sits one drawn picture of the room in three layers: bare plaster with chalk lines, the room mid-job with dust sheets and a ladder, and the finished room. A slider with three stops (Before, During, After) runs beside the picture, up the side from lg and under it on a phone, and each step lifts the next layer from the foot of the picture. The pictures are drawn in the theme's greys, never photographs, and the studio, the jobs and the weeks are made up. It's built from Slider, Tabs and Guides, with CSS transitions for the reveal.
FAQ
How do I use it with a keyboard?
Tab goes to the room tabs and then to the slider's thumb. Home and End jump to Before and After, and the arrow keys step one stage at a time. The thumb is spoken as the stage ("During, stage 2 of 3"), and a polite line names the room, the stage and the note. On the Ark build the vertical slider answers Up and Down, and the horizontal one on a phone answers Left and Right; the other three bases accept either pair.
How does the reveal work?
The three stages are three drawings stacked in one box. A layer is shown once the slider has reached its stage, by a clip that opens from the foot of the picture upward, so moving the slider up rises the next layer over the last. Nothing moves the page, and under reduced motion the layers simply change place.
What changes when I pick another room?
The picture, the note and the three facts change; the slider keeps the stage you chose, so you can compare the kitchen and the bathroom at the same point in the job. The block's height stays the same for every room and stage.
Why are there two sliders in the markup?
A slider cannot change its direction with CSS, so a vertical one is drawn from lg and a horizontal one below it; the one that is hidden is not shown and cannot take focus. Both write the same stage.