用 Remotion 制作仓库 Star 里程碑庆祝视频Stargazer 模板完整上手与源码走读【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion仓库达到 Star 里程碑值得用一支视频记录每一位贡献者的头像、昵称与点赞时间。本模板位于 packages/template-stargazer基于 Remotion 提供了一整套把 GitHub Stargazer 数据渲染成视频的现成方案既可本地渲染也可通过 GitHub Actions 在云端一键生成。读完本文你将掌握该模板的两种渲染路径本地 / CI、GitHub 数据拉取的 GraphQL 与 REST 双通道实现、参数化组成schema calculateMetadata的写法以及如何复用其动画核心为自己的数据视频项目做改造。模板能做什么GitHub 风格的数据视频Stargazer 视频的最终画面是一段 GitHub 风格界面顶部是仓库头部org / 仓库名 实时跳动的 Star 数量下方是一行行StarBox卡片卡片内包含用户圆形头像、昵称、starred {repoName} on {日期} 文案以及右侧的 Star 编号#1、#2……整屏列表按点赞顺序持续向上滚动推进。视觉效果的核心实现在 Content.tsx背景色#f6f8faGitHub 页面灰与卡片白底、#e1e4e8描边复刻了仓库 Star 历史页观感卡片绝对定位后通过translateY(${y}px)滚动行距gap 102只渲染当前进度前后 3 行Math.abs(index - progress) 3直接返回null保证长列表场景下渲染开销可控卡片透明度随与当前进度的距离淡入淡出Math.min(0.1 progress - index, 1)营造逐个浮现的庆祝感仓库头部的 Star 计数显示Math.round(progress)即随动画实时变化——这正是Star 数量一路爬升这一核心视觉的由来。GitHub 风味的配色、Octicon 图标与按钮样式由 gh-styles.css 承载它直接复刻了 github.com 的 class.btn-sm、.social-count、.pagehead-actions等省去额外引入设计系统的成本。仓库头布局则在 repo-header.tsx 中完成其 Star 按钮右侧的计数徽章正是由stars属性动态驱动的。模板骨架从 Composition 到 Zod Schema模板入口链非常清晰index.ts → registerRoot(RemotionRoot) // 注册根组件 Root.tsx → Composition idmain // 声明组成 Main.tsx → 由帧计算进度转发给 Content 渲染在 Root.tsx 中Composition 定义了固定画布参数参数值说明idmainComposition 标识渲染与 CLI 引用它fps30帧率常量FPS 30durationInFrames15 * FPS450仅作默认值实际由 props.duration 动态覆盖width / height960 × 54016:9 输出画布同时通过schema挂载了 Main.tsx 中定义的 Zod 输入模型export const mainSchema z.object({ repoOrg: z.string(), // 仓库所属组织/用户 repoName: z.string(), // 仓库名 starCount: z.number().step(1), // 展示多少位 stargazer duration: z.number().step(1), // 视频时长秒 });输入参数汇总输入类型默认值defaultProps含义repoOrgstringcode-hike组织/用户名repoNamestringcodehike仓库名starCountnumber100拉取并展示的 Star 用户数durationnumber15成片时长秒stargazersStargazer[] \| nullnull内部数据渲染时由 calculateMetadata 注入Schema 配合 Remotion Studio 的 Props 面板会自动生成表单右侧边栏用户无需写表单代码即可修改repoOrg、repoName、starCount与duration这解释了 README 中打开右侧栏输入仓库名并点击 Render的交互来源。关键机制calculateMetadata 拉取数据并决定时长stargazers并不是手工输入的而是在运行时通过calculateMetadata拉取的。回到 Root.tsxconst calculateMetadata: CalculateMetadataFunctionMainProps useCallback( async ({ props, abortSignal, isRendering }) { if (!isRendering) { await waitForNoInput(abortSignal, 500); // Studio 预览下做 500ms 输入防抖 } const stargazers await fetchStargazers({ repoOrg: props.repoOrg, repoName: props.repoName, starCount: props.starCount, abortSignal, }); return { props: { ...props, stargazers }, durationInFrames: props.duration * FPS, // 秒 × 30 }; }, [], );这里有三处值得展开的工程细节动态时长视频总帧数props.duration * FPS在渲染前动态返回因此改duration后无需重新定义 Composition。预览防抖wait-for-no-input.ts 在非渲染场景下延迟 500ms只有用户停止输入后才真正发请求避免每敲一个字符就触发一次 GitHub 拉取一旦abortSignal中止例如切到别的输入则抛出stale错误快速放弃过期请求。单次渲染内完成数据获取拉取发生在渲染进程内部。对于上万 Star 的仓库抓取可能耗时较长因此 remotion.config.ts 显式放宽了超时Config.setRspack(true); // 使用 Rspack 打包 Config.setVideoImageFormat(jpeg); // 中间帧用 JPEG Config.setDelayRenderTimeoutInMilliseconds(1200000); // 等待数据最长 20 分钟注意config 注释原文使用 Node.js API如renderMedia()时本配置文件不生效需要在 API 调用处直接传入等价选项。数据层实现GraphQL 主通道与 REST 兜底数据获取统一入口是 fetch-data.ts 中的fetchStargazers({ repoOrg, repoName, starCount, abortSignal })。它的核心决策是检测到环境变量REMOTION_GITHUB_TOKEN就走 GraphQL否则退回 REST。模板自己会打印提示未配置 token 时退回 REST API速率限制更低。两个通道的对比如下维度GraphQL 通道REST 兜底请求地址https://api.github.com/graphqlGET /repos/{org}/{name}/stargazers触发条件存在REMOTION_GITHUB_TOKEN未配置 token分页方式first: 100after: cursorper_page100page号请求头authorization: token tokenAccept: application/vnd.github.v3.starjson用户字段avatarUrl/name/login/starredAtuser.avatar_url/user.login/starred_at命名回退name || loginname直接取login结果缓存localStorage键见下无实现分别位于 via-graphql.ts 与 via-rest.tsGraphQL 每页取 100 条Query 形如repository(owner, name) { stargazers(first, after) { edges { starredAt, node { avatarUrl name login }, cursor } } }若返回RATE_LIMITED类型错误等待 60 秒后递归重试成功后把{ cursor: lastCursor, results }写回缓存。REST 使用starjson媒体类型以获取starred_at遇到403/429命中限流同样等待 60 秒重试。入口函数在 REST 模式下按starCount需要的页数循环不足即break超过即slice(0, starCount)截断并把结果拼接成与 GraphQL 相同的Stargazer[]形状——上层Content因此完全不需要感知数据来源。缓存实现在 cache.tslocalStorage 键格式为__stargazer-{repoOrg}-{repoName}-{count}-{cursor}仅在写入超配额时静默跳过。这样在 Studio 中反复预览同一仓库时不会重复打 GitHub API。Stargazer数据结构本身很简洁见 cache.tsexport type Stargazer { avatarUrl: string; name: string; date: string; // 点赞时间 ISO 字符串 login: string; };动画核心Spring 弹簧进度计数器视频Star 数字跃升、列表逐条浮现的节奏并非线性推进而是由 utils.ts 里的弹簧系统驱动。Main.tsx先把1 秒结尾定格扣除extraEnding fps再将剩余帧交给getProgress(frame, durationInFrames - extraEnding, stargazers.length, fps)。算法要点逐帧计算目标值target easeInOutCubic(frame / (totalFrames - 1)) * totalStars即进度先慢后快再收尾用customSpring源自 pomber/use-spring按刚度k170、阻尼c26、质量m1对每个目标做物理逼近得到实际展示值x把每帧[frame, target, x]预先存表渲染时按frame查表返回x保证逐帧渲染甚至无头渲染逐帧 seek时结果完全确定、可复现。这套查表 弹簧设计保证了视频在 Remotion 随机帧访问模型下的一致性——这是做纯数据驱动动态视频时非常值得照搬的模式。方式一本地渲染 Stargazer 视频README 给出的本地渲染流程在 monorepo 中对应目录 packages/template-stargazer如下第 1 步获取代码将模板复制成自己的项目在 GitHub 上Use this template。在本仓库中模板即packages/template-stargazer目录。第 2 步创建 GitHub Token 并写入 .env访问 GitHub 的 Personal Access Token 设置页新建一个 token按 README 说明使用默认设置即可然后在项目根目录创建.env文件REMOTION_GITHUB_TOKENgithub_pat_...有了它数据拉取走 GraphQL 通道可获得更高的速率上限。若跳过此步模板会自动退回 REST 通道功能仍可用但按源码日志提示限流更严格。第 3 步安装依赖npm i第 4 步启动 Studio 预览npm run devnpm run dev等价于remotion studio见 package.json。启动后打开右侧 Props 面板填入repoOrg组织 / 用户例如code-hikerepoName仓库名例如codehikestarCount展示的用户数默认 100duration成片秒数默认 15点击界面上的 Render 即可导出。也可完全绕开界面直接命令行渲染npx remotion render需要指定非默认输入时可通过--props传入 JSON字符串或文件路径均可例如npx remotion render main out/stargazer.mp4 --props{repoOrg:code-hike,repoName:codehike,starCount:100,duration:15}输出默认落在out/main.mp4。方式二GitHub Actions 云端一键渲染如果不想在本地安装依赖、也不想生成 PAT最省事的是使用仓库自带的 GitHub Actions 工作流 render-video.yml它由workflow_dispatch手动触发交互输入定义如下输入默认值必填含义repoOrgpomber是仓库组织 / 用户repoNamedidact是仓库名starCount100是展示的 Star 用户数duration15否视频时长秒标准操作流程Fork本模板仓库进入 Fork 后仓库的Actions页签按 GitHub 提示启用工作流I understand my workflows, go ahead and enable them在左侧找到名为Render video的工作流点击Run workflow在弹出的表单中输入要制作庆祝视频的repoOrg/repoName以及可选的starCount/duration触发运行在本次运行的 job 页面可实时查看渲染进度运行结束后展开Upload video步骤的 Artifacts 下载out/main.mp4即成片。该工作流的几个实现要点值得留意运行环境为ubuntu-latest Node 20先用npm i安装依赖渲染前会用 apt 安装 Noto 系列回退字体fonts-noto-core、fonts-noto-cjk、fonts-noto-color-emoji、fonts-noto-mono保证中英文、emoji 等字符名在无头浏览器中不缺字输入参数通过toJson(github.event.inputs)写入input-props.json再以npx remotion render --props./input-props.json喂给渲染器输出out/main.mp4后经actions/upload-artifactv4上传数据 token 用的是 Actions 自动注入的secrets.GITHUB_TOKEN因此云端渲染自动走 GraphQL 通道无需手动配置任何密钥。升级 Remotion 与许可证说明若想将模板使用的 Remotion 升级到新版本一条命令即可npx remotion upgrade许可证方面README 明确说明模板自身代码以 MIT 许可发布其依赖的 Remotion 框架通常需要公司购买付费许可但该模板产出的视频即用来制作庆祝视频这一用途已被上游确认无需公司许可即可使用。引用模板时请保持此说明具体以 README 中的 License 段落为准。改造指引把模板变成你自己的数据里程碑视频Stargazer 模板的架构其实是一个通用的数据事件流视频范式理解后可以很方便地做迁移改造替换数据源fetchStargazers返回统一的Stargazer[]avatarUrl / name / date / loginContent 只消费这一形状。把 fetch-data.ts 换成你的数据源提交记录、Issue、感谢名单画面无需改动。替换/调整视觉StarBox 与 RepoHeader 都是纯 div 内联样式直接改成卡片轮播、榜单滚动等效果即可动画控制器getProgress可原样复用。保持确定性渲染务必让每个frame的输出只依赖frame与已抓取数据把耗时 I/O 收敛在calculateMetadata里并善用abortSignal取消过期请求与 localStorage 缓存避免重复打接口必要时像模板一样调高 delay-render 超时。这样你既能用现成命令在当天生成一支 Star 里程碑庆祝视频也能把这套数据 弹簧动画 GitHub 风格 UI的组合拳复用到其他程序化视频项目中去。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
用 Remotion 制作仓库 Star 里程碑庆祝视频Stargazer 模板完整上手与源码走读【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion仓库达到 Star 里程碑值得用一支视频记录每一位贡献者的头像、昵称与点赞时间。本模板位于 packages/template-stargazer基于 Remotion 提供了一整套把 GitHub Stargazer 数据渲染成视频的现成方案既可本地渲染也可通过 GitHub Actions 在云端一键生成。读完本文你将掌握该模板的两种渲染路径本地 / CI、GitHub 数据拉取的 GraphQL 与 REST 双通道实现、参数化组成schema calculateMetadata的写法以及如何复用其动画核心为自己的数据视频项目做改造。模板能做什么GitHub 风格的数据视频Stargazer 视频的最终画面是一段 GitHub 风格界面顶部是仓库头部org / 仓库名 实时跳动的 Star 数量下方是一行行StarBox卡片卡片内包含用户圆形头像、昵称、starred {repoName} on {日期} 文案以及右侧的 Star 编号#1、#2……整屏列表按点赞顺序持续向上滚动推进。视觉效果的核心实现在 Content.tsx背景色#f6f8faGitHub 页面灰与卡片白底、#e1e4e8描边复刻了仓库 Star 历史页观感卡片绝对定位后通过translateY(${y}px)滚动行距gap 102只渲染当前进度前后 3 行Math.abs(index - progress) 3直接返回null保证长列表场景下渲染开销可控卡片透明度随与当前进度的距离淡入淡出Math.min(0.1 progress - index, 1)营造逐个浮现的庆祝感仓库头部的 Star 计数显示Math.round(progress)即随动画实时变化——这正是Star 数量一路爬升这一核心视觉的由来。GitHub 风味的配色、Octicon 图标与按钮样式由 gh-styles.css 承载它直接复刻了 github.com 的 class.btn-sm、.social-count、.pagehead-actions等省去额外引入设计系统的成本。仓库头布局则在 repo-header.tsx 中完成其 Star 按钮右侧的计数徽章正是由stars属性动态驱动的。模板骨架从 Composition 到 Zod Schema模板入口链非常清晰index.ts → registerRoot(RemotionRoot) // 注册根组件 Root.tsx → Composition idmain // 声明组成 Main.tsx → 由帧计算进度转发给 Content 渲染在 Root.tsx 中Composition 定义了固定画布参数参数值说明idmainComposition 标识渲染与 CLI 引用它fps30帧率常量FPS 30durationInFrames15 * FPS450仅作默认值实际由 props.duration 动态覆盖width / height960 × 54016:9 输出画布同时通过schema挂载了 Main.tsx 中定义的 Zod 输入模型export const mainSchema z.object({ repoOrg: z.string(), // 仓库所属组织/用户 repoName: z.string(), // 仓库名 starCount: z.number().step(1), // 展示多少位 stargazer duration: z.number().step(1), // 视频时长秒 });输入参数汇总输入类型默认值defaultProps含义repoOrgstringcode-hike组织/用户名repoNamestringcodehike仓库名starCountnumber100拉取并展示的 Star 用户数durationnumber15成片时长秒stargazersStargazer[] \| nullnull内部数据渲染时由 calculateMetadata 注入Schema 配合 Remotion Studio 的 Props 面板会自动生成表单右侧边栏用户无需写表单代码即可修改repoOrg、repoName、starCount与duration这解释了 README 中打开右侧栏输入仓库名并点击 Render的交互来源。关键机制calculateMetadata 拉取数据并决定时长stargazers并不是手工输入的而是在运行时通过calculateMetadata拉取的。回到 Root.tsxconst calculateMetadata: CalculateMetadataFunctionMainProps useCallback( async ({ props, abortSignal, isRendering }) { if (!isRendering) { await waitForNoInput(abortSignal, 500); // Studio 预览下做 500ms 输入防抖 } const stargazers await fetchStargazers({ repoOrg: props.repoOrg, repoName: props.repoName, starCount: props.starCount, abortSignal, }); return { props: { ...props, stargazers }, durationInFrames: props.duration * FPS, // 秒 × 30 }; }, [], );这里有三处值得展开的工程细节动态时长视频总帧数props.duration * FPS在渲染前动态返回因此改duration后无需重新定义 Composition。预览防抖wait-for-no-input.ts 在非渲染场景下延迟 500ms只有用户停止输入后才真正发请求避免每敲一个字符就触发一次 GitHub 拉取一旦abortSignal中止例如切到别的输入则抛出stale错误快速放弃过期请求。单次渲染内完成数据获取拉取发生在渲染进程内部。对于上万 Star 的仓库抓取可能耗时较长因此 remotion.config.ts 显式放宽了超时Config.setRspack(true); // 使用 Rspack 打包 Config.setVideoImageFormat(jpeg); // 中间帧用 JPEG Config.setDelayRenderTimeoutInMilliseconds(1200000); // 等待数据最长 20 分钟注意config 注释原文使用 Node.js API如renderMedia()时本配置文件不生效需要在 API 调用处直接传入等价选项。数据层实现GraphQL 主通道与 REST 兜底数据获取统一入口是 fetch-data.ts 中的fetchStargazers({ repoOrg, repoName, starCount, abortSignal })。它的核心决策是检测到环境变量REMOTION_GITHUB_TOKEN就走 GraphQL否则退回 REST。模板自己会打印提示未配置 token 时退回 REST API速率限制更低。两个通道的对比如下维度GraphQL 通道REST 兜底请求地址https://api.github.com/graphqlGET /repos/{org}/{name}/stargazers触发条件存在REMOTION_GITHUB_TOKEN未配置 token分页方式first: 100after: cursorper_page100page号请求头authorization: token tokenAccept: application/vnd.github.v3.starjson用户字段avatarUrl/name/login/starredAtuser.avatar_url/user.login/starred_at命名回退name || loginname直接取login结果缓存localStorage键见下无实现分别位于 via-graphql.ts 与 via-rest.tsGraphQL 每页取 100 条Query 形如repository(owner, name) { stargazers(first, after) { edges { starredAt, node { avatarUrl name login }, cursor } } }若返回RATE_LIMITED类型错误等待 60 秒后递归重试成功后把{ cursor: lastCursor, results }写回缓存。REST 使用starjson媒体类型以获取starred_at遇到403/429命中限流同样等待 60 秒重试。入口函数在 REST 模式下按starCount需要的页数循环不足即break超过即slice(0, starCount)截断并把结果拼接成与 GraphQL 相同的Stargazer[]形状——上层Content因此完全不需要感知数据来源。缓存实现在 cache.tslocalStorage 键格式为__stargazer-{repoOrg}-{repoName}-{count}-{cursor}仅在写入超配额时静默跳过。这样在 Studio 中反复预览同一仓库时不会重复打 GitHub API。Stargazer数据结构本身很简洁见 cache.tsexport type Stargazer { avatarUrl: string; name: string; date: string; // 点赞时间 ISO 字符串 login: string; };动画核心Spring 弹簧进度计数器视频Star 数字跃升、列表逐条浮现的节奏并非线性推进而是由 utils.ts 里的弹簧系统驱动。Main.tsx先把1 秒结尾定格扣除extraEnding fps再将剩余帧交给getProgress(frame, durationInFrames - extraEnding, stargazers.length, fps)。算法要点逐帧计算目标值target easeInOutCubic(frame / (totalFrames - 1)) * totalStars即进度先慢后快再收尾用customSpring源自 pomber/use-spring按刚度k170、阻尼c26、质量m1对每个目标做物理逼近得到实际展示值x把每帧[frame, target, x]预先存表渲染时按frame查表返回x保证逐帧渲染甚至无头渲染逐帧 seek时结果完全确定、可复现。这套查表 弹簧设计保证了视频在 Remotion 随机帧访问模型下的一致性——这是做纯数据驱动动态视频时非常值得照搬的模式。方式一本地渲染 Stargazer 视频README 给出的本地渲染流程在 monorepo 中对应目录 packages/template-stargazer如下第 1 步获取代码将模板复制成自己的项目在 GitHub 上Use this template。在本仓库中模板即packages/template-stargazer目录。第 2 步创建 GitHub Token 并写入 .env访问 GitHub 的 Personal Access Token 设置页新建一个 token按 README 说明使用默认设置即可然后在项目根目录创建.env文件REMOTION_GITHUB_TOKENgithub_pat_...有了它数据拉取走 GraphQL 通道可获得更高的速率上限。若跳过此步模板会自动退回 REST 通道功能仍可用但按源码日志提示限流更严格。第 3 步安装依赖npm i第 4 步启动 Studio 预览npm run devnpm run dev等价于remotion studio见 package.json。启动后打开右侧 Props 面板填入repoOrg组织 / 用户例如code-hikerepoName仓库名例如codehikestarCount展示的用户数默认 100duration成片秒数默认 15点击界面上的 Render 即可导出。也可完全绕开界面直接命令行渲染npx remotion render需要指定非默认输入时可通过--props传入 JSON字符串或文件路径均可例如npx remotion render main out/stargazer.mp4 --props{repoOrg:code-hike,repoName:codehike,starCount:100,duration:15}输出默认落在out/main.mp4。方式二GitHub Actions 云端一键渲染如果不想在本地安装依赖、也不想生成 PAT最省事的是使用仓库自带的 GitHub Actions 工作流 render-video.yml它由workflow_dispatch手动触发交互输入定义如下输入默认值必填含义repoOrgpomber是仓库组织 / 用户repoNamedidact是仓库名starCount100是展示的 Star 用户数duration15否视频时长秒标准操作流程Fork本模板仓库进入 Fork 后仓库的Actions页签按 GitHub 提示启用工作流I understand my workflows, go ahead and enable them在左侧找到名为Render video的工作流点击Run workflow在弹出的表单中输入要制作庆祝视频的repoOrg/repoName以及可选的starCount/duration触发运行在本次运行的 job 页面可实时查看渲染进度运行结束后展开Upload video步骤的 Artifacts 下载out/main.mp4即成片。该工作流的几个实现要点值得留意运行环境为ubuntu-latest Node 20先用npm i安装依赖渲染前会用 apt 安装 Noto 系列回退字体fonts-noto-core、fonts-noto-cjk、fonts-noto-color-emoji、fonts-noto-mono保证中英文、emoji 等字符名在无头浏览器中不缺字输入参数通过toJson(github.event.inputs)写入input-props.json再以npx remotion render --props./input-props.json喂给渲染器输出out/main.mp4后经actions/upload-artifactv4上传数据 token 用的是 Actions 自动注入的secrets.GITHUB_TOKEN因此云端渲染自动走 GraphQL 通道无需手动配置任何密钥。升级 Remotion 与许可证说明若想将模板使用的 Remotion 升级到新版本一条命令即可npx remotion upgrade许可证方面README 明确说明模板自身代码以 MIT 许可发布其依赖的 Remotion 框架通常需要公司购买付费许可但该模板产出的视频即用来制作庆祝视频这一用途已被上游确认无需公司许可即可使用。引用模板时请保持此说明具体以 README 中的 License 段落为准。改造指引把模板变成你自己的数据里程碑视频Stargazer 模板的架构其实是一个通用的数据事件流视频范式理解后可以很方便地做迁移改造替换数据源fetchStargazers返回统一的Stargazer[]avatarUrl / name / date / loginContent 只消费这一形状。把 fetch-data.ts 换成你的数据源提交记录、Issue、感谢名单画面无需改动。替换/调整视觉StarBox 与 RepoHeader 都是纯 div 内联样式直接改成卡片轮播、榜单滚动等效果即可动画控制器getProgress可原样复用。保持确定性渲染务必让每个frame的输出只依赖frame与已抓取数据把耗时 I/O 收敛在calculateMetadata里并善用abortSignal取消过期请求与 localStorage 缓存避免重复打接口必要时像模板一样调高 delay-render 超时。这样你既能用现成命令在当天生成一支 Star 里程碑庆祝视频也能把这套数据 弹簧动画 GitHub 风格 UI的组合拳复用到其他程序化视频项目中去。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
