Skip to content
skillsafebeta
← Report library
Purpose / Other

Hyperframes Animation Skill Security Audit

What the author says it does (original text)

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

Independent security check

Security risks found

This check is incomplete. Only available results are shown below.

Files checked
121
Risks found
15
Could it run dangerous commands?Looks for programs run straight after downloading, remote control of your computer, and hidden commands.Risks found: 8
Medium risk

The audit helper can install and then execute missing npm dependencies

Source references: 4
What we found

When HyperFrames packages cannot be resolved, the loader requests confirmation, invokes npm installation, and dynamically imports the resolved modules. Disabling lifecycle scripts does not prevent top-level JavaScript from running when a dependency is imported.

Why this matters

A compromised, hijacked, or unintended dependency version could read accessible files, use environment credentials, or modify files with the user's privileges.

This is active loader behavior: when packages are missing it validates specs, requests confirmation, and invokes npm bootstrapping; resolved modules are then dynamically imported. Disabling install scripts blocks npm lifecycle hooks, but not top-level JavaScript executed on import. The condition is missing dependencies plus confirmation or an explicit auto-confirm setting. Users can restrict network access, preinstall reviewed locked versions, or request the complete bootstrap implementation.

scripts/package-loader.mjs:35In the codeOpen original file
  if (missing.length > 0 && !process.env[BOOTSTRAP_ENV]) {    const npmPackages = options.npmPackages ?? missing;    assertPinnedPackageSpecs(npmPackages);    await confirmBootstrap(npmPackages);    bootstrapWithNpmInstall(npmPackages);  }
Show 3 other places
scripts/package-loader.mjs:52In the codeOpen original file
  const modules = {};  for (const [packageName, entry] of entries) {    modules[packageName] = await import(pathToFileURL(entry).href);  }  return modules;
scripts/animation-map.mjs:27In the codeOpen original file
const packages = await importPackagesOrBootstrap(  ["@hyperframes/producer", "@hyperframes/core", "@hyperframes/core/compiler"],  {    npmPackages: [      hyperframesPackageSpec("@hyperframes/producer"),      hyperframesPackageSpec("@hyperframes/core"),    ],  },);const { createFileServer, createCaptureSession, closeCaptureSession, getCompositionDuration } =
scripts/package-loader.mjs:4In the codeOpen original file
//   • specs are version-pinned (assertPinnedPackageSpecs) — no floating "latest"//   • install runs `npm install --ignore-scripts` — package lifecycle scripts//     never execute//   • `--no-save` into a throwaway tmp dir — the host project is left untouched//   • requires an interactive y/N (or an explicit $HYPERFRAMES_SKILL_BOOTSTRAP_DEPS=1)//   • npm is spawned with an argv array (no shell) — never a built command string// The `installLine` strings below are DISPLAY ONLY (shown in the prompt / error
Medium risk

Generated composition templates execute JavaScript from third-party CDNs

Source references: 4
What we found

Several adapters and examples load code directly from jsDelivr, cdnjs, and unpkg through script tags or module imports, with no subresource-integrity checks shown. The dotLottie URL is not versioned at all.

Why this matters

If a CDN, package, or delivery path is compromised, remote code executes in the composition's browser context. Requests also expose metadata to the CDN and make offline builds less reproducible.

These are executable composition templates, not code loaded immediately by the Skill itself. If adopted, the browser executes third-party JavaScript from jsDelivr, cdnjs, or unpkg; the shown tags have no SRI, and the dotLottie URL is unversioned. CDN contents or version resolution could therefore change what runs. Users can require local vendoring, exact versions with hash verification, and a rendering browser isolated from credentials and unnecessary network access.

adapters/animejs.md:26In the instructionsOpen original file
```html<!-- UMD: the global `anime` is a NAMESPACE OBJECT, not a function --><script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>```
Show 3 other places
adapters/lottie.md:22In the instructionsOpen original file
```html<div id="logo-lottie" class="lottie-layer"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script><script>  const anim = lottie.loadAnimation({
adapters/lottie.md:48In the instructionsOpen original file
```html<canvas id="product-lottie" class="lottie-canvas"></canvas><script src="https://unpkg.com/@lottiefiles/dotlottie-web"></script><script>  const player = new DotLottie({
adapters/three.md:23In the instructionsOpen original file
```html<canvas id="three-layer"></canvas><script type="module">  import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.181.2/+esm";  const canvas = document.getElementById("three-layer");
Medium risk

The text-effect workflow asks users to install another repository through npx

Source references: 3
What we found

The adapter designates Pixel Point's external repository as the implementation source and supplies an `npx skills add` command. This executes an npx tool and installs external content into the project's `.agents/skills` directory.

Why this matters

If the npx package, external repository, or a later update is compromised, the install process or the new Skill's instructions could cause unauthorized actions in later agent sessions. It also makes persistent project-file changes.

The risk is conditional on using named effects from the external catalog; the document says that catalog is not shipped here and instructs running an unpinned `npx skills add` from the project root. This causes the npx tool to obtain an external Skill and add content under `.agents/skills`, although the supplied source does not show the tool's full write or execution behavior. Users can review and pin a repository commit, install in an isolated project, or use the documented inline approach for simple effects.

adapters/animate-text.md:3In the instructionsOpen original file
For deterministic text-animation specs (e.g., `typewriter` at exact `240ms / 46ms stagger / steps(1, end) easing`), this skill defers to the separate **`animate-text`** skill maintained by Pixel Point at [github.com/pixel-point/animate-text](https://github.com/pixel-point/animate-text). It provides a catalog of 24 named text effects with portable contracts and per-library implementation recipes (GSAP, Anime.js, WAAPI).**We do NOT ship the catalog inside this repo.** Pixel Point's `animate-text` is the source of truth; vendoring its files here would violate the upstream's licensing (no explicit license declared upstream as of this writing). Loading the skill separately keeps the legal picture clean while giving you the same catalog.
Show 2 other places
adapters/animate-text.md:9In the instructionsOpen original file
When a beat needs a deterministic text animation, load the upstream skill alongside this one:```bash# In your project root, install the upstream skill into .agents/skills/npx skills add pixel-point/animate-text```
adapters/animate-text.md:31In the instructionsOpen original file
## When you don't need the upstream skillIf 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:
Medium risk

A mutable npm “latest” version is installed when the bundled version cannot be determined

Source references: 4
What we found

For global installs where no bundled version is found, the loader changes the dependency specification to `@latest`. After user confirmation or an environment-variable override, npm retrieves whatever release is latest at that time. `--ignore-scripts` blocks install scripts, but the helper is then rerun using the installed modules.

Why this matters

The same Skill may execute different third-party package code over time. A compromised, faulty, or incompatible latest release could access files, environment variables, or networks available to the process, or produce incorrect analysis results.

The source supports this risk, but only when dependencies are missing and the bundled version cannot be determined: the loader selects the time-varying `@latest`. Interactive runs require explicit consent; non-interactive runs refuse unless the confirmation environment variable was set beforehand. It then runs npm install in a temporary directory with lifecycle scripts disabled, but re-runs the helper using the downloaded modules. Thus, unpinned supply-chain code may execute. A user can ask for an always-pinned version and restrict network access or avoid the automatic-confirmation variable.

scripts/package-loader.mjs:148In the codeOpen original file
  // Global skill installs have no hyperframes package.json  // in their ancestor chain, so the bundled version is unknowable. Fall back to  // @latest instead of throwing: already-installed packages still import, and a  // bootstrap install can still proceed (@latest satisfies the pinned-spec guard).  process.stderr.write(    [      `hyperframes: could not determine the bundled version for ${packageName}; using @latest.`,      `Set ${VERSION_OVERRIDE_ENV}=<version> to pin it.`,      "",    ].join("\n"),  );  return `${packageName}@latest`;}
Show 3 other places
scripts/package-loader.mjs:296In the codeOpen original file
async function confirmBootstrap(packageSpecs) {  if (process.env[BOOTSTRAP_CONFIRM_ENV] === "1") return;  const installLine = `npm install --ignore-scripts --no-save ${packageSpecs.map(shellQuote).join(" ")}`;  if (!process.stdin.isTTY) {    throw new Error(      [        "Required helper package(s) are missing.",        "To allow a one-time temporary dependency bootstrap for this run, set:",        `  ${BOOTSTRAP_CONFIRM_ENV}=1`,        "The bootstrap command will be:",        `  ${installLine}`,      ].join("\n"),
scripts/package-loader.mjs:366In the codeOpen original file
  const args = [...process.argv.slice(1)];  const result = spawnSync(process.execPath, args, {    stdio: "inherit",    env: {      ...process.env,      [BOOTSTRAP_ENV]: "1",      [NODE_MODULES_ENV]: join(installRoot, "node_modules"),    },  });
scripts/package-loader.mjs:342In the codeOpen original file
function bootstrapWithNpmInstall(packageNames) {  const installRoot = mkdtempSync(join(tmpdir(), "hyperframes-skill-deps-"));  const installResult = spawnSync(    process.platform === "win32" ? "npm.cmd" : "npm",    [      "install",      "--silent",      "--no-audit",      "--no-fund",      "--ignore-scripts",      "--no-save",      "--prefix",      installRoot,      ...packageNames,    ],    { stdio: "inherit" },  );
Medium risk

An example executes JavaScript from a third-party CDN

Source references: 1
What we found

The Lottie example loads and executes bodymovin directly from cdnjs. The response runs in the composition page's browser context, while the request exposes connection metadata to the CDN; a fixed version number does not mean the downloaded bytes were reviewed by the user.

Why this matters

If the CDN, delivery path, or referenced package is compromised, the code could read or modify composition content accessible to the page and potentially make further network requests.

This is runnable HTML, not merely a documentation link: it fetches and executes a pinned Lottie script from cdnjs. If the example is used with network access, the CDN receives connection metadata and the browser trusts the returned code; pinning reduces version drift but no integrity check is shown. Users can ask for a local dependency or an SRI-pinned resource and restrict network access while rendering.

techniques.md:180In the instructionsOpen original file
```html<div id="logo-anim" class="lottie" style="width:500px;height:500px;"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script><script>  window.__hfLottie = window.__hfLottie || [];  const anim = lottie.loadAnimation({    container: document.getElementById("logo-anim"),    renderer: "svg",    loop: false,    autoplay: false,    path: "../capture/assets/lottie/animation-0.json",  });  window.__hfLottie.push(anim); // REQUIRED — adapter seeks every registered instance
Medium risk

The validation step uses npx, which can download and execute a package

Source references: 1
What we found

The Skill instructs running `npx hyperframes`. If no trusted pinned local version exists, npx may resolve, download, and execute a package from the configured registry; what runs depends on project dependencies, the lockfile, registry, and npx configuration.

Why this matters

A substituted or unexpectedly resolved package would execute with the invoking user's permissions and could access workspace files, environment variables, or available credentials.

The validation instructions explicitly run two `npx hyperframes` commands. If a trusted, locked CLI is not already installed, npx may resolve, download, and execute a package according to local registry configuration; these lines neither pin a version nor require offline operation. The risk depends on the lockfile, registry, and npx settings. Users can ask for a verified version and run an audited local CLI in an isolated, network-restricted environment.

adapters/animejs.md:117In the instructionsOpen original file
## ValidationAfter editing a composition that uses Anime.js:```bashnpx hyperframes lintnpx hyperframes validate```
Medium risk

The Skill encourages copying shader code from arbitrary online sources

Source references: 2
What we found

The guidance permits copying fragment shaders from ShaderToy, CodePen, or “anywhere else,” and adapting GLSL found online. Although shaders are normally constrained by the graphics API, unreviewed loops, sampling, or expensive computations can still exhaust browser or GPU resources.

Why this matters

A malicious or faulty shader could crash or stall previews and headless renders, lose unsaved work, or make a shared rendering machine unavailable for an extended period.

The guide actively recommends finding and copying GLSL from ShaderToy, CodePen, or “anywhere else,” then wiring it into a running WebGL/GSAP pipeline. Shaders generally cannot directly read files or credentials, but hostile or poor code can consume excessive GPU resources or hang/crash a browser or render job. The risk arises only when unreviewed external code is adopted. Users can require provenance, licensing, resource limits, and isolated review/testing.

adapters/html-in-canvas-patterns.md:474In the instructionsOpen original file
## Creating ANY Custom EffectThe fragment shaders above are templates. The pattern is always:1. **Capture your HTML content** with `drawElementImage` (the boilerplate at the top)2. **Upload the captured canvas as a WebGL texture**3. **Write a fragment shader** that reads from the texture and outputs modified colors4. **Drive shader uniforms from GSAP** via `onUpdate`Any GLSL effect from ShaderToy, The Book of Shaders, CodePen, or anywhere else can be adapted:1. Find an effect you like (search "GLSL [effect name]" or browse shadertoy.com)2. Copy the fragment shader3. Replace `iResolution` with `vec2(1920.0, 1080.0)`, `iTime` with your `u_time` uniform4. Add `uniform sampler2D u_tex;` for the captured content texture5. Wire the uniforms to GSAP proxy values
Show 1 other places
transitions/catalog.md:123In the instructionsOpen original file
## Shader TransitionsWebGL 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.The 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.
Medium risk

An example loads and executes third-party JavaScript from a public CDN

Source references: 2
What we found

The MotionPath example directly imports a GSAP plugin from jsDelivr and registers it without an integrity check. Copying or opening it makes the browser trust the code returned by the CDN.

Why this matters

The request exposes network metadata to a third party. If the CDN, package publisher, or delivery chain is compromised, the returned script could read or alter data available to the page.

This is a documentation example and does not execute merely by reading the Skill. However, if a user copies the HTML snippet into a page and opens it, the browser downloads and executes MotionPathPlugin from jsDelivr and registers it. No integrity hash is shown, so a changed CDN response or compromised delivery path would run with the page's privileges. Users can ask for a locally pinned copy with integrity verification or restrict outbound script loading in rendered pages.

techniques.md:302In the instructionsOpen original file
```html<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/MotionPathPlugin.min.js"></script><div class="dot" style="width:20px;height:20px;background:#2a8a7c;border-radius:50%;"></div><script>  gsap.registerPlugin(MotionPathPlugin);  tl.to(
Show 1 other places
techniques.md:298In the instructionsOpen original file
## 9. GSAP MotionPathPluginAnimate an element along an arbitrary SVG path. Use for sliders following curves, particles along trajectories, guided reveals.
Could it expose your files or keys?Looks for uploads of files containing passwords or keys, and keys written directly in the code.Risks found: 1
Medium risk

Generated compositions may contact a public CDN and execute its response during preview or rendering

Source references: 5
What we found

Adapters and bundled examples contain browser scripts and ES-module imports pointing directly to jsDelivr. If copied into a composition, opening or rendering it sends third-party requests and executes returned JavaScript. Versions are pinned, but no Subresource Integrity check is shown.

Why this matters

The CDN receives the requester’s IP, time, and normal HTTP metadata; offline or restricted renders can fail. If the CDN, published package, or delivery trust chain is compromised, returned code runs in the composition’s browser context and can access data available to that page.

The risk is supported, although these lines are recipes to copy into a composition, not code automatically executed when the Skill loads. Their browser module imports point directly to jsDelivr. If a resulting composition includes these tags and is previewed or rendered with network access, the browser will contact the third party and execute its response. Versions are pinned, but the visible tags have no SRI integrity attribute. Users can request locally hosted reviewed dependencies, block render-time network access, or ask the author to document CDN trust and caching.

adapters/animejs.md:76In the instructionsOpen original file
```html<script type="module">  import { animate } from "https://cdn.jsdelivr.net/npm/animejs@4.5.0/+esm";  const anim = animate(".chip", { x: "18rem", duration: 900, autoplay: false });  window.__hfAnime = window.__hfAnime || [];  window.__hfAnime.push(anim);</script>```
Show 4 other places
adapters/three.md:71In the instructionsOpen original file
```html<script type="importmap">  {    "imports": {      "three": "https://cdn.jsdelivr.net/npm/three@0.181.2/build/three.module.js",      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/"    }  }</script><script type="module">  import * as THREE from "three";  import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";  import { OrbitControls } from "three/addons/controls/OrbitControls.js";  // ...</script>```
examples/problem-mockup-overwhelm.html:48In the instructionsOpen original file
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
adapters/html-in-canvas-patterns.md:129In the instructionsOpen original file
**Load Three.js and post-processing via ESM (use a `type="module"` script):**```html<script type="module">  import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.181.2/+esm";  import { EffectComposer } from "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/postprocessing/EffectComposer.js";  import { RenderPass } from "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/postprocessing/RenderPass.js";  import { ShaderPass } from "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/postprocessing/ShaderPass.js";  import { UnrealBloomPass } from "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/postprocessing/UnrealBloomPass.js";  // ... rest of composition code using these imports</script>
examples/cta-orbit-collapse.html:62In the instructionsOpen original file
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
Could it delete files or keep running?Looks for broad file deletion, disk overwrites, and programs set to start automatically.Risks found: 1
Low risk

The animation-map report silently overwrites a same-named file in the output directory

Source references: 3
What we found

`--out` can select any writable directory. The tool creates that directory and then uses `writeFile` on the fixed name `animation-map.json`, with no shown existence check, backup, or no-clobber behavior.

Why this matters

An existing user file named `animation-map.json` in that directory is replaced. The report also persistently records the composition's absolute path and interface geometry.

This is active script behavior: the `--out` value becomes the resolved output directory, the directory is created, and `writeFile` writes the fixed name `animation-map.json`. No existence check or backup appears on this path, so an existing file with that name in the selected directory will be replaced. The impact is limited to that file, not the whole directory. Users should select a dedicated empty directory or back up an existing report, and can ask for no-clobber behavior.

scripts/animation-map.mjs:42In the codeOpen original file
const args = parseArgs(process.argv.slice(2));if (!args.composition) die("missing <composition-dir>");const FRAMES = Number(args.frames ?? 6);const OUT_DIR = resolve(args.out ?? ".hyperframes/anim-map");const MIN_DUR = Number(args["min-duration"] ?? 0.15);const WIDTH = Number(args.width ?? 1920);const HEIGHT = Number(args.height ?? 1080);const parsedFps = parseFps(args.fps ?? 30);if (!parsedFps.ok) die(`Invalid --fps "${args.fps ?? ""}": ${parsedFps.reason}`);const FPS = parsedFps.value;const COMP_DIR = resolve(args.composition);await mkdir(OUT_DIR, { recursive: true });
Show 2 other places
scripts/animation-map.mjs:155In the codeOpen original file
  report.deadZones = findDeadZones(report.density, duration);  report.snapshots = await captureSnapshots(session, report.tweens, duration);  await writeFile(join(OUT_DIR, "animation-map.json"), JSON.stringify(report, null, 2));
scripts/animation-map.mjs:53In the codeOpen original file
const FPS = parsedFps.value;const COMP_DIR = resolve(args.composition);await mkdir(OUT_DIR, { recursive: true });
Could it bypass safety checks?Looks for skipped website security checks, excessive file access, or actions that skip your approval.Risks found: 2
Medium risk

WebGPU rendering enables a browser feature explicitly marked unsafe

Source references: 3
What we found

The adapter says the renderer automatically adds `--enable-unsafe-webgpu` and recommends Brave or Chrome Canary for some effects. This expands the experimental GPU interface available to composition pages.

Why this matters

When unreviewed HTML, shaders, or remote scripts are rendered, the browser and GPU-driver attack surface increases. Crashes may also affect browser state in the same user session.

For specific WebGPU plus HTML-as-texture effects, the documentation says the renderer automatically adds `--enable-unsafe-webgpu` and an experimental feature flag, and recommends switching the browser binary to Brave or Canary. Composition code can then request a GPU adapter and device. This is disclosed and purpose-related, but exposes an experimental GPU interface to the composition page. Untrusted compositions should be rendered in an isolated, credential-free environment with minimal file access, and only when the effect requires it.

adapters/typegpu.md:10In the instructionsOpen original file
## Render-environment prerequisite (WebGPU + html-in-canvas)The render engine auto-passes `--enable-unsafe-webgpu` and `--enable-features=CanvasDrawElement` to its Chrome launch args. Stock Chromium and the bundled headless-shell **do not** support WebGPU + `drawElementImage` together — the combo that liquid-glass blocks need (`ios26-liquid-glass`, `macos-tahoe-liquid-glass`, `liquid-glass-*`, `vfx-liquid-glass`). For those blocks, point the engine at Brave (or Chrome canary) by setting `PRODUCER_HEADLESS_SHELL_PATH` to the browser binary before running `npx hyperframes render` / `preview`. Plain TypeGPU layers without HTML-as-texture work in headless-shell — only the html-in-canvas + WebGPU combination needs the override.
Show 2 other places
adapters/typegpu.md:16In the instructionsOpen original file
- 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.- Render from HyperFrames time, not `performance.now()`.- Listen for the `hf-seek` event and re-render at exactly that time.- Guard against environments where WebGPU is unavailable — the adapter does not check for you.- 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.- After submitting GPU work, register queue completion synchronously with `e.detail.waitUntil(device.queue.onSubmittedWorkDone())`. HyperFrames awaits registered work before screenshots and frame capture.
adapters/typegpu.md:30In the instructionsOpen original file
<script>  (async () => {    if (!navigator.gpu) return;    const adapter = await navigator.gpu.requestAdapter();    if (!adapter) return;    const device = await adapter.requestDevice();    const canvas = document.getElementById("gpu-layer");
Low risk

The install command does not pin a dependency version

Source references: 1
What we found

The installation command does not specify dependency versions. The same command may download different code later, so what you install can differ from what was checked.

Why this matters

A later install may download different code even though the command and this report have not changed.

The line invokes `npx hyperframes` without a version. If the command is not installed locally, npx may fetch the version resolved at that time, so code executed later can change; a locked local dependency would normally be used instead. A user can ask for a versioned command or require the CLI to be pinned in the project's lockfile.

SKILL.md:84In the instructionsOpen original file
- `hyperframes-creative` — palettes, typography, narration, beat planning (non-animation creative direction)- `hyperframes-cli` — `npx hyperframes lint / check / snapshot / preview / render`
Could it mislead the AI or hide text?Checks the skill instructions for requests to ignore you, influence the report, or hide text in invisible characters.No risks found
Could it change links or payment recipients without asking?Looks for forced referral or payment changes combined with instructions to hide the change.Risks found: 3
Medium risk

Blueprints can present invented agent progress and high-confidence readings as real results

Source references: 4
What we found

A blueprint explicitly turns agent work into “working-state theater,” displaying checklist findings, severity indicators, and confirmations; another rule directs confidence to flicker between 95 and 99. The text does not require these readings to come from measurements or be labeled as a demo.

Why this matters

In product marketing, sales, or decision material, viewers could mistake animated findings, completion states, or confidence figures for evidence from a real system, affecting purchasing and trust decisions.

What this evidence establishes

The source supplies “working-state theater” and a visual rule fixing confidence within 95–99. A finished video could mislead viewers if it implies these are real audit or agent results. However, this is an animation blueprint and explicitly calls the sequence “theater”; the visible lines do not instruct users to pass fabricated progress off as real or use it for decisions. Risk therefore depends on presentation. Users can require clear demo labeling and verifiable sources for severity, checks, and confidence values.

This assessment concerns the code and conditions shown, not proof that harm has occurred.
blueprints-index.md:54In the instructionsOpen original file
<blueprint id="agent-progress-theater" roles="Key_Feature" duration="4.2–11.6s">Agent work performed as **working-state theater** — a single trigger beat (menu pick, modal click, a scan already running) hands the frame to the machine: loaders spin and status phrases swap while it visibly works, then the receipt cascades in — a checklist/findings card whose rows arrive and CHECK OFF (badge flips, strikethroughs, severity pills), or a conversation thread building message-by-message to a camera push-in on the confirmation. Reach for it to dramatize an agent doing multi-step work where the state mutation IS the demo — no typed prompt, no cursor-driven workflow, no static enumeration.</blueprint>
Show 3 other places
rules/ai-tracking-box.md:123In the instructionsOpen original file
| SIZE_FREQ_MULT       | 1.5–3, non-integer | integer ratios pulse in lock-step with drift = mechanical                || CONFIDENCE_MEAN/VAR  | 95–99 / 1–3        | mean ± var ⊂ [95, 99]; < 95 "uncertain", 100 "fake-precise"; 97 is sweet || CONFIDENCE_FREQ_MULT | 3–6                | > SIZE_FREQ_MULT — label flickers faster than the box breathes           || MASCOT_SIZE          | = rendered size    | mismatch drifts the target out of the box                                |
blueprints/agent-progress-theater.md:55In the instructionsOpen original file
- slow continuous zoom into the receipt card (header drifts off top) → `multi-phase-camera` (steady-push phase) or `viewport-change`- summary card / progress pill / chat bubble / brand logo / file chip spring pop-in → `spring-pop-entrance`- summary card glides up as the findings panel expands beneath → `gsap-effects` (the glide) + `anchored-layout-expand` (the panel)- 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)- strikethrough + dim on the checked label → `css-marker-patterns` (strike-through draw) + `gsap-effects` (opacity dim)- partially-drawn arc outlines animating on pending items → `svg-path-draw` (partial dashoffset, held mid-draw)- 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 moves- 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)- 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
rules/ai-tracking-box.md:131In the instructionsOpen original file
- **❗ 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.- **Corner L-brackets, not a full border** — the genre signature; a full border reads as a generic UI box.- **Yellow-on-dark** — substituting another hue loses genre legibility.- **Confidence flickers in a tight band inside [95, 99]**, in a mono font.- **`pointer-events: none`** on the box — it's a decorative overlay.
Medium risk

The brand-showcase template directly presents NVIDIA, Visa, ZoomInfo, and GitHub as trusted brands

Source references: 2
What we found

The example displays “Trusted by Leading Brands” beside repeated names of four real companies. The visible code provides no indication that those relationships were authorized or verified.

Why this matters

If published without replacement, viewers may interpret the template as genuine customer endorsement, exposing the user to misleading-advertising, trademark, or reputational risk.

The template displays “Trusted by Leading Brands” alongside NVIDIA, Visa, ZoomInfo, and GitHub, repeating those names without labeling them as fictional placeholders or requiring authorization checks in the visible lines. Publishing it unchanged could lead viewers to infer real customer or endorsement relationships, affecting business decisions and creating trademark or misleading-advertising risk. Users can ask the author for evidence of authorization and relationships, or restrict publication of unverified real brand names.

examples/proof-logo-chain.html:446In the instructionsOpen original file
        >          <div class="brand-label">Trusted by Leading Brands</div>          <div class="brand-strip-window" data-layout-allow-overflow>            <div class="brand-strip-track">              <div class="brand-logo brand-nvidia" aria-label="NVIDIA"></div>              <div class="brand-logo brand-visa" aria-label="Visa"></div>              <div class="brand-logo brand-zoominfo" aria-label="ZoomInfo"></div>              <div class="brand-logo brand-github" aria-label="GitHub"></div>              <div class="brand-logo brand-nvidia" aria-label="NVIDIA"></div>              <div class="brand-logo brand-visa" aria-label="Visa"></div>              <div class="brand-logo brand-zoominfo" aria-label="ZoomInfo"></div>              <div class="brand-logo brand-github" aria-label="GitHub"></div>              <div class="brand-logo brand-nvidia" aria-label="NVIDIA"></div>              <div class="brand-logo brand-visa" aria-label="Visa"></div>              <div class="brand-logo brand-zoominfo" aria-label="ZoomInfo"></div>              <div class="brand-logo brand-github" aria-label="GitHub"></div>            </div>
Show 1 other places
examples/proof-logo-chain.html:437In the instructionsOpen original file
        <!-- =====================================================             PHASE 5: BrandShowcase (label + scrolling logos)             ===================================================== -->        <div          id="phase-brands"          class="brand-strip clip"          data-start="6.3"          data-duration="1.7"          data-track-index="3"        >
Medium risk

The approval example shows “Approved!” on a timer without a real approval event

Source references: 5
What we found

At fixed timeline positions, the example simulates a button press, directly changes its label to “Approved!”, and marks the step complete. The visible implementation has no click handler, identity check, or backend approval result.

Why this matters

If reused as a real workflow interface, it could falsely represent that a file or action was approved and influence publishing or delivery decisions.

Legitimate use of this code

The fixed-time change to “Approved!” is real, but the source clearly implements it as a paused, seekable 5.5-second GSAP animation: a preset “press frame” triggers visual compression, color changes, label replacement, and step completion. The visible code has no real click listener and no account, permission, or backend approval call, so it demonstrates approval choreography rather than granting actual approval. If reused in a real workflow, users should require the UI to reflect an authenticated backend result so the simulated state is not mistaken for authorization.

This assessment concerns the code and conditions shown, not proof that harm has occurred.
examples/workflow-approve-press.html:493In the instructionsOpen original file
      const STEP_ACTIVE_T3 = 3.33; // step 2 → complete, step 3 → active      const BUTTON_ENTER = 3.52; // after "Render to MP4" becomes active      const PRESS_FRAME = 4.22;      const PRESS_DURATION = 0.5;      const CHECK_POP = PRESS_FRAME + PRESS_DURATION;      const SCENE_END = 5.5; // matches data-duration on the root
Show 4 other places
examples/workflow-approve-press.html:555In the instructionsOpen original file
      // ── Phase 4b: Press (linear depression → linear return) ────────      // Two adjacent tweens on .btn-press — end value of (1) = start value of (2).      tl.to(".btn-press", { scale: 0.95, duration: 0.1, ease: "power1.out" }, PRESS_FRAME);      tl.to(        ".btn-press",        { scale: 1.0, duration: PRESS_DURATION - 0.1, ease: "power1.in" },        PRESS_FRAME + 0.1,      );      // ── Phase 4c: Color shift + label swap (at press end) ──────────      tl.to(        ".btn",        {          backgroundColor: "#15803d",          boxShadow: "0 0 25px rgba(21, 128, 61, 0.68)",          duration: 0.3,          ease: "power2.out",        },        CHECK_POP,      );      tl.set(".btn-label", { textContent: "Approved!" }, CHECK_POP);      tl.set(".step-3", { attr: { "data-state": "complete" } }, CHECK_POP);
examples/workflow-approve-press.html:564In the instructionsOpen original file
      // ── Phase 4c: Color shift + label swap (at press end) ──────────      tl.to(        ".btn",        {          backgroundColor: "#15803d",          boxShadow: "0 0 25px rgba(21, 128, 61, 0.68)",          duration: 0.3,          ease: "power2.out",        },        CHECK_POP,      );      tl.set(".btn-label", { textContent: "Approved!" }, CHECK_POP);      tl.set(".step-3", { attr: { "data-state": "complete" } }, CHECK_POP);
examples/workflow-approve-press.html:369In the instructionsOpen original file
  <body>    <div      id="root"      data-composition-id="interactive-workflow"      data-start="0"      data-duration="5.5"      data-width="1920"      data-height="1080"      style="position: relative; width: 1920px; height: 1080px; overflow: hidden"    >
examples/workflow-approve-press.html:481In the instructionsOpen original file
    <script>      window.__timelines = window.__timelines || {};      const tl = gsap.timeline({ paused: true });      // ── Phase boundaries (seconds) — match the blueprint ────────────      const HEADLINE_START = 0.17;      const HEADLINE_END = 0.72;      const VIDEO_START = 0.5;      const STEPS_START = 0.67;      const STEP_STAGGER = 0.5;      const STEP_ACTIVE_T2 = 2.0; // step 1 → complete, step 2 → active      const STEP_ACTIVE_T3 = 3.33; // step 2 → complete, step 3 → active      const BUTTON_ENTER = 3.52; // after "Render to MP4" becomes active      const PRESS_FRAME = 4.22;      const PRESS_DURATION = 0.5;      const CHECK_POP = PRESS_FRAME + PRESS_DURATION;      const SCENE_END = 5.5; // matches data-duration on the root

Inside this skill

7 instruction sections

This Skill is a HyperFrames animation knowledge base. It directs an agent to select rules, blueprints, transitions, and runtime adapters; the default is to combine 2–4 rules on one paused GSAP timeline.

View source
SKILL.md:8In the instructionsOpen original file
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).
SKILL.md:14In the instructionsOpen original file
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.

The bundled animation-map tool packages the selected composition, starts a local file server and browser capture session, enumerates timeline animations, and writes the audit result to animation-map.json.

View source
scripts/animation-map.mjs:59In the codeOpen original file
// Raw modular hosts do not mount child compositions in the capture helper.// Bundle first so duration/timeline discovery sees the same DOM as render/check.const bundle = await bundleCompositionForCapture(packages["@hyperframes/core/compiler"], COMP_DIR);let server;let session;try {  server = await createFileServer({    projectDir: COMP_DIR,    compiledDir: bundle.compiledDir,    port: 0,  });  // Canonical transient-init retry/cleanup (mirrors the render pipeline's
scripts/animation-map.mjs:87In the codeOpen original file
  const duration = await getCompositionDuration(session);  const tweens = await enumerateTweens(session);  const kept = tweens.filter((tw) => tw.end - tw.start >= MIN_DUR);
scripts/animation-map.mjs:155In the codeOpen original file
  report.deadZones = findDeadZones(report.density, duration);  report.snapshots = await captureSnapshots(session, report.tweens, duration);  await writeFile(join(OUT_DIR, "animation-map.json"), JSON.stringify(report, null, 2));

The generated map contains the composition’s absolute path plus positions, dimensions, and opacity for page elements carrying IDs. The shown code stores this in a local report, which can reveal project structure or interface layout to anyone later given that report.

View source
scripts/animation-map.mjs:91In the codeOpen original file
  const report = {    composition: COMP_DIR,    duration,    totalTweens: tweens.length,    mappedTweens: kept.length,    skippedMicroTweens: tweens.length - kept.length,    tweens: [],  };
scripts/animation-map.mjs:576In the codeOpen original file
    await seekTo(session, t);    const visible = await session.page.evaluate(() => {      const out = [];      const els = document.querySelectorAll("[id]");      for (const el of els) {        const cs = getComputedStyle(el);        if (cs.display === "none") continue;        const opacity = parseFloat(cs.opacity);        if (opacity < 0.01) continue;        const rect = el.getBoundingClientRect();        if (rect.width < 1 || rect.height < 1) continue;        out.push({          id: el.id,          x: Math.round(rect.x),          y: Math.round(rect.y),          w: Math.round(rect.width),          h: Math.round(rect.height),          opacity: +opacity.toFixed(2),        });      }

The rules require seekable, deterministic animation and prohibit unseeded randomness, wall-clock time, infinite repeats, and layout-property tweens. These constraints reduce rendering variance but do not govern dependency installation or remote script loading.

View source
rules-index.md:9In the instructionsOpen original file
- runs on ONE **paused** GSAP timeline registered on `window.__timelines` (never autoplay, never a second timeline);- is **seek-safe both directions**: `fromTo` with explicit from-states (t=0 correct under seek; `immediateRender: false` when re-owning a target), absolute values — never relative `+=` tweens; state readable as a pure function of timeline time, no mutable trackers;- is **deterministic**: no `Math.random()`, no `Date.now()` — index-derived pseudo-random and baked schedules only; finite repeats, never `repeat: -1`;- animates **transforms and paint-only properties** — `width`/`height`/`top`/`left` tweens are forbidden (use scale/translate proxies, masks, or `anchored-layout-expand`);- caps group staggers so an arrival reads as one beat (`items × stagger ≤ ~0.5s`);- puts **no CSS `transition`** on animated elements (they interpolate independently of seek and flicker) and hints compositors with `will-change: transform` where many tweens run at once;- measures DOM (`offsetHeight`, `getBoundingClientRect`) at build time only in a **single-scene** composition — in a multi-scene montage, later clips may not be laid out yet: use authored CSS-matched constants;- lives inside a standard scene clip per `hyperframes-core` (`class="clip"` + `data-*` timing) — rule snippets show mechanism DOM only, not the scene scaffold.

This Skill mainly provides HyperFrames animation rules, blueprints, transitions, and runtime adapters, and routes analysis of existing compositions to a script.

View source
SKILL.md:8In the instructionsOpen original file
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`.
SKILL.md:31In the instructionsOpen original file
| Read one blueprint's full recipe                                               | `blueprints/<id>.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`                             |

When helper packages are missing, the loader displays the npm command and asks for terminal confirmation; non-interactive use requires an explicit confirmation variable. Installation disables lifecycle scripts, uses a newly created temporary directory, and removes that directory after the run.

View source
scripts/package-loader.mjs:296In the codeOpen original file
async function confirmBootstrap(packageSpecs) {  if (process.env[BOOTSTRAP_CONFIRM_ENV] === "1") return;  const installLine = `npm install --ignore-scripts --no-save ${packageSpecs.map(shellQuote).join(" ")}`;  if (!process.stdin.isTTY) {    throw new Error(      [        "Required helper package(s) are missing.",        "To allow a one-time temporary dependency bootstrap for this run, set:",        `  ${BOOTSTRAP_CONFIRM_ENV}=1`,        "The bootstrap command will be:",        `  ${installLine}`,      ].join("\n"),    );  }  const rl = createInterface({ input: process.stdin, output: process.stderr });  try {    const answer = await rl.question(      [        "HyperFrames helper package(s) are missing.",        `Run a temporary install with lifecycle scripts disabled?`,        `  ${installLine}`,        "Proceed? [y/N] ",      ].join("\n"),
scripts/package-loader.mjs:342In the codeOpen original file
function bootstrapWithNpmInstall(packageNames) {  const installRoot = mkdtempSync(join(tmpdir(), "hyperframes-skill-deps-"));  const installResult = spawnSync(    process.platform === "win32" ? "npm.cmd" : "npm",    [      "install",      "--silent",      "--no-audit",      "--no-fund",      "--ignore-scripts",      "--no-save",      "--prefix",      installRoot,      ...packageNames,    ],    { stdio: "inherit" },  );  if (installResult.error) throw installResult.error;  if (installResult.status !== 0) {    rmSync(installRoot, { recursive: true, force: true });    process.exit(installResult.status ?? 1);  }  const args = [...process.argv.slice(1)];  const result = spawnSync(process.execPath, args, {    stdio: "inherit",    env: {      ...process.env,      [BOOTSTRAP_ENV]: "1",      [NODE_MODULES_ENV]: join(installRoot, "node_modules"),    },  });  rmSync(installRoot, { recursive: true, force: true });  if (result.error) throw result.error;

Some adapters and examples have generated HTML fetch and execute pinned Anime.js, Three.js, or GSAP code directly from jsDelivr in the browser.

View source
adapters/animejs.md:76In the instructionsOpen original file
```html<script type="module">  import { animate } from "https://cdn.jsdelivr.net/npm/animejs@4.5.0/+esm";  const anim = animate(".chip", { x: "18rem", duration: 900, autoplay: false });
adapters/html-in-canvas-patterns.md:129In the instructionsOpen original file
**Load Three.js and post-processing via ESM (use a `type="module"` script):**```html<script type="module">  import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.181.2/+esm";  import { EffectComposer } from "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/postprocessing/EffectComposer.js";  import { RenderPass } from "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/postprocessing/RenderPass.js";  import { ShaderPass } from "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/postprocessing/ShaderPass.js";  import { UnrealBloomPass } from "https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/postprocessing/UnrealBloomPass.js";  // ... rest of composition code using these imports</script>
examples/cta-orbit-collapse.html:62In the instructionsOpen original file
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>

This Skill is an animation knowledge base for HyperFrames. It directs an agent to choose among rules, scene blueprints, transitions, and runtime adapters, with a default of composing 2–4 rules on one paused GSAP timeline.

View source
SKILL.md:8In the instructionsOpen original file
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 rulesPick 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.

The supplied examples directly create DOM nodes, measure layout, and register a global timeline that HyperFrames can seek. These are runnable implementations rather than visual descriptions alone.

View source
examples/brand-reveal-assemble-zoom.html:244In the instructionsOpen original file
         ================================================================ */      window.__timelines = window.__timelines || {};      const tl = gsap.timeline({ paused: true });      window.__timelines["main"] = tl;      {        /* Measure the brand text width with a hidden DOM probe. */        const probe = document.createElement("span");        probe.className = "measure-probe";        probe.style.font = `700 ${BRAND_FONT_SIZE}px "Google Sans", "Roboto", Inter, system-ui, sans-serif`;        probe.style.whiteSpace = "pre";        probe.style.lineHeight = "1";        probe.textContent = "Hyperframes"; // MUST match the rendered .brand-text casing        document.body.appendChild(probe);        const brandTextWidth = probe.getBoundingClientRect().width;        probe.remove();

The Skill emphasizes deterministic rendering by prohibiting random values, autonomous requestAnimationFrame loops, and wall-clock timing, and by requiring GPU completion to be registered before event handling returns.

View source
adapters/typegpu.md:177In the instructionsOpen original file
## Deterministic Rendering- No `Math.random()` — use a seeded PRNG.- Do not use an autonomous `requestAnimationFrame` simulation loop. Render in response to `hf-seek`; HyperFrames owns the paused-presentation heartbeat and may re-present the same time.- No `performance.now()` for animation time — read `window.__hfTypegpuTime` or `e.detail.time`.- Register GPU completion with `e.detail.waitUntil(device.queue.onSubmittedWorkDone())` before the event listener returns.

In addition to authoring guidance, the Skill instructs users or agents to run two project commands to check Anime.js compositions.

View source
adapters/animejs.md:117In the instructionsOpen original file
## ValidationAfter editing a composition that uses Anime.js:```bashnpx hyperframes lintnpx hyperframes validate```

The Skill is presented as a HyperFrames motion-authoring reference and directs the agent to select 2–4 indexed rules and combine them into one paused GSAP timeline.

View source
SKILL.md:2In the instructionsOpen original file
---name: hyperframes-animationdescription: "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."---
SKILL.md:12In the instructionsOpen original file
## Default: compose atomic rulesPick 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.
Start here · InstructionsSKILL.md
hyperframes-animation
Lines connect the instruction file to its sections, not an observed execution order. Select a section to read the source.

File reference map

References: 40
Files making referencesReferenced content
Lines show actual file references, not execution order. Select a node to highlight its connections and inspect the files and source locations. Dashed lines include files that still need locating.
Files and check records121 files

Coverage and gaps

  • Some results did not pass evidence validation or finish processing. This report does not represent a complete check.
Content covered in each file

These are the source ranges included in this check, not a guarantee that every issue has been resolved.

  • SKILL.mdFull text included
  • scripts/animation-map-sampling.mjsFull text included
  • scripts/animation-map-sampling.test.mjsFull text included
  • scripts/animation-map.mjsFull text included
  • scripts/animation-map.test.mjsFull text included
  • scripts/package-loader.mjsFull text included
  • scripts/package-loader.test.mjsFull text included
  • rules/3d-camera-flight.mdFull text included
  • rules/3d-page-scroll.mdFull text included
  • rules/3d-text-depth-layers.mdFull text included
  • rules/ambient-glow-bloom.mdFull text included
  • rules/anchored-layout-expand.mdFull text included
  • rules/asr-keyword-glow.mdFull text included
  • rules/camera-cursor-tracking.mdFull text included
  • rules/card-morph-anchor.mdFull text included
  • rules/center-outward-expansion.mdFull text included
  • rules/context-sensitive-cursor.mdFull text included
  • rules/coordinate-target-zoom.mdFull text included
  • rules/counting-dynamic-scale.mdFull text included
  • rules/css-marker-patterns.mdFull text included
  • rules/cursor-click-ripple.mdFull text included
  • rules/cursor-drag.mdFull text included
  • rules/depth-of-field-blur.mdFull text included
  • rules/depth-scatter-assemble.mdFull text included
  • rules/discrete-text-sequence.mdFull text included
  • rules/dynamic-content-sequencing.mdFull text included
  • rules/hacker-flip-3d.mdFull text included
  • rules/motion-blur-streak.mdFull text included
  • rules/multi-cursor-choreography.mdFull text included
  • rules/multi-phase-camera.mdFull text included
  • rules/nudge-curve.mdFull text included
  • rules/orbit-3d-entry.mdFull text included
  • rules/physics-press-reaction.mdFull text included
  • rules/press-release-spring.mdFull text included
  • rules/reactive-displacement.mdFull text included
  • rules/scale-swap-transition.mdFull text included
  • rules/sine-wave-loop.mdFull text included
  • rules/spring-pop-entrance.mdFull text included
  • rules/stat-bars-and-fills.mdFull text included
  • rules/svg-path-draw.mdFull text included
  • rules/theme-crossfade-morph.mdFull text included
  • rules/viewport-change.mdFull text included
  • rules/waterfall-entry.mdFull text included
  • adapters/animate-text.mdFull text included
  • adapters/animejs.mdFull text included
  • adapters/css-animations.mdFull text included
  • adapters/gsap-easing-and-stagger.mdFull text included
  • adapters/gsap-timeline-and-labels.mdFull text included
  • adapters/gsap-transforms-and-perf.mdFull text included
  • adapters/gsap.mdFull text included
  • adapters/html-in-canvas-patterns.mdFull text included
  • adapters/lottie.mdFull text included
  • adapters/three.mdFull text included
  • adapters/typegpu.mdFull text included
  • adapters/waapi.mdFull text included
  • blueprints-index.mdFull text included
  • blueprints/agent-progress-theater.mdFull text included
  • blueprints/camera-journey.mdFull text included
  • blueprints/comparison-split.mdFull text included
  • blueprints/constellation-hub.mdFull text included
  • blueprints/cta-morph-press.mdFull text included
  • blueprints/cursor-ui-demo.mdFull text included
  • blueprints/dataviz-countup.mdFull text included
  • blueprints/device-surface-showcase.mdFull text included
  • blueprints/fixed-anchor-cycle.mdFull text included
  • blueprints/grid-card-assemble.mdFull text included
  • blueprints/kinetic-type-beats.mdFull text included
  • blueprints/logo-assemble-lockup.mdFull text included
  • blueprints/overwhelm-surround.mdFull text included
  • blueprints/panel-edit-live-sync.mdFull text included
  • blueprints/prompt-type-submit-generate.mdFull text included
  • blueprints/spatial-pan-stations.mdFull text included
  • blueprints/ticker-takeover.mdFull text included
  • blueprints/titlecard-reveal.mdFull text included
  • blueprints/transcript-scroll-artifact-reveal.mdFull text included
  • blueprints/typewriter-reveal.mdFull text included
  • blueprints/video-text-pivot.mdFull text included
  • blueprints/zoom-out-workspace-reveal.mdFull text included
  • examples/brand-reveal-assemble-zoom.htmlFull text included
  • examples/comparison-split-cards.htmlFull text included
  • examples/concept-demo-decode-pan.htmlFull text included
  • examples/cta-morph-press.htmlFull text included
  • examples/cta-orbit-collapse.htmlFull text included
  • examples/demo-page-scroll-spotlight.htmlFull text included
  • examples/hook-counter-burst.htmlFull text included
  • examples/messaging-multi-phrase.htmlFull text included
  • examples/metric-video-text-pivot.htmlFull text included
  • examples/problem-mockup-overwhelm.htmlFull text included
  • examples/proof-logo-chain.htmlFull text included
  • examples/takeover-ticker-displace.htmlFull text included
  • examples/workflow-approve-press.htmlFull text included
  • rules-index.mdFull text included
  • rules/ai-tracking-box.mdFull text included
  • rules/avatar-cloud-network.mdFull text included
  • rules/chart-scrub-readout.mdFull text included
  • rules/chromatic-glitch.mdFull text included
  • rules/control-target-sync.mdFull text included
  • rules/gradient-text-sweep.mdFull text included
  • rules/gsap-effects.mdFull text included
  • rules/kinetic-beat-slam.mdFull text included
  • rules/particle-burst.mdFull text included
  • rules/split-tilt-cards.mdFull text included
  • rules/svg-icon-enrichment.mdFull text included
  • rules/vertical-spring-ticker.mdFull text included
  • techniques.mdFull text included
  • transitions/catalog.mdFull text included
  • transitions/css-3d.mdFull text included
  • transitions/css-blur.mdFull text included
  • transitions/css-cover.mdFull text included
  • transitions/css-destruction.mdFull text included
  • transitions/css-dissolve.mdFull text included
  • transitions/css-distortion.mdFull text included
  • transitions/css-grid.mdFull text included
  • transitions/css-light.mdFull text included
  • transitions/css-mechanical.mdFull text included
  • transitions/css-other.mdFull text included
  • transitions/css-push.mdFull text included
  • transitions/css-radial.mdFull text included
  • transitions/css-scale.mdFull text included
  • transitions/overview.mdFull text included
  • transitions/TRANSITION-REGISTRY.mdFull text included

This report is for the version above. We read the available code and instructions without running the skill or checking extra packages it installs. This is not a promise of safety: a different version or setup may behave differently.

  • SKILL.mdInstructions
  • adapters/animate-text.mdSupporting file
  • adapters/animejs.mdSupporting file
  • adapters/css-animations.mdSupporting file
  • adapters/gsap-easing-and-stagger.mdSupporting file
  • adapters/gsap-timeline-and-labels.mdSupporting file
  • adapters/gsap-transforms-and-perf.mdSupporting file
  • adapters/gsap.mdSupporting file
  • adapters/html-in-canvas-patterns.mdSupporting file
  • adapters/lottie.mdSupporting file
  • adapters/three.mdSupporting file
  • adapters/typegpu.mdSupporting file
  • adapters/waapi.mdSupporting file
  • blueprints-index.mdSupporting file
  • blueprints/agent-progress-theater.mdSupporting file
  • blueprints/camera-journey.mdSupporting file
  • blueprints/comparison-split.mdSupporting file
  • blueprints/constellation-hub.mdSupporting file
  • blueprints/cta-morph-press.mdSupporting file
  • blueprints/cursor-ui-demo.mdSupporting file
  • blueprints/dataviz-countup.mdSupporting file
  • blueprints/device-surface-showcase.mdSupporting file
  • blueprints/fixed-anchor-cycle.mdSupporting file
  • blueprints/grid-card-assemble.mdSupporting file
  • blueprints/kinetic-type-beats.mdSupporting file
  • blueprints/logo-assemble-lockup.mdSupporting file
  • blueprints/overwhelm-surround.mdSupporting file
  • blueprints/panel-edit-live-sync.mdSupporting file
  • blueprints/prompt-type-submit-generate.mdSupporting file
  • blueprints/spatial-pan-stations.mdSupporting file
  • blueprints/ticker-takeover.mdSupporting file
  • blueprints/titlecard-reveal.mdSupporting file
  • blueprints/transcript-scroll-artifact-reveal.mdSupporting file
  • blueprints/typewriter-reveal.mdSupporting file
  • blueprints/video-text-pivot.mdSupporting file
  • blueprints/zoom-out-workspace-reveal.mdSupporting file
  • examples/brand-reveal-assemble-zoom.htmlSupporting file
  • examples/comparison-split-cards.htmlSupporting file
  • examples/concept-demo-decode-pan.htmlSupporting file
  • examples/cta-morph-press.htmlSupporting file
  • examples/cta-orbit-collapse.htmlSupporting file
  • examples/demo-page-scroll-spotlight.htmlSupporting file
  • examples/hook-counter-burst.htmlSupporting file
  • examples/messaging-multi-phrase.htmlSupporting file
  • examples/metric-video-text-pivot.htmlSupporting file
  • examples/problem-mockup-overwhelm.htmlSupporting file
  • examples/proof-logo-chain.htmlSupporting file
  • examples/takeover-ticker-displace.htmlSupporting file
  • examples/workflow-approve-press.htmlSupporting file
  • rules-index.mdSupporting file
  • rules/3d-camera-flight.mdSupporting file
  • rules/3d-page-scroll.mdSupporting file
  • rules/3d-text-depth-layers.mdSupporting file
  • rules/ai-tracking-box.mdSupporting file
  • rules/ambient-glow-bloom.mdSupporting file
  • rules/anchored-layout-expand.mdSupporting file
  • rules/asr-keyword-glow.mdSupporting file
  • rules/avatar-cloud-network.mdSupporting file
  • rules/camera-cursor-tracking.mdSupporting file
  • rules/card-morph-anchor.mdSupporting file
  • rules/center-outward-expansion.mdSupporting file
  • rules/chart-scrub-readout.mdSupporting file
  • rules/chromatic-glitch.mdSupporting file
  • rules/context-sensitive-cursor.mdSupporting file
  • rules/control-target-sync.mdSupporting file
  • rules/coordinate-target-zoom.mdSupporting file
  • rules/counting-dynamic-scale.mdSupporting file
  • rules/css-marker-patterns.mdSupporting file
  • rules/cursor-click-ripple.mdSupporting file
  • rules/cursor-drag.mdSupporting file
  • rules/depth-of-field-blur.mdSupporting file
  • rules/depth-scatter-assemble.mdSupporting file
  • rules/discrete-text-sequence.mdSupporting file
  • rules/dynamic-content-sequencing.mdSupporting file
  • rules/gradient-text-sweep.mdSupporting file
  • rules/gsap-effects.mdSupporting file
  • rules/hacker-flip-3d.mdSupporting file
  • rules/kinetic-beat-slam.mdSupporting file
  • rules/motion-blur-streak.mdSupporting file
  • rules/multi-cursor-choreography.mdSupporting file
  • rules/multi-phase-camera.mdSupporting file
  • rules/nudge-curve.mdSupporting file
  • rules/orbit-3d-entry.mdSupporting file
  • rules/particle-burst.mdSupporting file
  • rules/physics-press-reaction.mdSupporting file
  • rules/press-release-spring.mdSupporting file
  • rules/reactive-displacement.mdSupporting file
  • rules/scale-swap-transition.mdSupporting file
  • rules/sine-wave-loop.mdSupporting file
  • rules/split-tilt-cards.mdSupporting file
  • rules/spring-pop-entrance.mdSupporting file
  • rules/stat-bars-and-fills.mdSupporting file
  • rules/svg-icon-enrichment.mdSupporting file
  • rules/svg-path-draw.mdSupporting file
  • rules/theme-crossfade-morph.mdSupporting file
  • rules/vertical-spring-ticker.mdSupporting file
  • rules/viewport-change.mdSupporting file
  • rules/waterfall-entry.mdSupporting file
  • scripts/animation-map-sampling.mjsScript
  • scripts/animation-map-sampling.test.mjsScript
  • scripts/animation-map.mjsScript
  • scripts/animation-map.test.mjsScript
  • scripts/package-loader.mjsScript
  • scripts/package-loader.test.mjsScript
  • techniques.mdSupporting file
  • transitions/TRANSITION-REGISTRY.mdSupporting file
  • transitions/catalog.mdSupporting file
  • transitions/css-3d.mdSupporting file
  • transitions/css-blur.mdSupporting file
  • transitions/css-cover.mdSupporting file
  • transitions/css-destruction.mdSupporting file
  • transitions/css-dissolve.mdSupporting file
  • transitions/css-distortion.mdSupporting file
  • transitions/css-grid.mdSupporting file
  • transitions/css-light.mdSupporting file
  • transitions/css-mechanical.mdSupporting file
  • transitions/css-other.mdSupporting file
  • transitions/css-push.mdSupporting file
  • transitions/css-radial.mdSupporting file
  • transitions/css-scale.mdSupporting file
  • transitions/overview.mdSupporting file

Operations mentioned in code and instructions

Run commands
scripts/animation-map.test.mjs:2In the codeOpen original file
import assert from "node:assert/strict";import { spawnSync } from "node:child_process";import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
scripts/package-loader.mjs:11In the codeOpen original file
// text); they are never handed to a shell or executed.import { spawnSync } from "node:child_process";import { existsSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
scripts/package-loader.test.mjs:3In the codeOpen original file
import assert from "node:assert/strict";import { spawnSync } from "node:child_process";import { copyFileSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
Install extra software packages
scripts/package-loader.mjs:4In the codeOpen original file
//   • specs are version-pinned (assertPinnedPackageSpecs) — no floating "latest"//   • install runs `npm install --ignore-scripts` — package lifecycle scripts//     never execute
scripts/package-loader.mjs:47In the codeOpen original file
        "Install them in this project, for example:",        `  npm install --save-dev ${packageNames.map(shellQuote).join(" ")}`,      ].join("\n"),
scripts/package-loader.mjs:299In the codeOpen original file
  const installLine = `npm install --ignore-scripts --no-save ${packageSpecs.map(shellQuote).join(" ")}`;  if (!process.stdin.isTTY) {
Connect to websites
scripts/animation-map.test.mjs:41In the codeOpen original file
          "  }",          '  return { url: "http://test", close() {} };',          "}",
scripts/animation-map.test.mjs:194In the codeOpen original file
const FAKE_PRODUCER_COMMON = [  'export async function createFileServer() { return { url: "http://test", close() {} }; }',  'export async function createCaptureSession() { console.error("SESSION_CREATED"); return {}; }',
scripts/animation-map.test.mjs:339In the codeOpen original file
  "});",  'export async function createFileServer() { return { url: "http://test", close() {} }; }',  "export async function createCaptureSession() {",
Read files
scripts/animation-map.test.mjs:3In the codeOpen original file
import { spawnSync } from "node:child_process";import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";import { tmpdir } from "node:os";
scripts/animation-map.test.mjs:34In the codeOpen original file
        [          'import { readFileSync } from "node:fs";',          'import { join } from "node:path";',
scripts/animation-map.test.mjs:37In the codeOpen original file
          "export async function createFileServer(options) {",          '  const bundled = readFileSync(join(options.compiledDir, "index.html"), "utf8");',          '  if (bundled !== "<!doctype html><main>bundled modular composition</main>") {',
Change files
scripts/animation-map.mjs:17In the codeOpen original file
import { mkdir, writeFile } from "node:fs/promises";import { resolve, join } from "node:path";
scripts/animation-map.mjs:157In the codeOpen original file
  await writeFile(join(OUT_DIR, "animation-map.json"), JSON.stringify(report, null, 2));
scripts/animation-map.test.mjs:3In the codeOpen original file
import { spawnSync } from "node:child_process";import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";import { tmpdir } from "node:os";
Read keys or account settings
scripts/animation-map.test.mjs:90In the codeOpen original file
            env: {              ...process.env,              HYPERFRAMES_SKILL_NODE_MODULES: join(root, "node_modules"),
scripts/animation-map.test.mjs:105In the codeOpen original file
            env: {              ...process.env,              HYPERFRAMES_SKILL_NODE_MODULES: join(root, "node_modules"),
scripts/animation-map.test.mjs:188In the codeOpen original file
    encoding: "utf8",    env: { ...process.env, HYPERFRAMES_SKILL_NODE_MODULES: join(root, "node_modules") },  });
Lines read
22,325
File checksum (to compare versions)
356e28ecc4e6036620e63088815343d6b48f4abfc4355b05ec1be6cdfc45803a