How to use the HyperFrames Animation Director agent skill

What the HyperFrames skill makes the agent do

An agent skill is a folder of instructions and helper scripts that an AI agent loads when a request matches the skill's purpose. With HyperFrames installed, the agent handles requests for one-off animations, animated explainers, launch videos and feature videos.

Before building anything, the agent breaks the source content into meaning beats and writes a reason for each scene. Each scene is then authored as an HTML page with one paused GSAP timeline, and the page is rendered to an MP4 through a shared render wrapper. The skill also includes quality-review steps and helper scripts for scaffolding projects, measuring film pacing and applying a colour and motion theme.

• Plans the video as meaning beats and scene rationales before it builds
• Authors each scene as HTML with a GSAP timeline
• Renders the project to MP4 through the HyperFrames seam
• Runs review steps before delivery
• Keeps the project as files so it can be re-rendered later

Install the HyperFrames skill

Download the HyperFrames ZIP from the skill's page on this directory. Then choose one of the install locations below. The skill is a folder, so unzipping it puts the folder in the right place.

For a personal install that is available in all your projects, unzip the skill into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder instead.

In the Claude apps, you can also upload the ZIP under Settings, then Capabilities, then Skills.

• Personal: ~/.claude/skills/
• Single project: .claude/skills/ inside the project folder
• Claude apps: Settings → Capabilities → Skills, then upload the ZIP

Check the requirements before your first video

The skill is not a standalone video editor. It expects a LifeOS installation with its TOOLS directory and the Art and ArtDirection skills, because the workflow refers to them. Scripts are TypeScript and run with the Bun runtime. The HyperFrames renderer is pinned through the shared LifeOS seam, and GSAP is staged locally by the scaffold script.

Setup.md covers first-time setup, including ffmpeg, a one-time tool install, and optional keys for narration and film review. The skill also uses the network, so check the safety notes below before you run it.

• Bun runtime, since scripts are TypeScript run with bun
• ffmpeg, as listed in Setup.md
• HyperFrames renderer, pinned through the shared LifeOS seam
• GSAP, staged locally by the scaffold script
• LifeOS installation with its TOOLS directory and Art/ArtDirection skills
• Optional narration and film-review keys, set up through Setup.md

Ask for a video in plain language

You do not need to name the skill or any script. The agent matches your request to the skill's trigger phrases. Name the content and the kind of video you want, and the agent picks the matching intent.

Trigger phrases include animate this, animated explainer, motion graphics, content to video, make a short, launch video, product launch video, promo video, landing-page hero video, feature video and render video. For a video of a feature you just built, you can say make a video of what we just added.

The skill is not the right choice for every request. It does not handle static images or diagrams, editing recorded footage, narrated essays about a post or idea, or audio-only cleaning. Those belong to other skills.

• Example: Animate this changelog into a 30 second explainer.
• Example: Make a short launch video for the new export feature.
• Example: Turn this blog post into an animated explainer.
• Example: Make a video of what we just added to the settings page.

Follow the build and check steps

The agent works in a fixed order: meaning, then direction, then motion. It first plans the scenes and gives each one a reason, then builds the animation, then renders it. The rendered file is reviewed before delivery, so expect the agent to report review results rather than hand over a first draft.

Scaffolding creates a project folder with an index.html that has a registered timeline and a title card. The render goes through the seam, which checks the timeline and removes container metadata from the output file.

• Scaffold.ts writes index.html, a theme, local GSAP and a title card
• Renders go through the seam, not the bare hyperframes command
• Projects are kept as folders, so you can render them again later

Safety notes: scripts and network

This skill runs scripts and uses the network. Scripts are TypeScript run with Bun. The render seam pins the renderer version, turns telemetry off and sandboxes network access, and it checks that the timeline is registered and moving before it renders.

The skill adds no AI-content label of its own. If you publish AI-generated shorts, label them yourself wherever you publish them. Review the agent's plan and the scripts before you let it run on your machine.

• Scripts run with Bun, so read them before running them in sensitive folders
• The seam sandboxes network access during renders
• Telemetry is turned off by the seam
• You are responsible for labelling AI-generated video