Feature Tooltip

Create a new-feature tooltip. A button carrying a small accent dot on its top-right corner. The dot pulses to draw the eye: a copy of it scales from 1 to 2.2x while fading from 60% to 0 opacity on a 1.3s infinite ease-out loop; the solid dot has a 2px page-colored border so it reads cleanly on any surface. On hover (or first visit), a dark tooltip blooms above the button: springing from 8px below at 92% scale (stiffness 420, damping 24, transform-origin bottom center), with a tiny uppercase monospace "NEW" label in the accent color, one line of feature copy, and a small rotated-square arrow pointing down at the button. It exits quickly (150ms) on hover-out. Once the user actually uses the feature, retire the dot and tooltip permanently (persist a flag). Accessibility: the tooltip uses role="status"; the trigger uses aria-expanded; the dot is decorative (aria-hidden). If prefers-reduced-motion is set, show and hide the tooltip instantly with a static dot. 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.