Talking-head quote
A quote that comes to life. Hover (or tap) the portrait: the clip plays and each word lights up as it is spoken.
This is a level up from a static pull-quote: the words are tied to the real person saying them. Move your pointer over a portrait below to see it.
Heads up: the two clips below are placeholders so the mechanic is visible end to end. The face is a simple animation and the audio is a soft tone per word, both synced to the timings. To ship a real one, drop a short interview clip (an MP4) plus its word timings in place of these. The full how-to is in the writing template.
One sentence, one speaker
Hover the portrait. Before you click anything, it previews muted with a tap for sound chip; after one click, sound rides along on hover. Keyboard: Tab to it and press Enter.
Authenticity beats perfection. You don't need a big budget to make the message land.
Jamie ChenVP of Marketing (placeholder)
Two on a page
Each block is independent, and only one ever plays at a time: start the second and the first resets on its own.
The sooner you start building community, the better. Your customers become your best marketers.
Riley OkaforHead of Community (placeholder)
What is going on under the hood
The quote text is plain prose in the markup, so it reads fine with no JavaScript and doubles as the transcript. The script splits it into words, then a small loop reads the video's playback time and lights the matching word. If the timings ever disagree with the text, the clip still plays and the highlight simply stays off. Reduced-motion visitors get a still portrait they can click to play, with sound but no flashing.