Skip to content
AI & Agents
Skill

/HyperFrames

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

From plugin
danielmiessler-lifeos
20k97 skills13 agents34 commands

Claude Code

$ npx -y skills add danielmiessler/lifeos --skill HyperFrames --agent claude-code

SKILL.md

HyperFrames.SKILL.md
name: HyperFrames
evals:
  manual:
    reason: "a rendered composition must be watched for meaning, timing, frame composition, and audiovisual continuity"
    falsifier: "the reviewer finds a scene with no Direction rationale, a missing scene, a timing error, clipped content, or a visual or audio defect in the rendered video"
metadata:
  short-description: "One-off animations and animated explainers as HTML + GSAP, directed by the meaning layer and rendered through HyperFrames. Not static art, talking heads or audio."
version: 1.3.0
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).

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

  • Every piece was directed before it was animated: each scene carries a stated reason (a Direction beat that passed review, or the launch film's picked direction), and a plan that never passed is reported with its defects, not animated around.
  • Proof passed three times, and each receipt path was handed back: on the plan before building (no brief fact dropped), on the first stills before the full render, and on the final encode, which also rendered with `render --eval <intent>` so the Assay video eval set (`video-eval`) passed on it as that intent's `## Evals` declares it. "I looked at the stills" is not evidence.
  • Every render went through the seam `LIFEOS/TOOLS/HyperFrames` with every stage green; nothing ran the bare `hyperframes` CLI, and a failing stage was fixed in the composition, never bypassed.
  • It reads as authored, not templated (`References/MotionDesignPhilosophy.md`): settling eases where a physical thing would ease, one focal movement per beat, text still while it is read, timing with texture, and only the transitions the content motivates. Watched once with sound off, it could not have come from a template; a piece a template could have produced got another pass.
  • A piece about real things shows them (principal directive, 2026-10-16). While the narration names something that exists (a system, product, screen or place), the viewer sees it as itself, its real surface or a motion study of how it works, and the piece returns to its anchor graphic between them, so the whole and its parts stay in one argument. A narrated piece that tours several subjects changes scene at the pace of its argument; one diagram held under all of it is a template.
  • Explainers and generated shorts are one system: palette, type scale, spacing and eases come from `Tools/Theme.ts`. A launch film takes them from its chosen reference instead (`Intents/LaunchVideo.md`).
  • Nothing this skill produces reaches the principal as a first draft. Every artifact went through `Skill("ArtDirection")`: a direction council before new or large work, then the cross-vendor critique panel (`skills/ArtDirection/Tools/Critique.ts`), iterated on its named defects until it passes the bar ArtDirection sets (`skills/ArtDirection/SKILL.md` § Ideal State) or reported with the shortfall. A passing `Critique.json` sits beside the render. Hand-over is `skills/ArtDirection/Tools/Deliver.ts`, which refuses without a passing critique. The principal's verdict is recorded with `skills/ArtDirection/Tools/Calibrate.ts`.
  • A project can be rendered again from its folder: one paused GSAP timeline, every asset local, the project outside every git repo.

Intent Routing

| Intent | Trigger | File | |--------|---------|------| | **ContentToAnimation** | "animate this", "create animations for", "video overlay", "animated explainer" | `Intents/ContentToAnimation.md` | | **GeneratedContentVideo** | "generate a video about", "AI video", "content to video", "make a short" | `Intents/GeneratedContentVideo.md` | | **LaunchVideo** | "launch video", "product launch film", "promo video", "ad video", "hero video for the landing page" | `Intents/LaunchVideo.md` | | **CapabilityVideo** | "capability video", "make a video of what we just added", "announce this feature", "/cv" | `Intents/CapabilityVideo.md` | | **SystemFilm** | "system film", "live dashboar

Read more
@danielmiessler
Ships withdanielmiessler-lifeos

⛰️ LifeOS — The universal AI Harness designed to move you from Current to Ideal state in both life and work.

20k97 skills13 agents
Get the whole plugin

Stars on GitHub

Momentum

stars in total
19.7k
Star history of danielmiessler/lifeos on GitHub, a chart by star-history.com

Other skills on danielmiessler-lifeos.

More skills from other plugins.

Questions about HyperFrames.

Which coding agents can use HyperFrames?
HyperFrames installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.