All studies25 / 74
Data
Inline quotes
Client voices woven into a paragraph: hover, tap or tab to a highlighted role and its full quote opens beside it, gliding to the next name when you move on.
Where it earns its place
Process and about sections where proof should read as editorial prose rather than a testimonial carousel, especially when clients can only be quoted anonymously.
What we changed
- Kept the original's careful mechanics: a short close delay and a padded bridge so the card does not flicker while the pointer crosses, keyboard focus opens only on focus-visible, Escape returns focus to the name.
- Placement is measured against the example's own bounds instead of the viewport, because a card that fits the screen can still be clipped by its container.
- Switching names glides one card to the new position and crossfades the quote, instead of closing and reopening.
- Dropped avatars and star ratings: the studio's testimonials are anonymized at client request, so the card carries role only and says so.
- Escape is handled on the component rather than a document-level listener, so many instances can live on one page.