ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-11-14 13:27:13 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
e10921ddbabe9962b6d3b097b47d5fa6bea1c744
hyperframes/packages/studio
T
History
Vance IngallsandClaude Opus 4.6 e10921ddba fix: property panel transforms apply to wrapper via gsap.set 
Panel rotation/scale/position changes now go through the wrapper span
using gsap.set, reading current values first to preserve other properties.
Previously set el.style.transform directly on the word span, overwriting
all existing transforms.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-01 23:37:13 -07:00
..
public/icons/timeline
initial code (#2)
2026-03-21 22:43:56 -07:00
src
fix: property panel transforms apply to wrapper via gsap.set
2026-04-01 23:37:13 -07:00
.gitignore
refactor(studio): update layout, config, and remove agent activity tracking (#64)
2026-03-28 20:45:00 +01:00
index.html
style: apply oxfmt baseline formatting across all source files (#25)
2026-03-23 17:15:14 -07:00
package.json
chore: release v0.2.1
2026-04-01 21:36:24 +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
refactor(studio): update layout, config, and remove agent activity tracking (#64)
2026-03-28 20:45:00 +01:00
vite.config.ts
fix(studio): serve runtime locally instead of from CDN
2026-04-01 23:37:07 -07: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

Related packages

Reference in New Issue View Git Blame Copy Permalink