Content & Media Creation · iart-ai/tiktok-video-skills
lower-thirds
This skill should be used when the user asks to "make an animated lower third", "add lower thirds", "create a name tag/name lower third", "build broadcast titles", "animate a title/name/role caption", "do a speaker name overlay", or "template lower thirds across a list of names". Covers enter/exit animation (slide/wipe/mask reveal), in/out timing & dwell, safe-area & broadcast conventions, name-vs-role type hierarchy, brand styling, and rendering one design across many names.
L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
Dissect the lower third into three elements: "two lines of text + graphical base" (name / role / bar), strictly constrained to two lines.
skills/lower-thirds/SKILL.md
Keep it to two lines. A name line + role line is the whole job — extra lines erode the hierarchy and crowd the safe area.
What is being done here: Establishing the upper boundary of elements before dealing with animation—at-a-glance readability is only achievable when hierarchy is capped at two lines; this also sets the boundary line against "generic title cards".
First rule against cheap looks: Titles must never hard-cut in or out.
skills/lower-thirds/SKILL.md
1. **Never hard-cut a title on or off.** A bare appear/disappear reads as a mistake. Even a 12-frame fade or slide makes it feel produced.
What is being done here: Setting "has animation" as the baseline threshold and providing the lowest-cost approach (12-frame fade/slide) to prevent agents from skipping in/out animations.
Second rule: Staggered entry—bar → name → role, offsetting each element by 3–6 frames.
skills/lower-thirds/SKILL.md
**Stagger, don't slam.** Animate the bar first, then the name, then the role, each offset by 3–6 frames.
What is being done here: Turning "premium feel" into an actionable parameter (frame offset); the reference Remotion component orchestrates springs in precisely this order.
Define the three-phase timing using a frame budget (rather than gut feeling): In 12–18f, Dwell 90–150f, Out 8–12f, with a faster exit.
skills/lower-thirds/SKILL.md
| Exit | 8–12f (0.27–0.4s) | Faster than enter |
What is being done here: Incorporating dwell duration into design specs (3–5 seconds = enough time to read twice silently) to avoid titles that "flash past" or "overstay"; making the exit faster than the entrance is intentional asymmetric easing.
Specify safe areas per aspect ratio; for vertical 9:16, elevate the bar as a whole rather than sticking it to the bottom.
skills/lower-thirds/SKILL.md
| 9:16 (1080×1920) | Same left margin; **lift the band up** | Bottom ~18% (captions/UI), top ~12% |
What is being done here: Cross-platform UI overlays obscure the bottom area (captions/action buttons), so the same design must be lifted higher on vertical video; this is the most common failure point in "single design, multi-aspect-ratio" adaptations.
Anchor hierarchy with font size contrast: name must be at least 1.6× the size of role; when in doubt, enlarge name rather than shrinking role.
skills/lower-thirds/SKILL.md
**Size contrast** ≥ 1.6× (name vs role).
What is being done here: Quantifying "hierarchy" into a ratio and defining the only safe scaling direction; combined with a monochromatic brand accent and left-anchoring, this forms the minimal set for brand consistency.
Templatability is the fundamental rationale of this codebase: name/role/theme must be props, rendering the roster row-by-row via --props into separate clips.
skills/lower-thirds/SKILL.md
In a renderer, make the roster an input prop and render once per row (`--props`) to emit one branded clip per person
What is being done here: Batching "one clip per person"—sharing identical animation and branding while swapping only text; the reference also provides batch scripts powered by jq on roster.json and transparent export encoding recommendations.
Verification is tailored to "three phases + batch": inspect one row before batch rendering, and the exit frame must show partial reveal (confirming animation is truly executing).
skills/lower-thirds/SKILL.md
**Batch roster**: verify ONE row via stills *before* rendering all names — catch a layout/overflow bug once, not N times.
What is being done here: Codifying "verify one row before batching" as an operational discipline to avoid rendering the same name overflow issue N times; the verification criteria rely on human visual review of still frames.
2Core Capabilities
01Three enter/exit animation styles: slide+fade (default), wipe bar (broadcast style), and mask reveal (clip-path character-by-character reveal, zero-plugin)
02Frame budgets and asymmetric easing across In/Dwell/Out phases (ease-out entrance, faster exit)
03Cross-aspect-ratio safe area conventions (16:9 / 9:16 / 1:1) with title-safe margins and left-anchored growth
04Brand locking: font / accent / bar / radius / margin consolidated into a single theme object for single-point global consistency
05roster → multi-instance (Series sequence) and row-by-row --props batch rendering; transparent overlay export (ProRes 4444 / PNG sequence)
06Zero-dependency CSS/HTML version (including wipe-bar variant) for runtimes without Remotion
07Delivery-verification loop: enter / dwell / exit three still frames + contact-sheet composite + probe-mp4 assertion for vertical video specs
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| cli | npx remotion still / render / compositions |
| cli | scripts/contact-sheet.sh + scripts/probe-mp4.sh（仓库根共享验证工具箱，SKILL.md 明列） |
| cli | jq + ffmpeg/prores 编码（reference 的 roster 批量脚本与透明输出） |
| package | ffmpeg / ffprobe（系统依赖） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
- scripts/: Executes local scripts or commands: (Verification loop explicitly listed in SKILL.md) `npx remotion still LowerThird out/f-{enter,dwell,exit}.p`
- 网络端点: Declares external network access: `npx remotion …`: initial run fetches packages and CLI via official npm channels (registry.npmjs.org, domain governed by npm, not hardcoded in source)
- 本地工作目录: File I/O and artifact output: Remotion projects and out/lower-third.mp4, out/demo.gif generated by the agent following this skill
Audit Notes: Three-point self-attestation: 1) Classification target = skills/lower-thirds/ (verified via `find` to contain only three .md files: SKILL.md, README.md, references/lower-third-component.md; zero scripts, zero assets); 2) Directory internal behavior = local write operations (Remotion project, out/*.mp4, still frames, sheet.png) + local CLI (`npx remotion`; ffmpeg/ffprobe delegated to repo root scripts/; reference batch scripts additionally use jq/tr); zero hits across skills/ for `process.env`, `api[_-]?key`, `token`, `cookie`, or `https?://`; 3) Sole network attack surface is pulling packages via official npm channels (remotion / @remotion/*), completely consistent with site blue-tier precedents (hyperframes, general-video, motion-background). No upgrade to Yellow: no fixed public endpoint queries, no scraping, no official CLI update/check routines. No upgrade to Orange: zero credential/environment variable harvesting, zero asset exfiltration (no audio/image outbound uploads; entirely local files). Not Red tier: no TLS downgrade, no sandbox escaping, no anti-automation evasion, no arbitrary code execution vectors. Two notes for record (no tier change) detailed in injection_surface and verdict.risks: reference batch script does not sanitize derived filenames; brand fonts/assets are user-provided, and font licensing compliance rests with the user.
5Second-Pass Verification
- [ok] SKILL.md 的三条「防廉价规则」是否真在 reference 组件里被实现（防第一遍只读散文） — reference §1 明写 "Enter staggers the bar, name, then role; exit is computed from the end of the clip so the title leaves faster than it arrived."，组件导入 `Sequence, interpolate, spring, useCurrentFrame, useVideoConfig`，Theme 类型与 BRAND 对象齐备（font/bar/name/role/radius/marginPct）。规则 → 代码可逐条对应，非空头承诺。
- [discrepancy] reference 批量脚本的文件名派生是否会越出输出目录（第一遍遗漏的面） — 原文：`slug=$(echo "$row" | jq -r '.name' | tr '[:upper:] ' '[:lower:]-')` 紧接 `npx remotion render LowerThird "out/${slug}.mp4" --props="$row"`。tr 只做大小写与空格到连字符的映射，不剥离 `/`、`..`、前导 `-` 等字符；若 roster 的 name 含路径分隔符，输出路径可越出 out/。这是数据→文件名的注入面，仅影响本地写入位置，不构成权限提升；SKILL.md 正文未把它写成安全事项。属对 pin commit 有效的真实出入（脚本可改进，非虚假声明）。
- [ok] 「9:16 抬高档位」是否在代码里有对应实现（不只是表格建议） — reference 的 Quick reference 表给出「9:16 placement | `baseline 0.80→0.70` / the media query」，说明竖屏不是靠新组件，而是同一组件换基线/媒体查询；与 SKILL.md「lift the band up」一致。
- [unlocatable] 「3–5s 停留」「≥1.6× 字号对比」这类经验值是否有出处 — SKILL.md 写 "Roughly 3–5s on screen (read it aloud twice)." 与 "**Size contrast** ≥ 1.6×"，仓库内无测量脚本、无引用来源、无 A/B 数据；属经验判据，不作为已核事实，仅记为文档建议。
- [ok] 跨包共享脚本与「Packaged helper」引用是否真实存在（防悬空引用） — SKILL.md 只点名 scripts/contact-sheet.sh 与 scripts/probe-mp4.sh；两者在仓库根真实存在且可执行（-rwxr-xr-x），三仓库逐字节相同（contact-sheet.sh md5 b7dcc28034c9bf8fda5d48683e54d8b5、probe-mp4.sh 167b7977c50f492014e1a6fef8c9ed12）。seek-shot.sh 未被本 skill 点名，不构成悬空引用。
- [ok] 透明叠加输出建议是否是真实可用的编码路径 — reference 给的是 Remotion CLI 自身的参数（`--codec=prores --prores-profile=4444` 或 `--image-format=png`），属该工具既有能力，非虚构 flag；能否落地取决于用户环境的 prores 支持，但命令形式正确。
6Verdict & Scenarios
Best for: Suitable for: Guest lower thirds, panel rosters, broadcast-style title bars for interviews/podcasts/webinars, and batch production of "one design, multiple names" (e.g., generating 12 clips for a 12-person panel in one go); also ideal for projects requiring transparent overlay deliverables for downstream compositing. Fits users willing to inspect three still frames to verify hierarchy and safe areas before triggering batch renders.
Not for: Not suitable for: 1) Multi-line info cards (title + company + social handles + QR code)—this skill strictly enforces a two-line limit; 2) Real-time switching or interactive lower third setups (outputs pre-rendered video clips); 3) Fully automated QA pipelines that do not permit human review of still frames; 4) High-end broadcast motion design requiring complex typography effects (3D flips, per-character path animations)—motion language is intentionally restrained (slide/wipe/mask); 5) Installations copying only an isolated skill directory without the repository root scripts/.
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload lower-thirds.tar.gz
sha256:
Option B · Copy Guide for Agent5b146268b6b14b5c…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 2a775336b5.