Team Card Reveal
A portrait card whose info panel slides up over the photo, socials popping in one by one.
Build a team-member card with a slide-up reveal. Resting: a portrait-ratio card showing only the photo - or, with no photos yet, a dark gradient with a large accent initial-disc as the stand-in portrait. No text visible. Rounded corners, hairline border, overflow hidden. Hover: - the portrait responds first: it scales to 1.08 and drifts up 6px (0.45s, decisive ease) - the photo makes room - an info panel slides up from the bottom edge (translateY from 100% to 0, 0.4s, same ease): near-opaque paper with a slight backdrop blur, holding the name in bold and the role in muted - three small round social chips pop in one after another (scale from 0 on a spring, stiffness ~480, 60ms stagger, starting ~120ms after the panel lands) Leaving slides the panel back down and settles the photo. The choreography matters: photo first, panel second, socials last - three beats, ~0.6s total. Accessibility: the card is a button or link labeled with the person's name; social chips get real labels. Under prefers-reduced-motion the panel appears without sliding and the photo stays still. Colors as tokens: ink gradient portrait, accent disc, paper panel, muted role text. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.