Hyperframes Animation Skill 安全审计

5152  const modules = {};53  for (const [packageName, entry] of entries) {54    modules[packageName] = await import(pathToFileURL(entry).href);55  }56  return modules;

2627const packages = await importPackagesOrBootstrap(28  ["@hyperframes/producer", "@hyperframes/core", "@hyperframes/core/compiler"],29  {30    npmPackages: [31      hyperframesPackageSpec("@hyperframes/producer"),32      hyperframesPackageSpec("@hyperframes/core"),33    ],34  },35);36const { createFileServer, createCaptureSession, closeCaptureSession, getCompositionDuration } =

3//   • specs are version-pinned (assertPinnedPackageSpecs) — no floating "latest"4//   • install runs `npm install --ignore-scripts` — package lifecycle scripts5//     never execute6//   • `--no-save` into a throwaway tmp dir — the host project is left untouched7//   • requires an interactive y/N (or an explicit $HYPERFRAMES_SKILL_BOOTSTRAP_DEPS=1)8//   • npm is spawned with an argv array (no shell) — never a built command string9// The `installLine` strings below are DISPLAY ONLY (shown in the prompt / error

2122```html23<div id="logo-lottie" class="lottie-layer"></div>24<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>25<script>26  const anim = lottie.loadAnimation({

4748```html49<canvas id="product-lottie" class="lottie-canvas"></canvas>50<script src="https://unpkg.com/@lottiefiles/dotlottie-web"></script>51<script>52  const player = new DotLottie({

2223```html24<canvas id="three-layer"></canvas>25<script type="module">26  import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.181.2/+esm";2728  const canvas = document.getElementById("three-layer");

89When a beat needs a deterministic text animation, load the upstream skill alongside this one:1011```bash12# In your project root, install the upstream skill into .agents/skills/13npx skills add pixel-point/animate-text14```15

3031## When you don't need the upstream skill3233If a beat's text animation is simple enough to describe in prose ("headline fades up word-by-word, 80ms stagger"), implement it inline using the GSAP knowledge already in these skills (`hyperframes-creative` → `references/motion-principles.md` and `references/beat-direction.md`; `hyperframes-animation` → `techniques.md`, entry #4 "Per-Word Kinetic Typography"). The upstream catalog is most valuable when:34

295296async function confirmBootstrap(packageSpecs) {297  if (process.env[BOOTSTRAP_CONFIRM_ENV] === "1") return;298299  const installLine = `npm install --ignore-scripts --no-save ${packageSpecs.map(shellQuote).join(" ")}`;300  if (!process.stdin.isTTY) {301    throw new Error(302      [303        "Required helper package(s) are missing.",304        "To allow a one-time temporary dependency bootstrap for this run, set:",305        `  ${BOOTSTRAP_CONFIRM_ENV}=1`,306        "The bootstrap command will be:",307        `  ${installLine}`,308      ].join("\n"),

365366  const args = [...process.argv.slice(1)];367  const result = spawnSync(process.execPath, args, {368    stdio: "inherit",369    env: {370      ...process.env,371      [BOOTSTRAP_ENV]: "1",372      [NODE_MODULES_ENV]: join(installRoot, "node_modules"),373    },374  });375

341342function bootstrapWithNpmInstall(packageNames) {343  const installRoot = mkdtempSync(join(tmpdir(), "hyperframes-skill-deps-"));344  const installResult = spawnSync(345    process.platform === "win32" ? "npm.cmd" : "npm",346    [347      "install",348      "--silent",349      "--no-audit",350      "--no-fund",351      "--ignore-scripts",352      "--no-save",353      "--prefix",354      installRoot,355      ...packageNames,356    ],357    { stdio: "inherit" },358  );

122123## Shader Transitions124125WebGL shader transitions are provided by `@hyperframes/shader-transitions` (`packages/shader-transitions/`). The package handles setup, capture, WebGL init, render loop, and GSAP integration. Read the package source for available shaders and API — do not copy raw GLSL manually.126127The built-ins are not a ceiling. For an effect no built-in covers, you can write custom GLSL from scratch, adapt shader code found online (ShaderToy, GLSL Sandbox, GitHub), or build a custom CSS transition that fits no existing category — combine clip-path, transforms, and filters in new ways. If the storyboard calls for an effect that doesn't exist yet, build it; the framework renders anything a browser can run.128

297298## 9. GSAP MotionPathPlugin299300Animate an element along an arbitrary SVG path. Use for sliders following curves, particles along trajectories, guided reveals.301

7071```html72<script type="importmap">73  {74    "imports": {75      "three": "https://cdn.jsdelivr.net/npm/three@0.181.2/build/three.module.js",76      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/"77    }78  }79</script>80<script type="module">81  import * as THREE from "three";82  import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";83  import { OrbitControls } from "three/addons/controls/OrbitControls.js";84  // ...85</script>86```

4748    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>49

128129**Load Three.js and post-processing via ESM (use a `type="module"` script):**130131```html132<script type="module">133  import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.181.2/+esm";134  import { EffectComposer } from "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/postprocessing/EffectComposer.js";135  import { RenderPass } from "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/postprocessing/RenderPass.js";136  import { ShaderPass } from "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/postprocessing/ShaderPass.js";137  import { UnrealBloomPass } from "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/postprocessing/UnrealBloomPass.js";138  // ... rest of composition code using these imports139</script>

6162    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>63

154  report.deadZones = findDeadZones(report.density, duration);155  report.snapshots = await captureSnapshots(session, report.tweens, duration);156157  await writeFile(join(OUT_DIR, "animation-map.json"), JSON.stringify(report, null, 2));158

52const FPS = parsedFps.value;53const COMP_DIR = resolve(args.composition);5455await mkdir(OUT_DIR, { recursive: true });56

1516- Initialize WebGPU asynchronously (`await navigator.gpu.requestAdapter()`), but register all GSAP tweens **synchronously** — before any `await`. The HyperFrames player reads the timeline immediately at page load.17- Render from HyperFrames time, not `performance.now()`.18- Listen for the `hf-seek` event and re-render at exactly that time.19- Guard against environments where WebGPU is unavailable — the adapter does not check for you.20- If the composition cannot render without WebGPU, add `data-requires-webgpu` to its composition root. Local capture commands then report an actionable error instead of capturing a no-GPU fallback screen when auto-detection selects software rendering.21- After submitting GPU work, register queue completion synchronously with `e.detail.waitUntil(device.queue.onSubmittedWorkDone())`. HyperFrames awaits registered work before screenshots and frame capture.22

29<script>30  (async () => {31    if (!navigator.gpu) return;32    const adapter = await navigator.gpu.requestAdapter();33    if (!adapter) return;34    const device = await adapter.requestDevice();35    const canvas = document.getElementById("gpu-layer");

122| SIZE_FREQ_MULT       | 1.5–3, non-integer | integer ratios pulse in lock-step with drift = mechanical                |123| CONFIDENCE_MEAN/VAR  | 95–99 / 1–3        | mean ± var ⊂ [95, 99]; < 95 "uncertain", 100 "fake-precise"; 97 is sweet |124| CONFIDENCE_FREQ_MULT | 3–6                | > SIZE_FREQ_MULT — label flickers faster than the box breathes           |125| MASCOT_SIZE          | = rendered size    | mismatch drifts the target out of the box                                |

54- slow continuous zoom into the receipt card (header drifts off top) → `multi-phase-camera` (steady-push phase) or `viewport-change`55- summary card / progress pill / chat bubble / brand logo / file chip spring pop-in → `spring-pop-entrance`56- summary card glides up as the findings panel expands beneath → `gsap-effects` (the glide) + `anchored-layout-expand` (the panel)57- badge flip: numbered outline → solid circle + white checkmark with scale bounce → `scale-swap-transition` (outline↔solid swap at same center) + `svg-path-draw` (checkmark draw-in) + `spring-pop-entrance` (the bounce); the pending→active→complete progression itself → `dynamic-content-sequencing` (a snap state machine, per cursor-ui-demo's workflow-approve-press precedent)58- strikethrough + dim on the checked label → `css-marker-patterns` (strike-through draw) + `gsap-effects` (opacity dim)59- partially-drawn arc outlines animating on pending items → `svg-path-draw` (partial dashoffset, held mid-draw)60- viewport scroll down the final card / internal window scroll under a static frame → `gsap-effects` (transform-only content translate inside a masked window) — use `viewport-change` only if the FRAME moves61- green/red diff counters rapid tick-and-settle → `counting-dynamic-scale` (numeric proxy count-up; suppress the scale-growth component — these tick at fixed size)62- dark thread card scales up from a row to dominate the frame → `card-morph-anchor` (row → full-frame morph + handoff) with the background darkening as a `gsap-effects` overlay fade

130131- **❗ Box recomputed per-frame FROM the target** — one driver computes the target position, then the box derives from it in the same `onUpdate`. Never tween the box's position separately.132- **Corner L-brackets, not a full border** — the genre signature; a full border reads as a generic UI box.133- **Yellow-on-dark** — substituting another hue loses genre legibility.134- **Confidence flickers in a tight band inside [95, 99]**, in a mono font.135- **`pointer-events: none`** on the box — it's a decorative overlay.136

436        <!-- =====================================================437             PHASE 5: BrandShowcase (label + scrolling logos)438             ===================================================== -->439        <div440          id="phase-brands"441          class="brand-strip clip"442          data-start="6.3"443          data-duration="1.7"444          data-track-index="3"445        >

554555      // ── Phase 4b: Press (linear depression → linear return) ────────556      // Two adjacent tweens on .btn-press — end value of (1) = start value of (2).557      tl.to(".btn-press", { scale: 0.95, duration: 0.1, ease: "power1.out" }, PRESS_FRAME);558      tl.to(559        ".btn-press",560        { scale: 1.0, duration: PRESS_DURATION - 0.1, ease: "power1.in" },561        PRESS_FRAME + 0.1,562      );563564      // ── Phase 4c: Color shift + label swap (at press end) ──────────565      tl.to(566        ".btn",567        {568          backgroundColor: "#15803d",569          boxShadow: "0 0 25px rgba(21, 128, 61, 0.68)",570          duration: 0.3,571          ease: "power2.out",572        },573        CHECK_POP,574      );575      tl.set(".btn-label", { textContent: "Approved!" }, CHECK_POP);576      tl.set(".step-3", { attr: { "data-state": "complete" } }, CHECK_POP);577

563564      // ── Phase 4c: Color shift + label swap (at press end) ──────────565      tl.to(566        ".btn",567        {568          backgroundColor: "#15803d",569          boxShadow: "0 0 25px rgba(21, 128, 61, 0.68)",570          duration: 0.3,571          ease: "power2.out",572        },573        CHECK_POP,574      );575      tl.set(".btn-label", { textContent: "Approved!" }, CHECK_POP);576      tl.set(".step-3", { attr: { "data-state": "complete" } }, CHECK_POP);577

368  <body>369    <div370      id="root"371      data-composition-id="interactive-workflow"372      data-start="0"373      data-duration="5.5"374      data-width="1920"375      data-height="1080"376      style="position: relative; width: 1920px; height: 1080px; overflow: hidden"377    >

480481    <script>482      window.__timelines = window.__timelines || {};483      const tl = gsap.timeline({ paused: true });484485      // ── Phase boundaries (seconds) — match the blueprint ────────────486      const HEADLINE_START = 0.17;487      const HEADLINE_END = 0.72;488      const VIDEO_START = 0.5;489      const STEPS_START = 0.67;490      const STEP_STAGGER = 0.5;491      const STEP_ACTIVE_T2 = 2.0; // step 1 → complete, step 2 → active492      const STEP_ACTIVE_T3 = 3.33; // step 2 → complete, step 3 → active493      const BUTTON_ENTER = 3.52; // after "Render to MP4" becomes active494      const PRESS_FRAME = 4.22;495      const PRESS_DURATION = 0.5;496      const CHECK_POP = PRESS_FRAME + PRESS_DURATION;497      const SCENE_END = 5.5; // matches data-duration on the root498