Skip to content
wustitesPublic

About

Video resources and tools

Topics

Resources

Code of conduct

Contributing

Security policy

Stars

0 stars

Watchers

0 watching

Forks

Repository files navigation

Video Projects

本仓库收录数据可视化、榜单与科普类视频项目。每个项目自由选择 Remotion 或 HyperFrames(见 ADR 0002),在 projects.json 的 framework 字段中登记。

项目按主题分类、项目名称与根目录路径见 视频项目索引;projects.json 是项目路径、名称、语言和发布 variant 的唯一机器可读清单。

项目一览

项目 内容 语言 时长 框架 默认输出
Metro de Lima 秘鲁利马地铁系统介绍 西 随旁白生成 Remotion out/video.mp4
Saint Petersburg Metro 俄罗斯圣彼得堡地铁系统介绍(俄英双语字幕) 俄 + 英字幕 随旁白生成 Remotion out/video.mp4
Sapporo Subway 日本札幌市营地铁介绍 日 随旁白生成 Remotion out/video.mp4
Cloudflare History Cloudflare 发展历程 中 随旁白生成 HyperFrames out/video.mp4
Japan Economy 日本 1985—2026 经济指标与日经指数 日 随旁白生成 Remotion out/video.mp4
AI Model Rankings AI 模型能力、速度与厂商分布 英、中、日 60 秒 Remotion out/video.mp4
Apple 水果苹果创意介绍 中 随旁白生成 HyperFrames out/video.mp4
OpenRouter Rankings OpenRouter 每周模型使用排名 英、中 45 秒 Remotion out/video.mp4
Population CN 中国各省出生人口变化 中 40 秒 Remotion out/video.mp4
Births JP 日本各都道府县出生人数(2000–2025) 中、日 随旁白生成 Remotion out/births-jp-zh.mp4
QS Universities QS 世界大学排名 中 52 秒 Remotion out/video.mp4
Solar System 太阳系科普动画 英、中、日、韩 随旁白生成 Remotion out/video.mp4
Top 500 2025 年《财富》世界 500 强 中 29 秒 Remotion out/video.mp4
Kakeya Conjecture 挂谷猜想科普动画 中 42 秒 Remotion out/video.mp4
Brexit Referendum 英国脱欧公投回顾 英 随旁白生成 Remotion out/video.mp4
Red Army JP 日本赤军历史 日 随旁白生成 Remotion out/red-army-ja.mp4
Southern Kurils JP 南千岛群岛介绍 日 随旁白生成 Remotion out/southern-kurils-ja.mp4
Imperial House Law JP 皇室典范改正议题 日 随旁白生成 Remotion out/imperial-house-law-ja.mp4
Shandong Universities 山东本科院校地图速览 中 随旁白生成 Remotion out/shandong-atlas.mp4
Claude MHS Anthropic Model Hardware Standard 介绍 中 随旁白生成 HyperFrames out/claude-mhs-zh.mp4
Kimi K3.1 Pro 月之暗面 Kimi K3.1 Pro 模型发布介绍 中 随旁白生成 HyperFrames out/kimi-k3-1-pro-zh.mp4
GPT-6.1 Terra OpenAI GPT-6.1 Terra 模型发布介绍 中 随旁白生成 HyperFrames out/gpt-6-1-terra-zh.mp4
SZU History 深圳大学发展史(1983—2026) 中 约 62 秒 HyperFrames out/szu-history-zh.mp4
Shenzhen Reclamation 深圳填海造陆发展史卫星地图解说 中 约 64 秒 HyperFrames out/shenzhen-reclamation-zh.mp4
Shenzhen Metro 深圳地铁介绍(2004—2026) 中 约 68 秒 HyperFrames out/shenzhen-metro-zh.mp4
LA28 Olympics 洛杉矶 2028 奥运会宣传片(配乐,无旁白) 中 约 32 秒 HyperFrames out/la28-olympics-zh.mp4
Shenzhen APEC 深圳 APEC 2026 宣传片 英 + 中英字幕 随旁白生成 HyperFrames out/shenzhen-apec-en.mp4

榜单和数据项目采用 1080 × 1920 竖屏画布;Kakeya Conjecture 使用 1920 × 1080 横屏画布。具体数据来源、内容结构和资源要求见各项目目录内的 README。

环境要求

  • Node.js 22 或更高版本
  • FFmpeg
  • Chrome 或 Chromium
  • npm

字体规范

所有项目必须使用与内容语言对应的 Google Fonts Noto 网络字体,不能默认依赖渲染机器上的本地字体。默认字体映射如下:

内容语言 Google Noto 字体 CSS font-family
英语、西班牙语及其他拉丁文字 Noto Sans "Noto Sans", sans-serif
简体中文 Noto Sans SC "Noto Sans SC", sans-serif
繁体中文 Noto Sans TC "Noto Sans TC", sans-serif
日语 Noto Sans JP "Noto Sans JP", sans-serif
韩语 Noto Sans KR "Noto Sans KR", sans-serif

Remotion 项目应使用 @remotion/google-fonts 加载对应字体,并在开始渲染前等待字体完成加载。示例:

import {loadFont} from '@remotion/google-fonts/NotoSansJP';

export const notoSansJP = loadFont('normal', {
  weights: ['400', '500', '600', '700', '800', '900'],
  subsets: ['japanese', 'latin'],
});

开发预览、Remotion 渲染和 CI 都需要能够访问 fonts.googleapis.com 与 fonts.gstatic.com。应在截图或渲染前确认 document.fonts.ready;字体加载失败时才允许回退到 sans-serif。若要求完全离线或严格可复现的字形,应使用许可允许的字体文件和本地 @font-face,但仍保持对应语言的 Noto 字体族。

快速开始

依赖由根目录 npm workspace 统一管理。首次使用先在仓库根目录执行:

npm ci

cd data_visualization/ai_model_rankings

# TypeScript 类型检查
npm run check

# 启动本地预览
npm run dev

# 渲染默认英语版本到 out/video.mp4
npm run render

预览服务启动后,终端会输出 Remotion Studio 地址。修改 src/ 中的组件、样式或数据后,预览会自动刷新。

各项目的 npm run check 当前均为 tsc --noEmit,不包含布局、内容或音画同步检查。多语言项目使用 npm run render:<语言代码> 单独渲染;npm run render 只生成默认版本。具体输出以 package.json 为准。

仓库根目录的 npm run check 会校验项目清单、共享包,并以最多三个并发任务检查全部 18 个项目。对于尚未生成旁白时长 JSON 的项目,检查器只在类型检查期间创建最小 JSON fixture,并在检查后立即删除;正式渲染仍必须先运行该项目的 voiceover。

跨项目稳定能力放在 packages/ 中。目前 @video/core 提供顺序时间轴、场景进度、淡入淡出和入场动画计算;具体场景布局和视觉组件继续留在各视频项目内。

推荐工作流

  1. 阅读项目 README,确认主题、数据口径、语言和输出文件,并执行 npm ci。
  2. 项目定义了 voiceover 时,先安装 Python 的 edge-tts 和 FFmpeg,再运行 npm run voiceover 生成所需音频与时间轴文件。
  3. 只有需要主动刷新数据时才执行项目的 npm run data:update;发布流程始终使用 Git 中已经审阅并冻结的 snapshot。
  4. 修改 src/ 中的组件和数据,运行 npm run check。
  5. 运行 npm run dev,检查关键帧、转场、文字溢出、字幕和音画同步。
  6. 运行 npm run render:draft 试渲染,确认后运行 npm run render 或对应语言脚本。

render:draft 的参数因项目而异,部分项目仅改变输出文件和日志级别;请查看 package.json,不要默认认为它会降低分辨率或缩短渲染时间。

GitHub Actions 发布

所有项目统一使用 .github/workflows/render-release.yml 发布。工作流由 <project_key>-<semver> tag 触发,自动解析项目、安装依赖、生成旁白、运行检查、渲染 MP4,并把 MP4 和封面(<project_key>-<version>[-<variant>]-cover.png)上传到 artifact 和 GitHub Release。项目定义 render:still(写出 out/cover.png)时使用专门设计的封面,否则从视频中自动截取一帧,见 发布流程。工作流不会联网刷新业务数据,发布内容来自 tag 中已提交的 snapshot。

项目 Tag 格式 工作流
所有项目 <project_key>-<semver>[-<variant>],例如 japan_economy-1.0.0、solar-1.0.0-zh render-release.yml

例如发布日本经济和札幌地铁:

git tag japan_economy-1.0.1
git push origin japan_economy-1.0.1

git tag sapporo_subway-1.0.4
git push origin sapporo_subway-1.0.4

所有项目都使用通用的 project-version-variant 格式,variant 与项目脚本直接一一对应。Solar 与 Kakeya Conjecture 发布示例:

git tag solar-1.0.0-zh
git push origin solar-1.0.0-zh

git tag kakeya_conjecture-1.0.0
git push origin kakeya_conjecture-1.0.0

Solar 的 variant 为 en、zh、ja、ko,可带 variant 单独发版,Action 会直接执行对应的 npm run render:<variant>。Solar 不带 variant 时渲染默认英语版。Kakeya Conjecture 无 variant,直接执行 npm run render。具体声音、复现命令和 CI 限制见 TTS 旁白方案,同步实现见 音画同步方案,发版细节见 发布流程。

仓库约定

  • 一个视频项目对应一个顶层目录。
  • Remotion 项目入口为 src/index.ts,composition 注册在 src/Root.tsx;HyperFrames 项目入口为 index.html。
  • Remotion 多语言版本通过 composition 和语言参数注册,共享资源放在 public/。
  • 跨项目复用的代码放在 packages/:@video/core(时间轴、Remotion 配置)与 packages/voiceover(Edge TTS 旁白脚本)。
  • 渲染产物统一写入 out/,不要提交临时预览文件。
  • 数据、单位、统计年份和来源必须在项目 README 中说明。
  • 新增项目时应提供 package.json、README、框架入口和可执行的检查、预览、渲染脚本,并登记到根目录 projects.json;依赖锁统一维护在根目录。

常见问题

渲染失败或浏览器无法启动

先确认已执行 npm ci,所需旁白和时间轴文件已生成,再检查 Node.js、FFmpeg、Chrome 和可用内存。字体加载问题按上方字体规范排查。

文字被裁切或多语言排版不一致

在 Remotion Studio 中分别选择各语言的 composition,检查标题换行、字号、行高与场景边界。类型检查不会发现文字溢出,需要在预览和试渲染中确认。

渲染速度过慢

先查看 render:draft 的实际参数,并减少高成本滤镜、模糊和粒子效果。Solar 的 WebGL 配置与渲染要求见其项目 README。

文档

新增项目

新增 Remotion 项目时,提供 src/index.ts、src/Root.tsx、配置文件及检查、预览、渲染脚本;新增 HyperFrames 项目时,提供 index.html、锁定版本的 hyperframes devDependency 及同名脚本,在 projects.json 中写 "framework": "hyperframes"。补充项目 README,并在上方“项目一览”中登记。提交前完成类型检查、人工布局检查和一次完整渲染。

榜单数据更新与人口视频边界的回归检查(先安装 population_cn 依赖):

node --test tests/review-regressions.test.mjs

About

Video resources and tools

Topics

Resources

Code of conduct

Contributing

Security policy

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages