videowright 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (306) hide show
  1. package/README.md +91 -0
  2. package/dist/cli/argv.d.ts +28 -0
  3. package/dist/cli/argv.d.ts.map +1 -0
  4. package/dist/cli/argv.js +115 -0
  5. package/dist/cli/argv.js.map +1 -0
  6. package/dist/cli/bin.d.ts +7 -0
  7. package/dist/cli/bin.d.ts.map +1 -0
  8. package/dist/cli/bin.js +10 -0
  9. package/dist/cli/bin.js.map +1 -0
  10. package/dist/cli/dev.d.ts +19 -0
  11. package/dist/cli/dev.d.ts.map +1 -0
  12. package/dist/cli/dev.js +104 -0
  13. package/dist/cli/dev.js.map +1 -0
  14. package/dist/cli/discover.d.ts +29 -0
  15. package/dist/cli/discover.d.ts.map +1 -0
  16. package/dist/cli/discover.js +104 -0
  17. package/dist/cli/discover.js.map +1 -0
  18. package/dist/cli/discover_project.d.ts +29 -0
  19. package/dist/cli/discover_project.d.ts.map +1 -0
  20. package/dist/cli/discover_project.js +108 -0
  21. package/dist/cli/discover_project.js.map +1 -0
  22. package/dist/cli/errors.d.ts +10 -0
  23. package/dist/cli/errors.d.ts.map +1 -0
  24. package/dist/cli/errors.js +13 -0
  25. package/dist/cli/errors.js.map +1 -0
  26. package/dist/cli/ffmpeg.d.ts +57 -0
  27. package/dist/cli/ffmpeg.d.ts.map +1 -0
  28. package/dist/cli/ffmpeg.js +122 -0
  29. package/dist/cli/ffmpeg.js.map +1 -0
  30. package/dist/cli/index.d.ts +7 -0
  31. package/dist/cli/index.d.ts.map +1 -0
  32. package/dist/cli/index.js +152 -0
  33. package/dist/cli/index.js.map +1 -0
  34. package/dist/cli/playwright_check.d.ts +44 -0
  35. package/dist/cli/playwright_check.d.ts.map +1 -0
  36. package/dist/cli/playwright_check.js +20 -0
  37. package/dist/cli/playwright_check.js.map +1 -0
  38. package/dist/cli/prompt.d.ts +13 -0
  39. package/dist/cli/prompt.d.ts.map +1 -0
  40. package/dist/cli/prompt.js +47 -0
  41. package/dist/cli/prompt.js.map +1 -0
  42. package/dist/cli/render.d.ts +60 -0
  43. package/dist/cli/render.d.ts.map +1 -0
  44. package/dist/cli/render.js +471 -0
  45. package/dist/cli/render.js.map +1 -0
  46. package/dist/cli/script_cmd.d.ts +26 -0
  47. package/dist/cli/script_cmd.d.ts.map +1 -0
  48. package/dist/cli/script_cmd.js +88 -0
  49. package/dist/cli/script_cmd.js.map +1 -0
  50. package/dist/cli/time_shim.d.ts +44 -0
  51. package/dist/cli/time_shim.d.ts.map +1 -0
  52. package/dist/cli/time_shim.js +390 -0
  53. package/dist/cli/time_shim.js.map +1 -0
  54. package/dist/cli/ts_loader.d.ts +28 -0
  55. package/dist/cli/ts_loader.d.ts.map +1 -0
  56. package/dist/cli/ts_loader.js +95 -0
  57. package/dist/cli/ts_loader.js.map +1 -0
  58. package/dist/cli/vite_helpers.d.ts +62 -0
  59. package/dist/cli/vite_helpers.d.ts.map +1 -0
  60. package/dist/cli/vite_helpers.js +273 -0
  61. package/dist/cli/vite_helpers.js.map +1 -0
  62. package/dist/index.d.ts +11 -0
  63. package/dist/index.d.ts.map +1 -0
  64. package/dist/index.js +14 -0
  65. package/dist/index.js.map +1 -0
  66. package/dist/player/hash_router.d.ts +23 -0
  67. package/dist/player/hash_router.d.ts.map +1 -0
  68. package/dist/player/hash_router.js +49 -0
  69. package/dist/player/hash_router.js.map +1 -0
  70. package/dist/player/hud.d.ts +33 -0
  71. package/dist/player/hud.d.ts.map +1 -0
  72. package/dist/player/hud.js +357 -0
  73. package/dist/player/hud.js.map +1 -0
  74. package/dist/player/index.d.ts +123 -0
  75. package/dist/player/index.d.ts.map +1 -0
  76. package/dist/player/index.js +848 -0
  77. package/dist/player/index.js.map +1 -0
  78. package/dist/player/input.d.ts +14 -0
  79. package/dist/player/input.d.ts.map +1 -0
  80. package/dist/player/input.js +90 -0
  81. package/dist/player/input.js.map +1 -0
  82. package/dist/player/slot.d.ts +22 -0
  83. package/dist/player/slot.d.ts.map +1 -0
  84. package/dist/player/slot.js +43 -0
  85. package/dist/player/slot.js.map +1 -0
  86. package/dist/player/transitions/cut.d.ts +7 -0
  87. package/dist/player/transitions/cut.d.ts.map +1 -0
  88. package/dist/player/transitions/cut.js +9 -0
  89. package/dist/player/transitions/cut.js.map +1 -0
  90. package/dist/player/transitions/fade.d.ts +7 -0
  91. package/dist/player/transitions/fade.d.ts.map +1 -0
  92. package/dist/player/transitions/fade.js +18 -0
  93. package/dist/player/transitions/fade.js.map +1 -0
  94. package/dist/player/transitions/index.d.ts +4 -0
  95. package/dist/player/transitions/index.d.ts.map +1 -0
  96. package/dist/player/transitions/index.js +4 -0
  97. package/dist/player/transitions/index.js.map +1 -0
  98. package/dist/player/transitions/slide.d.ts +6 -0
  99. package/dist/player/transitions/slide.d.ts.map +1 -0
  100. package/dist/player/transitions/slide.js +35 -0
  101. package/dist/player/transitions/slide.js.map +1 -0
  102. package/dist/script/index.d.ts +2 -0
  103. package/dist/script/index.d.ts.map +1 -0
  104. package/dist/script/index.js +2 -0
  105. package/dist/script/index.js.map +1 -0
  106. package/dist/script/script.d.ts +10 -0
  107. package/dist/script/script.d.ts.map +1 -0
  108. package/dist/script/script.js +41 -0
  109. package/dist/script/script.js.map +1 -0
  110. package/dist/segment/SegmentRunner.d.ts +52 -0
  111. package/dist/segment/SegmentRunner.d.ts.map +1 -0
  112. package/dist/segment/SegmentRunner.js +187 -0
  113. package/dist/segment/SegmentRunner.js.map +1 -0
  114. package/dist/segment/defineConfig.d.ts +6 -0
  115. package/dist/segment/defineConfig.d.ts.map +1 -0
  116. package/dist/segment/defineConfig.js +7 -0
  117. package/dist/segment/defineConfig.js.map +1 -0
  118. package/dist/segment/defineSegment.d.ts +7 -0
  119. package/dist/segment/defineSegment.d.ts.map +1 -0
  120. package/dist/segment/defineSegment.js +25 -0
  121. package/dist/segment/defineSegment.js.map +1 -0
  122. package/dist/segment/index.d.ts +5 -0
  123. package/dist/segment/index.d.ts.map +1 -0
  124. package/dist/segment/index.js +4 -0
  125. package/dist/segment/index.js.map +1 -0
  126. package/dist/timeline/index.d.ts +73 -0
  127. package/dist/timeline/index.d.ts.map +1 -0
  128. package/dist/timeline/index.js +142 -0
  129. package/dist/timeline/index.js.map +1 -0
  130. package/dist/timeline/loadAudioTrack.d.ts +18 -0
  131. package/dist/timeline/loadAudioTrack.d.ts.map +1 -0
  132. package/dist/timeline/loadAudioTrack.js +44 -0
  133. package/dist/timeline/loadAudioTrack.js.map +1 -0
  134. package/dist/timeline/loadVoiceover.d.ts +18 -0
  135. package/dist/timeline/loadVoiceover.d.ts.map +1 -0
  136. package/dist/timeline/loadVoiceover.js +38 -0
  137. package/dist/timeline/loadVoiceover.js.map +1 -0
  138. package/dist/timeline/resolveTiming.d.ts +28 -0
  139. package/dist/timeline/resolveTiming.d.ts.map +1 -0
  140. package/dist/timeline/resolveTiming.js +63 -0
  141. package/dist/timeline/resolveTiming.js.map +1 -0
  142. package/dist/timeline/validateTiming.d.ts +29 -0
  143. package/dist/timeline/validateTiming.d.ts.map +1 -0
  144. package/dist/timeline/validateTiming.js +62 -0
  145. package/dist/timeline/validateTiming.js.map +1 -0
  146. package/dist/types.d.ts +216 -0
  147. package/dist/types.d.ts.map +1 -0
  148. package/dist/types.js +6 -0
  149. package/dist/types.js.map +1 -0
  150. package/package.json +47 -0
  151. package/skill/SKILL.md +64 -0
  152. package/skill/assets/hello_world/PLAN.md +31 -0
  153. package/skill/assets/hello_world/README.md +27 -0
  154. package/skill/assets/hello_world/audio/audio_plan.md +14 -0
  155. package/skill/assets/hello_world/segments/hello_intro.ts +69 -0
  156. package/skill/assets/hello_world/segments/hello_outro.ts +71 -0
  157. package/skill/assets/hello_world/timeline.ts +15 -0
  158. package/skill/assets/hello_world/voiceover_script/script.md +10 -0
  159. package/skill/assets/install/package.json +10 -0
  160. package/skill/assets/install/tsconfig.json +23 -0
  161. package/skill/assets/styles/editorial-mono/STYLE.md +124 -0
  162. package/skill/assets/styles/editorial-mono/brand.md +85 -0
  163. package/skill/assets/styles/editorial-mono/reference/animations.jsx +752 -0
  164. package/skill/assets/styles/editorial-mono/reference/scenes.html +563 -0
  165. package/skill/assets/styles/editorial-mono/sample/bullet.ts +101 -0
  166. package/skill/assets/styles/editorial-mono/sample/content.ts +104 -0
  167. package/skill/assets/styles/editorial-mono/sample/cta.ts +113 -0
  168. package/skill/assets/styles/editorial-mono/sample/feature.ts +111 -0
  169. package/skill/assets/styles/editorial-mono/sample/grid.ts +97 -0
  170. package/skill/assets/styles/editorial-mono/sample/kinetic.ts +96 -0
  171. package/skill/assets/styles/editorial-mono/sample/section.ts +101 -0
  172. package/skill/assets/styles/editorial-mono/sample/stat.ts +128 -0
  173. package/skill/assets/styles/editorial-mono/sample/title.ts +97 -0
  174. package/skill/assets/styles/editorial-mono/sample/ui-showcase.ts +159 -0
  175. package/skill/assets/styles/editorial-mono/tokens.css +44 -0
  176. package/skill/assets/styles/iso-diagram/STYLE.md +109 -0
  177. package/skill/assets/styles/iso-diagram/brand.md +32 -0
  178. package/skill/assets/styles/iso-diagram/reference/animations.jsx +673 -0
  179. package/skill/assets/styles/iso-diagram/reference/scenes.html +427 -0
  180. package/skill/assets/styles/iso-diagram/sample/bullet.ts +144 -0
  181. package/skill/assets/styles/iso-diagram/sample/content.ts +192 -0
  182. package/skill/assets/styles/iso-diagram/sample/cta.ts +162 -0
  183. package/skill/assets/styles/iso-diagram/sample/feature.ts +205 -0
  184. package/skill/assets/styles/iso-diagram/sample/grid.ts +181 -0
  185. package/skill/assets/styles/iso-diagram/sample/kinetic.ts +102 -0
  186. package/skill/assets/styles/iso-diagram/sample/section.ts +149 -0
  187. package/skill/assets/styles/iso-diagram/sample/stat.ts +164 -0
  188. package/skill/assets/styles/iso-diagram/sample/title.ts +173 -0
  189. package/skill/assets/styles/iso-diagram/sample/ui-showcase.ts +162 -0
  190. package/skill/assets/styles/iso-diagram/tokens.css +40 -0
  191. package/skill/assets/styles/motion-engineering/STYLE.md +106 -0
  192. package/skill/assets/styles/motion-engineering/brand.md +29 -0
  193. package/skill/assets/styles/motion-engineering/reference/animations.jsx +673 -0
  194. package/skill/assets/styles/motion-engineering/reference/scenes.html +513 -0
  195. package/skill/assets/styles/motion-engineering/sample/bullet.ts +176 -0
  196. package/skill/assets/styles/motion-engineering/sample/content.ts +228 -0
  197. package/skill/assets/styles/motion-engineering/sample/cta.ts +209 -0
  198. package/skill/assets/styles/motion-engineering/sample/feature.ts +299 -0
  199. package/skill/assets/styles/motion-engineering/sample/grid.ts +190 -0
  200. package/skill/assets/styles/motion-engineering/sample/kinetic.ts +159 -0
  201. package/skill/assets/styles/motion-engineering/sample/section.ts +196 -0
  202. package/skill/assets/styles/motion-engineering/sample/stat.ts +230 -0
  203. package/skill/assets/styles/motion-engineering/sample/title.ts +219 -0
  204. package/skill/assets/styles/motion-engineering/sample/ui-showcase.ts +267 -0
  205. package/skill/assets/styles/motion-engineering/tokens.css +40 -0
  206. package/skill/assets/styles/neon-terminal/STYLE.md +105 -0
  207. package/skill/assets/styles/neon-terminal/brand.md +27 -0
  208. package/skill/assets/styles/neon-terminal/reference/animations.jsx +673 -0
  209. package/skill/assets/styles/neon-terminal/reference/scenes.html +387 -0
  210. package/skill/assets/styles/neon-terminal/sample/bullet.ts +113 -0
  211. package/skill/assets/styles/neon-terminal/sample/content.ts +117 -0
  212. package/skill/assets/styles/neon-terminal/sample/cta.ts +131 -0
  213. package/skill/assets/styles/neon-terminal/sample/feature.ts +112 -0
  214. package/skill/assets/styles/neon-terminal/sample/grid.ts +128 -0
  215. package/skill/assets/styles/neon-terminal/sample/kinetic.ts +105 -0
  216. package/skill/assets/styles/neon-terminal/sample/section.ts +96 -0
  217. package/skill/assets/styles/neon-terminal/sample/stat.ts +123 -0
  218. package/skill/assets/styles/neon-terminal/sample/title.ts +122 -0
  219. package/skill/assets/styles/neon-terminal/sample/ui-showcase.ts +127 -0
  220. package/skill/assets/styles/neon-terminal/tokens.css +39 -0
  221. package/skill/assets/styles/risograph/STYLE.md +110 -0
  222. package/skill/assets/styles/risograph/brand.md +26 -0
  223. package/skill/assets/styles/risograph/reference/animations.jsx +673 -0
  224. package/skill/assets/styles/risograph/reference/scenes.html +403 -0
  225. package/skill/assets/styles/risograph/sample/bullet.ts +124 -0
  226. package/skill/assets/styles/risograph/sample/content.ts +135 -0
  227. package/skill/assets/styles/risograph/sample/cta.ts +149 -0
  228. package/skill/assets/styles/risograph/sample/feature.ts +152 -0
  229. package/skill/assets/styles/risograph/sample/grid.ts +123 -0
  230. package/skill/assets/styles/risograph/sample/kinetic.ts +125 -0
  231. package/skill/assets/styles/risograph/sample/section.ts +130 -0
  232. package/skill/assets/styles/risograph/sample/stat.ts +145 -0
  233. package/skill/assets/styles/risograph/sample/title.ts +132 -0
  234. package/skill/assets/styles/risograph/sample/ui-showcase.ts +147 -0
  235. package/skill/assets/styles/risograph/tokens.css +39 -0
  236. package/skill/assets/styles/swiss-console/STYLE.md +107 -0
  237. package/skill/assets/styles/swiss-console/brand.md +37 -0
  238. package/skill/assets/styles/swiss-console/reference/animations.jsx +673 -0
  239. package/skill/assets/styles/swiss-console/reference/scenes.html +420 -0
  240. package/skill/assets/styles/swiss-console/sample/bullet.ts +122 -0
  241. package/skill/assets/styles/swiss-console/sample/content.ts +137 -0
  242. package/skill/assets/styles/swiss-console/sample/cta.ts +109 -0
  243. package/skill/assets/styles/swiss-console/sample/feature.ts +163 -0
  244. package/skill/assets/styles/swiss-console/sample/grid.ts +145 -0
  245. package/skill/assets/styles/swiss-console/sample/kinetic.ts +117 -0
  246. package/skill/assets/styles/swiss-console/sample/section.ts +127 -0
  247. package/skill/assets/styles/swiss-console/sample/stat.ts +148 -0
  248. package/skill/assets/styles/swiss-console/sample/title.ts +148 -0
  249. package/skill/assets/styles/swiss-console/sample/ui-showcase.ts +198 -0
  250. package/skill/assets/styles/swiss-console/tokens.css +39 -0
  251. package/skill/install/INSTALL.md +400 -0
  252. package/skill/references/audio/audio_plan.md +199 -0
  253. package/skill/references/audio/build.md +208 -0
  254. package/skill/references/audio/cue_template.md +219 -0
  255. package/skill/references/audio/ffmpeg_cookbook.md +267 -0
  256. package/skill/references/audio/music/music.md +171 -0
  257. package/skill/references/audio/music/providers/elevenlabs.md +170 -0
  258. package/skill/references/audio/music/providers/manual.md +140 -0
  259. package/skill/references/audio/music/providers/openverse.md +265 -0
  260. package/skill/references/audio/sfx/providers/elevenlabs.md +152 -0
  261. package/skill/references/audio/sfx/providers/manual.md +117 -0
  262. package/skill/references/audio/sfx/providers/openverse.md +243 -0
  263. package/skill/references/audio/sfx/sfx.md +149 -0
  264. package/skill/references/audio/styles.md +102 -0
  265. package/skill/references/audio/sync.md +237 -0
  266. package/skill/references/audio/voiceover/animation_sync.md +142 -0
  267. package/skill/references/audio/voiceover/provider_script.md +153 -0
  268. package/skill/references/audio/voiceover/providers/elevenlabs.md +288 -0
  269. package/skill/references/audio/voiceover/providers/manual.md +100 -0
  270. package/skill/references/audio/voiceover/script_writing.md +100 -0
  271. package/skill/references/audio/voiceover/style_intake.md +56 -0
  272. package/skill/references/audio/voiceover/sync_algorithm.md +167 -0
  273. package/skill/references/audio/voiceover.md +296 -0
  274. package/skill/references/audio.md +135 -0
  275. package/skill/references/authoring_segment.md +446 -0
  276. package/skill/references/create_or_edit_video.md +232 -0
  277. package/skill/references/dev_server.md +157 -0
  278. package/skill/references/export.md +145 -0
  279. package/skill/references/new_video.md +117 -0
  280. package/skill/references/project_structure.md +144 -0
  281. package/skill/references/setup.md +109 -0
  282. package/skill/references/setup_new_style.md +158 -0
  283. package/skill/references/styles.md +154 -0
  284. package/skill/references/testing.md +115 -0
  285. package/skill/references/types.md +240 -0
  286. package/src/cli/entry/components/copy_button.ts +42 -0
  287. package/src/cli/entry/components/download_modal.ts +204 -0
  288. package/src/cli/entry/components/empty_state.ts +55 -0
  289. package/src/cli/entry/components/hide_hud_tab.ts +37 -0
  290. package/src/cli/entry/components/icons.ts +31 -0
  291. package/src/cli/entry/components/top_bar.ts +69 -0
  292. package/src/cli/entry/components/video_card.ts +57 -0
  293. package/src/cli/entry/dev_frame.ts +189 -0
  294. package/src/cli/entry/entry_index.ts +16 -0
  295. package/src/cli/entry/entry_video.ts +24 -0
  296. package/src/cli/entry/index.html +12 -0
  297. package/src/cli/entry/parse_slug.ts +14 -0
  298. package/src/cli/entry/render.html +17 -0
  299. package/src/cli/entry/render_entry.ts +121 -0
  300. package/src/cli/entry/styles/base.css +45 -0
  301. package/src/cli/entry/styles/components.css +605 -0
  302. package/src/cli/entry/styles/tokens.css +44 -0
  303. package/src/cli/entry/video.html +22 -0
  304. package/src/cli/entry/views/homepage.ts +66 -0
  305. package/src/cli/entry/views/video_view.ts +286 -0
  306. package/src/cli/entry/virtual.d.ts +8 -0
package/skill/assets/styles/motion-engineering/reference/scenes.html ADDED
@@ -0,0 +1,513 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>Motion Engineering — Reference Scenes</title>
6
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
7
+ <link rel="stylesheet" href="../tokens.css" />
8
+ <style>
9
+ html, body { margin: 0; padding: 0; height: 100%; background: #0a0a0a; font-family: var(--font-body); }
10
+ .me-canvas { position: absolute; inset: 0; background: var(--color-bg); color: var(--color-fg); overflow: hidden; }
11
+ .me-canvas::before {
12
+ content: ''; position: absolute; inset: 0; pointer-events: none;
13
+ background:
14
+ linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 64px 64px,
15
+ linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 64px 64px;
16
+ }
17
+ .me-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
18
+ .me-h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 0.98; }
19
+ .me-amber { color: var(--color-accent); }
20
+ .me-cyan { color: var(--cyan); }
21
+ .me-muted { color: var(--color-muted); }
22
+ .me-tick { color: var(--color-muted); font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.1em; }
23
+ /* Corner tick marks */
24
+ .me-corner { position: absolute; width: 24px; height: 24px; }
25
+ .me-corner::before, .me-corner::after { content: ''; position: absolute; background: var(--color-accent); }
26
+ .me-corner.tl::before { left: 0; top: 0; width: 24px; height: 1.5px; }
27
+ .me-corner.tl::after { left: 0; top: 0; width: 1.5px; height: 24px; }
28
+ .me-corner.tr::before { right: 0; top: 0; width: 24px; height: 1.5px; }
29
+ .me-corner.tr::after { right: 0; top: 0; width: 1.5px; height: 24px; }
30
+ .me-corner.bl::before { left: 0; bottom: 0; width: 24px; height: 1.5px; }
31
+ .me-corner.bl::after { left: 0; bottom: 0; width: 1.5px; height: 24px; }
32
+ .me-corner.br::before { right: 0; bottom: 0; width: 24px; height: 1.5px; }
33
+ .me-corner.br::after { right: 0; bottom: 0; width: 1.5px; height: 24px; }
34
+ </style>
35
+ </head>
36
+ <body>
37
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
38
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
39
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
40
+ <div id="root"></div>
41
+ <script type="text/babel" src="animations.jsx"></script>
42
+ <script type="text/babel">
43
+ const SCENE = 4;
44
+ const ease = Easing.easeOutCubic;
45
+
46
+ // Animated number — ticks toward target
47
+ function Ticker({ from = 0, to, at = 0, dur = 0.9, suffix = '', pad = 0 }) {
48
+ const { localTime } = useSprite();
49
+ const p = clamp((localTime - at) / dur, 0, 1);
50
+ const v = from + (to - from) * ease(p);
51
+ const n = Math.round(v);
52
+ return <span>{String(n).padStart(pad, '0')}{suffix}</span>;
53
+ }
54
+
55
+ // Stepped reveal
56
+ function Reveal({ at = 0, dur = 0.35, children, style = {}, dir = 'up' }) {
57
+ const { localTime } = useSprite();
58
+ const p = clamp((localTime - at) / dur, 0, 1);
59
+ const e = ease(p);
60
+ const ty = dir === 'up' ? (1 - e) * 14 : 0;
61
+ return <div style={{ ...style, opacity: e, transform: `translateY(${ty}px)` }}>{children}</div>;
62
+ }
63
+
64
+ // Line that draws from 0 → length
65
+ function DrawLine({ at = 0, dur = 0.4, x1, y1, x2, y2, stroke = 'var(--color-accent)', sw = 1.5 }) {
66
+ const { localTime } = useSprite();
67
+ const p = clamp((localTime - at) / dur, 0, 1);
68
+ const e = ease(p);
69
+ const X = x1 + (x2 - x1) * e, Y = y1 + (y2 - y1) * e;
70
+ return <line x1={x1} y1={y1} x2={X} y2={Y} stroke={stroke} strokeWidth={sw} />;
71
+ }
72
+
73
+ // Crosshair at (x,y) — sweeps in
74
+ function Crosshair({ at = 0, x, y, size = 28, color = 'var(--color-accent)' }) {
75
+ const { localTime } = useSprite();
76
+ const p = clamp((localTime - at) / 0.4, 0, 1);
77
+ const e = ease(p);
78
+ const L = size * e;
79
+ return <svg style={{ position: 'absolute', left: x - size, top: y - size, width: size*2, height: size*2, overflow: 'visible' }}>
80
+ <line x1={size - L} y1={size} x2={size + L} y2={size} stroke={color} strokeWidth="1.5" />
81
+ <line x1={size} y1={size - L} x2={size} y2={size + L} stroke={color} strokeWidth="1.5" />
82
+ <circle cx={size} cy={size} r={3 * e} fill="none" stroke={color} strokeWidth="1.5" />
83
+ </svg>;
84
+ }
85
+
86
+ // Frame with corner ticks
87
+ function Frame({ children, style = {}, at = 0 }) {
88
+ return <Reveal at={at} dur={0.35} style={{ position: 'absolute', inset: '80px 96px', border: '1px solid var(--color-border)', ...style }}>
89
+ <div className="me-corner tl" style={{ left: -1, top: -1 }} />
90
+ <div className="me-corner tr" style={{ right: -1, top: -1 }} />
91
+ <div className="me-corner bl" style={{ left: -1, bottom: -1 }} />
92
+ <div className="me-corner br" style={{ right: -1, bottom: -1 }} />
93
+ {children}
94
+ </Reveal>;
95
+ }
96
+
97
+ // Coordinate readout footer
98
+ function CoordReadout() {
99
+ const t = useTime();
100
+ const x = (1240 + Math.sin(t) * 40).toFixed(2);
101
+ const y = (360 + Math.cos(t * 0.7) * 30).toFixed(2);
102
+ const tt = t.toFixed(2);
103
+ return <div className="me-mono" style={{ position: 'absolute', left: 96, right: 96, bottom: 28, display: 'flex', gap: 32, fontSize: 12, color: 'var(--color-muted)', letterSpacing: '0.1em' }}>
104
+ <span>X {x}</span><span>Y {y}</span><span>T {tt}s</span>
105
+ <span style={{ marginLeft: 'auto' }}>UNIT: PX · SCALE 1:1 · BEACON v0.4</span>
106
+ </div>;
107
+ }
108
+
109
+ function Counter() {
110
+ const t = useTime();
111
+ const i = Math.min(9, Math.floor(t / SCENE));
112
+ return <div className="me-mono" style={{ position: 'absolute', right: 96, top: 28, fontSize: 12, color: 'var(--color-muted)', letterSpacing: '0.1em' }}>
113
+ SCENE {String(i+1).padStart(2,'0')}/10
114
+ </div>;
115
+ }
116
+ function Header({ tag = 'SUBJECT' }) {
117
+ return <div className="me-mono" style={{ position: 'absolute', left: 96, top: 28, fontSize: 12, color: 'var(--color-accent)', letterSpacing: '0.2em' }}>
118
+ {`◢ ${tag}`}
119
+ </div>;
120
+ }
121
+
122
+ // ─── Scene 1 — Title ─────────────────────────────────────────────
123
+ function S1() {
124
+ return <Sprite start={0} end={SCENE}>
125
+ <Header tag="DOCUMENT 01 · TITLE" />
126
+ <Frame at={0.1}>
127
+ <Crosshair at={0.4} x={960 - 96} y={400 - 80} />
128
+ <Reveal at={0.7} style={{ position: 'absolute', left: 80, top: 200 }}>
129
+ <div className="me-mono" style={{ color: 'var(--color-accent)', fontSize: 14, letterSpacing: '0.25em', marginBottom: 24 }}>◢ BEACON · LONG-RUNNING AGENTS · v0.4.0</div>
130
+ </Reveal>
131
+ <Reveal at={1.0} style={{ position: 'absolute', left: 80, top: 260 }}>
132
+ <div className="me-h1" style={{ fontSize: 240 }}>Beacon</div>
133
+ </Reveal>
134
+ <Reveal at={1.5} style={{ position: 'absolute', left: 80, top: 540 }}>
135
+ <div className="me-h1" style={{ fontSize: 56, fontWeight: 400, color: 'var(--color-muted)' }}>Memory · Reasoning · Recovery</div>
136
+ </Reveal>
137
+ {/* Dimension lines bracketing the title */}
138
+ <svg style={{ position: 'absolute', left: 80, top: 800, width: 1500, height: 60, overflow: 'visible' }}>
139
+ <DrawLine at={1.8} x1={0} y1={20} x2={1500} y2={20} stroke="var(--cyan)" />
140
+ <DrawLine at={1.8} x1={0} y1={10} x2={0} y2={30} stroke="var(--cyan)" />
141
+ <DrawLine at={1.8} x1={1500} y1={10} x2={1500} y2={30} stroke="var(--cyan)" />
142
+ <Reveal at={2.2}>
143
+ <text x={750} y={48} fill="var(--cyan)" fontFamily="var(--font-mono)" fontSize="14" textAnchor="middle">1500.00 PX</text>
144
+ </Reveal>
145
+ </svg>
146
+ </Frame>
147
+ <Counter /><CoordReadout />
148
+ </Sprite>;
149
+ }
150
+
151
+ // ─── Scene 2 — Section ───────────────────────────────────────────
152
+ function S2() {
153
+ return <Sprite start={SCENE} end={SCENE*2}>
154
+ <Header tag="DOCUMENT 02 · SECTION HEADER" />
155
+ <Frame at={0.05}>
156
+ <Reveal at={0.4} style={{ position: 'absolute', left: 80, top: 180 }}>
157
+ <div className="me-mono" style={{ color: 'var(--color-accent)', fontSize: 16, letterSpacing: '0.3em', marginBottom: 32 }}>── CHAPTER 02 ─────────────────────────────────────────────────</div>
158
+ </Reveal>
159
+ <Reveal at={0.8} style={{ position: 'absolute', left: 80, top: 260 }}>
160
+ <div className="me-h1" style={{ fontSize: 220 }}>The architecture.</div>
161
+ </Reveal>
162
+ <Reveal at={1.4} style={{ position: 'absolute', left: 80, top: 660 }}>
163
+ <div className="me-mono me-muted" style={{ fontSize: 18, letterSpacing: '0.2em' }}>3 PRIMITIVES · MEMORY · REASONING · RECOVERY</div>
164
+ </Reveal>
165
+ <svg style={{ position: 'absolute', left: 80, top: 760, width: 1500, height: 12, overflow: 'visible' }}>
166
+ <DrawLine at={1.6} dur={0.6} x1={0} y1={6} x2={1500} y2={6} stroke="var(--color-accent)" sw={2} />
167
+ </svg>
168
+ </Frame>
169
+ <Counter /><CoordReadout />
170
+ </Sprite>;
171
+ }
172
+
173
+ // ─── Scene 3 — Kinetic ───────────────────────────────────────────
174
+ function S3() {
175
+ const words = ['Most', 'agents', 'fail', 'because', 'they', 'forget.'];
176
+ return <Sprite start={SCENE*2} end={SCENE*3}>
177
+ <Header tag="DOCUMENT 03 · PREMISE" />
178
+ <Frame at={0.05}>
179
+ <div style={{ position: 'absolute', left: 80, top: 240, width: 1500 }}>
180
+ {words.map((w, i) => (
181
+ <Reveal key={i} at={0.5 + i * 0.18}>
182
+ <div className="me-h1" style={{ fontSize: 130, position: 'relative', display: 'inline-block', marginRight: 30, color: i === words.length - 1 ? 'var(--color-accent)' : 'inherit' }}>
183
+ <span style={{ position: 'absolute', top: -14, left: 0, right: 0, height: 1, background: 'var(--color-muted)' }} />
184
+ <span style={{ position: 'absolute', top: -14, left: 0, width: 1, height: 12, background: 'var(--color-muted)' }} />
185
+ <span style={{ position: 'absolute', top: -14, right: 0, width: 1, height: 12, background: 'var(--color-muted)' }} />
186
+ {w}
187
+ {i === words.length - 1 && <span style={{ position: 'absolute', inset: '-12px -8px', border: '1.5px solid var(--color-accent)' }} />}
188
+ </div>
189
+ </Reveal>
190
+ ))}
191
+ </div>
192
+ </Frame>
193
+ <Counter /><CoordReadout />
194
+ </Sprite>;
195
+ }
196
+
197
+ // ─── Scene 4 — Bullet ────────────────────────────────────────────
198
+ function S4() {
199
+ const items = [
200
+ ['ITEM 01', 'Context windows decay.', 'Δ = 12.4ms'],
201
+ ['ITEM 02', 'Tool selection drifts.', 'Δ = 09.1ms'],
202
+ ['ITEM 03', 'Plans go stale.', 'Δ = 22.6ms'],
203
+ ['ITEM 04', 'Errors compound.', 'Δ = 31.0ms'],
204
+ ['ITEM 05', 'Recovery requires restart.', 'Δ = 88.4ms'],
205
+ ];
206
+ return <Sprite start={SCENE*3} end={SCENE*4}>
207
+ <Header tag="DOCUMENT 04 · FAILURE MODES" />
208
+ <Frame at={0.05}>
209
+ <Reveal at={0.3} style={{ position: 'absolute', left: 80, top: 100 }}>
210
+ <div className="me-mono" style={{ fontSize: 14, color: 'var(--color-accent)', letterSpacing: '0.25em', marginBottom: 18 }}>◢ 4.1 KNOWN FAILURE MODES (n=5)</div>
211
+ <div className="me-h1" style={{ fontSize: 84 }}>Where agents break.</div>
212
+ </Reveal>
213
+ <div style={{ position: 'absolute', left: 80, right: 80, top: 360 }}>
214
+ {items.map(([n, t, m], i) => (
215
+ <Reveal key={n} at={0.7 + i * 0.18} style={{ display: 'grid', gridTemplateColumns: '140px 1fr 200px', alignItems: 'baseline', padding: '22px 0', borderTop: '1px solid var(--color-border)' }}>
216
+ <span className="me-mono me-amber" style={{ fontSize: 13, letterSpacing: '0.2em' }}>{n}</span>
217
+ <span style={{ fontSize: 44 }}>{t}</span>
218
+ <span className="me-mono me-cyan" style={{ fontSize: 14, textAlign: 'right' }}>{m}</span>
219
+ </Reveal>
220
+ ))}
221
+ </div>
222
+ </Frame>
223
+ <Counter /><CoordReadout />
224
+ </Sprite>;
225
+ }
226
+
227
+ // ─── Scene 5 — Stat ──────────────────────────────────────────────
228
+ function S5() {
229
+ return <Sprite start={SCENE*4} end={SCENE*5}>
230
+ <Header tag="DOCUMENT 05 · MEASUREMENT" />
231
+ <Frame at={0.05}>
232
+ <Reveal at={0.3} style={{ position: 'absolute', left: 80, top: 100 }}>
233
+ <div className="me-mono me-amber" style={{ fontSize: 13, letterSpacing: '0.25em' }}>◢ FIG. 05.1 · FAILURE_RATE(step &gt; 4)</div>
234
+ </Reveal>
235
+ <div style={{ position: 'absolute', left: 80, top: 220, width: 1100 }}>
236
+ {/* Top dim line */}
237
+ <svg style={{ width: '100%', height: 36, overflow: 'visible', display: 'block' }}>
238
+ <DrawLine at={0.5} dur={0.6} x1={0} y1={18} x2={1100} y2={18} stroke="var(--cyan)" />
239
+ <DrawLine at={0.5} x1={0} y1={6} x2={0} y2={30} stroke="var(--cyan)" />
240
+ <DrawLine at={0.5} x1={1100} y1={6} x2={1100} y2={30} stroke="var(--cyan)" />
241
+ </svg>
242
+ <div className="me-h1 me-amber" style={{ fontSize: 420, lineHeight: 1.0, margin: '20px 0' }}>
243
+ <Ticker to={84} at={0.7} dur={1.1} suffix="" pad={2} /><span style={{ fontSize: 220 }}>%</span>
244
+ </div>
245
+ <svg style={{ width: '100%', height: 36, overflow: 'visible', display: 'block' }}>
246
+ <DrawLine at={1.6} dur={0.6} x1={0} y1={18} x2={1100} y2={18} stroke="var(--cyan)" />
247
+ <DrawLine at={1.6} x1={0} y1={6} x2={0} y2={30} stroke="var(--cyan)" />
248
+ <DrawLine at={1.6} x1={1100} y1={6} x2={1100} y2={30} stroke="var(--cyan)" />
249
+ </svg>
250
+ </div>
251
+ <Reveal at={2.1} style={{ position: 'absolute', right: 80, top: 320, width: 600 }}>
252
+ <div className="me-mono me-muted" style={{ fontSize: 12, letterSpacing: '0.25em', marginBottom: 18 }}>── CAPTION ──</div>
253
+ <div style={{ fontSize: 28, lineHeight: 1.35 }}>of agent failures occur after the 4th tool call.</div>
254
+ <div className="me-mono me-muted" style={{ fontSize: 13, marginTop: 24, letterSpacing: '0.15em' }}>SOURCE: BEACON.LOGS · N=12,840 · Q1·2026</div>
255
+ </Reveal>
256
+ </Frame>
257
+ <Counter /><CoordReadout />
258
+ </Sprite>;
259
+ }
260
+
261
+ // ─── Scene 6 — Feature (2-col schematic + prose) ────────────────
262
+ function S6() {
263
+ return <Sprite start={SCENE*5} end={SCENE*6}>
264
+ <Header tag="DOCUMENT 06 · FEATURE 01 of 03" />
265
+ <Frame at={0.05}>
266
+ {/* Left: wireframe schematic */}
267
+ <div style={{ position: 'absolute', left: 80, top: 100, width: 760, height: 760 }}>
268
+ <Reveal at={0.3}>
269
+ <div className="me-mono me-muted" style={{ fontSize: 12, letterSpacing: '0.25em', marginBottom: 18 }}>── SCHEMATIC · 06.1 ──</div>
270
+ </Reveal>
271
+ <svg width="760" height="700" style={{ overflow: 'visible' }}>
272
+ {/* Plan timeline boxes */}
273
+ {[0,1,2,3,4].map(i => (
274
+ <g key={i}>
275
+ <DrawLine at={0.6 + i*0.1} x1={20 + i*140} y1={140} x2={120 + i*140} y2={140} stroke="var(--color-muted)" />
276
+ <DrawLine at={0.6 + i*0.1} x1={20 + i*140} y1={120} x2={20 + i*140} y2={160} stroke="var(--color-muted)" />
277
+ <DrawLine at={0.6 + i*0.1} x1={120 + i*140} y1={120} x2={120 + i*140} y2={160} stroke="var(--color-muted)" />
278
+ </g>
279
+ ))}
280
+ {/* Snapshot ticks */}
281
+ {[0,1,2,3,4].map(i => (
282
+ <g key={'s'+i}>
283
+ <DrawLine at={1.2 + i*0.12} x1={70 + i*140} y1={140} x2={70 + i*140} y2={240} stroke="var(--color-accent)" sw={1.5} />
284
+ <Reveal at={1.4 + i*0.12}>
285
+ <circle cx={70 + i*140} cy={240} r="6" fill="var(--color-accent)" />
286
+ </Reveal>
287
+ </g>
288
+ ))}
289
+ {/* Rewind arrow */}
290
+ <DrawLine at={2.3} dur={0.6} x1={490} y1={340} x2={210} y2={340} stroke="var(--cyan)" sw={2} />
291
+ <Reveal at={2.9}>
292
+ <polygon points="210,340 222,332 222,348" fill="var(--cyan)" />
293
+ <text x={350} y={325} fill="var(--cyan)" fontFamily="var(--font-mono)" fontSize="14" textAnchor="middle">REWIND → snap_002</text>
294
+ </Reveal>
295
+ {/* Axis labels */}
296
+ <Reveal at={0.7}>
297
+ <text x={20} y={108} fill="var(--color-muted)" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.15em">PLAN.STEP →</text>
298
+ <text x={20} y={280} fill="var(--color-muted)" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.15em">SNAPSHOTS</text>
299
+ </Reveal>
300
+ </svg>
301
+ </div>
302
+ {/* Right: copy */}
303
+ <div style={{ position: 'absolute', right: 80, top: 100, width: 700 }}>
304
+ <Reveal at={0.3}>
305
+ <div className="me-mono me-amber" style={{ fontSize: 13, letterSpacing: '0.25em', marginBottom: 24 }}>◢ FEATURE 01 / 03</div>
306
+ </Reveal>
307
+ <Reveal at={0.6}>
308
+ <div className="me-h1" style={{ fontSize: 92, marginBottom: 36 }}>Checkpoint memory.</div>
309
+ </Reveal>
310
+ <Reveal at={1.1}>
311
+ <div style={{ fontSize: 26, lineHeight: 1.5, color: 'var(--color-muted)', marginBottom: 40 }}>
312
+ Snapshots an agent's reasoning state at each tool boundary. When a plan goes stale, the agent rewinds to the last point its world model was correct.
313
+ </div>
314
+ </Reveal>
315
+ <Reveal at={1.6}>
316
+ <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 24, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
317
+ <div><div className="me-mono me-muted" style={{ fontSize: 11, letterSpacing: '0.2em' }}>SNAPSHOT/MIN</div><div className="me-mono me-amber" style={{ fontSize: 36 }}><Ticker to={120} at={1.8} /></div></div>
318
+ <div><div className="me-mono me-muted" style={{ fontSize: 11, letterSpacing: '0.2em' }}>RESTORE</div><div className="me-mono me-amber" style={{ fontSize: 36 }}><Ticker to={9} at={1.8} /> ms</div></div>
319
+ </div>
320
+ </Reveal>
321
+ </div>
322
+ </Frame>
323
+ <Counter /><CoordReadout />
324
+ </Sprite>;
325
+ }
326
+
327
+ // ─── Scene 7 — 3-card grid ───────────────────────────────────────
328
+ function S7() {
329
+ const cards = [
330
+ { n: '01', name: 'Memory', metric: '120 snap/min', sym: 'M' },
331
+ { n: '02', name: 'Reasoning', metric: '9 ms restore', sym: 'R' },
332
+ { n: '03', name: 'Recovery', metric: '0 lost steps', sym: 'C' },
333
+ ];
334
+ return <Sprite start={SCENE*6} end={SCENE*7}>
335
+ <Header tag="DOCUMENT 07 · ARCHITECTURE OVERVIEW" />
336
+ <Frame at={0.05}>
337
+ <Reveal at={0.3} style={{ position: 'absolute', left: 80, top: 100 }}>
338
+ <div className="me-mono me-amber" style={{ fontSize: 13, letterSpacing: '0.25em', marginBottom: 18 }}>◢ FIG. 07 · PRIMITIVES (3)</div>
339
+ <div className="me-h1" style={{ fontSize: 84 }}>Three primitives.</div>
340
+ </Reveal>
341
+ <div style={{ position: 'absolute', left: 80, right: 80, top: 380, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32 }}>
342
+ {cards.map((c, i) => (
343
+ <Reveal key={c.n} at={0.8 + i*0.15}>
344
+ <div style={{ position: 'relative', padding: 32, border: '1px solid var(--color-border)', minHeight: 420 }}>
345
+ <div className="me-corner tl" style={{ left: -1, top: -1 }} />
346
+ <div className="me-corner tr" style={{ right: -1, top: -1 }} />
347
+ <div className="me-corner bl" style={{ left: -1, bottom: -1 }} />
348
+ <div className="me-corner br" style={{ right: -1, bottom: -1 }} />
349
+ <div className="me-mono me-muted" style={{ fontSize: 12, letterSpacing: '0.25em' }}>PRIMITIVE {c.n} / 03</div>
350
+ <svg width="200" height="160" style={{ marginTop: 28 }}>
351
+ <circle cx="100" cy="80" r="50" fill="none" stroke="var(--color-accent)" strokeWidth="1.5" />
352
+ <text x="100" y="92" fill="var(--color-accent)" fontFamily="var(--font-display)" fontSize="44" fontWeight="500" textAnchor="middle">{c.sym}</text>
353
+ <line x1="40" y1="80" x2="160" y2="80" stroke="var(--color-muted)" strokeDasharray="2 4" />
354
+ </svg>
355
+ <div className="me-h1" style={{ fontSize: 56, marginTop: 24 }}>{c.name}</div>
356
+ <div className="me-mono me-cyan" style={{ fontSize: 14, marginTop: 16, letterSpacing: '0.15em' }}>◢ {c.metric}</div>
357
+ </div>
358
+ </Reveal>
359
+ ))}
360
+ </div>
361
+ </Frame>
362
+ <Counter /><CoordReadout />
363
+ </Sprite>;
364
+ }
365
+
366
+ // ─── Scene 8 — UI showcase (blueprint of app) ────────────────────
367
+ function S8() {
368
+ const callouts = [
369
+ { x: 380, y: 280, lx: 850, ly: 140, label: 'A · TIMELINE', desc: 'Live agent steps with checkpoint markers.' },
370
+ { x: 1100, y: 460, lx: 1450, ly: 600, label: 'B · MEMORY', desc: 'Active snapshot ring (last 12 minutes).' },
371
+ { x: 280, y: 720, lx: 100, ly: 820, label: 'C · CONTROLS', desc: 'Rewind, pin, branch.' },
372
+ ];
373
+ return <Sprite start={SCENE*7} end={SCENE*8}>
374
+ <Header tag="DOCUMENT 08 · CONSOLE UI" />
375
+ <Frame at={0.05}>
376
+ <Reveal at={0.3} style={{ position: 'absolute', left: 80, top: 80 }}>
377
+ <div className="me-mono me-amber" style={{ fontSize: 13, letterSpacing: '0.25em' }}>◢ FIG. 08 · BEACON.CONSOLE v0.4 · ANNOTATED</div>
378
+ </Reveal>
379
+ {/* App mock */}
380
+ <Reveal at={0.6}>
381
+ <div style={{ position: 'absolute', left: 80, top: 160, right: 80, bottom: 100, border: '1px solid var(--color-border)', background: 'var(--color-surface)' }}>
382
+ {/* sidebar */}
383
+ <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 220, borderRight: '1px solid var(--color-border)', padding: 20 }}>
384
+ <div className="me-mono me-muted" style={{ fontSize: 11, letterSpacing: '0.25em', marginBottom: 16 }}>BEACON</div>
385
+ {['Runs','Memory','Plans','Tools','Traces','Evals'].map((x, i) => (
386
+ <div key={x} className="me-mono" style={{ padding: '8px 10px', fontSize: 14, color: i===1 ? 'var(--color-accent)' : 'var(--color-muted)', background: i===1 ? 'rgba(255,136,0,0.08)' : 'transparent', borderLeft: i===1 ? '2px solid var(--color-accent)' : '2px solid transparent' }}>{x}</div>
387
+ ))}
388
+ </div>
389
+ {/* timeline */}
390
+ <div style={{ position: 'absolute', left: 220, right: 280, top: 0, height: '60%', padding: 24, borderBottom: '1px solid var(--color-border)' }}>
391
+ <div className="me-mono me-muted" style={{ fontSize: 11, letterSpacing: '0.25em' }}>TIMELINE · session 41ac</div>
392
+ <svg width="100%" height="180" style={{ marginTop: 20 }}>
393
+ <line x1="0" y1="100" x2="100%" y2="100" stroke="var(--color-muted)" strokeWidth="1" />
394
+ {[0.05,0.18,0.31,0.44,0.57,0.70,0.83,0.95].map((p, i) => (
395
+ <g key={i}>
396
+ <circle cx={`${p*100}%`} cy="100" r="5" fill={i===5 ? 'var(--color-accent)' : 'var(--color-border)'} stroke={i===5 ? 'var(--color-accent)' : 'var(--color-muted)'} />
397
+ <text x={`${p*100}%`} y="135" fill="var(--color-muted)" fontSize="10" fontFamily="var(--font-mono)" textAnchor="middle">t{String(i).padStart(2,'0')}</text>
398
+ </g>
399
+ ))}
400
+ </svg>
401
+ <div className="me-mono" style={{ fontSize: 13, color: 'var(--color-fg)', marginTop: 16 }}>● Active: snap_006 · plan v3 · revising</div>
402
+ </div>
403
+ {/* logs */}
404
+ <div style={{ position: 'absolute', left: 220, right: 280, bottom: 0, top: '60%', padding: 24 }}>
405
+ <div className="me-mono me-muted" style={{ fontSize: 11, letterSpacing: '0.25em' }}>TRACE</div>
406
+ {['[t05] tool.search → 12 results','[t06] plan.revise → step 4 dropped','[t07] memory.snap → ok','[t08] reason.step → "select top-3 by F1"'].map((l, i) => (
407
+ <div key={i} className="me-mono" style={{ fontSize: 13, color: 'var(--color-muted)', marginTop: 8 }}>{l}</div>
408
+ ))}
409
+ </div>
410
+ {/* memory */}
411
+ <div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 280, borderLeft: '1px solid var(--color-border)', padding: 20 }}>
412
+ <div className="me-mono me-muted" style={{ fontSize: 11, letterSpacing: '0.25em', marginBottom: 16 }}>MEMORY</div>
413
+ {[0,1,2,3,4,5,6,7,8,9,10,11].map(i => (
414
+ <div key={i} className="me-mono" style={{ fontSize: 12, padding: '5px 0', display: 'flex', justifyContent: 'space-between', color: i === 5 ? 'var(--color-accent)' : 'var(--color-muted)' }}>
415
+ <span>snap_{String(i).padStart(3,'0')}</span><span>{(i*0.4 + 0.2).toFixed(1)}s</span>
416
+ </div>
417
+ ))}
418
+ </div>
419
+ </div>
420
+ </Reveal>
421
+ {/* Callouts */}
422
+ <svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none', width: '100%', height: '100%' }}>
423
+ {callouts.map((c, i) => (
424
+ <g key={c.label}>
425
+ <DrawLine at={1.4 + i*0.25} dur={0.5} x1={c.x} y1={c.y} x2={c.lx} y2={c.ly} stroke="var(--color-accent)" />
426
+ <Reveal at={1.9 + i*0.25}>
427
+ <circle cx={c.x} cy={c.y} r="5" fill="var(--color-accent)" />
428
+ <circle cx={c.x} cy={c.y} r="11" fill="none" stroke="var(--color-accent)" />
429
+ <rect x={c.lx - 4} y={c.ly - 18} width={c.label.length * 9 + 60} height={20} fill="var(--color-bg)" />
430
+ <text x={c.lx} y={c.ly - 4} fill="var(--color-accent)" fontFamily="var(--font-mono)" fontSize="13" letterSpacing="0.15em">{c.label}</text>
431
+ <text x={c.lx} y={c.ly + 18} fill="var(--color-muted)" fontFamily="var(--font-mono)" fontSize="11">{c.desc}</text>
432
+ </Reveal>
433
+ </g>
434
+ ))}
435
+ </svg>
436
+ </Frame>
437
+ <Counter /><CoordReadout />
438
+ </Sprite>;
439
+ }
440
+
441
+ // ─── Scene 9 — Content ───────────────────────────────────────────
442
+ function S9() {
443
+ return <Sprite start={SCENE*8} end={SCENE*9}>
444
+ <Header tag="DOCUMENT 09 · MEMO" />
445
+ <Frame at={0.05}>
446
+ <Reveal at={0.3} style={{ position: 'absolute', left: 80, top: 100 }}>
447
+ <div className="me-mono me-amber" style={{ fontSize: 13, letterSpacing: '0.25em' }}>◢ MEMO · 2026.05 · BEACON.TEAM</div>
448
+ </Reveal>
449
+ <Reveal at={0.6} style={{ position: 'absolute', left: 80, top: 160 }}>
450
+ <div className="me-h1" style={{ fontSize: 84, marginBottom: 56 }}>What we believe.</div>
451
+ </Reveal>
452
+ <div style={{ position: 'absolute', left: 80, right: 80, top: 380, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56 }}>
453
+ <Reveal at={0.9}>
454
+ <div style={{ fontSize: 30, lineHeight: 1.45, marginBottom: 24 }}>
455
+ The next decade of AI infrastructure will be built around <span className="me-amber">long runs</span> — agents that work for hours, not seconds.
456
+ </div>
457
+ <div className="me-mono me-muted" style={{ fontSize: 12, letterSpacing: '0.25em', paddingTop: 16, borderTop: '1px solid var(--color-border)' }}>── THESIS A ──</div>
458
+ </Reveal>
459
+ <Reveal at={1.3}>
460
+ <div style={{ fontSize: 26, lineHeight: 1.5, color: 'var(--color-muted)', marginBottom: 24 }}>
461
+ The bottleneck won't be the model. It will be everything around the model — memory, recovery, observability. The unglamorous parts. The parts we are building.
462
+ </div>
463
+ <div className="me-mono me-muted" style={{ fontSize: 12, letterSpacing: '0.25em', paddingTop: 16, borderTop: '1px solid var(--color-border)' }}>── THESIS B ──</div>
464
+ </Reveal>
465
+ </div>
466
+ </Frame>
467
+ <Counter /><CoordReadout />
468
+ </Sprite>;
469
+ }
470
+
471
+ // ─── Scene 10 — CTA ──────────────────────────────────────────────
472
+ function S10() {
473
+ return <Sprite start={SCENE*9} end={SCENE*10}>
474
+ <Header tag="DOCUMENT 10 · ACTION" />
475
+ <Frame at={0.05}>
476
+ {/* Reticle */}
477
+ <svg style={{ position: 'absolute', left: '50%', top: '46%', width: 600, height: 600, transform: 'translate(-50%, -50%)', overflow: 'visible' }}>
478
+ <Reveal at={0.4}>
479
+ <circle cx="300" cy="300" r="220" fill="none" stroke="var(--color-accent)" strokeWidth="1.5" />
480
+ <circle cx="300" cy="300" r="160" fill="none" stroke="var(--color-muted)" strokeWidth="1" strokeDasharray="3 4" />
481
+ </Reveal>
482
+ <DrawLine at={0.8} x1={300} y1={20} x2={300} y2={120} stroke="var(--color-accent)" />
483
+ <DrawLine at={0.8} x1={300} y1={580} x2={300} y2={480} stroke="var(--color-accent)" />
484
+ <DrawLine at={0.8} x1={20} y1={300} x2={120} y2={300} stroke="var(--color-accent)" />
485
+ <DrawLine at={0.8} x1={580} y1={300} x2={480} y2={300} stroke="var(--color-accent)" />
486
+ </svg>
487
+ <Reveal at={1.2} style={{ position: 'absolute', left: 0, right: 0, top: '42%', textAlign: 'center' }}>
488
+ <div className="me-h1" style={{ fontSize: 200 }}>Start the agent.</div>
489
+ </Reveal>
490
+ <Reveal at={1.7} style={{ position: 'absolute', left: 0, right: 0, top: '64%', textAlign: 'center' }}>
491
+ <div className="me-mono me-amber" style={{ fontSize: 28, letterSpacing: '0.15em' }}>BEACON.RUN/START</div>
492
+ </Reveal>
493
+ <Reveal at={2.1} style={{ position: 'absolute', left: 0, right: 0, bottom: 100, textAlign: 'center' }}>
494
+ <div className="me-mono me-muted" style={{ fontSize: 13, letterSpacing: '0.3em' }}>────── BEACON · MAY 2026 · v0.4.0 ──────</div>
495
+ </Reveal>
496
+ </Frame>
497
+ <Counter /><CoordReadout />
498
+ </Sprite>;
499
+ }
500
+
501
+ function App() {
502
+ return (
503
+ <Stage width={1920} height={1080} duration={SCENE*10} background="var(--color-bg)" persistKey="motion-engineering-ref">
504
+ <div className="me-canvas">
505
+ <S1 /><S2 /><S3 /><S4 /><S5 /><S6 /><S7 /><S8 /><S9 /><S10 />
506
+ </div>
507
+ </Stage>
508
+ );
509
+ }
510
+ ReactDOM.createRoot(document.getElementById('root')).render(<App />);
511
+ </script>
512
+ </body>
513
+ </html>