Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Seasonal Year Scrubber Gallery Block for Svelte

One drawn orchard that follows a twelve-stop month slider: the sun's height and size, the leaves, the snow line and the ground's tone change, with the month in words and the job for it.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A year scrubber for Svelte with Ark UI, for Orchard Almanac, a seasonal planner. A framed drawing of an orchard with + marks on its corners sits at the start of a split, with a ruled band under it that holds a slider of twelve stops, January to December. Four numbers per month drive the picture through CSS variables: the sun's height and size, how much of the leaf is out, how far the snow reaches down the hills, and the ground's tone, each with a transition. At the end of the row, the month in words, the picture described from the same numbers ("The sun is high, the trees are budding and the hills are clear of snow") and the orchard job for the month. A phone shows a label under every third stop. The orchard is drawn in the theme's greys, never a photograph, and nothing is read from the clock. It's built from Slider, Badge and Guides.

FAQ

How does one slider change so much of the picture?

Each month has four numbers in the data. The figure sets them as CSS variables, and the shapes read them: the sun's translate and scale, each leaf's opacity against its own level, the snow strip's offset, and the fill mixes. A transition on those properties makes the change glide, and none runs under reduced motion.

Which keys work?

Tab to the slider ("Month") and use the arrow keys for one month and Home and End for January and December. The thumb is spoken as the month's name, and a polite line gives the month, the description and the job.

Does the year run the other way in a right-to-left page?

No. The time axis stays January to December from the start of the slider in every direction; the text beside it follows the reading direction.

Does it know today's date?

No. It starts at April and never reads the clock, so the page is the same on the server and in the browser.

How do I use photographs of my own?

Replace the drawing with an image per month (a stack of twelve pictures with only the chosen one shown) and keep the month text and the slider. The four numbers are only needed for the drawn version.

How does it fit a phone?

The copy sits above the picture, the job under it, and the slider keeps month labels under every third stop (January, April, July, October) so the labels never crowd.

All 100 gallery blocks