mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-15 13:58:20 +00:00
Miguel Angel Simon Sierra
fc06dea181
The shape of a fade is something an editor pulls into place, so it has to be able to land anywhere between the extremes. Three named curves could not do that: picking one meant a menu or a blind cycle, and the answer was always one of three. `data-fade-curve` is now a number in [-1, 1]. Zero is a straight ramp, negative sags the line so the fade starts slow and finishes fast, positive bulges it the other way. Underneath is a single exponent, k = 2^(-2·curve), which makes -0.5 exactly p² and +0.5 exactly √p, keeps every bend monotonic so a fade never dips, and makes the two directions inverse functions of each other. That last property is what makes dragging the line back through the middle land on straight instead of drifting past it. `fadeCurveThroughMidpoint` inverts the relation: given the level a pointer is sitting at halfway through the fade, it returns the bend whose curve passes through that point. Studio's drag is then direct manipulation rather than a pointer nudging an abstract parameter. The named curves are dropped rather than kept as aliases. Nothing has shipped with them, and one attribute with two spellings is one too many.
@hyperframes/core
Types, parsers, generators, compiler, linter, runtime, and frame adapters for the Hyperframes video framework.
Install
npm install @hyperframes/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 "@hyperframes/core";
const adapter = createGSAPFrameAdapter({
getTimeline: () => gsap.timeline(),
compositionId: "my-video",
});
Implement FrameAdapter for custom animation runtimes:
import type { FrameAdapter } from "@hyperframes/core";
const myAdapter: FrameAdapter = {
id: "my-adapter",
getDurationFrames: () => 300,
seekFrame: (frame) => {
/* seek your animation */
},
};
Parsing and generating HTML
import { parseHtml, generateHyperframesHtml } from "@hyperframes/core";
const { elements, metadata } = parseHtml(htmlString);
const html = generateHyperframesHtml(spec);
Linting
import { lintHyperframeHtml } from "@hyperframes/core/lint";
const result = lintHyperframeHtml(htmlString);
// result.findings: { severity, message, elementId }[]
Documentation
Full documentation: hyperframes.heygen.com/packages/core
Related packages
@hyperframes/engine— rendering engine that drives the browser@hyperframes/producer— full render pipeline (capture + encode)hyperframes— CLI