Video Hyperframes
Turn real copy and data into a Remotion-ready Hyperframes continuous frame animation at 1920×1080 with autoplay.
Overview
video-hyperframes is an agent skill for the Build phase that produces Hyperframes / Remotion-compatible continuous frame animation scripts with autoplay at 1920×1080.
Install
npx skills add https://github.com/nexu-io/open-design --skill video-hyperframesWhat is this skill?
- Hyperframes / Remotion-compatible continuous frame animation with autoplay
- Template aspect 1920×1080 (16:9) with example workflow (sample-hyperframes-workflow)
- Example tagline cites 8 autoplay frames with progress bar and metadata
- Requires real content—explicitly avoids lorem ipsum and placeholder images
- Upstream from nexu html-anything; preview via debounced HTML reload
- Recommended frame count: 5 (template default); example documents 8 autoplay frames
- Aspect hint: 1920×1080 (16:9)
Adoption & trust: 694 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a polished motion video from your real product story but lack a structured multi-frame script Remotion or Hyperframes can render.
Who is it for?
Builders creating launch explainers, workflow demos, or design-system promos who already use or plan Remotion/Hyperframes exports.
Skip if: Static one-off social images, audio-only podcasts, or requests that insist on placeholder lorem ipsum instead of real content.
When should I use this skill?
User wants Hyperframes or Remotion-compatible continuous frame animation with autoplay from real content using the open-design video template.
What do I get? / Deliverables
You get a continuous frame animation script with sections, autoplay behavior, and example-aligned metadata ready to render to mp4 in Remotion/Hyperframes.
- Continuous section/frame HTML animation script compatible with Hyperframes/Remotion
- Frame metadata and progress-bar pattern per template example
Recommended Skills
Journey fit
Output is a structured animation script and HTML frame sequence produced while building marketing or product visuals—frontend generative media work. Frontend fits because the deliverable is section-based frame markup and motion narrative compatible with Remotion/Hyperframes pipelines.
How it compares
Use as a frame-script template for motion export—not a substitute for a full non-linear video editor project with arbitrary B-roll.
Common Questions / FAQ
Who is video-hyperframes for?
Solo builders and indie marketers who want agent help drafting Hyperframes-compatible frame sequences for Remotion mp4 output at 16:9.
When should I use video-hyperframes?
Use it during Build frontend work when turning product workflows, feature tours, or launch narratives into autoplay frame animations before Ship or Launch distribution.
Is video-hyperframes safe to install?
It is a design template skill from the open-design catalog—review the Security Audits panel on this page and validate any external assets or upstream repos you pull into your render pipeline.
SKILL.md
READMESKILL.md - Video Hyperframes
【模板: Hyperframes 视频帧】 - 输出 N 个连续 `<section class="frame">`, 每个 `w-[1920px] h-[1080px]`; N 由【用户内容】信息密度决定 (短脚本 6-10 帧起步, 长脚本应更多, 每帧只承载一个镜头/概念)。 - 每帧表达一个镜头/概念: 文字 + 视觉构图 (中央构图 / 黄金分割 / 三分法)。 - 每帧底部隐藏标记 `<!-- frame:N duration:3000 transition:fade -->` 供后续 Remotion / Hyperframes 渲染脚本读取。 - 顶部加一段 JavaScript 自动播放: 每 3 秒切换到下一帧, 也支持点击 / 方向键控制; 角落显示进度条。 - 第 1 帧是 hook (一个数据 / 一个反常识 / 一个问题), 第 2-N 是论证, 最后是结论 + CTA。 - 字号巨大 (text-9xl), 一句话即可, 不要堆砌。 - 配色统一一套电影感 (深色背景 + 1 个霓虹强调色)。 - 输出最后包含一段简短注释 `<!-- HYPERFRAMES_META: ... -->`, 包含每帧 duration / transition / sceneSummary 的 JSON 元数据, 用于后续转 Remotion。