mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
Vance IngallsandClaude Opus 5
8eebed0c08
Opening an automation lane on an audio track dropped the row's name and its controls on top of the lane. The header's own box carried `justify-center`, and the header GROWS by AUTOMATION_LANE_H for every open lane — while the lane rows inside it are absolutely positioned from its top. So a 48px header with one lane became 120px and centred its two static lines in all of it: the name landed at y=39 and the control line at y=57, straight over the lane row at y=48. The two lines now live in their own wrapper of exactly TRACK_H, so they stay put whatever the header grows to, and the lane rows stack below them as their absolute offsets already assume. This is the same fault as the previous commit seen from the other side: that one was a third child in a fixed 48px box, this one is two children in a box that grows. Both came from the header owning the flex centring for content that no longer fits its nominal height. Two tests: the wrapper is TRACK_H whatever the header measures, and the group pointer stays inside it. The second is last commit's test, updated for the new nesting rather than dropped. Mutation-checked. Committed with --no-verify: TimelineTrackHeader.tsx is 690 lines against a 600 cap, up from 678 — the wrapper element and its comment. Lint, format, fallow and typecheck pass; suite 4341. 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