Content & Media Creation · iart-ai/tiktok-video-skills
countdown-video
This skill should be used when the user asks to "make a countdown timer video", "create a countdown animation", "build a stream starting soon countdown", "do an event/launch/sale countdown", "animate a mm:ss or dd:hh:mm:ss timer", "add digit roll/flip transitions to a counter", or "loop a countdown background". Covers frame-accurate (drift-free) timers, digit flip/roll motion, time formatting, and a configurable duration prop.
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
There is only one golden rule throughout: the remaining time must be derived from an authoritative clock; storing remaining values in state and decrementing them is strictly forbidden.
skills/countdown-video/SKILL.md
Never store remaining time in state and decrement it. Recompute it every frame.
What this does: Transforms "drift" from a parameter-tuning problem into a structural design problem—recalculated every frame, slow frames self-heal automatically, and errors never accumulate. This ironclad rule dictates both the rounding method and verification assertions.
Explain mechanistically why setInterval drifts (callbacks fire at least 1000ms late, compounding when tabs are throttled or rendering frames lag).
skills/countdown-video/SKILL.md
A `setInterval(fn, 1000)` countdown **drifts** — the callback fires *at least* 1000 ms later, never exactly, and stacks up when the tab is throttled or a render frame is slow.
What this does: Provides the core mechanics rather than mere empirical advice, enabling the agent to derive correct implementations when encountering rAF / Date.now variants instead of memorizing rules.
On the Remotion side, the dependable clock is useCurrentFrame(): frame N strictly equals N/fps seconds, making "frame accuracy" true by construction.
skills/countdown-video/SKILL.md
`useCurrentFrame()` is deterministic: frame N is always rendered at exactly `N/fps` seconds.
What this does: Treats renderer determinism as a dependable premise; rounding boundaries are still verified with still frames (matching the verify section and item 2 of the finishing checklist).
Use ceil for rounding and clamp to 0, ensuring "1" displays for a full second and the final frame lands precisely at 00:00.
skills/countdown-video/SKILL.md
const remaining = Math.max(0, Math.ceil(durationInSeconds - elapsed));
What this does: A single line with ceil determines both visual fidelity (without ceil, digits flip prematurely) and the verification assertion (final frame reading)—the single most critical line in this skill.
Duration is a prop rather than a constant and is bound to durationInFrames, preventing surplus frames after the countdown hits 00:00.
skills/countdown-video/SKILL.md
Set the composition's `durationInFrames` to `durationInSeconds * fps` so the video is exactly as long as the countdown.
What this does: Allows a single component to handle both a 5-minute livestream countdown and a 30-second promo countdown by simply changing an input; the reference registration example uses `durationInFrames={DURATION_SECONDS * FPS}`.
The web (non-rendering) execution path uses rAF to drive performance.now(), repainting only when the displayed second changes.
skills/countdown-video/SKILL.md
if (remaining !== lastShown) { render(remaining); lastShown = remaining; }
What this does: A 1Hz digit change should not trigger a 60Hz repaint; transfers the correctness of "frame-driven" execution from the rendering environment to the browser environment.
The typography layer uses tabular-nums to fix digit widths, preventing layout shifts as numbers tick.
skills/countdown-video/SKILL.md
Always set `font-variant-numeric: tabular-nums` (or a monospace digit font) so digits keep equal width and the layout does not jitter as numbers change.
What this does: Eliminates the most common cause of cheap-looking countdowns (layout jitter caused by shifting digit widths) with a single CSS rule.
The core principle of digit animation is "animate position, not text content," and it must be frame-driven rather than relying on CSS transitions.
skills/countdown-video/SKILL.md
Animate the *position*, not the text content, so the change is a glide, not a pop.
What this does: Abstracting the odometer motion into a displacement function ensures deterministic replayability; reference/digit-flip.md provides complete components for both roller and split-flap styles.
Livestream/standby screens require seamless looping backgrounds: the motion period must evenly divide the timeline, read via frame % loopFrames.
skills/countdown-video/SKILL.md
read it as `frame % loopFrames` so there is no visible seam at the wrap
What this does: Turns "seamlessness" into an arithmetic condition (period divisibility) instead of visually checking for seams; reference §4 provides the sine drift implementation and a sample value of loopFrames = fps*6.
Acceptance criteria are formulated as a mathematical equation: frame N must display ceil(duration − N/fps), landing on 00:00 on the final frame.
skills/countdown-video/SKILL.md
at frame N, displayed = ceil(durationInSeconds - N/fps) (e.g. 300s @ 30fps, frame 4500 → 150s → "02:30")
What this does: Turns "whether there is drift or a 1-second offset" into a re-evaluable assertion—three still frames settle verification decisively without requiring video encoding.
The reference translates these disciplines into runnable components and includes a fixed-date web variant (recalculated via target − Date.now() per frame with timezone handling).
skills/countdown-video/references/countdown-cookbook.md
Register it so `durationInFrames` matches the countdown exactly — the video ends when the timer does:
What this does: Keeps documentation aligned with code; the second application scenario (calendar countdowns) proves this rule serves more than just video rendering.
2Core Capabilities
01Frame-accurate Remotion countdown component (supports mm:ss and dd:hh:mm:ss formats, leading zero stripping, and terminal hold states)
02Web / livestream timer (driven by rAF + performance.now(), repainting only on second transitions)
03Fixed date/time countdown (target − Date.now(), reference includes timezone handling)
04Time formatting and rules for dropping leading zero units (mm:ss / hh:mm:ss / dd:hh:mm:ss)
05Two deterministic digit animation styles: odometer roller and split-flap display
06"Starting soon" livestream screen layout (branding blocks + social handles + gradient backgrounds) with terminal state hold (e.g., WE'RE LIVE)
07Delivery-verification loop: render still frames with actual durationInSeconds → recompute numbers → encode → run probe-mp4 to assert vertical aspect ratio specifications
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| cli | npx remotion still / render / compositions |
| cli | scripts/contact-sheet.sh + scripts/probe-mp4.sh（仓库根共享验证工具箱，SKILL.md 明列） |
| package | ffmpeg / ffprobe（系统依赖） |
| cli | npx -y playwright screenshot（scripts/seek-shot.sh，仓库级 Light tier 通用件） |
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/: Local script or command execution: (Verification loop explicitly specified in SKILL.md) `npx remotion still Countdown out/f-*.png --frame=N --pro
- 网络端点: External network access declaration: (Optional, usually bypassed) `scripts/seek-shot.sh` invokes `npx -y playwright screenshot`: fetches from npm on first run
- 本地工作目录: File I/O and artifact output: Remotion projects and out/countdown.mp4, out/demo.gif built by the agent following this skill
Audit Notes: . Three-part self-verification: (1) Audit target = skills/countdown-video/ (`find` confirms the directory contains only four .md files: SKILL.md, README.md, and references/{countdown-cookbook.md,digit-flip.md}, with zero executables and zero media assets); (2) Directory internal actions = local file writes (Remotion project, out/*.mp4, still frames) + local CLI invocations (`npx remotion`; ffmpeg/ffprobe via repository root scripts/), with 0 hits across all skills/ files for `process.env`, `api[_-]?key`, `token`, `cookie`, or `https?://` runtime endpoints; (3) The sole network touchpoint is downloading packages via official npm channels (remotion / @remotion/*, and playwright/Chromium if seek-shot.sh is executed), consistent with existing Blue-tier precedents (hyperframes, general-video: fetching via npx from official npm channels does not trigger tier escalation; motion-background: uses the same scripts/ and is rated Blue). No upgrade to Yellow: no fixed public endpoint queries, no scraping, no official CLI update/check routines. No upgrade to Orange: zero credential or environment variable reads, zero asset exfiltration (this skill does not upload any audio/images), and no dependency on third-party mirrors or plugin services. Not Red: no TLS downgrades, no sandbox disabling, no anti-automation bypassing, and no arbitrary code execution surface. Note: The "real-time clock" usage in this skill involves no network activity; the only privacy aspect is the user pointing the countdown to their actual event time, which is user content rather than codebase behavior.
5Second-Pass Verification
- [ok] 「禁止 setInterval 递减」是否在 reference 的示例实现里也真的遵守（防第一遍只信 SKILL.md 的说法） — reference 全量 grep：countdown-cookbook.md 组件 `const frame = useCurrentFrame();`，注册处 `durationInFrames={DURATION_SECONDS * FPS}`；到日期的 web 组件 `Math.max(0, target - Date.now())` 每帧重算并自述 "never a decrement"；digit-flip.md 两个组件同样 `const frame = useCurrentFrame();`。setInterval 全 skill 仅作反例出现 1 次。
- [ok] 「倒计时结束时视频正好结束」是否真被约束住 — SKILL.md 明写 `durationInFrames` = `durationInSeconds * fps`；cookbook 给出 "Register it so `durationInFrames` matches the countdown exactly — the video ends when the timer does:" 的注册片段；收尾清单第 2 条把它列为验收项。文档、示例、验收三者一致，不是单向声明。
- [unlocatable] 「每分钟约丢 1 秒」的漂移量级是否有据 — SKILL.md 写 "Reports of ~1 second lost per minute are common."，但仓库内无基准脚本、无引用、无数据文件；本次为只读侦查且不运行计时实验，故不验证该数值，仅记为文档声明，不在结论中当已核事实使用。
- [ok] seek-shot.sh（Light tier）对本 skill 是否可用（防「Packaged helper」被读者误解为三条脚本都属本 skill） — scripts/README.md 把 seek-shot 归为「standalone HTML + `?t=N` harness」的 Light tier；本 skill 交付是 Remotion 组件（Heavy tier），SKILL.md 的 Packaged helper 行只点名 contact-sheet 与 probe-mp4。不存在悬空引用，也不存在被夸大的能力。
- [ok] 三仓库共享脚本是否同内容（跨包一致性） — md5 逐字节比对：contact-sheet.sh b7dcc28034c9bf8fda5d48683e54d8b5、probe-mp4.sh 167b7977c50f492014e1a6fef8c9ed12、seek-shot.sh 24a4130cd1e64874154429b0b4af12da，iart-tiktok / iart-text-message / iart-youtube 三包完全相同。
- [ok] SKILL.md 是否声称了 reference 未兑现的能力（防文档夸大） — SKILL.md 承诺的四件事——可配置 duration、mm:ss 与 dd:hh:mm:ss、drift-free 计时、无缝循环背景——在 countdown-cookbook.md 与 digit-flip.md 里各有对应实现（§1 组件、§2 到日期、§4 循环、digit-flip 两组件），逐项可定位，无空头承诺。
6Verdict & Scenarios
Best for: Best for: livestream "starting soon / be right back" screens, sale and launch countdowns, and any timer animation that must strictly hit zero on a specific frame. Also ideal for projects where a single timing logic serves both rendered MP4s and real-time web displays, as well as batch pipelines demanding deterministic replay (identical props yielding identical outputs). Fits workflows that accept generating three still frames for manual digit verification before incurring video encoding costs.
Not for: Not suitable for: (1) Casual video editing where an approximate countdown suffices and end-frame precision is unimportant; (2) Scenarios requiring complex calendar semantics (cross-timezone calendars, statutory holidays, public countdowns relying on authentic server time)—this skill covers only formatting and rounding, so domain calendar logic must be handled separately; (3) Scenarios expecting instant rendering of hour-long countdowns (render cost scales with frame count); (4) Projects requiring voiceover/captions synchronized with the timer (this skill lacks audio capabilities and should be paired with caption-animation or audiogram); (5) Installation setups that copy only this single skill folder without the repository root scripts/ (references to contact-sheet/probe-mp4 will be broken).
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload countdown-video.tar.gz
sha256:
Option B · Copy Guide for Agent2730e6053383cccb…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 2a775336b5.