Skip to content
Get packs

Hyperframes Video Frames

Turns a script into a self-playing 1920×1080 HTML slideshow for video rendering

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
3 files

What it does

When this skill is active, the agent turns your content into a series of full-screen 16:9 HTML slides, each showing one big line of text and a simple visual layout. The page includes JavaScript that automatically advances every 3 seconds, lets you click or use arrow keys, and shows a progress bar. Each slide also carries hidden timing and transition markers, plus a metadata block, so a video tool such as Remotion or Hyperframes can later turn the slides into an mp4.

Great for

  • Creators who want a quick cinematic animation script that can be turned into a short video
  • Marketers drafting a short explainer or promo as a sequence of timed frames
  • Developers building a Remotion or Hyperframes pipeline who need structured frame data

Skip it if

  • Users who need a finished video file directly: the skill only produces HTML and metadata, and rendering to mp4 needs separate tools
  • Long documents or dense information, since the skill asks for one idea per frame and very large text

Try asking

  • “Make an 8-frame cinematic video script about how AI workflows save time, with a hook, arguments and a call to action”
  • “Create a 1920x1080 frame sequence explaining our product launch, with a dark background and one neon accent colour”
  • “Turn this blog post summary into a self-playing slideshow with timing markers for Remotion”
Step-by-step guide: how to use Hyperframes Video FramesInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    video-hyperframes.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip video-hyperframes.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip video-hyperframes.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent a clear script or key points; the number of frames is chosen from how much content you provide
  • Ask for a specific frame count or duration (default is 3000 ms per frame) if your renderer needs it
  • Open the generated HTML in a browser to preview the autoplay before rendering

What's inside

  • example.html
  • example.md
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.