Testimonial Card

A quote card whose five stars ripple and the author's underline draws in on hover.

Build a testimonial card with a star ripple. Structure: a paper card with a row of five accent-filled stars, the quote in medium weight, and a byline: a small dark initial-avatar disc, the name in bold, the role in muted underneath. Hover: - the card lifts 4px on a spring (stiffness ~340, damping ~24) and its shadow deepens (0.3s) - the five stars ripple: each scales to 1.35 with a quick -12deg tilt and back, staggered 50ms left to right - a wave of delight crossing the rating - the avatar disc gives a little nod (rotate -6deg, scale 1.08, springy) - an accent underline draws itself under the name (scaleX 0 to 1, transform-origin left, 0.3s) All of it reverses on leave. Content advice: one short punchy quote beats three lines - the card is a rhythm, not a review. Accessibility: the star row carries an aria-label ("5 star rating") and the individual stars are decorative; under prefers-reduced-motion keep only the shadow change. Colors as tokens: paper, ink text, muted role, one accent for stars and underline, dark ink avatar. 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.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data