Hover Card

Build a hover card: a profile panel that opens when someone dwells on a name. The timing IS the component: - about 320ms before it OPENS. Firing on the first pixel of hover means the card ambushes anyone whose pointer merely crossed the name on its way somewhere else. - about 180ms of grace before it CLOSES, and CANCEL that timer if the pointer enters the card itself. Without the gap the card vanishes in the empty space between the trigger and the panel, and it becomes impossible to click anything inside. Put every timer in a ref and clear them all on unmount. This component creates timers on every pointer pass over the name. The card must hold an ACTION, a follow button or similar. Without something to do, this is a tooltip wearing a bigger box, and a tooltip is cheaper in every way. That is also the line between the two components: you can click inside a hover card. Make the trigger LOOK like one: an accent underline on the name. A hover card on plain text is a feature nobody discovers. Focus opens it IMMEDIATELY, with no delay. The dwell timer models pointer intent, and a keyboard user who has arrived on the trigger has already declared theirs. Add a click toggle so it works on touch. Motion: opacity, y 6 to 0, scale 0.97 to 1, 200ms on ease [0.22, 1, 0.36, 1]. Accessibility: aria-expanded on the trigger, and the avatar circle aria-hidden since the name is already text beside it. Under prefers-reduced-motion, use opacity only but KEEP the delays. The intent timing is behaviour, not decoration. Colors as tokens: surface and border for the panel, accent with on-primary ink for the avatar, muted ink for the secondary line. Use neutral placeholder names and a placeholder brand. 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.