mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-14 18:01:20 +08:00

Files

T

History

Miguel Ángel e0e11acec6 fix(studio): block element selection while composition is loading

Prevent users from selecting elements in the preview while the
composition is still loading (showing "Loading composition" overlay).
Selection and hover highlighting are suppressed until the player fires
the ready event.

Also reverts motion panel and manual drag editing defaults to false —
these were accidentally set to true during the PR #693 merge.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-05-09 21:50:30 +00:00

public/icons/timeline

initial code (#2 )

2026-03-21 22:43:56 -07:00

src

fix(studio): block element selection while composition is loading

2026-05-09 21:50:30 +00:00

.gitignore

refactor(studio): update layout, config, and remove agent activity tracking (#64 )

2026-03-28 20:45:00 +01:00

index.html

fix(studio): iPhone Safari layout + touch-drag scrubber (#308 )

2026-04-18 01:44:46 +02:00

package.json

chore: release v0.6.0-alpha.4

2026-05-09 20:07:00 +00:00

postcss.config.js

initial code (#2 )

2026-03-21 22:43:56 -07:00

README.md

feat(skills): add hyperframes-cli skill (#154 )

2026-03-31 00:30:55 -07:00

tailwind.config.js

refactor(studio): code quality — 22 findings, dead code removal, App.tsx split (#144 )

2026-03-31 04:21:12 +02:00

tsconfig.json

fix: remove hidden audio gain in renders (#362 )

2026-04-21 20:33:25 +02:00

vite.config.ts

chore: merge next into feat/studio-inspector-selection-ux

2026-05-09 20:06:25 +00:00

vite.producer.test.ts

fix: harden studio timeline editing and local renders (#463 )

2026-04-24 00:18:37 +02:00

vite.producer.ts

fix: harden studio timeline editing and local renders (#463 )

2026-04-24 00:18:37 +02:00

vite.request-body.test.ts

feat(studio): drag assets from the sidebar onto the timeline (#464 )

2026-04-24 02:50:36 +02:00

vite.request-body.ts

feat(studio): drag assets from the sidebar onto the timeline (#464 )

2026-04-24 02:50:36 +02:00

vite.studioMotion.test.ts

feat(studio): add alpha editor layer inspector

2026-05-08 23:24:25 +00:00

vite.studioMotion.ts

feat(studio): simplify inspector selection ux

2026-05-08 21:40:12 -07:00

vite.thumbnail.test.ts

fix: align Studio capture with preview (#595 )

2026-05-02 03:45:38 +02:00

vite.thumbnail.ts

fix: align Studio capture with preview (#595 )

2026-05-02 03:45:38 +02:00

README.md

@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

@hyperframes/core — types and parsers used by the editor
hyperframes — CLI that serves the studio via hyperframes preview

README.md

@hyperframes/studio

Install

What it does

Development

Tech stack

Documentation

Related packages