Update to JuicyLucy Ads

{
  "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": 4955
    },
    {
      "relative_path": "adapters/animejs.md",
      "size_in_bytes": 7182
    },
    {
      "relative_path": "adapters/css-animations.md",
      "size_in_bytes": 6335
    },
    {
      "relative_path": "adapters/gsap-easing-and-stagger.md",
      "size_in_bytes": 13625
    },
    {
      "relative_path": "adapters/gsap-timeline-and-labels.md",
      "size_in_bytes": 3791
    },
    {
      "relative_path": "adapters/gsap-transforms-and-perf.md",
      "size_in_bytes": 8842
    },
    {
      "relative_path": "adapters/gsap.md",
      "size_in_bytes": 8071
    },
    {
      "relative_path": "adapters/html-in-canvas-patterns.md",
      "size_in_bytes": 17554
    },
    {
      "relative_path": "adapters/lottie.md",
      "size_in_bytes": 7242
    },
    {
      "relative_path": "adapters/three.md",
      "size_in_bytes": 10740
    },
    {
      "relative_path": "adapters/typegpu.md",
      "size_in_bytes": 9516
    },
    {
      "relative_path": "adapters/waapi.md",
      "size_in_bytes": 5176
    },
    {
      "relative_path": "blueprints-index.md",
      "size_in_bytes": 26697
    },
    {
      "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": 29227
    },
    {
      "relative_path": "blueprints/logo-assemble-lockup.md",
      "size_in_bytes": 26654
    },
    {
      "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": 20656
    },
    {
      "relative_path": "references/motion-blur.md",
      "size_in_bytes": 14579
    },
    {
      "relative_path": "rules-index.md",
      "size_in_bytes": 21970
    },
    {
      "relative_path": "rules/3d-camera-flight.md",
      "size_in_bytes": 18323
    },
    {
      "relative_path": "rules/3d-page-scroll.md",
      "size_in_bytes": 7592
    },
    {
      "relative_path": "rules/3d-text-depth-layers.md",
      "size_in_bytes": 6894
    },
    {
      "relative_path": "rules/ai-tracking-box.md",
      "size_in_bytes": 6748
    },
    {
      "relative_path": "rules/ambient-glow-bloom.md",
      "size_in_bytes": 10026
    },
    {
      "relative_path": "rules/anchored-layout-expand.md",
      "size_in_bytes": 11123
    },
    {
      "relative_path": "rules/asr-keyword-glow.md",
      "size_in_bytes": 7589
    },
    {
      "relative_path": "rules/avatar-cloud-network.md",
      "size_in_bytes": 6764
    },
    {
      "relative_path": "rules/camera-cursor-tracking.md",
      "size_in_bytes": 8097
    },
    {
      "relative_path": "rules/card-morph-anchor.md",
      "size_in_bytes": 7633
    },
    {
      "relative_path": "rules/center-outward-expansion.md",
      "size_in_bytes": 4263
    },
    {
      "relative_path": "rules/chart-scrub-readout.md",
      "size_in_bytes": 10534
    },
    {
      "relative_path": "rules/chromatic-glitch.md",
      "size_in_bytes": 10525
    },
    {
      "relative_path": "rules/context-sensitive-cursor.md",
      "size_in_bytes": 7124
    },
    {
      "relative_path": "rules/control-target-sync.md",
      "size_in_bytes": 10462
    },
    {
      "relative_path": "rules/coordinate-target-zoom.md",
      "size_in_bytes": 7837
    },
    {
      "relative_path": "rules/counting-dynamic-scale.md",
      "size_in_bytes": 6163
    },
    {
      "relative_path": "rules/css-marker-patterns.md",
      "size_in_bytes": 5967
    },
    {
      "relative_path": "rules/cursor-click-ripple.md",
      "size_in_bytes": 6551
    },
    {
      "relative_path": "rules/cursor-drag.md",
      "size_in_bytes": 10401
    },
    {
      "relative_path": "rules/depth-of-field-blur.md",
      "size_in_bytes": 9062
    },
    {
      "relative_path": "rules/depth-scatter-assemble.md",
      "size_in_bytes": 7240
    },
    {
      "relative_path": "rules/discrete-text-sequence.md",
      "size_in_bytes": 6640
    },
    {
      "relative_path": "rules/dynamic-content-sequencing.md",
      "size_in_bytes": 8744
    },
    {
      "relative_path": "rules/gradient-text-sweep.md",
      "size_in_bytes": 9561
    },
    {
      "relative_path": "rules/gsap-effects.md",
      "size_in_bytes": 6912
    },
    {
      "relative_path": "rules/hacker-flip-3d.md",
      "size_in_bytes": 5772
    },
    {
      "relative_path": "rules/kinetic-beat-slam.md",
      "size_in_bytes": 6631
    },
    {
      "relative_path": "rules/motion-blur-streak.md",
      "size_in_bytes": 16516
    },
    {
      "relative_path": "rules/multi-cursor-choreography.md",
      "size_in_bytes": 10706
    },
    {
      "relative_path": "rules/multi-phase-camera.md",
      "size_in_bytes": 7995
    },
    {
      "relative_path": "rules/nudge-curve.md",
      "size_in_bytes": 2689
    },
    {
      "relative_path": "rules/orbit-3d-entry.md",
      "size_in_bytes": 6814
    },
    {
      "relative_path": "rules/particle-burst.md",
      "size_in_bytes": 10142
    },
    {
      "relative_path": "rules/physics-press-reaction.md",
      "size_in_bytes": 6841
    },
    {
      "relative_path": "rules/press-release-spring.md",
      "size_in_bytes": 7195
    },
    {
      "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": 5855
    },
    {
      "relative_path": "rules/spring-pop-entrance.md",
      "size_in_bytes": 6719
    },
    {
      "relative_path": "rules/stat-bars-and-fills.md",
      "size_in_bytes": 5612
    },
    {
      "relative_path": "rules/svg-icon-enrichment.md",
      "size_in_bytes": 7842
    },
    {
      "relative_path": "rules/svg-path-draw.md",
      "size_in_bytes": 5800
    },
    {
      "relative_path": "rules/theme-crossfade-morph.md",
      "size_in_bytes": 9590
    },
    {
      "relative_path": "rules/vertical-spring-ticker.md",
      "size_in_bytes": 5681
    },
    {
      "relative_path": "rules/viewport-change.md",
      "size_in_bytes": 9202
    },
    {
      "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": 23892
    },
    {
      "relative_path": "scripts/package-loader.mjs",
      "size_in_bytes": 14586
    },
    {
      "relative_path": "techniques.md",
      "size_in_bytes": 18048
    },
    {
      "relative_path": "transitions/TRANSITION-REGISTRY.md",
      "size_in_bytes": 8709
    },
    {
      "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 invocations (pointed at the installed launchers, never npm latest), the review-approval reference, the pointer to HyperFrames' own plugin rules, third-party install instructions, references to omitted provider integrations and usage telemetry, unpinned install and HeyGen video instructions, the environment a script passes to its local preview server and the pattern it reads Chrome's local address with, one line break 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\n## Contents\n\n- [Default: compose atomic rules](#default-compose-atomic-rules)\n- [Load a blueprint when](#load-a-blueprint-when)\n- [Routing](#routing)\n- [Picking a runtime](#picking-a-runtime)\n- [Critical Constraints](#critical-constraints)\n- [Scripts](#scripts)\n- [See Also](#see-also)\n- [Reference files](#reference-files)\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` → One paused timeline + Non-negotiable rules** (single paused timeline, `data-duration` governs length, no `Math.random` / `Date.now` / `performance.now`, no `repeat: -1` without a finite root `data-duration`, no page-load `gsap.set` on later-scene clips, no `display` or raw `visibility` tweens, and register the timeline only after it is fully built, including when the build runs inside an async callback such as `document.fonts.ready`). 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\n~/.juicylucy/bin/adsnode <SKILL_DIR>/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` — `~/.juicylucy/bin/hyperframes lint / check / snapshot / preview / render`\n\n## Reference files\n\nRead the matching file directly when its topic applies; the indexes remain available for choosing among recipes.\n\n### Adapters\n\n- [Text Effects — Reference](adapters/animate-text.md) — Read when using this animation runtime or adapter API.\n- [Anime.js for HyperFrames](adapters/animejs.md) — Read when using this animation runtime or adapter API.\n- [CSS Animations for HyperFrames](adapters/css-animations.md) — Read when using this animation runtime or adapter API.\n- [Easing, Stagger, and Function-Based Values](adapters/gsap-easing-and-stagger.md) — Read when using this animation runtime or adapter API.\n- [Timelines and Labels](adapters/gsap-timeline-and-labels.md) — Read when using this animation runtime or adapter API.\n- [Transforms and Performance](adapters/gsap-transforms-and-perf.md) — Read when using this animation runtime or adapter API.\n- [HyperFrames GSAP](adapters/gsap.md) — Read when using this animation runtime or adapter API.\n- [HTML-in-Canvas Patterns](adapters/html-in-canvas-patterns.md) — Read when using this animation runtime or adapter API.\n- [Lottie for HyperFrames](adapters/lottie.md) — Read when using this animation runtime or adapter API.\n- [Three.js for HyperFrames](adapters/three.md) — Read when using this animation runtime or adapter API.\n- [TypeGPU / WebGPU for HyperFrames](adapters/typegpu.md) — Read when using this animation runtime or adapter API.\n- [Web Animations API for HyperFrames](adapters/waapi.md) — Read when using this animation runtime or adapter API.\n\n### Blueprints\n\n- [agent-progress-theater — Agent Progress Theater](blueprints/agent-progress-theater.md) — Read when composing this multi-phase scene.\n- [camera-journey — Camera Journey](blueprints/camera-journey.md) — Read when composing this multi-phase scene.\n- [comparison-split — Comparison Split-Cards](blueprints/comparison-split.md) — Read when composing this multi-phase scene.\n- [constellation-hub — Constellation / Hub + Satellites](blueprints/constellation-hub.md) — Read when composing this multi-phase scene.\n- [cta-morph-press — CTA Morph & Press](blueprints/cta-morph-press.md) — Read when composing this multi-phase scene.\n- [cursor-ui-demo — Cursor-Driven UI Demo](blueprints/cursor-ui-demo.md) — Read when composing this multi-phase scene.\n- [dataviz-countup — Data-Viz / Count-Up](blueprints/dataviz-countup.md) — Read when composing this multi-phase scene.\n- [device-surface-showcase — Device / Surface Showcase](blueprints/device-surface-showcase.md) — Read when composing this multi-phase scene.\n- [fixed-anchor-cycle — Fixed Anchor, Cycling World](blueprints/fixed-anchor-cycle.md) — Read when composing this multi-phase scene.\n- [grid-card-assemble — Grid / Card Assemble](blueprints/grid-card-assemble.md) — Read when composing this multi-phase scene.\n- [kinetic-type-beats — Kinetic-Type Beats](blueprints/kinetic-type-beats.md) — Read when composing this multi-phase scene.\n- [logo-assemble-lockup — Logo Assemble → Lockup](blueprints/logo-assemble-lockup.md) — Read when composing this multi-phase scene.\n- [overwhelm-surround — Overwhelm / Close-In](blueprints/overwhelm-surround.md) — Read when composing this multi-phase scene.\n- [panel-edit-live-sync — Panel Edit, Live Sync](blueprints/panel-edit-live-sync.md) — Read when composing this multi-phase scene.\n- [prompt-type-submit-generate — Prompt, Submit, Generate](blueprints/prompt-type-submit-generate.md) — Read when composing this multi-phase scene.\n- [spatial-pan-stations — Spatial Pan / Stations](blueprints/spatial-pan-stations.md) — Read when composing this multi-phase scene.\n- [ticker-takeover — Ticker Displace / Takeover](blueprints/ticker-takeover.md) — Read when composing this multi-phase scene.\n- [titlecard-reveal — Title-Card / Single-Card Reveal](blueprints/titlecard-reveal.md) — Read when composing this multi-phase scene.\n- [transcript-scroll-artifact-reveal — Transcript-Scroll Artifact Reveal](blueprints/transcript-scroll-artifact-reveal.md) — Read when composing this multi-phase scene.\n- [typewriter-reveal — Typewriter Reveal](blueprints/typewriter-reveal.md) — Read when composing this multi-phase scene.\n- [video-text-pivot — Video → Text Pivot](blueprints/video-text-pivot.md) — Read when composing this multi-phase scene.\n- [zoom-out-workspace-reveal — Zoom-Out Workspace Reveal](blueprints/zoom-out-workspace-reveal.md) — Read when composing this multi-phase scene.\n\n### Guides\n\n- [Blueprints (the proven shapes)](blueprints-index.md) — Read when choosing a scene blueprint.\n- [Rules Index](rules-index.md) — Read when choosing atomic motion rules by trigger or tag.\n- [Visual Techniques Reference](techniques.md) — Read when choosing broader motion-design techniques.\n\n### References\n\n- [Motion blur — shutter smear on any animated element](references/motion-blur.md) — Read when choosing element-level motion blur and its limits.\n\n### Rules\n\n- [3D Camera Flight](rules/3d-camera-flight.md) — Read when applying this atomic motion recipe.\n- [3D Page Scroll](rules/3d-page-scroll.md) — Read when applying this atomic motion recipe.\n- [3D Text Depth Layers](rules/3d-text-depth-layers.md) — Read when applying this atomic motion recipe.\n- [AI Tracking Box](rules/ai-tracking-box.md) — Read when applying this atomic motion recipe.\n- [Ambient Glow Bloom](rules/ambient-glow-bloom.md) — Read when applying this atomic motion recipe.\n- [Anchored Layout Expand](rules/anchored-layout-expand.md) — Read when applying this atomic motion recipe.\n- [ASR Keyword Glow](rules/asr-keyword-glow.md) — Read when applying this atomic motion recipe.\n- [Avatar Cloud Network](rules/avatar-cloud-network.md) — Read when applying this atomic motion recipe.\n- [Two-Phase Camera Cursor Tracking](rules/camera-cursor-tracking.md) — Read when applying this atomic motion recipe.\n- [Card Morph Anchor](rules/card-morph-anchor.md) — Read when applying this atomic motion recipe.\n- [Center-Outward Expansion](rules/center-outward-expansion.md) — Read when applying this atomic motion recipe.\n- [Chart Scrub Readout](rules/chart-scrub-readout.md) — Read when applying this atomic motion recipe.\n- [Chromatic Glitch](rules/chromatic-glitch.md) — Read when applying this atomic motion recipe.\n- [Context-Sensitive Cursor](rules/context-sensitive-cursor.md) — Read when applying this atomic motion recipe.\n- [Control-Target Sync](rules/control-target-sync.md) — Read when applying this atomic motion recipe.\n- [Coordinate Target Zoom](rules/coordinate-target-zoom.md) — Read when applying this atomic motion recipe.\n- [Counting with Dynamic Scale](rules/counting-dynamic-scale.md) — Read when applying this atomic motion recipe.\n- [CSS Patterns for Marker Highlighting](rules/css-marker-patterns.md) — Read when applying this atomic motion recipe.\n- [Cursor Click Ripple](rules/cursor-click-ripple.md) — Read when applying this atomic motion recipe.\n- [Cursor Drag](rules/cursor-drag.md) — Read when applying this atomic motion recipe.\n- [Depth-of-Field Blur (Selective Focus / Rack Focus)](rules/depth-of-field-blur.md) — Read when applying this atomic motion recipe.\n- [Depth Scatter ↔ Assemble](rules/depth-scatter-assemble.md) — Read when applying this atomic motion recipe.\n- [Discrete Text Sequence](rules/discrete-text-sequence.md) — Read when applying this atomic motion recipe.\n- [Dynamic Content Sequencing](rules/dynamic-content-sequencing.md) — Read when applying this atomic motion recipe.\n- [Gradient Text Sweep](rules/gradient-text-sweep.md) — Read when applying this atomic motion recipe.\n- [GSAP Effects for HyperFrames](rules/gsap-effects.md) — Read when applying this atomic motion recipe.\n- [Hacker Flip 3D Reveal](rules/hacker-flip-3d.md) — Read when applying this atomic motion recipe.\n- [Kinetic Beat Slam](rules/kinetic-beat-slam.md) — Read when applying this atomic motion recipe.\n- [Motion-Blur Streak](rules/motion-blur-streak.md) — Read when applying this atomic motion recipe.\n- [Multi-Cursor Choreography](rules/multi-cursor-choreography.md) — Read when applying this atomic motion recipe.\n- [Multi-Phase Camera](rules/multi-phase-camera.md) — Read when applying this atomic motion recipe.\n- [Nudge Curve](rules/nudge-curve.md) — Read when applying this atomic motion recipe.\n- [Orbit with 3D Entry](rules/orbit-3d-entry.md) — Read when applying this atomic motion recipe.\n- [Particle Burst](rules/particle-burst.md) — Read when applying this atomic motion recipe.\n- [Physics Press Reaction (Cursor + Element Synced)](rules/physics-press-reaction.md) — Read when applying this atomic motion recipe.\n- [Press-Release Spring Chain](rules/press-release-spring.md) — Read when applying this atomic motion recipe.\n- [Reactive Displacement](rules/reactive-displacement.md) — Read when applying this atomic motion recipe.\n- [Scale-Swap Transition](rules/scale-swap-transition.md) — Read when applying this atomic motion recipe.\n- [Sine Wave Loop (subtle jitter / bounded ambient)](rules/sine-wave-loop.md) — Read when applying this atomic motion recipe.\n- [Split Tilt Cards](rules/split-tilt-cards.md) — Read when applying this atomic motion recipe.\n- [Spring-Pop Entrance](rules/spring-pop-entrance.md) — Read when applying this atomic motion recipe.\n- [Stat Bars & Fills](rules/stat-bars-and-fills.md) — Read when applying this atomic motion recipe.\n- [SVG Icon Enrichment](rules/svg-icon-enrichment.md) — Read when applying this atomic motion recipe.\n- [SVG Path Draw](rules/svg-path-draw.md) — Read when applying this atomic motion recipe.\n- [Theme Crossfade Morph](rules/theme-crossfade-morph.md) — Read when applying this atomic motion recipe.\n- [Vertical Spring Ticker (Slot Machine)](rules/vertical-spring-ticker.md) — Read when applying this atomic motion recipe.\n- [Viewport Change (Virtual Camera)](rules/viewport-change.md) — Read when applying this atomic motion recipe.\n- [Waterfall Entry](rules/waterfall-entry.md) — Read when applying this atomic motion recipe.\n\n### Transitions\n\n- [Transition Registry — machine source of truth](transitions/TRANSITION-REGISTRY.md) — Read when choosing or implementing this scene transition.\n- [Transition Catalog](transitions/catalog.md) — Read when choosing or implementing this scene transition.\n- [3D](transitions/css-3d.md) — Read when choosing or implementing this scene transition.\n- [Blur](transitions/css-blur.md) — Read when choosing or implementing this scene transition.\n- [Cover](transitions/css-cover.md) — Read when choosing or implementing this scene transition.\n- [Destruction](transitions/css-destruction.md) — Read when choosing or implementing this scene transition.\n- [Dissolve](transitions/css-dissolve.md) — Read when choosing or implementing this scene transition.\n- [Distortion](transitions/css-distortion.md) — Read when choosing or implementing this scene transition.\n- [Grid](transitions/css-grid.md) — Read when choosing or implementing this scene transition.\n- [Light](transitions/css-light.md) — Read when choosing or implementing this scene transition.\n- [Mechanical](transitions/css-mechanical.md) — Read when choosing or implementing this scene transition.\n- [Other](transitions/css-other.md) — Read when choosing or implementing this scene transition.\n- [Linear / Push](transitions/css-push.md) — Read when choosing or implementing this scene transition.\n- [Radial / Shape](transitions/css-radial.md) — Read when choosing or implementing this scene transition.\n- [Scale / Zoom](transitions/css-scale.md) — Read when choosing or implementing this scene transition.\n- [Scene Transitions](transitions/overview.md) — Read when choosing or implementing this scene transition.\n"
}