mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-10-30 17:27:09 +00:00
Vance IngallsandClaude Opus 5.5
e38585ef5f
* perf(studio): timeline thumbnails come back from disk in the next session Reopening a project re-read every video's index and re-decoded every strip: the frame cache and the source facts lived in memory, keyed by the session. Now each source's facts (aspect, duration) and every decoded frame are kept in Cache Storage under the file's ETag, the version the server says it is. A new session checks each source once with a conditional one-byte read: a 304 means the stored frames are still that file's, and a strip they cover paints without opening a reader. A new ETag drops what was stored for the old one. Sources are dropped whole, least recently used first, past 256 MiB. A store that is missing or fails (private window, quota) warns once and the strip decodes as before. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(studio): a reopened project checks its videos again, and the disk index counts a frame once The stored version a session validated was kept per video for the whole page, so reopening a project after one of its videos was replaced at the same path painted the old file's frames until a full reload. It is now kept per video and project open (its contentVersion): each open re-validates once. The index now counts a frame stored again under its name once, and merges with what other tabs saved before writing, keeping caches this tab dropped out, so the 256 MiB budget holds across tabs. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
@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