# HyperFrames

One-off semantic animations and animated explainers authored as HTML + GSAP on...

- Repository: https://github.com/danielmiessler/LifeOS (19669 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-28
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add danielmiessler/LifeOS --skill HyperFrames -g -a claude-code -y`
Codex: `npx skills add danielmiessler/LifeOS --skill HyperFrames -g -a codex -y`
Cursor: `npx skills add danielmiessler/LifeOS --skill HyperFrames -g -a cursor -y`
Gemini CLI: `npx skills add danielmiessler/LifeOS --skill HyperFrames -g -a gemini-cli -y`

## Description

One-off semantic animations and animated explainers authored as HTML + GSAP on HyperFrames, directed by the meaning layer (MeaningMap then Direction, reviewed before anything animates) and rendered to MP4 through the sandboxed HyperFrames seam, with the ArtDirection quality loop before delivery. USE WHEN animation, animate this, motion graphics, animated explainer, content to video, make a short, generate a video about, launch video, product launch video, launch film, capability video, feature video, make a video of what we just added, promo video, ad creative video, landing-page hero video, AI video, video overlay, render video, programmatic video, hyperframes, remotion (retired). NOT FOR static images or diagrams, or animated technical diagram GIFs (Art TechnicalDiagrams, which renders through this seam), editing or tight-cutting recorded footage (the video pipeline skill), narrated essays or explainers of a post, idea or feature (the video-essay skill), or audio-only cleaning (AudioEditor).

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# HyperFrames

Makes short animations the way Art makes images: from code, reproducibly, from what the content means. A composition is an HTML page with one paused GSAP timeline; HyperFrames seeks it frame by frame and encodes it. Every render goes through the shared seam `LIFEOS/TOOLS/HyperFrames`, which pins the version, turns telemetry off, sandboxes the network, checks the timeline is registered and moving, and remuxes the output without container metadata so the renderer's own name and version stamp does not travel with the file. It adds no AI-content label of its own; label AI-generated shorts wherever they are published.

Order is fixed: meaning, then direction, then motion. `LIFEOS/TOOLS/VideoMeaning` decomposes the source into a MeaningMap, directs every beat as a Direction with a written rationale, and a two-vendor review passes that plan before a single scene is authored. A launch film is directed instead by the principal's pick between animatics.

**Contents:** Ideal State · Intent Routing · Tools · Data & Config · Gotchas · Examples

## Ideal State

The rest: https://github.com/danielmiessler/LifeOS/blob/HEAD/LifeOS/install/skills/HyperFrames/SKILL.md