testimonial-video

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Testimonial Video

证言视频

Animate a written quote, review, or testimonial into a short, trustworthy social-proof clip. The craft is typographic, not flashy: a clean quote card where the words land in reading order, the key phrase gets emphasis exactly when it should, the stars fill to the real score, and the author signs off. One card design, driven by props, becomes a video for every review on the list.

将书面语录、评测或客户证言制作成简短、可信的社交证明短视频。核心在于排版设计，而非花哨特效：打造简洁的语录卡片，文字按阅读顺序逐次呈现，关键短语在恰当时机得到强调，星级评分根据真实分数填充，作者信息最终呈现。通过配置参数，单张卡片设计可批量生成列表中每条评测对应的视频。

When to use

使用场景

Customer review → a 6–12s vertical/feed clip (the headline use case).
A pull-quote or testimonial graphic with author name, role, avatar, company.
An animated star rating (including half/fractional scores like 4.5).
A batch: a list/CSV of reviews → one video each, same template.

Do not reach here for sale/discount promos or generic ad creative — this skill is strictly the quote / social-proof angle.

客户评测 → 6–12秒竖版/信息流短视频（核心使用场景）。
带作者姓名、职位、头像、公司信息的引用语录或证言图形。
动画星级评分（支持4.5这类半分/分数值）。
批量处理：将评测列表/CSV转为多条视频，共用同一模板。

请勿将本技能用于促销/折扣广告或通用广告创意 — 本技能仅专注于语录/社交证明方向。

The one rule: trust before motion

唯一准则：真实性重于动画效果

A testimonial earns its job by feeling real, not produced. Restraint reads as credibility; over-animation reads as an ad people skip.

Reveal in reading order. The eye must finish a line before the next arrives. Stagger lines (or clauses), never all words at once, and never reorder for visual flair.
Quote the words exactly. Do not paraphrase, trim mid-sentence, or invent a rating. If you emphasize a phrase, it must be the customer's phrase.
The author is the proof. A quote with no attributable human is just a slogan. Name + role + company (and avatar if real) is non-negotiable.

证言的价值在于真实感，而非刻意制作。克制的动画传递可信度；过度动画会让用户将其视为广告并跳过。

按阅读顺序逐次呈现。用户必须读完一行后，下一行才会出现。逐行（或分句）错开显示，切勿一次性展示所有文字，也不要为了视觉效果打乱顺序。
原文引用。不得 paraphrase（意译）、中途截断句子或虚构评分。若要强调某一短语，必须是客户原文中的内容。
作者信息是核心证明。无明确归属的语录只是口号。姓名+职位+公司（如有真实头像则添加）是必备要素。

The anatomy of a quote card

语录卡片的组成结构

Element	Job	Timing
Quote mark motif	Signals "this is a quote" before words read	Frame 0, scales/fades in first
Quote body	The testimonial, revealed line-by-line	Staggered, ~6–10 frames apart
Emphasis span	The one phrase that sells	Lands after its line settles
Star rating	The score, filled to the real value	Fills left→right after the quote
Author block	Name / role / company / avatar	Signs off last, slides up

Build in that order; reveal in that order. The viewer reads the quote, believes it, sees the score, then learns who said it.

元素	作用	时序
引号标识	在文字显示前提示“这是一条语录”	第0帧，最先缩放/淡入
语录正文	证言内容，逐行显示	错开显示，间隔约6–10帧
强调短语	最具说服力的核心内容	在所在行显示完成后出现
星级评分	真实分数，按实际值填充	语录显示完成后从左到右填充
作者信息块	姓名/职位/公司/头像	最后出现，向上滑入

按上述顺序构建和呈现：用户先阅读语录、产生信任，再看到评分，最后了解发言者身份。

Staggered line reveal

逐行渐显动画

Split the quote into lines (or clauses), then offset each one's entrance. In Remotion, drive every line off

useCurrentFrame()

so it renders deterministically — never a CSS transition or a JS timer, which desync from the frame renderer.

jsx

import { useCurrentFrame, spring, useVideoConfig } from "remotion";

const QuoteBody = ({ lines, startAt = 8, stagger = 6 }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  return (
    <blockquote>
      {lines.map((line, i) => {
        const enter = spring({ frame: frame - startAt - i * stagger, fps,
          config: { damping: 200 } });           // 0→1, no overshoot
        return (
          <span key={i} style={{ display: "block",
            opacity: enter,
            transform: `translateY(${(1 - enter) * 14}px)` }}>
            {line}
          </span>
        );
      })}
    </blockquote>
  );
};

Keep one motion language: same easing, same 14px rise, every line. Speed reads as confidence only when it's consistent. See

references/quote-card.md

for the full composition.

将语录拆分为行（或分句），然后错开每一行的入场时间。在Remotion中，通过

useCurrentFrame()

控制每一行的显示，确保渲染确定性 — 切勿使用CSS过渡或JS定时器，否则会与帧渲染器不同步。

jsx

import { useCurrentFrame, spring, useVideoConfig } from "remotion";

const QuoteBody = ({ lines, startAt = 8, stagger = 6 }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  return (
    <blockquote>
      {lines.map((line, i) => {
        const enter = spring({ frame: frame - startAt - i * stagger, fps,
          config: { damping: 200 } });           // 0→1, no overshoot
        return (
          <span key={i} style={{ display: "block",
            opacity: enter,
            transform: `translateY(${(1 - enter) * 14}px)` }}>
            {line}
          </span>
        );
      })}
    </blockquote>
  );
};

保持统一的动画逻辑：相同的缓动效果、相同的14px上移距离，每一行都一致。只有保持一致性，快速的动画才会传递出自信。完整组件可参考

references/quote-card.md

。

Kinetic emphasis on the key phrase

关键短语动态强调

Pick the single phrase that carries the testimonial ("saved us 10 hours a week") and let it arrive after its line has settled — a highlight sweep, a weight shift, or a color pop. Emphasis competing with the reveal cancels both.

jsx

const sweep = interpolate(frame, [hlStart, hlStart + 10], [0, 100],
  { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
// a highlighter wiping in behind the phrase, left→right
<mark style={{ background:
  `linear-gradient(90deg, var(--accent) ${sweep}%, transparent ${sweep}%)`,
  color: "inherit", padding: "0 .08em" }}>{phrase}</mark>

Emphasize at most one span per quote. Two highlights is no highlight.

挑选承载证言核心价值的单个短语（例如“每周为我们节省10小时”），在所在行显示稳定后再呈现强调效果 — 可以是高亮扫过、字体加粗或颜色变化。如果强调动画与入场动画同时进行，两者都会失去效果。

jsx

const sweep = interpolate(frame, [hlStart, hlStart + 10], [0, 100],
  { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
// a highlighter wiping in behind the phrase, left→right
<mark style={{ background:
  `linear-gradient(90deg, var(--accent) ${sweep}%, transparent ${sweep}%)`,
  color: "inherit", padding: "0 .08em" }}>{phrase}</mark>

每条语录最多强调一个短语。两个高亮等于没有高亮。

Animated star rating (fractional)

动画星级评分（支持分数值）

Render the real score, including halves. Use one full row of star glyphs as a mask, then wipe a filled layer to

rating / max

width — this handles 4.5 as cleanly as 5.0, with no half-star sprite.

jsx

const StarRating = ({ rating, max = 5, fillStart = 30, fillDur = 14 }) => {
  const frame = useCurrentFrame();
  const target = (rating / max) * 100;
  const w = interpolate(frame, [fillStart, fillStart + fillDur], [0, target],
    { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
  return (
    <div className="stars" role="img" aria-label={`${rating} out of ${max} stars`}>
      <div className="track">★★★★★</div>
      <div className="fill" style={{ width: `${w}%` }}>★★★★★</div>
    </div>
  );
};

css

.stars { position: relative; display: inline-block; font-size: 40px; letter-spacing: 4px; }
.track { color: rgba(255,255,255,.22); }
.fill  { position: absolute; inset: 0; overflow: hidden; white-space: nowrap;
         color: var(--accent); }   /* clipped by width → fractional fill */

Fill left→right after the quote reads. Never animate stars before the words — the score must feel earned, not pre-loaded. Always set

aria-label

to the real value.

渲染真实分数，包括半分。使用一整行星星图标作为遮罩，然后将填充层的宽度设置为

rating / max

— 这种方式可以完美处理4.5和5.0这类分数，无需使用半星图标。

jsx

const StarRating = ({ rating, max = 5, fillStart = 30, fillDur = 14 }) => {
  const frame = useCurrentFrame();
  const target = (rating / max) * 100;
  const w = interpolate(frame, [fillStart, fillStart + fillDur], [0, target],
    { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
  return (
    <div className="stars" role="img" aria-label={`${rating} out of ${max} stars`}>
      <div className="track">★★★★★</div>
      <div className="fill" style={{ width: `${w}%` }}>★★★★★</div>
    </div>
  );
};

css

.stars { position: relative; display: inline-block; font-size: 40px; letter-spacing: 4px; }
.track { color: rgba(255,255,255,.22); }
.fill  { position: absolute; inset: 0; overflow: hidden; white-space: nowrap;
         color: var(--accent); }   /* clipped by width → fractional fill */

语录显示完成后从左到右填充星级。切勿在文字显示前动画星级 — 评分必须是用户读完语录后感受到的，而非预先加载的。务必为

aria-label

设置真实分数值。

The author block

作者信息块

Sign off last. The block slides up under the stars and holds still — stillness is what makes attribution read as fact.

jsx

<figcaption className="author">
  {avatar && <img src={avatar} alt="" className="avatar" />}
  <div>
    <span className="name">{name}</span>
    <span className="role">{role}{company && `, ${company}`}</span>
  </div>
</figcaption>

Use a real avatar or none — a generic placeholder face actively destroys trust. Name is the loudest line in the block; role/company is secondary weight.

最后呈现作者信息。信息块滑入星级评分下方并保持静止 — 静止状态会让归属信息更具真实感。

jsx

<figcaption className="author">
  {avatar && <img src={avatar} alt="" className="avatar" />}
  <div>
    <span className="name">{name}</span>
    <span className="role">{role}{company && `, ${company}`}</span>
  </div>
</figcaption>

使用真实头像或不使用头像 — 通用占位头像会直接破坏可信度。姓名是信息块中最醒目的内容；职位/公司是次要信息。

Template × reviews — one video per quote

模板×评测 — 每条语录对应一个视频

The payoff: make every field a prop, hardcode nothing, then render once per review.

jsx

export const Testimonial = ({ quote, highlight, rating, name, role, company, avatar }) => { /* … */ };

bash

for f in reviews/*.json; do
  npx remotion render Testimonial "out/$(basename "$f" .json).mp4" --props="$f"
done

Keep colors/fonts/quote-mark/layout in one theme object so 50 testimonials stay brand-locked and only the words and score change. See

references/batch-and-typography.md

for the review schema, CSV→props parsing, quote-typography craft (smart quotes, hanging punctuation, line-splitting, orphans), and the batch script.

核心优势：将所有字段设为参数，不硬编码任何内容，然后为每条评测渲染一次视频。

jsx

export const Testimonial = ({ quote, highlight, rating, name, role, company, avatar }) => { /* … */ };

bash

for f in reviews/*.json; do
  npx remotion render Testimonial "out/$(basename "$f" .json).mp4" --props="$f"
done

将颜色/字体/引号标识/布局统一放在一个主题对象中，确保50条证言视频都符合品牌规范，仅文字和评分不同。评测数据结构、CSV→参数解析、语录排版技巧（智能引号、悬挂标点、分行处理、避免孤行）以及批量脚本可参考

references/batch-and-typography.md

。

Output checklist

输出检查清单

Lines reveal in reading order; one consistent enter motion, ~6–10 frame stagger.
The quote is verbatim; exactly one emphasized span, landing after its line settles.
Stars fill to the real score (halves supported) after the quote, with a correct
```
aria-label
```
.
Author block (name + role + company, real avatar or none) signs off last and holds still.
Every animated value derives from
```
useCurrentFrame()
```
— no CSS/JS timers.
Every field is a prop; one template renders every review in the folder.

文字按阅读顺序逐行显示；统一的入场动画，间隔约6–10帧。
语录为原文引用；仅强调一个短语，且在所在行显示稳定后出现。
星级按真实分数填充（支持半分），在语录显示完成后出现，
```
aria-label
```
设置正确。
作者信息块（姓名+职位+公司，真实头像或无头像）最后呈现并保持静止。
所有动画值均来自
```
useCurrentFrame()
```
— 无CSS/JS定时器。
所有字段均为参数；单个模板可渲染文件夹中所有评测对应的视频。

Deliver & verify (rendered stills → MP4)

交付与验证（渲染静帧→MP4）

Packaged helper (
scripts/
): tile your stills with
scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png
, then assert the encode with
scripts/probe-mp4.sh out.mp4 [WxH] [fps]
. See
scripts/README.md
.

Output contract:

A Remotion
```
Testimonial
```
registered as
```
<Composition>
```
(+ zod
```
schema
```
+
```
defaultProps
```
), every value frame-driven (no CSS transitions / JS timers /
```
Date.now()
```
/
```
Math.random()
```
).
Deliverable = the rendered
```
out/*.mp4
```
per review per aspect (plus the project + review data, so the user re-renders on new quotes).

Verify loop — render stills → inspect → encode. Cheap PNGs first; render with the shipped review's props, not just

defaultProps

bash

undefined

打包工具（
scripts/
）：使用
scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png
拼接静帧，然后使用
scripts/probe-mp4.sh out.mp4 [WxH] [fps]
验证编码。详情见
scripts/README.md
。

输出规范：

注册为
```
<Composition>
```
的Remotion
```
Testimonial
```
组件（含zod
```
schema
```
+
```
defaultProps
```
），所有值均由帧驱动（无CSS过渡/JS定时器/
```
Date.now()
```
/
```
Math.random()
```
）。
交付物 = 每条评测对应每个宽高比的渲染视频
```
out/*.mp4
```
（附带项目文件+评测数据，方便用户新增语录时重新渲染）。

验证流程 — 渲染静帧→检查→编码。 先渲染低成本PNG；使用实际评测的参数渲染，而非仅用

defaultProps

。

bash

undefined

Frame-exact stills across the reveal order: quote → stars → author

按呈现顺序渲染精准静帧：语录→星级→作者

npx remotion still Testimonial out/f-quote.png --frame=30 --props=reviews/r1.json # lines in reading order, emphasis span npx remotion still Testimonial out/f-stars.png --frame=48 --props=reviews/r1.json # stars filled to the REAL score (e.g. 4.5) npx remotion still Testimonial out/f-author.png --frame=215 --props=reviews/r1.json # author block signed off, holding still

npx remotion still Testimonial out/f-quote.png --frame=30 --props=reviews/r1.json # 按阅读顺序显示文字，包含强调短语 npx remotion still Testimonial out/f-stars.png --frame=48 --props=reviews/r1.json # 星级填充至真实分数（例如4.5） npx remotion still Testimonial out/f-author.png --frame=215 --props=reviews/r1.json # 作者信息块已呈现并保持静止

inspect each: fidelity (quote VERBATIM, exactly one emphasized span, star fill matches rating, name/role/company exact)

检查每个静帧：准确性（语录为原文引用，仅一个强调短语，星级填充匹配评分，姓名/职位/公司准确）

AND artifacts (text overflow/orphans, off-canvas, author in the 9:16 bottom third, missing font, broken avatar)

以及是否存在问题（文字溢出/孤行、超出画布、作者信息位于9:16安全区域外、字体缺失、头像加载失败）


**Multi-aspect / batch — verify one review in EACH target aspect before batch-rendering the list.** A layout bug (overflowing quote, clipped author) repeats across every review × aspect; catch it once.

```bash
for ar in 9x16 1x1 16x9; do                                  # one representative review, every aspect
  npx remotion still Testimonial "out/r1-${ar}.png" --frame=215 \
    --props=reviews/r1.json --props-merge="{\"aspect\":\"${ar}\"}"
done


**多宽高比/批量处理 — 批量渲染前，验证一条评测在所有目标宽高比下的效果。** 布局问题（语录溢出、作者信息被截断）会在所有评测×宽高比中重复出现；提前发现一次即可避免批量错误。

```bash
for ar in 9x16 1x1 16x9; do                                  # 一条代表性评测，所有宽高比
  npx remotion still Testimonial "out/r1-${ar}.png" --frame=215 \
    --props=reviews/r1.json --props-merge="{\"aspect\":\"${ar}\"}"
done

stills clean in all aspects? → then batch-render the list:

所有宽高比下的静帧均正常？→ 然后批量渲染列表：

for f in reviews/*.json; do id=$(basename "$f" .json); for ar in 9x16 1x1 16x9; do npx remotion render Testimonial "out/${id}-${ar}.mp4" --props="$f" --props-merge="{"aspect":"${ar}"}" done; done npx remotion render Testimonial out/demo.gif --codec=gif --props=reviews/r1.json # README demo


**Before you finish:**
1. `npx remotion still` renders cleanly at quote / stars / author — no errors, no missing fonts/avatar.
2. Quote is verbatim with one emphasized span; stars fill to the real score; name/role/company exact and inside the safe zone (clear of the 9:16 bottom third).
3. Frame-driven only — no CSS/JS timers, `Date.now()`, or `Math.random()`.
4. Shipped review's props render correctly (not just `defaultProps`); `aria-label` carries the real rating.
5. One review verified in 9:16 + 1:1 + 16:9 before the batch; MP4s play; (optional) GIF for the README.


**完成前检查：**
1. `npx remotion still`渲染语录/星级/作者的静帧无错误，无字体/头像缺失。
2. 语录为原文引用且仅一个强调短语；星级填充至真实分数；姓名/职位/公司准确且位于安全区域（远离9:16底部区域）。
3. 仅由帧驱动 — 无CSS/JS定时器、`Date.now()`或`Math.random()`。
4. 实际评测的参数渲染正常（而非仅`defaultProps`）；`aria-label`包含真实评分。
5. 一条评测在9:16 + 1:1 + 16:9宽高比下验证通过后再批量渲染；MP4可正常播放；（可选）生成README演示用GIF。

Reference files

参考文件

```
references/quote-card.md
```
— a complete runnable Remotion
```
Testimonial
```
composition: staggered line reveal, key-phrase highlight sweep, fractional star fill, author block, theme object, and the timing map for a 9:16 card. Plus a dependency-free HTML/CSS variant.
```
references/batch-and-typography.md
```
— the review prop schema, CSV/JSON→props parsing and validation, quote typography craft (smart quotes, hanging quotation marks, line/clause splitting, orphan control, legibility in motion), star-rating accessibility, and the template×reviews batch render script for N videos.

```
references/quote-card.md
```
— 完整可运行的Remotion
```
Testimonial
```
组件：逐行渐显动画、关键短语高亮扫过、分数值星级填充、作者信息块、主题对象，以及9:16卡片的时序映射。附带无依赖的HTML/CSS版本。
```
references/batch-and-typography.md
```
— 评测参数结构、CSV/JSON→参数解析与验证、语录排版技巧（智能引号、悬挂引号、行/分句拆分、孤行控制、动画中的可读性）、星级评分可访问性，以及模板×评测批量生成N个视频的脚本。