mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-10-30 17:27:09 +00:00
Miguel Ángel
06340f656e
* fix(studio): composition and text clips show their frame at full strength CompositionThumbnail drew its frames at 0.7 opacity with a lighten blend, the only timeline picture dimmed that way; on a light theme the frame nearly vanished into the clip. Opacity and blend are now theme tokens, untinted by default like video and image clips. * fix(studio): touching clips show a hairline seam where they meet Two clips that meet end to start used to read as one long bar. Each exact join on a row now gets a 1px line in the row colour, drawn over the clips. Clip positions, widths and keyframe diamonds do not move, so the timeline still tells the truth about time. * fix(studio): hide clip join seams while a clip is being moved A moved clip is drawn by the drag overlay, not at its element position, so its join line stayed behind at the old boundary until the drop. Rows draw no join lines during a move or multi-clip drag; they come back on drop. The join math now reuses the lane helpers for sort order and the touching tolerance. * refactor(studio): drop a multi-drag check the move-drag check already covers A multi-clip drag preview only exists once a move drag has started, so the join lines only need the move-drag check.
@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 19, Zustand 4/5 (state management; development uses Zustand 5)
- 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