{"id":20874,"plugin_id":"plugins_6aa93d4d067c8191bdd2a1969bee8916","kind":"skill","collection_source":null,"comparison_source":null,"observed_at":"2026-09-30T23:16:37.872Z","digest":"d989452b26021c064315ec4c398a95658e937fff41b44253b89d535fe7565658","against":null,"payload":{"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). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.","included_files":[{"relative_path":"adapters/animate-text.md","size_in_bytes":4069},{"relative_path":"adapters/animejs.md","size_in_bytes":6444},{"relative_path":"adapters/css-animations.md","size_in_bytes":5623},{"relative_path":"adapters/gsap-easing-and-stagger.md","size_in_bytes":13270},{"relative_path":"adapters/gsap-timeline-and-labels.md","size_in_bytes":3734},{"relative_path":"adapters/gsap-transforms-and-perf.md","size_in_bytes":8552},{"relative_path":"adapters/gsap.md","size_in_bytes":7504},{"relative_path":"adapters/html-in-canvas-patterns.md","size_in_bytes":17166},{"relative_path":"adapters/lottie.md","size_in_bytes":6397},{"relative_path":"adapters/three.md","size_in_bytes":6689},{"relative_path":"adapters/typegpu.md","size_in_bytes":8324},{"relative_path":"adapters/waapi.md","size_in_bytes":4464},{"relative_path":"blueprints-index.md","size_in_bytes":26512},{"relative_path":"blueprints/agent-progress-theater.md","size_in_bytes":16091},{"relative_path":"blueprints/camera-journey.md","size_in_bytes":13648},{"relative_path":"blueprints/comparison-split.md","size_in_bytes":3316},{"relative_path":"blueprints/constellation-hub.md","size_in_bytes":7144},{"relative_path":"blueprints/cta-morph-press.md","size_in_bytes":6407},{"relative_path":"blueprints/cursor-ui-demo.md","size_in_bytes":20276},{"relative_path":"blueprints/dataviz-countup.md","size_in_bytes":14611},{"relative_path":"blueprints/device-surface-showcase.md","size_in_bytes":17151},{"relative_path":"blueprints/fixed-anchor-cycle.md","size_in_bytes":9089},{"relative_path":"blueprints/grid-card-assemble.md","size_in_bytes":15594},{"relative_path":"blueprints/kinetic-type-beats.md","size_in_bytes":29151},{"relative_path":"blueprints/logo-assemble-lockup.md","size_in_bytes":26609},{"relative_path":"blueprints/overwhelm-surround.md","size_in_bytes":6140},{"relative_path":"blueprints/panel-edit-live-sync.md","size_in_bytes":13394},{"relative_path":"blueprints/prompt-type-submit-generate.md","size_in_bytes":18636},{"relative_path":"blueprints/spatial-pan-stations.md","size_in_bytes":4868},{"relative_path":"blueprints/ticker-takeover.md","size_in_bytes":3052},{"relative_path":"blueprints/titlecard-reveal.md","size_in_bytes":7441},{"relative_path":"blueprints/transcript-scroll-artifact-reveal.md","size_in_bytes":11666},{"relative_path":"blueprints/typewriter-reveal.md","size_in_bytes":6276},{"relative_path":"blueprints/video-text-pivot.md","size_in_bytes":3281},{"relative_path":"blueprints/zoom-out-workspace-reveal.md","size_in_bytes":14714},{"relative_path":"examples/brand-reveal-assemble-zoom.html","size_in_bytes":12285},{"relative_path":"examples/comparison-split-cards.html","size_in_bytes":21754},{"relative_path":"examples/concept-demo-decode-pan.html","size_in_bytes":18382},{"relative_path":"examples/cta-morph-press.html","size_in_bytes":15192},{"relative_path":"examples/cta-orbit-collapse.html","size_in_bytes":50646},{"relative_path":"examples/demo-page-scroll-spotlight.html","size_in_bytes":25019},{"relative_path":"examples/hook-counter-burst.html","size_in_bytes":23004},{"relative_path":"examples/messaging-multi-phrase.html","size_in_bytes":12223},{"relative_path":"examples/metric-video-text-pivot.html","size_in_bytes":25640},{"relative_path":"examples/problem-mockup-overwhelm.html","size_in_bytes":44482},{"relative_path":"examples/proof-logo-chain.html","size_in_bytes":28911},{"relative_path":"examples/takeover-ticker-displace.html","size_in_bytes":10947},{"relative_path":"examples/workflow-approve-press.html","size_in_bytes":20674},{"relative_path":"references/motion-blur.md","size_in_bytes":12792},{"relative_path":"rules-index.md","size_in_bytes":21204},{"relative_path":"rules/3d-camera-flight.md","size_in_bytes":18137},{"relative_path":"rules/3d-page-scroll.md","size_in_bytes":7406},{"relative_path":"rules/3d-text-depth-layers.md","size_in_bytes":6708},{"relative_path":"rules/ai-tracking-box.md","size_in_bytes":6562},{"relative_path":"rules/ambient-glow-bloom.md","size_in_bytes":9840},{"relative_path":"rules/anchored-layout-expand.md","size_in_bytes":10313},{"relative_path":"rules/asr-keyword-glow.md","size_in_bytes":6762},{"relative_path":"rules/avatar-cloud-network.md","size_in_bytes":6578},{"relative_path":"rules/camera-cursor-tracking.md","size_in_bytes":7911},{"relative_path":"rules/card-morph-anchor.md","size_in_bytes":7411},{"relative_path":"rules/center-outward-expansion.md","size_in_bytes":4263},{"relative_path":"rules/chart-scrub-readout.md","size_in_bytes":10348},{"relative_path":"rules/chromatic-glitch.md","size_in_bytes":10339},{"relative_path":"rules/context-sensitive-cursor.md","size_in_bytes":6938},{"relative_path":"rules/control-target-sync.md","size_in_bytes":10276},{"relative_path":"rules/coordinate-target-zoom.md","size_in_bytes":7607},{"relative_path":"rules/counting-dynamic-scale.md","size_in_bytes":5977},{"relative_path":"rules/css-marker-patterns.md","size_in_bytes":5702},{"relative_path":"rules/cursor-click-ripple.md","size_in_bytes":6397},{"relative_path":"rules/cursor-drag.md","size_in_bytes":10215},{"relative_path":"rules/depth-of-field-blur.md","size_in_bytes":8876},{"relative_path":"rules/depth-scatter-assemble.md","size_in_bytes":7054},{"relative_path":"rules/discrete-text-sequence.md","size_in_bytes":6454},{"relative_path":"rules/dynamic-content-sequencing.md","size_in_bytes":8558},{"relative_path":"rules/gradient-text-sweep.md","size_in_bytes":8751},{"relative_path":"rules/gsap-effects.md","size_in_bytes":6912},{"relative_path":"rules/hacker-flip-3d.md","size_in_bytes":5586},{"relative_path":"rules/kinetic-beat-slam.md","size_in_bytes":6445},{"relative_path":"rules/motion-blur-streak.md","size_in_bytes":10616},{"relative_path":"rules/multi-cursor-choreography.md","size_in_bytes":10520},{"relative_path":"rules/multi-phase-camera.md","size_in_bytes":7773},{"relative_path":"rules/nudge-curve.md","size_in_bytes":2689},{"relative_path":"rules/orbit-3d-entry.md","size_in_bytes":6628},{"relative_path":"rules/particle-burst.md","size_in_bytes":9956},{"relative_path":"rules/physics-press-reaction.md","size_in_bytes":6687},{"relative_path":"rules/press-release-spring.md","size_in_bytes":7041},{"relative_path":"rules/reactive-displacement.md","size_in_bytes":6539},{"relative_path":"rules/scale-swap-transition.md","size_in_bytes":5517},{"relative_path":"rules/sine-wave-loop.md","size_in_bytes":6163},{"relative_path":"rules/split-tilt-cards.md","size_in_bytes":5669},{"relative_path":"rules/spring-pop-entrance.md","size_in_bytes":6533},{"relative_path":"rules/stat-bars-and-fills.md","size_in_bytes":5486},{"relative_path":"rules/svg-icon-enrichment.md","size_in_bytes":7621},{"relative_path":"rules/svg-path-draw.md","size_in_bytes":5646},{"relative_path":"rules/theme-crossfade-morph.md","size_in_bytes":9404},{"relative_path":"rules/vertical-spring-ticker.md","size_in_bytes":5495},{"relative_path":"rules/viewport-change.md","size_in_bytes":8974},{"relative_path":"rules/waterfall-entry.md","size_in_bytes":4582},{"relative_path":"scripts/animation-map-sampling.mjs","size_in_bytes":1400},{"relative_path":"scripts/animation-map.mjs","size_in_bytes":23340},{"relative_path":"scripts/package-loader.mjs","size_in_bytes":14451},{"relative_path":"techniques.md","size_in_bytes":16047},{"relative_path":"transitions/TRANSITION-REGISTRY.md","size_in_bytes":8171},{"relative_path":"transitions/catalog.md","size_in_bytes":6679},{"relative_path":"transitions/css-3d.md","size_in_bytes":421},{"relative_path":"transitions/css-blur.md","size_in_bytes":1787},{"relative_path":"transitions/css-cover.md","size_in_bytes":1448},{"relative_path":"transitions/css-destruction.md","size_in_bytes":4484},{"relative_path":"transitions/css-dissolve.md","size_in_bytes":2462},{"relative_path":"transitions/css-distortion.md","size_in_bytes":1803},{"relative_path":"transitions/css-grid.md","size_in_bytes":370},{"relative_path":"transitions/css-light.md","size_in_bytes":2376},{"relative_path":"transitions/css-mechanical.md","size_in_bytes":1613},{"relative_path":"transitions/css-other.md","size_in_bytes":838},{"relative_path":"transitions/css-push.md","size_in_bytes":1243},{"relative_path":"transitions/css-radial.md","size_in_bytes":1060},{"relative_path":"transitions/css-scale.md","size_in_bytes":715},{"relative_path":"transitions/overview.md","size_in_bytes":13857}],"name":"hyperframes-animation","skill_md_contents":"---\nname: hyperframes-animation\ndescription: \"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). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.\"\n---\n\n> Modified by Juicy Lucy AI, UAB for JuicyLucy Ads: CLI invocation, the review-approval reference and/or frontmatter (description layout, upstream-only metadata) adjusted at build time. See the plugin root NOTICE for details.\n\n\n# HyperFrames Animation\n\nAll 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).\n\nFor the composition contract (data attributes, sub-compositions, determinism) see `hyperframes-core`.\n\n## Default: compose atomic rules\n\nPick 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.\n\n## Load a blueprint when\n\n- The scene matches an existing pre-designed multi-phase template (brand-reveal, social-proof, etc.) and reusing its phase pipeline saves real authoring time\n- You want runnable ground-truth code for a complex 4-5 phase choreography\n\nBlueprints 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.\n\n## Routing\n\n| Want to…                                                                       | Read                                                |\n| ------------------------------------------------------------------------------ | --------------------------------------------------- |\n| Pick an atomic motion pattern by trigger / tag                                 | `rules-index.md`                                    |\n| Read one rule's full HTML / CSS / GSAP recipe                                  | `rules/<name>.md`                                   |\n| Pick a multi-phase scene template                                              | `blueprints-index.md`                               |\n| Read one blueprint's full recipe                                               | `blueprints/<id>.md`                                |\n| Author a scene transition (CSS-driven, between two clips)                      | `transitions/overview.md`, `transitions/catalog.md` |\n| Look up a broader motion-design technique                                      | `techniques.md`                                     |\n| Motion blur — shutter smear on an element, and when not to use it              | `references/motion-blur.md`                         |\n| Analyze an existing composition's animation map                                | `scripts/animation-map.mjs`                         |\n| GSAP API — timeline / tweens / position parameters                             | `adapters/gsap.md`                                  |\n| GSAP — drop-in effect recipes                                                  | `rules/gsap-effects.md`                             |\n| GSAP — transforms / perf                                                       | `adapters/gsap-transforms-and-perf.md`              |\n| GSAP — eases / stagger                                                         | `adapters/gsap-easing-and-stagger.md`               |\n| GSAP — timeline / labels                                                       | `adapters/gsap-timeline-and-labels.md`              |\n| Lottie / dotLottie (After Effects exports, `window.__hfLottie`)                | `adapters/lottie.md`                                |\n| Character animation (walk cycle, mascot, jointed puppet, gestures)             | `adapters/lottie.md` → Characters                   |\n| Three.js / WebGL (3D scenes, `AnimationMixer`, `hf-seek`)                      | `adapters/three.md`                                 |\n| Anime.js (`window.__hfAnime`)                                                  | `adapters/animejs.md`                               |\n| CSS keyframes (`animation-delay` / `play-state` / `fill-mode`)                 | `adapters/css-animations.md`                        |\n| Web Animations API (`element.animate()`, `currentTime` seek)                   | `adapters/waapi.md`                                 |\n| TypeGPU / WebGPU (`navigator.gpu`, WGSL, compute pipelines)                    | `adapters/typegpu.md`                               |\n| HTML-as-texture + WebGL/GLSL post-fx (capture live DOM via `drawElementImage`) | `adapters/html-in-canvas-patterns.md`               |\n| Named text-animation effects (24 IDs via external `animate-text` skill)        | `adapters/animate-text.md`                          |\n\n## Picking a runtime\n\n- **GSAP** is the default for 95% of motion work — covers timeline orchestration, transforms, easing, stagger. All atomic rules in this skill are GSAP-based.\n- **Lottie** when an asset has its own pre-baked timeline (typically After Effects exports), including characters that walk, gesture or react.\n- **Three.js** for 3D scenes, camera motion, shader-driven visuals.\n- **Anime.js** for lightweight tweening when GSAP is overkill.\n- **CSS** for simple repeated motifs, decoration, shimmer — no JavaScript animation cost.\n- **WAAPI** for native browser keyframes without a GSAP dependency.\n- **TypeGPU / WebGPU** for GPU-rendered canvases (particles, liquid glass, custom shaders).\n\nMultiple 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.\n\n## Critical Constraints\n\n**Prerequisite: `hyperframes-core` → Non-Negotiable Rules** (single paused timeline, `data-duration` governs length, no `Math.random` / `Date.now` / `performance.now`, no `repeat: -1`, no page-load `gsap.set` on later-scene clips, no `display` or raw `visibility` tweens, and no timeline construction inside `async` / `setTimeout` / `Promise`). GSAP `autoAlpha` and zero-duration visibility sets at explicit timeline boundaries remain allowed by core. Use those exceptions only on non-clip elements or wrappers inside a clip; the framework owns `.clip` lifecycle. Don't restate the full contract here.\n\nAnimation-craft additions on top of core's contract:\n\n- **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.\n- **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.\n\n## Scripts\n\n```bash\nnode skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> \\\n  --out <composition-dir>/.hyperframes/anim-map\n```\n\nReads 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.\n\n`animation-map.mjs` resolves helper packages from the current project first, then can bootstrap the bundled HyperFrames package version. Set `HYPERFRAMES_SKILL_PKG_VERSION=<version>` only when running the skill outside the bundled CLI/skill install and you need to pin that bootstrap version explicitly.\n\n## See Also\n\n- `hyperframes-core` — composition structure, data attributes, sub-compositions, deterministic render contract\n- `hyperframes-creative` — palettes, typography, narration, beat planning (non-animation creative direction)\n- `hyperframes-cli` — `hyperframes lint / check / snapshot / preview / render`\n"},"changes":[],"summary":"First saved snapshot. No earlier version is available for comparison.","summary_kind":"deterministic","summary_metadata":{}}