shadcn.io is not affiliated with official shadcn/ui
Animated Comparison Team Block for Solid
A Then / Now toggle on a framed figure: Then fills four places with the founders, Now fills eleven and a +13, with a line of words and three figures that change with it.
Installation
Overview
A before-and-after team section for Solid with Ark UI, written for Orrerly, a fictional stargazing app. A centred header says "From 4 of us to 24", and a framed figure carries a Then / Now toggle sitting on its top rule. Under it twelve places for faces in one grid: Then fills four with the founders in dark initials, Now fills eleven and ends on a "+13" for everyone not drawn, with the newest person ringed. Every place stays where it is and only fades, so the figure keeps its size. A line of words ("Year 1: the 4 of us, in a spare room above a bookshop.") and three figures (people, countries, languages) change with the toggle, their digits rolling to the new values. It's built from Segment Group, Sliding Number, Avatar and Guides, with CSS transitions and your theme's tokens. The people are fictional and the figures are example data.
FAQ
How do I change the people and the figures?
Edit PEOPLE and FIGURES at the top of the file. A person is a name, a role, whether they are a founder and, for one person, newest. Founders are the places Then fills; REST is the count Now ends on. The title ("From 4 of us to 24"), the people figure and the lines of words are computed from those lists. Keep eleven people and a rest for twelve places; any other number leaves empty places at the end.
How does the toggle work with a keyboard and a screen reader?
It is a radio group named "Compare the team Then and Now": Tab moves into it, the arrow keys move between Then and Now, and the choice applies at once. A polite status line reads the line of words for the chosen view, and the faces that are not shown are hidden from assistive technology and the keyboard.
Why does nothing move when I toggle?
The places don't appear or disappear, they fade: a place that is empty in Then stays, unseen, so the grid keeps its size. The two lines of words share one grid cell for the same reason, and the figures' digits roll inside a width that fits both values.
What moves, and what happens with reduced motion?
Faces fade in and out, the line of words cross-fades and the digits roll, with CSS transitions. With reduced motion the faces and the line change at once and the digits change in place.