All studies

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.

25 / 74

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.