shadcn.io is not affiliated with official shadcn/ui
Animated Comparison Team Block for React
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 React with Base 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.
Related
- Pro
Animated Counter Team
Numbers and historyA short strip of four centred people figures that roll up once as they scroll into view, over a closing row with the newest eight people as initials.
- Pro
Growth Timeline Team
Numbers and historyA headcount step chart over six years with a dot and a count at every jump and the biggest rise drawn heavier, over six cells naming the first hire of each kind.
- Pro
Stats Overview Team
Numbers and historyFour people figures with their change on a year ago, over seven department rows whose bars draw what each department was a year ago and what it has added since.
- Pro
Headcount Stacked Chart About
Team and officesHeadcount over six years as stacked columns by department, where choosing a year (focus, hover or tap) lists its departments with counts and shares.
- Pro
Minimal Avatars Team
Carousels and reelsA single quiet strip: twelve overlapping initials avatars and a +12 count, each avatar a focusable link whose name and role show in a tooltip, with one line under it that says how many people work in how many countries.
- Pro
Double Helix Company DNA
Culture and valuesA company-DNA section for a survey tool: a hand-drawn double helix with five rungs in a framed figure, and a list of five traits that lights a rung and shows what the trait means and how it is hired for.