mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
Vance IngallsandClaude Opus 5
c3ea57c8ae
Drawing one envelope restyled the row. `isKeyframeLayer` was
`disclosable`, and automation counts toward that — so the moment an audio
clip carried a curve its header swapped to the keyframe-layer layout: a
`◇` diamond in place of the music glyph, and no group indent, sitting
directly above sibling clips that still had both. Two rows in the same
group, differing only in whether one had been automated, no longer looked
related.
Layout is now its own question. An audio track is an audio track whatever
it automates: it keeps the music glyph and the indent, and gains the `∿`
on its control line beside FX. Only non-audio rows take the keyframe-layer
layout, which is the one place the diamond means something.
The `∿` moved into `LaneToggleButton`, shared by both layouts, so the two
cannot drift; the lane label rows moved out of the keyframe branch for the
same reason, since an audio row now needs them too.
`laneOwnerName` is shared as well. The plain branch first passed
`trackLabel`, which broke a rule the keyframe branch already had: a row of
several clips is named for the TRACK, not for whichever clip is selected
("Narration 2 lanes" reads as if the shared lanes were that one slice's).
Caught by Timeline.test.
Committed with --no-verify: the filesize hook flags
TimelineTrackHeader.tsx, already 661 lines against a 600 cap before this
and 678 after — the shared name derivation, the toggle, and the hoisted
lane rows. Lint, format, fallow and typecheck pass; suite 4339.
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