Comparison Table

Build an us-vs-them comparison table section. Structure: a light card with a 3-column grid: feature name (wider), your product, competitors. The header row has tiny uppercase labels - your brand name in the accent color, "others" in muted. Rows are separated by hairlines. Content per row: your column gets a green check for yes; the competitor column gets a muted check for their rare yes and a very faint x for no. 4-5 rows, short feature names. Row hover: the whole row tints with 6% accent (0.25s background transition), the feature name goes bold, and your column's check does a quick heartbeat - scale 1 to 1.35 and back over 0.35s. That pop is the persuasion: every row you touch, your product visibly wins. Accessibility: checks and x marks carry aria-labels ("yes"/"no") so the table reads correctly; rows can be plain divs or buttons. Under prefers-reduced-motion the pop is skipped and only the tint remains. Colors as tokens: paper, ink, muted, one accent, green for your checks only. Never use red for the competitor - faint gray says "missing" with more class. 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.