video-hyperframes
Creates continuous frame animations compatible with Hyperframes and Remotion. It supports autoplay, generating fluid and continuous motion in videos.
What it does
Transforms text into a sequence of animated frames, like a short video. Each frame displays an idea or scene with large text and a visual. It's designed for autoplay.
When to use it
- ✓Creating quick visual presentations.
- ✓Summarizing an article or story into scenes.
- ✓Making animated social media posts.
Example of what to ask your AI
“Create a frame animation about the importance of recycling, with 5 scenes.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The AI divides your text into small parts, each becoming a frame. It adds a simple visual, large text, and special code so the frames transition automatically.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill video-hyperframesOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/video-hyperframes/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
【模板: 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。
FAQ
What are 'frames'?
They are like the individual pictures in a movie or animation, each showing a small part of the story or idea.
How does the automatic animation work?
A small piece of code is added so each frame appears for a few seconds and then moves to the next, like a video that plays by itself.
Can I control the speed?
The animation is set to change every 3 seconds, but the generated code might allow manual control, like clicking or using arrow keys.
Details
Original description by the author
Hyperframes / Remotion-compatible continuous frame animation with autoplay support.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #590
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
blender-motion-state-inspection
Allows inspection of details in 3D animations. It's useful for checking poses, movements, and character alignment in animations.
affaan-m/ECC
manim-video
Lets your agent create animated explainer videos. It uses Manim to generate clear graphs and diagrams for technical concepts.
affaan-m/ECC
remotion-video-creation
Guides your agent in creating videos using React with the Remotion library. It covers best practices for animations, audio, captions, and other visual elements.
affaan-m/ECC