Stats Section with Team and Numbers

A proof bento for an agency or startup: a big count-up number with a bar per year, the team as monograms with live local clocks, one client quote, the tools used and client chips drifting past.

npm install motion lucide-react clsx tailwind-merge

Features

The headline number counts up the first time it scrolls into view, beside a bar per year you can point at
The team as monograms with each person's city and local time, filled in after the page loads
Pointing at a person lights up their city's live clock; pointing at a clock lights up everyone there
Tool tiles with a tooltip and a line on what each is used for, by pointer or keyboard
Client wordmark chips drift past in a band that pauses under the pointer
One inverted quote card; everything holds still for reduced motion

Best for: Agencies, studios and small teams that want their numbers, people and clients to do the selling in one section.

Installation

npm install motion lucide-react clsx tailwind-merge

Then copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.

Props

Prop	Type	Default	Description
eyebrow	string	-	Optional mono label above the headline.
title	string	-	The headline.
subtitle	string	-	Optional second headline line, in grey.
description	string	-	Optional paragraph beside the headline on wide screens.
launches	{ label; value: number; caption; byYear: { year; count }[]; formatYear: (entry) => string }	-	The big number, its caption and one bar per year.
team	{ label; summary; people: { name; role; city }[]; cities: { name; timeZone }[] }	-	People and the cities they work from. Time zones are IANA names such as "Asia/Kolkata".
quote	{ text; name; role }	-	One client quote, on the inverted card.
tools	{ label; hint; tools: { name; detail; icon: LucideIcon }[] }	-	Eight tools read best: four across, two rows.
clients	{ label; count; clients: string[] }	-	Client names, set as wordmarks in the drifting band.
className	string	-	Extra classes for the section.

FAQ

Is the Stats Section with Team and Numbers free to use?

Yes. Stats Section with Team and Numbers is free to copy into your own projects. Open the Code tab and paste the files into your app.

Does Stats Section with Team and Numbers work with Next.js and React?

Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).

Can I use Stats Section with Team and Numbers in JavaScript instead of TypeScript?

Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.

What does Stats Section with Team and Numbers need installed?

motion, lucide-react, clsx, tailwind-merge, plus the shared helpers from the Installation page.

Is Stats Section with Team and Numbers accessible?

Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.