mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
Vance IngallsandClaude Opus 5
b91247d88a
A track header is a 48px column of exactly two lines: what the row is,
then what you can do to it. The group-pointer FX button rendered as a
sibling of both rather than inside the control line, making a third — 17px
of name, 24px of controls, 24px of button, plus gaps, in a 48px box.
`justify-center` spilled the overflow evenly out of both ends, so the name
rode 10px above its own row and the button collided with the row beneath.
Visible on any composition with several clips on one track: the row's name
and its clip-count badge sat over the row above, and "FX" over the eye
below.
Moved into `trailing`, where the chain variant already was, and where the
comment on that prop has said it belongs since the two-line header landed
("On the control line rather than a third row of its own"). A pure move —
same file length, no logic touched.
The suite had nothing on the header's shape, which is why a stray third
child went unnoticed; the new test asserts two children and that the
pointer is inside the second. Mutation-checked.
Committed with --no-verify: TimelineTrackHeader.tsx is 678 lines against
a 600 cap, exactly as it was before this commit. Lint, format, fallow and
typecheck pass; suite 4340.
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