mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
Miguel Ángel
d3f2295d80
## Summary
Two new quality skills + CLI integration that give agents feedback loops they currently lack — pixel-level contrast auditing and structured animation analysis.
### What this unlocks for agents
**Agents can now catch accessibility failures that humans and LLMs consistently miss.** The contrast audit runs automatically on every `hyperframes validate` and reports WCAG AA violations as warnings. In the eval, 4 out of 5 palettes had failing contrast — every baseline composition shipped broken, every treatment composition caught and fixed it.
**Agents can now reason about animation choreography.** The animation map produces a structured JSON report with:
- Per-tween natural language summaries ("card1 slides 23px up over 0.5s, fades in, ends at (120, 200)")
- ASCII timeline showing the full choreography as a Gantt chart
- Stagger detection with actual intervals ("3 elements stagger at 120ms" — validates against brief specs)
- Dead zone detection (periods >1s with no animation — missing entrance or intentional hold?)
- Element lifecycles (first/last animation, final visibility — catches elements that enter but never exit)
- Scene snapshots at 5 timestamps (what's on screen at any moment)
### Changes
**Skills (new)**
- \`skills/hyperframes-contrast/\` — WCAG contrast audit skill + script
- \`skills/hyperframes-animation-map/\` — animation analysis skill + script
**CLI**
- \`hyperframes validate\` now runs contrast audit by default (warnings, not errors)
- \`hyperframes validate --no-contrast\` to skip
- \`hyperframes render --html-only\` compiles HTML without video encoding
- Browser-side WCAG code in \`contrast-audit.browser.js\`, inlined at build time via esbuild text loader
**Producer**
- Exported \`compileForRender\` for the \`--html-only\` flag
### Eval results
5 prompts x 2 arms = 10 compositions. Arm A = baseline skills. Arm B = +contrast +animation-map.
| Prompt | Failing color | Before | After |
|--------|--------------|--------|-------|
| Halflife | Cement on Ink | 2.98:1 | 5.33:1 |
| Meridian | Ash on Midnight | 2.08:1 | 5.44:1 |
| Typesmith | Pencil on Paper | 3.19:1 | 5.50:1 |
| Lattice | Gray-600 on Terminal | 2.59:1 | 7.50:1 |
Animation map correctly enumerated 142 tweens across 5 compositions, detected stagger groups, flagged pacing issues, and produced scene snapshots.
### Pitch video
https://itnjfahrnzqvcluhrtif.supabase.co/storage/v1/object/public/assets/uploads/8f043e1c-6882-4fa9-98fd-efb6b3583afa.mp4
### Dedicated evals
https://www.heygenverse.com/a/2cac956b-3d14-47bf-90e8-3c1f50e671f3
## Test plan
- [x] Eval: 10 compositions (5 baseline, 5 treatment), all rendered
- [x] Contrast audit caught 4/4 failing palettes, 0 missed
- [x] \`hyperframes validate\` shows contrast warnings by default (exit 0)
- [x] \`hyperframes validate --no-contrast\` skips audit
- [x] \`hyperframes validate --json\` includes contrast data
- [x] Animation map tested on 3 compositions (17, 27, 51 tweens)
- [x] Stagger detection, dead zones, snapshots, timeline all verified
- [x] \`bun run build\` passes
- [x] \`bun run lint\` passes (0 errors, 0 warnings, 0 skill lint issues)
63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import { defineConfig } from "tsup";
|
|
import { resolve } from "node:path";
|
|
import { readFileSync } from "node:fs";
|
|
|
|
const pkg = JSON.parse(readFileSync(new URL("./package.json", import.meta.url), "utf-8")) as {
|
|
version: string;
|
|
};
|
|
|
|
export default defineConfig({
|
|
entry: ["src/cli.ts"],
|
|
format: ["esm"],
|
|
outDir: "dist",
|
|
target: "node22",
|
|
platform: "node",
|
|
bundle: true,
|
|
splitting: false,
|
|
sourcemap: false,
|
|
clean: true,
|
|
banner: {
|
|
js: `import { createRequire as __hf_createRequire } from "node:module";
|
|
import { fileURLToPath as __hf_fileURLToPath } from "node:url";
|
|
import { dirname as __hf_dirname } from "node:path";
|
|
var require = __hf_createRequire(import.meta.url);
|
|
var __filename = __hf_fileURLToPath(import.meta.url);
|
|
var __dirname = __hf_dirname(__filename);`,
|
|
},
|
|
external: [
|
|
"puppeteer-core",
|
|
"puppeteer",
|
|
"@puppeteer/browsers",
|
|
"open",
|
|
"hono",
|
|
"hono/*",
|
|
"@hono/node-server",
|
|
"mime-types",
|
|
"adm-zip",
|
|
"esbuild",
|
|
"giget",
|
|
"postcss",
|
|
],
|
|
noExternal: [
|
|
"@hyperframes/core",
|
|
"@hyperframes/producer",
|
|
"@hyperframes/engine",
|
|
"@clack/prompts",
|
|
"@clack/core",
|
|
"picocolors",
|
|
"linkedom",
|
|
"sisteransi",
|
|
"is-unicode-supported",
|
|
"citty",
|
|
],
|
|
define: {
|
|
__CLI_VERSION__: JSON.stringify(pkg.version),
|
|
},
|
|
esbuildOptions(options) {
|
|
options.alias = {
|
|
"@hyperframes/producer": resolve(__dirname, "../producer/src/index.ts"),
|
|
};
|
|
options.loader = { ...options.loader, ".browser.js": "text" };
|
|
},
|
|
});
|