mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-05 22:27:29 +00:00
Miguel Ángel
840f657028
* feat(player): play and loop a range of the film with range-start and range-end The runtime takes a set-play-range control and stops on the range end frame itself. The player wraps to range-start with loop, fires ended without it, and reports a range cut to the film with rangeclamped. Video and __timelines players check it per tick. * fix(player): hold a range on its last frame and let the runtime own range jumps A runtime with the play-range capability jumps to range-start itself when a new range leaves the playhead outside, so a stale state no longer ends the film; older runtimes keep the player fallback, guarded until a state lands inside. Every range stop shows the last frame before range-end; a paused playhead re-parks only when it falls outside the new range. * fix(player): stop a range a check early and enforce its end on a video in a background tab * test(player): share the range video setup * fix(player): a slow frame no longer cuts a range short; a video without a range is unchanged * fix(player): a range still stops early where video time moves once per frame * refactor(player): cut the range look-ahead comment to one line * fix(player): a per-frame video time rounded down still stops a range early * test(player): pin no rounding tolerance at a film's own end * test(studio): expect the play-range capability on control messages
@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