An interactive team gallery: the panel under the pointer or keyboard focus expands while the others compress into vertical name tags, revealing role and social links. Pure-CSS magnify, accessible, self-contained.
- React 19
- React
- TypeScript
Lineup is an interactive "bento" team gallery for React 19 and TypeScript. The panel under the pointer — or keyboard focus — smoothly expands while the others compress into slim columns with vertical name tags; the expanded panel reveals the person's name, role and social links, and the photo zooms subtly. The magnify is pure CSS (no JS measuring), so it stays buttery and works on focus-within for keyboard users. It is fully self-contained: it injects its own CSS and a system font once on mount, ships with graceful avatar fallbacks (a generated gradient when a photo fails), respects prefers-reduced-motion, and is light by default with an optional dark theme. On small screens it stacks into expandable rows. Drop in your own members (name, role, photo, socials) or use the bundled placeholders. Icons via lucide-react. Original work for Assetzaar.
- Team
- Gallery
- Bento
- CSS animation
- Accessible
- Dark mode
- lucide-react



