# Hyperframes Animation

All animation knowledge for HyperFrames, atomic motion rules, multi-phase scene...

- Repository: https://github.com/calesthio/OpenMontage (74341 stars)
- Category: Design
- License: AGPL-3.0
- Last updated: 2026-10-28
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add calesthio/OpenMontage --skill hyperframes-animation -g -a claude-code -y`
Codex: `npx skills add calesthio/OpenMontage --skill hyperframes-animation -g -a codex -y`
Cursor: `npx skills add calesthio/OpenMontage --skill hyperframes-animation -g -a cursor -y`
Gemini CLI: `npx skills add calesthio/OpenMontage --skill hyperframes-animation -g -a gemini-cli -y`

## Description

All animation knowledge for HyperFrames, atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). HyperFrames-native: single paused timeline, seek-safe, deterministic.

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

# HyperFrames Animation

All motion knowledge in one skill: **rules** (atomic recipes), **blueprints** (multi-phase scene templates), **transitions** (scene-to-scene), **techniques** (broader motion-design patterns), and **adapters** (per-runtime APIs).

For the composition contract (data attributes, sub-compositions, determinism) see `hyperframes-core`.

## Default: compose atomic rules

Pick 2-4 rules from `rules-index.md`, glue them together with a single paused GSAP timeline, done. This is faster and produces less code than starting from a blueprint.

## Load a blueprint when

- The scene matches an existing pre-designed multi-phase template (brand-reveal, social-proof, etc.) and reusing its phase pipeline saves real authoring time
- You want runnable ground-truth code for a complex 4-5 phase choreography

Blueprints live in `blueprints-index.md`. Each entry points to `blueprints/<id>.md` (recipe). Do not read it speculatively; load it when you've already decided you need scene-level orchestration.

## Routing

The rest: https://github.com/calesthio/OpenMontage/blob/HEAD/.agents/skills/hyperframes-animation/SKILL.md