ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-04 16:42:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(studio): add storyboard manifest contract, parser, and read API (#1528)

Browse Source 
First PR in the Studio storyboarding stack. Establishes the parseable
contract the storyboard UI reads from; no UI yet.

- core/storyboard: StoryboardManifest/Frame/Globals types + a lenient
  STORYBOARD.md parser (frontmatter + status/src/duration/transition_in,
  freeform narrative tolerated, never throws, records warnings). Exposed as
  @hyperframes/core/storyboard (browser-safe).
- studio-api: GET /projects/:id/storyboard returns the normalized manifest
  with per-frame srcExists; missing file -> exists:false, not 404.
- fixture: packages/studio/fixtures/storyboard-sample for dogfooding the
  storyboard view in later PRs (built/animated frames + one outline).

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
James Russo
2026-06-17 12:06:56 -07:00
committed by GitHub
co-authored by Claude Opus 4.8
parent f72ea25b3b
commit 8a13a07074
17 changed files with 1333 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/fixtures/storyboard-sample/index.html
+81
View File
@@ -0,0 +1,81 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<title>Storyboard Demo</title>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 1920px;
height: 1080px;
overflow: hidden;
background: #07060f;
}
.scene {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div
id="root"
data-composition-id="main"
data-start="0"
data-duration="16"
data-width="1920"
data-height="1080"
>
<div
id="frame-1"
class="scene"
data-composition-id="frame-01-hook"
data-composition-src="compositions/frames/01-hook.html"
data-start="0"
data-duration="3"
data-track-index="1"
></div>
<div
id="frame-2"
class="scene"
data-composition-id="frame-02-problem"
data-composition-src="compositions/frames/02-problem.html"
data-start="3"
data-duration="4"
data-track-index="1"
></div>
<div
id="frame-3"
class="scene"
data-composition-id="frame-03-feature"
data-composition-src="compositions/frames/03-feature.html"
data-start="7"
data-duration="5"
data-track-index="1"
></div>
<div
id="frame-4"
class="scene"
data-composition-id="frame-04-proof"
data-composition-src="compositions/frames/04-proof.html"
data-start="12"
data-duration="4"
data-track-index="1"
></div>
</div>
<script>
window.__timelines = window.__timelines || {};
window.__timelines["main"] = gsap.timeline({ paused: true });
</script>
</body>
</html>