# Hyperframes Animation > Todo el conocimiento de animación de HyperFrames: reglas de movimiento atómicas, blueprints de escena multifase, transiciones y siete runtimes (GSAP por defecto, más Lottie, Three.js, Anime.js, CSS, WAAPI y TypeGPU). Fuente: https://skillsagentes.com/skills/calesthio/openmontage/hyperframes-animation Markdown: https://skillsagentes.com/skills/calesthio/openmontage/hyperframes-animation.md Repositorio: https://github.com/calesthio/OpenMontage Autor: calesthio Licencia: AGPL-3.0 Actualizado: el mes pasado Coste de contexto: 128 tok instalada, 1.8k tok al activarse, 10018.9k tok con todos los archivos del bundle Bundle: 115 archivos, 38.2 MB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add calesthio/OpenMontage --skill hyperframes-animation --agent claude-code # Cursor npx -y skills add calesthio/OpenMontage --skill hyperframes-animation --agent cursor # Codex npx -y skills add calesthio/OpenMontage --skill hyperframes-animation --agent codex # Gemini CLI npx -y skills add calesthio/OpenMontage --skill hyperframes-animation --agent gemini # Windsurf npx -y skills add calesthio/OpenMontage --skill hyperframes-animation --agent windsurf # Cline npx -y skills add calesthio/OpenMontage --skill hyperframes-animation --agent cline ``` ## Qué hace - Reúne todo el conocimiento de animación de HyperFrames: reglas de movimiento atómicas que se componen de dos en dos o de cuatro en cuatro - Ofrece blueprints de escena multifase ya diseñados, indexados en `blueprints-index.md`, para coreografías de 4 o 5 fases - Cubre transiciones entre escenas y técnicas más amplias de motion design - Documenta siete runtimes: GSAP por defecto, más Lottie, Three.js, Anime.js, keyframes CSS, Web Animations API y TypeGPU - Todo es nativo de HyperFrames: una sola timeline pausada, segura al hacer seek y determinista ## Cuándo usarla - Cualquier tarea de movimiento o animación dentro de HyperFrames - La escena encaja con una plantilla multifase existente y reutilizar su pipeline ahorra trabajo - Hace falta consultar la API de un runtime concreto, como los eases de GSAP o el mixer de Three.js ## Cuándo no - Dirección creativa que no es animación — paleta, tipografía, narración: usa `hyperframes-creative` ## Qué la activa - "Anima esta escena de HyperFrames" - "Necesito una coreografía de revelado de marca" - "¿Qué runtime uso para esta animación?" ## Antes de instalar - No leas los blueprints por adelantado: cárgalos solo cuando ya has decidido que hace falta orquestación a nivel de escena. - Necesita en el PATH: node - Variables de entorno: BOOTSTRAP_CONFIRM_ENV - reads environment config ## Archivos - SKILL.md — 7 KB - adapters/animate-text.md — 4 KB - adapters/animejs.md — 3 KB - adapters/css-animations.md — 4 KB - adapters/gsap-easing-and-stagger.md — 6 KB - adapters/gsap-timeline-and-labels.md — 4 KB - adapters/gsap-transforms-and-perf.md — 4 KB - adapters/gsap.md — 7 KB - adapters/html-in-canvas-patterns.md — 17 KB - adapters/lottie.md — 3 KB - adapters/three.md — 4 KB - adapters/typegpu.md — 7 KB - adapters/waapi.md — 3 KB - blueprints-index.md — 13 KB - blueprints/comparison-split.md — 3 KB - blueprints/constellation-hub.md — 5 KB - blueprints/cta-morph-press.md — 3 KB - blueprints/cursor-ui-demo.md — 9 KB - blueprints/dataviz-countup.md — 9 KB - blueprints/device-surface-showcase.md — 10 KB - blueprints/grid-card-assemble.md — 10 KB - blueprints/kinetic-type-beats.md — 13 KB - blueprints/logo-assemble-lockup.md — 12 KB - blueprints/overwhelm-surround.md — 3 KB - blueprints/spatial-pan-stations.md — 5 KB - blueprints/ticker-takeover.md — 3 KB - blueprints/titlecard-reveal.md — 4 KB - blueprints/typewriter-reveal.md — 6 KB - blueprints/video-text-pivot.md — 3 KB - examples/assets/avatars/01.png — 46 KB - examples/assets/avatars/02.avif — 3 KB - examples/assets/avatars/03.png — 38 KB - examples/assets/avatars/04.webp — 22 KB - examples/assets/avatars/05.webp — 3 KB - examples/assets/avatars/06.webp — 2 KB - examples/assets/avatars/07.webp — 4 KB - examples/assets/avatars/08.webp — 3 KB - examples/assets/avatars/09.jpg — 7 KB - examples/assets/avatars/10.webp — 5 KB - examples/assets/background-tech-data-flow.mp4 — 15.9 MB - examples/assets/brands/github.avif — 2 KB - examples/assets/brands/nvidia.avif — 2 KB - examples/assets/brands/visa.avif — 2 KB - examples/assets/brands/zoominfo.avif — 2 KB - examples/assets/hyperframes-showcase-hypecard.mp4 — 19.8 MB - examples/assets/logo-hyperframes.png — 1.3 MB - examples/brand-reveal-assemble-zoom.html — 12 KB - examples/comparison-split-cards.html — 21 KB - examples/concept-demo-decode-pan.html — 18 KB - examples/cta-morph-press.html — 15 KB - examples/cta-orbit-collapse.html — 49 KB - examples/demo-page-scroll-spotlight.html — 24 KB - examples/hook-counter-burst.html — 22 KB - examples/messaging-multi-phrase.html — 12 KB - examples/metric-video-text-pivot.html — 25 KB - examples/problem-mockup-overwhelm.html — 43 KB - examples/proof-logo-chain.html — 28 KB - examples/takeover-ticker-displace.html — 11 KB - examples/workflow-approve-press.html — 20 KB - rules-index.md — 13 KB - rules/3d-page-scroll.md — 9 KB - rules/3d-text-depth-layers.md — 11 KB - rules/ai-tracking-box.md — 15 KB - rules/ambient-glow-bloom.md — 16 KB - rules/asr-keyword-glow.md — 12 KB - rules/avatar-cloud-network.md — 14 KB - rules/camera-cursor-tracking.md — 12 KB - rules/card-morph-anchor.md — 12 KB - rules/center-outward-expansion.md — 8 KB - rules/context-sensitive-cursor.md — 11 KB - rules/coordinate-target-zoom.md — 15 KB - rules/counting-dynamic-scale.md — 9 KB - rules/css-marker-patterns.md — 8 KB - rules/cursor-click-ripple.md — 11 KB - rules/depth-of-field-blur.md — 16 KB - rules/depth-scatter-assemble.md — 15 KB - rules/discrete-text-sequence.md — 10 KB - rules/dynamic-content-sequencing.md — 12 KB - rules/gsap-effects.md — 9 KB - rules/hacker-flip-3d.md — 10 KB - rules/kinetic-beat-slam.md — 8 KB - rules/motion-blur-streak.md — 18 KB - rules/multi-phase-camera.md — 10 KB - rules/orbit-3d-entry.md — 13 KB - rules/physics-press-reaction.md — 12 KB - rules/press-release-spring.md — 12 KB - rules/reactive-displacement.md — 11 KB - rules/scale-swap-transition.md — 11 KB - rules/sine-wave-loop.md — 14 KB - rules/split-tilt-cards.md — 11 KB - rules/spring-pop-entrance.md — 15 KB - rules/stat-bars-and-fills.md — 6 KB - rules/svg-icon-enrichment.md — 12 KB - rules/svg-path-draw.md — 10 KB - rules/vertical-spring-ticker.md — 10 KB - rules/viewport-change.md — 14 KB - scripts/animation-map.mjs — 19 KB - scripts/package-loader.mjs — 8 KB - techniques.md — 15 KB - transitions/TRANSITION-REGISTRY.md — 8 KB - transitions/catalog.md — 7 KB - transitions/css-3d.md — 421 B - transitions/css-blur.md — 2 KB - transitions/css-cover.md — 1 KB - transitions/css-destruction.md — 4 KB - transitions/css-dissolve.md — 2 KB - transitions/css-distortion.md — 2 KB - transitions/css-grid.md — 370 B - transitions/css-light.md — 2 KB - transitions/css-mechanical.md — 2 KB - transitions/css-other.md — 838 B - transitions/css-push.md — 1 KB - transitions/css-radial.md — 1 KB - transitions/css-scale.md — 715 B - transitions/overview.md — 14 KB ## SKILL.md Reproducido tal cual desde calesthio/OpenMontage bajo AGPL-3.0. Esta sección es el documento original y está en inglés. # 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/.md` (recipe). Do not read it speculatively; load it when you've already decided you need scene-level orchestration. ## Routing | Want to… | Read | | ------------------------------------------------------------------------------ | --------------------------------------------------- | | Pick an atomic motion pattern by trigger / tag | `rules-index.md` | | Read one rule's full HTML / CSS / GSAP recipe | `rules/.md` | | Pick a multi-phase scene template | `blueprints-index.md` | | Read one blueprint's full recipe | `blueprints/.md` | | Author a scene transition (CSS-driven, between two clips) | `transitions/overview.md`, `transitions/catalog.md` | | Look up a broader motion-design technique | `techniques.md` | | Analyze an existing composition's animation map | `scripts/animation-map.mjs` | | GSAP API — timeline / tweens / position parameters | `adapters/gsap.md` | | GSAP — drop-in effect recipes | `rules/gsap-effects.md` | | GSAP — transforms / perf | `adapters/gsap-transforms-and-perf.md` | | GSAP — eases / stagger | `adapters/gsap-easing-and-stagger.md` | | GSAP — timeline / labels | `adapters/gsap-timeline-and-labels.md` | | Lottie / dotLottie (After Effects exports, `window.__hfLottie`) | `adapters/lottie.md` | | Three.js / WebGL (3D scenes, `AnimationMixer`, `hf-seek`) | `adapters/three.md` | | Anime.js (`window.__hfAnime`) | `adapters/animejs.md` | | CSS keyframes (`animation-delay` / `play-state` / `fill-mode`) | `adapters/css-animations.md` | | Web Animations API (`element.animate()`, `currentTime` seek) | `adapters/waapi.md` | | TypeGPU / WebGPU (`navigator.gpu`, WGSL, compute pipelines) | `adapters/typegpu.md` | | HTML-as-texture + WebGL/GLSL post-fx (capture live DOM via `drawElementImage`) | `adapters/html-in-canvas-patterns.md` | | Named text-animation effects (24 IDs via external `animate-text` skill) | `adapters/animate-text.md` | ## Picking a runtime - **GSAP** is the default for 95% of motion work — covers timeline orchestration, transforms, easing, stagger. All atomic rules in this skill are GSAP-based. - **Lottie** when an asset has its own pre-baked timeline (typically After Effects exports). - **Three.js** for 3D scenes, camera motion, shader-driven visuals. - **Anime.js** for lightweight tweening when GSAP is overkill. - **CSS** for simple repeated motifs, decoration, shimmer — no JavaScript animation cost. - **WAAPI** for native browser keyframes without a GSAP dependency. - **TypeGPU / WebGPU** for GPU-rendered canvases (particles, liquid glass, custom shaders). Multiple runtimes can coexist in one composition. Each registers its instances on the runtime-specific global so HyperFrames can seek all of them in one pass. ## Critical Constraints **Prerequisite: `hyperframes-core` → Non-Negotiable Rules** (single paused timeline, `data-duration` governs length, no `Math.random` / `Date.now` / `performance.now`, no `repeat: -1`, no `gsap.set` on later-scene clips, no `display` / `visibility` animation, no timeline construction inside `async` / `setTimeout` / `Promise`). Don't restate those here. Animation-craft additions on top of core's contract: - **Pre-calculated layout constants** — never derive positions from `getBoundingClientRect()` at tween time. Tween-time DOM measurements desync because the renderer samples in parallel; compute coordinates once at composition setup and reuse. - **Spatial motion uses GSAP transform aliases only** (`x`, `y`, `scale`, `rotation`). Core's allowlist also permits `opacity` / `color` / `backgroundColor` / `borderRadius` for non-spatial property tweens — but never `width` / `height` / `top` / `left` for layout changes. ## Scripts ```bash node skills/hyperframes-animation/scripts/animation-map.mjs \ --out /.hyperframes/anim-map ``` Reads every GSAP timeline registered on `window.__timelines`, enumerates tweens, samples bboxes, computes flags, outputs `animation-map.json`. Use it to audit choreography (dead zones, stagger consistency, lifecycle warnings) after authoring. ## See Also - `hyperframes-core` — composition structure, data attributes, sub-compositions, deterministic render contract - `hyperframes-creative` — palettes, typography, narration, beat planning (non-animation creative direction) - `hyperframes-cli` — `npx hyperframes lint / validate / inspect / preview / render` ## Dónde encaja - Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual. - Creador: [calesthio](https://skillsagentes.com/creators/calesthio.md) — 0 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Seedance 2 5](https://skillsagentes.com/skills/calesthio/openmontage/seedance-2-5.md): Genera vídeo cinematográfico de 4-30 s con ByteDance Seedance 2.5 por fal.ai, Volcengine Ark, Runway o ComfyUI. Cubre el contrato de prompt 2.5, cortes duros, locks de continuidad y voz. - [Comfyui](https://skillsagentes.com/skills/calesthio/openmontage/comfyui.md): Úsalo al trabajar con workflows de ComfyUI en OpenMontage: comfyui_image/video/music, workflows propios, selección de output_node, modelos que faltan, LoRAs, poca VRAM e importación de workflows de la comunidad. - [Fish Audio Tts](https://skillsagentes.com/skills/calesthio/openmontage/fish-audio-tts.md): Genera narración expresiva y multilingüe con fish.audio (modelos S1 / S2) y reutiliza voces clonadas mediante reference_id. - [Minimax H3](https://skillsagentes.com/skills/calesthio/openmontage/minimax-h3.md): Genera vídeo con MiniMax H3 (Hailuo 3.0) por la API oficial v2, fal.ai, Runway, nodos partner de ComfyUI o pesos abiertos locales. Clips de 4-15s a 2K con animación de primer/último fotograma. - [Gemini Omni](https://skillsagentes.com/skills/calesthio/openmontage/gemini-omni.md): Genera y edita conversacionalmente vídeos cortos con Google Gemini Omni Flash: itera con ediciones en lenguaje natural, clips de 3-10s a 720p con audio y texto en pantalla, e imágenes de referencia por etiquetas. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)