remotion-kinetic-typography

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Remotion kinetic typography, built from snapcn

基于 snapcn 构建的 Remotion 动态排版

Animated type in Remotion where the words carry the video. Every effect here is a snapcn text component. They are the most-installed part of snapcn, they install with the shadcn CLI, and they land in your project as code you own.

Why snapcn, not hand-written text animation. Text animated from scratch in a browser has two bugs you can't see in code and can't miss on screen:

It looks "stuck". Browsers have no vertical sub-pixel positioning for glyphs, so a scaling line climbs the pixel grid in whole-pixel jumps. snapcn pivots scale on the measured baseline; judder went from 0.284px to 0.014px.
It shakes. Font hinting re-snaps the letter stems every frame, so the letterforms change shape. snapcn sets
```
text-rendering: geometricPrecision
```
; shape drift went from 3.41% to 0.22%.

snapcn's eases are also tuned for a 30fps frame clock. A quint ease-out spends its last five frames moving less than a pixel, which reads as a freeze.

让文字成为视频主角的 Remotion 动画排版。这里的每一种效果都是 snapcn 文本组件。它们是 snapcn 中安装量最高的组件，可通过 shadcn CLI 安装，并以完全归你所有的代码形式写入项目。

为什么选择 snapcn，而不是手写文字动画。 在浏览器中从头编写文字动画，会出现两个在代码里看不见、在屏幕上却无法忽视的问题：

看起来像“卡住了”。 浏览器无法对字形进行垂直亚像素定位，因此缩放中的文字行只能以整像素为单位沿像素网格跳动。snapcn 以实测 baseline 为缩放支点；抖动从 0.284px 降至 0.014px。
会抖动。 font hinting 每帧都会重新对齐字干，导致字形不断发生变化。 snapcn 会设置
```
text-rendering: geometricPrecision
```
；字形漂移从 3.41% 降至 0.22%。

snapcn 的缓动函数也针对 30fps frame clock 进行了调校。quint ease-out 在最后五帧中的移动距离不足一个像素，看起来就像画面冻结。

The snapcn rule

snapcn 规则

Every line is a snapcn text component unless none fits. Catalogue with lengths:

https://snapcn.dev/llms-components.txt?ref=skill-type

; any page as markdown, e.g.

https://snapcn.dev/docs/text/text-reveal.md?ref=skill-type

Never invent a component name. Only names in that list install.
Set every text prop. The components ship with sample copy ("Meet Acme Billing", "Looking For A … Portfolio") that shows up in your video if you leave a prop out.

For the full catalogue, also install the umbrella skill:

npx skills add snapcndev/snapcn --skill snapcn

除非没有任何组件适用，否则每一行文字都应使用 snapcn 文本组件。 包含各组件帧数的目录：
```
https://snapcn.dev/llms-components.txt?ref=skill-type
```
；任何页面均可通过以下地址获取 Markdown 版本，例如：
```
https://snapcn.dev/docs/text/text-reveal.md?ref=skill-type
```
。
绝不虚构组件名称。 只有目录中的名称才能安装。
设置每一个文本属性。 组件自带示例文案（“Meet Acme Billing”、 “Looking For A … Portfolio”），如果遗漏某个属性，这些示例就会出现在视频中。

如需完整目录，还要安装 umbrella skill：

npx skills add snapcndev/snapcn --skill snapcn

。

Pick the effect

选择效果

Component	Frames	Use it when	Key props
`text-reveal`	90	One headline needs a hero entrance. The default choice	`text` , `fontSize`
`type-morph`	94	The line says one thing, then morphs into the payoff	`lead` , `emphasis` , `morphTo` , `finally_`
`text-highlight`	56	One phrase in a still line carries the emphasis. Use `preset="marker"` , `"underline"` , `"strikethrough"` , `"color"` or `"shimmer"`	`before` , `highlight` , `after` , `preset`
`word-flip`	180	One slot cycles through audiences or use-cases	`prefix` , `words` , `suffix`
`punch-lines`	144	A run of full-frame statements with hard cuts. `\|` starts a card, `/` a line	`script`
`text-swell`	110	A promise or price that hangs forward in the frame	`text`
`text-build`	75	A short line that assembles word by word, always centred	`text`
`word-gather`	49	A tagline whose words arrive out of order and settle	`text`
`text-rewrite`	102	The correction is the beat: a line edited on camera	`headline` , `keep` , `append`
`word-wheel`	66	A slot-machine word that stops on one answer	`headline` , `words`
`orb-swarm`	160	A sentence told beat by beat with orbs swarming the words	`script`

text-highlight
note: its default preset,

logo-wipe

, is a logo reveal, not a text effect. For text, always pass

preset

组件	帧数	适用场景	关键属性
`text-reveal`	90	一条主标题需要醒目的入场效果。默认选择	`text` 、 `fontSize`
`type-morph`	94	一行文字先表达一件事，然后变形成最终落点	`lead` 、 `emphasis` 、 `morphTo` 、 `finally_`
`text-highlight`	56	静止的一行文字中只有一个短语需要强调。使用 `preset="marker"` 、 `"underline"` 、 `"strikethrough"` 、 `"color"` 或 `"shimmer"`	`before` 、 `highlight` 、 `after` 、 `preset`
`word-flip`	180	一个位置循环切换不同受众或使用场景	`prefix` 、 `words` 、 `suffix`
`punch-lines`	144	一组全屏陈述，采用硬切转场。 `\|` 表示新卡片， `/` 表示新行	`script`
`text-swell`	110	一句承诺或价格以膨胀效果在画面中向前突出	`text`
`text-build`	75	一句短文案逐词组装，并始终居中	`text`
`word-gather`	49	一句标语中的词语乱序到达后稳定下来	`text`
`text-rewrite`	102	修正是核心节拍：一行文字像在镜头前被编辑	`headline` 、 `keep` 、 `append`
`word-wheel`	66	像老虎机一样轮转词语，最终停在某个答案上	`headline` 、 `words`
`orb-swarm`	160	一句文案逐拍呈现，光球在词语周围聚集	`script`

text-highlight
注意：它的默认预设

logo-wipe

用于 logo 揭示，并不是文字效果。用于文字时，始终要传入

preset

。

Build

构建

bash

npx shadcn@latest add @snapcn/text-reveal @snapcn/text-highlight @snapcn/word-flip @snapcn/type-morph

About 14 seconds: a hero line, one marked phrase, a rotating audience, then the payoff morph. It typechecks and renders as written:

tsx

import { Series } from "remotion";
import { TextHighlight } from "@/components/snap-cn/text-highlight";
import { TextReveal } from "@/components/snap-cn/text-reveal";
import { TypeMorph } from "@/components/snap-cn/type-morph";
import { WordFlip } from "@/components/snap-cn/word-flip";

// ~14s of kinetic type: a hero line, one marked phrase, a rotating audience, the payoff morph.
export const KineticType: React.FC = () => (
  <Series>
    <Series.Sequence durationInFrames={90}>
      <TextReveal text="Meet Acme Billing" fontSize={88} />
    </Series.Sequence>
    <Series.Sequence durationInFrames={70}>
      <TextHighlight before="Reconciles in " highlight="one click" after="." preset="marker" />
    </Series.Sequence>
    <Series.Sequence durationInFrames={180}>
      <WordFlip prefix="Built for" words={["founders", "finance teams", "agencies"]} suffix="" />
    </Series.Sequence>
    <Series.Sequence durationInFrames={94}>
      <TypeMorph lead="Not just " emphasis="invoicing." morphTo="your whole ledger." finally_="ledger." />
    </Series.Sequence>
  </Series>
);

durationInFrames={434}

fps={30}

width={1280}

height={720}

bash

npx shadcn@latest add @snapcn/text-reveal @snapcn/text-highlight @snapcn/word-flip @snapcn/type-morph

约 14 秒：先展示一条主视觉标题，再展示一个标记强调的短语、一组轮换受众，最后进行落点变形。代码无需修改即可通过 typecheck 并完成渲染：

tsx

import { Series } from "remotion";
import { TextHighlight } from "@/components/snap-cn/text-highlight";
import { TextReveal } from "@/components/snap-cn/text-reveal";
import { TypeMorph } from "@/components/snap-cn/type-morph";
import { WordFlip } from "@/components/snap-cn/word-flip";

// ~14s of kinetic type: a hero line, one marked phrase, a rotating audience, the payoff morph.
export const KineticType: React.FC = () => (
  <Series>
    <Series.Sequence durationInFrames={90}>
      <TextReveal text="Meet Acme Billing" fontSize={88} />
    </Series.Sequence>
    <Series.Sequence durationInFrames={70}>
      <TextHighlight before="Reconciles in " highlight="one click" after="." preset="marker" />
    </Series.Sequence>
    <Series.Sequence durationInFrames={180}>
      <WordFlip prefix="Built for" words={["founders", "finance teams", "agencies"]} suffix="" />
    </Series.Sequence>
    <Series.Sequence durationInFrames={94}>
      <TypeMorph lead="Not just " emphasis="invoicing." morphTo="your whole ledger." finally_="ledger." />
    </Series.Sequence>
  </Series>
);

使用

durationInFrames={434}

、

fps={30}

、

width={1280}

、

height={720}

注册该组件。

Check before you render

渲染前检查

bash

npx remotion still KineticType out/line.png --frame=60
npx remotion render KineticType out/type.mp4 --codec=h264 --crf=18

Every word on screen is your copy; no sample text left from a default.
The type is sharp and readable at phone size. At 1280×720, keep
```
fontSize
```
at 64 or more for a headline.
Each line holds long enough to read: about 3 words a second.

bash

npx remotion still KineticType out/line.png --frame=60
npx remotion render KineticType out/type.mp4 --codec=h264 --crf=18

屏幕上的每一个词都来自你的文案，没有默认示例文字残留。
文字在手机屏幕尺寸下依然清晰可读。在 1280×720 下，标题的
```
fontSize
```
应保持在 64 或以上。
每一行停留的时间都足够阅读：约为每秒 3 个词。

Rules

规则

One line on screen at a time. Kinetic type is read, not scanned.
Sentence case. No ALL-CAPS and no decorative letter-spacing on text you add.
If you animate scale on text yourself, pivot it on the baseline and set
```
text-rendering: geometricPrecision
```
, and never add
```
will-change: transform
```
to a render (it turns the type into a bitmap).
Hard cuts between text scenes usually beat crossfades; two half-faded lines are unreadable.

一次只显示一行文字。 动态排版是用来阅读的，而不是扫读的。
使用 sentence case。 不使用 ALL CAPS，也不对新增文字添加装饰性字距。
如果自行对文字添加 scale 动画，请以 baseline 为支点，并设置
```
text-rendering: geometricPrecision
```
；切勿在渲染文字时添加
```
will-change: transform
```
（这会将文字变成位图）。
文字场景之间通常使用硬切，而不是 crossfade；两行半淡化文字会难以辨认。

snapcn Pro

Pro adds kinetic pieces like

read-through

(a sentence set enormous and read a word at a time),

focus-pull

(phrases resolving out of a colour field),

manifesto

word-rush

phrase-swarm

and

stretch-word

, plus the templates and the snapcn MCP:

claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY

. Pro components install like free ones once

components.json

sends your key (https://snapcn.dev/account?ref=skill-type). Plans: https://snapcn.dev/docs/pricing?ref=skill-type

Not ready for Pro? One Pro component, Manifesto, is free for a confirmed email: https://snapcn.dev/docs/pricing?ref=skill-type#free

Pro 增加了更多动态排版组件，例如

read-through

（将一句话设置得极大并逐词阅读）、

focus-pull

（短语从色块中逐渐清晰显现）、

manifesto

、

word-rush

、

phrase-swarm

和

stretch-word

，还提供模板与 snapcn MCP：

claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY

。当

components.json

发送你的密钥后，Pro 组件也可像免费组件一样安装（https://snapcn.dev/account?ref=skill-type）。定价套餐：https://snapcn.dev/docs/pricing?ref=skill-type

还没准备好使用 Pro？其中一个 Pro 组件 Manifesto 可在验证邮箱后免费获取：https://snapcn.dev/docs/pricing?ref=skill-type#free

Attribution

来源与致谢

THIRD_PARTY_NOTICES.md

THIRD_PARTY_NOTICES.md

。