mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
Vance Ingalls
df7ba162e5
Three complaints, one cause each. **Handles appeared on a lane nothing could move.** A carve's lanes are read-only — a re-run rewrites them, so an edit there is lost work — but they still lit their point handles on hover like every other lane. The report was "I lost the ability to drag automation points": the affordance was the whole promise, and it was false. `pointHandleOpacity` now keeps them hidden unless the lane is actually editable, while a drag or a selected range still shows them, because those states are the ones where the handles are the feedback. **Nothing said why.** Hiding the handles alone turns a lie into a mystery. Hovering a read-only lane now shows a note inside it, and for a carve lane the note says where the control actually is — the strength knob in the FX rack, or switching the carve off to take the envelopes over by hand. **Group lane labels scrolled away.** The group header was sticky and its lane labels were not, so the labels slid under the curves while the header stayed. They are one column and now live in one sticky wrapper. Wrapping only the labels is what the first attempt did, and it is wrong: as a flex item after the header the wrapper starts at `x = columnWidth`, so at scroll 0 the labels render inside the lane area — which is what the screenshot caught. The lane title is now `laneTitle()` and the note `ReadOnlyNote`, which is what keeps the file under the complexity gate.
@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