shadcn.io is not affiliated with official shadcn/ui
Timeline With Images Block for React Aria
A greenhouse tracker on a vertical rail with a drawn thumbnail of a seedling for each of six weeks, a larger drawing of the chosen week with its height and leaves, and a Play time-lapse button that steps the weeks.
Installation
Overview
Show change over time as pictures with this image timeline for React with React Aria. It is written for Sproutlog, a fictional greenhouse tracker. A hairline frame with plus marks holds a rail of six weekly nodes and a side cell. Each node is a button with a small greyscale drawing of one cherry tomato seedling that week, the date and a note. The drawings are computed from the measurements: the stem is as tall as the plant, there is one leaf for every leaf counted and flowers from week five. The side cell shows the chosen week larger with its height, leaves and flowers, and stacks above the rail on a phone. A Play time-lapse Button steps through the weeks every 900 milliseconds, stops at the last one and pauses on a second press; choosing a week stops it. These are drawings, not photos. For plant, build, renovation or progress logs. The data is example data.
FAQ
How do I change the weeks?
Edit WEEKS at the top of the file: a date, a height in centimetres, a leaf count, a flower count and a note. The drawings are generated from those numbers by sceneOf().
How do I use real photos?
Replace the PlantDrawing in the thumbnail and the side cell with your images and keep the rest. Give each image alt text that says what changed that week.
How does the time-lapse work?
One effect starts a single timeout while playing and moves to the next week when it fires. It is cleared when you pause, choose a week or leave the page. Pressing Play on the last week starts again from the first.
What stays in the page?
The chosen week and whether it is playing, in local state. Nothing is saved or sent.