Animated testimonial videos from JSON

A testimonial video template should take a row of JSON — quote, name, role, avatar URL — and produce a 6-second MP4 that looks like it was art-directed. Not a slide with text on it. An actual piece of motion design, repeatable across every customer in the CRM.

This post is the template. Drop in the JSON, render the MP4, ship the LinkedIn carousel by lunch.

What the template does

Four animations layered so the eye always has somewhere to land:

1. Avatar fade + scale-up in the first 0.8s. Soft easing, not bouncy. The avatar is the anchor; it arrives first and stays still.
2. Word-by-word quote reveal with a 120ms stagger. The reader's eye reads at the pace the words appear. No skimming.
3. Attribution lift at 2.4s — name and role rise from below, after the quote has landed.
4. Gradient sweep across all 6 seconds. Slow, ambient, brand-colored. The background does the work no still image can.

The JSON shape

The whole template is parameterized. One row of CRM data becomes one MP4.

{
"quote": "We shipped marketing videos in a day, not a quarter.",
"name": "Jordan Reyes",
"role": "Head of Growth, Northwind",
"initials": "JR",
"accent": "#ff3b1f",
"duration": 6
}

The word-by-word reveal needs the quote pre-split into <span> elements. Do this at template-compile time (Handlebars, MDX, your own string split) so the rendered HTML is static. The animation script just walks the spans.

Tweak it live

Try shorter quotes, longer names, brand colors that aren't ours.

Avatar fallback strategy

Real CRM data has missing avatars. The template handles it three ways, in order:

1. If avatarUrl: render an <img> clipped to a circle. Pre-load the image in the HTML; don't rely on network during the render frame.
2. If initials: render the gradient circle with two letters. This is the default in the demo above.
3. If neither: a solid signal-color circle with a single Unicode glyph (◆). Never blank.

The easing choice

A testimonial reads as honest when the motion reads as restrained. Two rules:

• No bounces. Cubic-out (1 - (1-p)^3) on every element. Springs and overshoots look like ads pretending to be testimonials.
• The gradient sweep uses a sine wave for opacity, not a linear ramp. The background needs to breathe, not transit. 0.4 + 0.6 * sin(p * π) peaks at the midpoint and recedes.

For the case where you want a stronger visual flourish — say, a hero asset on a landing page — swap the avatar fade-in for a spring curve. For most uses, restrained wins.

Generating a batch

The pattern that scales: one HTML template, one JSON array, one shell loop. See programmatic video from data for the full pipeline; the short version:

cat testimonials.json | jq -c '.[]' | while read row; do
  slug=$(echo $row | jq -r '.slug')
  echo $row | hyperframes render template.html \
    --json - \
    --out "out/$slug.mp4" \
    --duration 6 --fps 30
done

We've shipped batches of 400 personalized testimonials with this loop on a single CI runner. The render is CPU-bound and trivially parallel.

Render to MP4

Once the JSON and HTML look right in the playground, render at the dimensions you need:

hyperframes render input.html --out clip.mp4 --duration 6 --fps 30

For LinkedIn and Twitter, 1080×1080 square reads best in feed. For YouTube Shorts and Reels, 1080×1920. The same template renders all three — change the viewport, the layout reflows via flexbox, the animations re-derive their positions from hf-seek. Walk through the quickstart for the first render.

FAQ

How do I add a brand logo to the testimonial card?

Add an <img> element to the corner of the card and key its opacity to hf-seek time — typically fading in at the same moment as the attribution (around 2.4s). Inline the logo as base64 or pre-load it so the first frame is not blank.

Can the quote auto-resize for different lengths?

Yes. Use CSS clamp(20px, 4vw, 36px) on the quote font-size and let the viewport drive it. For very long quotes, also clamp line-height and consider reducing the per-word stagger from 120ms to 80ms so the reveal still completes within the 6s window.

What's the longest quote that fits?

About 22–28 words at the default font size on a 1080×1080 canvas. Past that, the per-word stagger pushes the reveal beyond 4 seconds and the attribution feels rushed. For longer quotes, either truncate with an ellipsis or extend the duration to 8s.

How do I render this in vertical format for Reels?

Change the viewport to 1080×1920, stack the avatar above the quote instead of side-by-side (flex-direction: column), and bump the font sizes ~25%. The hf-seek timing stays identical.

Can I use a real photo instead of initials?

Yes — swap the .avatar div for an <img class="avatar" src="...">. Apply border-radius: 50% and object-fit: cover for the circular crop. Inline the image as a base64 data URL to avoid network races at render time.

Related reading: batch personalized videos from CSV, animated quote cards for Twitter.