Skip to content
cccskills
FreePublished on GitHubEnglish overview

video-hyperframes

Turn written content and data into a sequence of animated frames for Hyperframes or Remotion. The output includes autoplay, manual navigation, a progress bar, and timing metadata for later video rendering.

OriginalShow the original description

Hyperframes / Remotion-compatible continuous frame animation with autoplay support.

AI rating90/ 100See how to install

Good for

  • Turn a short script into animated frames
  • Present data one scene at a time
  • Prepare frame metadata for Remotion rendering

Overview

What it does

Turn text and data into a continuous sequence of frames for rendering with Hyperframes / Remotion. Each 1920×1080 frame presents one scene or concept through large text and visual composition. The sequence advances automatically every three seconds, supports clicks and arrow keys for manual navigation, and includes a progress bar. Output also includes metadata describing each scene’s display duration, transition, and summary.

When it helps

Use it to present a short explanation or data introduction in an ordered series of scenes. The structure opens with a question or surprising data, develops the explanation, and ends with a conclusion and a call to action. A dark background and one neon accent color keep the appearance consistent throughout the sequence.

Example requests

  • “Turn this explanation into an autoplay animation with one topic per scene.”
  • “Create a continuous frame sequence that starts with this data and ends with a conclusion.”

Notes

The output consists of frames and metadata for a later rendering step. Creating an mp4 requires separate rendering with Remotion or a similar tool. The number of frames is adjusted to the amount of information in the content.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Objective evaluation

AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.

Clear instructionsIs it clear when to use it and what it does?
AGoodThe source describes converting text and data into continuous frames for autoplay and later rendering.
Concrete stepsAre steps, inputs, outputs, and examples spelled out?
AGoodInstructions specify 1920×1080 sections, three-second transitions, scene structure, and JSON metadata.
SafetyAre sending data, deleting files, and running commands disclosed?
AGoodJavaScript is specified for playback and navigation, with no instructions for external transmission or deletion.
Easy setupDoes it need few tools or API keys, and are they documented?
BPartly lackingLater Remotion rendering is mentioned, but installation and conversion-script procedures are not provided.

The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Tell us which point is wrong and why. No login needed. We will check it against the SKILL.md, redo the evaluation, and show the result here.

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

Files included (3)

  • SKILL.md2.6 KB
  • example.html6.9 KB
  • example.md492 B

SKILL.md (original)

Review the instructions the agent will receive before you install.

【模板: 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。

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

8-bit-orbit-video-template

FreeSummaryAI rating 90

Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.

  • Create a retro pixel presentation video
  • Customize a three-scene video template
  • Preview scene transitions and motion in HTML
nexu-io/open-design102.7KUpdated Oct 20, 2026

ad-creative

FreeSummaryAI rating 80

Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.

  • Drafting headlines for paid social ads
  • Creating descriptions for search ads
  • Revising the main text of an ad
nexu-io/open-design102.7KUpdated Oct 20, 2026

after-hours-editorial-template

FreeSummaryAI rating 80

Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.

  • Creating a fashion-inspired motion presentation
  • Presenting a short story across three pages
  • Applying existing brand rules to a dark editorial sequence
nexu-io/open-design102.7KUpdated Oct 20, 2026

agent-browser

FreeSummaryAI rating 100

Inspect and test web pages through a browser automation command-line tool. Navigate, click, enter text, capture screenshots, and extract page details, with a focus on checking local OpenDesign previews and reviewing web app quality.

  • Checking local OpenDesign previews
  • Testing clicks and text entry in web apps
  • Capturing page or element screenshots
nexu-io/open-design102.7KUpdated Oct 20, 2026

ai-music-album

FreeSummaryAI rating 80

Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.

  • Planning an experimental independent album
  • Drafting lyrics around an album concept
  • Deciding the running order of tracks
nexu-io/open-design102.7KUpdated Oct 20, 2026

algorithmic-art

FreeSummaryAI rating 80

Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.

  • Posters generated with programmed rules
  • Still images that suggest motion
  • Studies of artistic frame composition
nexu-io/open-design102.7KUpdated Oct 20, 2026

See all skills by nexu-io

Report a problem with this skill