shadcn.io is not affiliated with official shadcn/ui
Milestone Wall Gallery Block for Svelte
Eight drawn pictures in a snapping horizontal scroller whose frames rise one step each, with the year and a figure on every frame, a progress bar that fills as you scroll and Previous and Next year buttons.
Installation
Overview
A milestone wall for Svelte with Ark UI, for Seedlings Lab, a hydroponics company. A centred header sits over a band holding eight drawn pictures in a horizontal scroller, laid out as a stair: each frame is one step taller than the last, so the wall climbs from a single tray on a windowsill to a hall of racks, and each carries "Year 3", a figure and a title. The scroller is a labelled, focusable region that snaps to the frames, so a swipe, the wheel or the arrow keys move it. Under it a ruled band holds a progress bar that fills as you scroll, a line that says which years are in view ("Year 3 of 8", or "Years 2 to 5 of 8" when several fit) and Previous and Next year buttons that go one frame at a time. The pictures are drawn, not photographed, in your theme's greys. It's built from Progress, Button and Guides. The company, years and figures are made up for the example.
FAQ
How do I use my own milestones?
Edit MILESTONES: each has a year, a figure, a title, a description and an id. Replace the Scene in a frame with <img alt="" className="size-full object-cover" src={…} /> (the figure's text names it), and change BASE and STEP for the height of the first frame and each step. The stair classes in stepClass follow those numbers.
How does the stair work?
Every frame is the same width and one step taller than the one before, and they all stand on the same line: the row aligns its frames to the bottom. Each picture is drawn at the shape of its own box, so the first, short and wide, shows one tray on a shelf and the last, tall, shows two full racks.
What does the progress bar track?
How far the scroller has moved, as a share of what there is to scroll, worked out from its position as it moves. The line beside it names the first and last frame fully in view, as "Year 3 of 8" or "Years 2 to 5 of 8", and is polite for a screen reader. The bar is decorative: the line beside it says the same for a screen reader.
How does it work with a keyboard?
The scroller is one stop in the tab order, labelled "Milestones, scroll sideways"; once it has focus the arrow keys scroll it and Home and End go to the first and the last frame. Previous and Next year are buttons after it; at either end they stay in the tab order but do nothing, so focus is never lost.