shadcn.io is not affiliated with official shadcn/ui
Seasonal Year Scrubber Gallery Block for React
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.
Installation
Overview
A year scrubber for React with Base 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.
Related
- Pro
Stepped Before and After Gallery
Compare, crop and zoomOne 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.
- Pro
Floor Plan Unit Types Gallery
Annotated picturesFour unit layouts drawn to one scale on a metre grid, picked from a toggle group, with a Furnished switch, numbered rooms and a room table whose rows ring their room in the plan.
- Pro
Ken Burns Slideshow Gallery
Carousels and slidesA framed viewer that runs rail to rail with five drawn stills, each panning and zooming slowly for seven seconds before crossfading to the next, with a caption, segments that fill with the time, Previous, Next and a visible Pause.
- Pro
Panorama Viewer Gallery
Compare, crop and zoomA drawn alpine valley seven times wider than tall in a framed scroll region you can drag or scroll with the arrow keys, with a minimap that follows the view, a zoom slider from 100% to 300% and a Reset button.
- Pro
A product's history as a version scrubber: a stepped slider from v1 to v6 grows a drawing of the app panel by panel while two notes say what changed and who it helped.
- Pro
Image Comparison Slider Gallery
Compare, crop and zoomA graded drawn picture revealed over its original by a handle you drag or a slider you step, with Original and Graded labels, a percent readout and a picker of three pictures.