Team Stack

A stacked deck of team member cards that fans out on hover (desktop) or tap (mobile), with spring-animated CTA pills and deterministic jitter for a natural pile feel.

Installation

Pro components require registry authentication. Add your Unlumen UI Pro key as UNLUMEN_LICENSE_KEY in your .env.local file and follow the setup guide.

File Structure

team-stack.tsx

Usage

import { TeamStack } from "@/components/unlumen-ui/team-stack";

export default function Page() {
  return <TeamStack />;
}

API Reference

TeamStack

The component is self-contained and ships with its own data. Replace the teamCards array inside the file with your own content.

TeamMemberCard (data shape)

name
string
—

Member name displayed on the card.

role
string
—

Job title or role shown above the name.

description
string
—

Short bio shown below the name.

imageSrc
string
—

Path or URL to the member's avatar/photo.

imageAlt
string
—

Alt text for the image.

isFeatured?
boolean
—

When true, renders the card with an inverted (dark) background so it stands out as the hero card.

ctaLabel?
string
—

Label for the CTA pill. When omitted, no pill is rendered.

ctaHref?
string
—

Navigation target for the CTA pill. Also makes the entire card clickable.

Notes

  • On desktop, hovering the container fans all cards out using pre-defined spreadX / spreadY / spreadRotate values. Moving the mouse out collapses them back.
  • On mobile, the first tap expands the stack; subsequent taps cycle the active card; a final tap on an active card navigates to its ctaHref. Tapping outside collapses the stack.
  • Card positions in the collapsed state use deterministic jitter derived from Math.sin — the pile looks natural and random but is stable across renders with no React state involved.
  • The CTA pill starts as a 36 × 36 icon button and expands to fit the label width, measured via scrollWidth in a useLayoutEffect.
  • The isFeatured card uses bg-foreground text-background so it works correctly in both light and dark mode.
  • Replace imageSrc values with your own assets. The demo ships with placeholder Notion-style avatars.

Credits

Inspired by the "Team" section of the Omou website. Built by leo.

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.