mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-10-30 17:27:09 +00:00
Miguel Ángel
078c493448
* perf(core): skip hidden clips' content so the browser stops decoding their images Hidden timed clips get content-visibility:hidden while their inline visibility is hidden, from script evaluation on. A clip due within the look-ahead (2 s by default) keeps its content live, so its images load before it shows. * perf(studio-server): load preview images lazily so hidden scenes fetch nothing * fix(core): stop the readiness scan waiting on and decoding later scenes' images * perf(studio-server): keep first-frame images eager so the preview opens as fast as before Only images inside a clip with a numeric start after 0 go lazy; a start the route cannot read stays eager. * perf(core): keep clips that start at 0 laid out before the first pass so the first frame is on time * perf(core): open the preview on time by hiding only lazy images before the first pass GSAP reads the computed style of the elements it animates while timelines build. Inside a content-skipped clip every read forces a style update, which cost about 65 ms at open on the bench composition. Before the first pass the rule now takes only lazy images out of layout, so hidden later scenes still do not load theirs; after it, the skip rule keeps their content skipped. * fix(core): hold a paused jump on the previous picture until the next scene's images decode * fix(studio): swap in a reloaded preview only after its restore seek has painted * fix(core): apply a held paused jump after 1 s when an image never decodes * fix(core): keep hidden-scene image skipping and held jumps to Studio's preview, never renders * fix(studio): reapply manual edits once a held paused jump lands * fix(studio): copy a clip without the preview's lazy-loading marks * fix(studio-server): mark preview images lazy without re-encoding the document's entities * fix(core): share one preview-mark constant between the runtime and the preview route * fix(studio): reapply manual edits a second time only after a seek that was held * refactor(core): share the hidden-ancestor walk between clip visibility and image holds * fix(core): import the studio preview mark from its own subpath * fix(studio-server): find preview images with the linear html scanner * chore(core): drop two doc comments the scanner's names already carry * fix(studio-server): serve the preview mark as its own meta, apart from the GSAP fallback script * fix(studio-server): capture thumbnails and frames from the preview without lazy images or the mark * fix(core): let the full readiness scan wait on every image except lazy ones off the first frame * fix(studio-server): keep an authored loading attribute in any letter case on preview images * fix(core): leave template content out of findStartTags so preview images match the DOM * fix(studio): send Ask agent the live markup without the preview loading marks * chore(core): drop the template note from findStartTags, its test carries it * perf(studio-server): splice lazy attributes into the preview in one pass * fix(studio): keep authored image loading on copy and Ask agent by marking preview-made lazy images * test(studio-server): follow the capture preview URL back to its sub-composition for every project id * refactor: name the upcoming-clip and GSAP fallback marks once * fix(studio-server): keep capture builds out of the on-disk preview store
@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