mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 18:01:20 +08:00
Miguel Ángel
90b9a18b70
STUDIO — edit a selected element's GSAP motion path directly on the canvas: a dashed polyline through its x/y keyframes (or motionPath waypoints) with draggable diamond nodes, in composition coordinates so it tracks GSAP transforms. - Drag a node to rewrite its keyframe/waypoint; click to select a keyframe and park the playhead on it; double-click empty canvas to author a new motionPath; add/remove waypoints inline; right-click a keyframe node for the timeline's delete actions (remove keyframe / remove all). - The overlay spills into the canvas margin without bleeding into the side panels. - Keyframe add/remove key off the tween-relative percentage the GSAP writer expects, so edits from the Design panel, timeline, and motion path all persist and refresh consistently. Array-form keyframes (`keyframes: [...]`) are removable in both the acorn and recast writers. - Dragging a GSAP-animated element folds the offset through gsap.set instead of a conflicting CSS translate; the drag intercept trusts the live runtime so a deleted animation can't be resurrected from a stale parse cache. Gated behind the keyframes flag. CLI — `npx hyperframes keyframes [dir|file]` surfaces every GSAP tween, its keyframes (with absolute times), and an ASCII motion-path drawing so agents can read and edit motion as data instead of guessing at raw numbers. `--selector`, `--json` (machine-readable), filters internal hold markers, draws the path only for genuine multi-point/2-axis motion. Ships the `hyperframes-keyframes` skill (surface → read → edit → verify loop). PRODUCER — esbuild ESM banner also shims `__filename`/`__dirname` so bundled CJS deps (e.g. wawoff2) don't throw "__dirname is not defined" during render.
@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
Related packages
@hyperframes/core— types and parsers used by the editorhyperframes— CLI that serves the studio viahyperframes preview