mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-14 21:29:34 +00:00
Vance Ingalls
1902fc5866
The lanes hung off the active clip's property lanes, and which clip that is follows the selection. So pressing a lane to select its clip moved the whole subtree into a different clip's element: React remounted every lane, each one lost the hover state that draws its handles, and the breakpoints the pointer was reaching for vanished at the moment of the press. That is the one gesture a read-only lane exists to support — press to select, then edit. They are the row's lanes, so the row mounts them. Their absolute positions resolve against the same relative row either way, so the geometry is unchanged. The wrapper is mounted in both disclosure states, empty while collapsed, for the reason the keyframe lanes are: the caret's aria-controls has to resolve while collapsed too. The caret now names both regions, since a clip's keyframe lanes and the track's automation lanes cannot be one element. TimelinePropertyLanes loses its `footer` prop, which existed only for this.
@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