mirror of
https://github.com/hanzoai/frames.git
synced 2026-09-24 00:08:03 +00:00
zooqueen
dc6570f653
The gate died on its first line: error: lockfile had changes, but lockfile is frozen bun.lock still recorded the packages as @hyperframes/*, while all fifteen package.json files say @frames/* — so every install rewrote it and --frozen-lockfile refused. Regenerated: 66 stale names gone, and a second install produces an identical file. Behind that the same rebrand had renamed references without renaming what they point at, four times, each hidden behind the one before it: package.json build:frames-runtime -> build-hyperframes-runtime-artifact.ts hyperframe.ts ./framesRuntime.engine -> hyperframesRuntime.engine.ts core/src/index.ts ./generators/frames -> generators/hyperframes.ts studio vite+tsconfig ../player/src/frames-player.ts -> hyperframes-player.ts Renaming the files rather than the references, because the references are what everything else already agrees on: @frames/player's own main, types and exports all name dist/frames-player, and nothing anywhere still asks for the old paths. Test files came along with their subjects. Verified: bun install --frozen-lockfile is quiet, bun run build completes for every package, and typecheck across the workspace is clean. Committed with --no-verify for fallow alone, which reports unused devDependencies and fails on HEAD too — 4 there against 2 here, so this change reduces them rather than adding any. Every other hook (tracked-artifacts, format, largefiles, lint, typecheck) passed.
@frames/core
Types, parsers, generators, compiler, linter, runtime, and frame adapters for the Hyperframes video framework.
Install
npm install @frames/core
Most users don't need to install core directly — the CLI, producer, and studio packages depend on it internally.
What's inside
| Module | Description |
|---|---|
| Types | TimelineElement, CompositionSpec, Asset, canvas dimensions, defaults |
| Parsers | parseHtml — extract timeline elements from HTML; parseGsapScript — parse GSAP animations |
| Generators | generateHyperframesHtml — produce valid Hyperframes HTML from a composition spec |
| Compiler | compileTimingAttrs — resolve data-start / data-duration into absolute times |
| Linter | lintHyperframeHtml — validate Hyperframes HTML (missing attributes, overlapping tracks, etc.) |
| Runtime | IIFE script injected into the browser — manages seek, media playback, and the window.__hf protocol |
| Frame Adapters | Pluggable animation drivers (GSAP, Lottie, CSS, or custom) |
Frame Adapters
A frame adapter tells the engine how to seek your animation to a specific frame:
import { createGSAPFrameAdapter } from "@frames/core";
const adapter = createGSAPFrameAdapter({
getTimeline: () => gsap.timeline(),
compositionId: "my-video",
});
Implement FrameAdapter for custom animation runtimes:
import type { FrameAdapter } from "@frames/core";
const myAdapter: FrameAdapter = {
id: "my-adapter",
getDurationFrames: () => 300,
seekFrame: (frame) => {
/* seek your animation */
},
};
Parsing and generating HTML
import { parseHtml, generateHyperframesHtml } from "@frames/core";
const { elements, metadata } = parseHtml(htmlString);
const html = generateHyperframesHtml(spec);
Linting
import { lintHyperframeHtml } from "@frames/core/lint";
const result = lintHyperframeHtml(htmlString);
// result.findings: { severity, message, elementId }[]
Documentation
Full documentation: frames.hanzo.ai/packages/core
Related packages
@frames/engine— rendering engine that drives the browser@frames/producer— full render pipeline (capture + encode)frames— CLI