KQ-1225 · STAT/CARD

Stat Card

A profile printed as a collectible card, edged in foil the colour of its rarity: the rim is a conic gradient that turns with the light and carries a glint where the light strikes it, and a mouse over the card tilts it toward the pointer in perspective on springs with glide's constants, so the glint runs round the rim as the pointer circles. Its numbers are odometers that roll up on the drift spring in a cascade the first time it is seen and whenever the front comes back round; dragging sideways turns it over 1:1, a release lands on the nearest face on the glide spring with the throw's velocity, and a raised level sweeps a shine across the face while the badge lands on recoil. The flip button on each face is a real toggle that Enter or Space presses, and focus follows it to the other side.

KQ-1225 · STAT/CARD

Noor Haddad

Platform engineer

Platform engineer · Basinworks InfraRare

Reviews: 248
Deploys: 1,204
Streak, days: 36
Mentored: 9

No. 042/300 · Since 2021

level 12 · rare · stats side

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/stat-card

Props

name: string; default —; Whose card it is: the heading, the monogram and the group's accessible name.
role: string; default —; What they do, under the name and on the type line.
team: string; default —; Where they do it, on the type line.
level: number; default —; Their level, in the corner badge. Raising it plays the level-up; lowering it only rolls the number down.
stats: { label: string; value: number; max?: number }[]; default —; The numbers on the front, as rolling odometers; a stat with a max also gets a bar that fills with it.
bio: string; default —; A few sentences for the back.
facts: { label: string; value: string }[]; default —; Short facts listed on the back.
number: string; default —; The card's number in its set, e.g. "042/300", in the footer.
since: string; default —; The year they joined, in the footer.
avatar: ReactNode; default —; A picture for the portrait window. Without it, a monogram on a contour pattern seeded by the name.
flipped / defaultFlipped: boolean; default false; Whether the back (the bio) is showing.
onFlippedChange: (flipped: boolean) => void; default —; Fires from the drag, tap or key that turned the card over. A controlled host that refuses gets the card turned back.
rarity: "common" | "rare" | "epic"; default "rare"; The foil on the rim and the colours of the portrait, bars and gem: matte silver, cobalt, or an iridescent run of hues with sparkles that flare as the glint passes.
tilt: number; default 10; How far the card leans toward the pointer, in degrees, 0 to 20. At 0 it stays flat and only the glint follows.
roll: boolean; default true; Roll the numbers up from zero when the front is revealed. Off shows them still.
sound: boolean; default false; A pop as a flipped face lands; a shimmer and a pop for a level-up the visitor caused (a level pushed from elsewhere is silent).
disabled: boolean; default false; Shows the card but takes no tilt, drags, taps or keys.
className: string; default —; Classes for the card's root.

Prop	Type	Default	Description
name	string	—	Whose card it is: the heading, the monogram and the group's accessible name.
role	string	—	What they do, under the name and on the type line.
team	string	—	Where they do it, on the type line.
level	number	—	Their level, in the corner badge. Raising it plays the level-up; lowering it only rolls the number down.
stats	{ label: string; value: number; max?: number }[]	—	The numbers on the front, as rolling odometers; a stat with a max also gets a bar that fills with it.
bio	string	—	A few sentences for the back.
facts	{ label: string; value: string }[]	—	Short facts listed on the back.
number	string	—	The card's number in its set, e.g. "042/300", in the footer.
since	string	—	The year they joined, in the footer.
avatar	ReactNode	—	A picture for the portrait window. Without it, a monogram on a contour pattern seeded by the name.
flipped / defaultFlipped	boolean	false	Whether the back (the bio) is showing.
onFlippedChange	(flipped: boolean) => void	—	Fires from the drag, tap or key that turned the card over. A controlled host that refuses gets the card turned back.
rarity	"common" \| "rare" \| "epic"	"rare"	The foil on the rim and the colours of the portrait, bars and gem: matte silver, cobalt, or an iridescent run of hues with sparkles that flare as the glint passes.
tilt	number	10	How far the card leans toward the pointer, in degrees, 0 to 20. At 0 it stays flat and only the glint follows.
roll	boolean	true	Roll the numbers up from zero when the front is revealed. Off shows them still.
sound	boolean	false	A pop as a flipped face lands; a shimmer and a pop for a level-up the visitor caused (a level pushed from elsewhere is silent).
disabled	boolean	false	Shows the card but takes no tilt, drags, taps or keys.
className	string	—	Classes for the card's root.