mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-08-31 02:41:44 +00:00
Miguel Ángel
5655dabff6
## Summary Two independent initiatives that improve agent DX and expand HyperFrames' reach. ### Initiative 1: Fix the Clip Animation Footgun - `gsap_animates_clip_element` lint rule now uses smart detection — only errors when GSAP animates `visibility` or `display` on a clip element - All other properties (opacity, transform, x, y, scale, etc.) are allowed silently - This was the #1 agent failure in QA (10/10 agents hit it on v0.2.1) ### Initiative 2: `<hyperframes-player>` Web Component - New `@hyperframes/player` package — zero dependencies, 3.3KB gzipped - Iframe-based web component with Shadow DOM for perfect isolation - Video-like API: `play()`, `pause()`, `seek()`, `currentTime`, `duration`, events - Controls overlay with play/pause, scrubber (mouse + touch), time display, auto-hide - Full docs page at `docs/packages/player.mdx` ## Before / After ### Clip animation lint **Before (10/10 agents hit this):** ``` ✗ gsap_animates_clip_element: GSAP animation targets a clip element. Selector "#title" resolves to element <div id="title" class="clip">. The framework manages clip visibility — animate an inner wrapper instead. Fix: Wrap content in a child <div> and target that with GSAP. ``` **After (only errors on actual conflicts):** ``` # This passes lint — no error: tl.from("#title", { opacity: 0, y: -50, scale: 0.8 }, 0); # This still errors — actual conflict with runtime: tl.to("#title", { visibility: "hidden" }, 3); ✗ gsap_animates_clip_element: GSAP animation sets visibility on a clip element. Fix: Remove the visibility/display tween. Use opacity for fade effects. ``` ### Embeddable player **Before:** No way to embed a composition in a web page. **After:** ```html <script src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script> <hyperframes-player src="./composition/index.html" controls></hyperframes-player> ``` ```js const player = document.querySelector('hyperframes-player'); player.play(); player.pause(); player.seek(2.5); player.addEventListener('ready', (e) => console.log('Duration:', e.detail.duration)); ``` ## Test plan - [x] 427 core tests pass (20 GSAP lint tests with smart detection) - [x] 7 player tests pass (formatTime + element registration) - [x] TypeScript compiles cleanly (core + player) - [x] Lint: GSAP animating clip with safe props → 0 errors - [x] Lint: GSAP animating clip with `visibility` → 1 error (correct) - [x] Player builds to 3.3KB gzipped ESM - [x] Lockfile updated for CI - [x] Docs page added at `docs/packages/player.mdx`
98 lines
2.1 KiB
JSON
98 lines
2.1 KiB
JSON
{
|
|
"$schema": "https://mintlify.com/docs.json",
|
|
"name": "Hyperframes",
|
|
"theme": "mint",
|
|
"colors": {
|
|
"primary": "#00C4FF",
|
|
"light": "#00C4FF",
|
|
"dark": "#00A8E1"
|
|
},
|
|
"logo": {
|
|
"light": "/logo/light.svg",
|
|
"dark": "/logo/dark.svg"
|
|
},
|
|
"favicon": "/favicon.svg",
|
|
"contextual": {
|
|
"options": [
|
|
"copy",
|
|
"claude",
|
|
"cursor",
|
|
"vscode",
|
|
"windsurf",
|
|
"mcp",
|
|
{
|
|
"title": "Open an issue",
|
|
"description": "Report a bug or request a feature",
|
|
"icon": "github",
|
|
"iconType": "brands",
|
|
"href": "https://github.com/heygen-com/hyperframes/issues/new"
|
|
}
|
|
]
|
|
},
|
|
"navigation": {
|
|
"tabs": [
|
|
{
|
|
"tab": "Documentation",
|
|
"groups": [
|
|
{
|
|
"group": "Getting Started",
|
|
"pages": ["introduction", "quickstart", "templates"]
|
|
},
|
|
{
|
|
"group": "Concepts",
|
|
"pages": [
|
|
"concepts/compositions",
|
|
"concepts/data-attributes",
|
|
"concepts/frame-adapters",
|
|
"concepts/determinism"
|
|
]
|
|
},
|
|
{
|
|
"group": "Guides",
|
|
"pages": [
|
|
"guides/gsap-animation",
|
|
"guides/rendering",
|
|
"guides/common-mistakes",
|
|
"guides/troubleshooting"
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"tab": "Packages",
|
|
"groups": [
|
|
{
|
|
"group": "Packages",
|
|
"pages": [
|
|
"packages/core",
|
|
"packages/engine",
|
|
"packages/player",
|
|
"packages/producer",
|
|
"packages/studio",
|
|
"packages/cli"
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"tab": "Reference",
|
|
"groups": [
|
|
{
|
|
"group": "Reference",
|
|
"pages": ["reference/html-schema"]
|
|
},
|
|
{
|
|
"group": "Contributing",
|
|
"pages": ["contributing", "contributing/testing-local-changes"]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
"footer": {
|
|
"socials": {
|
|
"github": "https://github.com/heygen-com/hyperframes"
|
|
}
|
|
}
|
|
}
|