SuperAPI AI 工具集

helios-skills

设计与创作

查看项目

更新于 10-22 08:07

技能介绍

Helios Skills Collection 是 Helios 视频引擎配套的智能体技能目录。Helios 是一个浏览器原生视频引擎,用于以编程方式制作动画和渲染视频。这些技能存放在 Helios 仓库的 skills/ 目录中(入口技能位于 plugins/helios/ 下)。

安装方式:这是一个技能集合,需要按路径分别安装单个技能。例如入口技能 make-video:npx skills add BintzGavin/helios/plugins/helios/skills/make-video;入门技能:npx skills add BintzGavin/helios/skills/getting-started。其余技能也按同样方式使用各自的仓库路径安装(核心、渲染器、播放器、工作室、工作流、设计、引导式视频创作、框架示例、动画库等)。

主要技能分组:

  • 入门:安装与快速开始,涵盖包安装、环境要求(Node.js、FFmpeg)、基础设置与初始组合结构。
  • 核心包:core(Helios 类实例化、信号、动画辅助、DOM 同步)、renderer(服务端渲染组合为视频文件)、player(可嵌入播放器及控制)、studio(可视化编辑器)。
  • 工作流:创建组合、渲染视频、数据可视化动画。
  • 设计:动画视频理念(故事优先的动效、节奏、镜头、时机、构图、媒介语法、技术取舍与反模式);约 45 秒电影感产品宣传片的模板方案,涵盖简报至交付、主元素旅程、视觉/动效/音频、交付物矩阵与可访问性,可适配不同产品类别。
  • 引导式视频创作:动效设计规则(反幻灯片架构、视觉分层、基于物理的缓动、编排与质量校验,被其他引导技能引用),以及宣传视频、解说视频、产品演示、客户证言、发布公告、社交短片(竖屏 9:16、节奏强、适合循环)。
  • 框架集成示例:React、Vue、Svelte、Solid、原生 JavaScript。
  • 动画库示例:GSAP、Framer Motion、Lottie、Three.js、PixiJS、p5.js。
  • 数据可视化:D3.js、Chart.js 动画图表。
  • 渲染技法:Canvas 2D、响应式信号、Tailwind CSS、音频可视化(播客可视化器)。

入口技能 make-video 的说明为:用带 window.renderAt(t) 的单个 HTML 页面,通过 npx @helios-project/cli render 渲染为 MP4,并用静帧和联系表检查,配有音轨;当需要用代码绘制视频时从这里开始。

适用场景包括:创建编程式视频组合、使用浏览器原生动画(CSS、WAAPI)、构建视频渲染管线、将 Helios 与 React/Vue/Svelte 等框架集成、使用 GSAP/Framer Motion/Three.js 等动画库、制作数据可视化视频、搭建 Helios 开发工作流、为视频的动效节奏与视觉叙事建立一致理念,以及规划电影感产品宣传片。

限制:所给资料未提供价格、平台兼容范围及实际使用效果等信息。