mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
Vance IngallsandClaude Opus 5
f26f48b3a6
Automating a group's effect parameter from the FX rack left the group's timeline row showing nothing — no lanes, and after the previous commit no wave button either, since it now gates on the count. The rack is not group-aware: selecting a group and writing its `data-automation` goes through the ordinary element attribute path. That path's resync re-read the element's OWN automation and chain and stopped there. But a group's lanes are derived from the mirrored `audioGroup*` fields its MEMBERS carry, never from the group element — so the mirrors kept the value they were born with until a reload, and the row had nothing to draw. Fixed at the sync sink, which exists precisely so a writer does not have to know what needs refreshing: it now also re-reads what each member's group carries, through the cache that already invalidates itself on any group attribute change. The four fields are compared as one record rather than a growing `&&` chain, which keeps the callback under the complexity gate and stops the next field being added to the read but not the compare. Verified live: the Voiceover group's row went from no toggle to `∿ 1` — its one author-owned lane, the carve's three bands correctly excluded. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@hyperframes/studio
Browser-based composition editor UI for Hyperframes. Provides a visual timeline, code editor, and live preview for building video compositions.
Install
npm install @hyperframes/studio
What it does
The studio is a React application with:
- Visual timeline — drag, resize, and arrange elements on tracks
- Code editor — edit HTML and GSAP scripts with CodeMirror (syntax highlighting, autocomplete)
- Live preview — see changes in real time as you edit
- Composition inspector — view and modify element properties
Development
The studio is embedded in the hyperframes preview command. To develop the studio UI itself:
cd packages/studio
bun run dev # Start Vite dev server
bun run build # Build for production
bun run typecheck # Type-check
Tech stack
- React 18/19, Zustand (state management)
- CodeMirror 6 (editor)
- Tailwind CSS (styling)
- Vite (bundler)
- Phosphor Icons
Documentation
Full documentation: hyperframes.heygen.com/packages/studio
Related packages
@hyperframes/core— types and parsers used by the editorhyperframes— CLI that serves the studio viahyperframes preview