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/swiss-console/reference/scenes.html ADDED
@@ -0,0 +1,420 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>Swiss Console — Reference Scenes</title>
6
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
7
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8
+ <link href="https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600,700&display=swap" rel="stylesheet" />
9
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
10
+ <link rel="stylesheet" href="../tokens.css" />
11
+ <style>
12
+ html, body { margin: 0; padding: 0; height: 100%; background: #0a0a0a; font-family: var(--font-body); }
13
+ .sc-canvas { position: absolute; inset: 0; background: var(--color-bg); color: var(--color-fg); overflow: hidden; }
14
+ .sc-label { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); font-weight: 500; }
15
+ .sc-label.fg { color: var(--color-fg); }
16
+ .sc-label.acc { color: var(--color-accent); }
17
+ .sc-rule { background: var(--color-border); height: 1px; width: 100%; }
18
+ .sc-h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 0.96; color: var(--color-fg); }
19
+ .sc-body { font-family: var(--font-body); font-weight: 400; color: var(--color-fg); line-height: 1.4; font-variant-numeric: tabular-nums; }
20
+ .sc-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
21
+ .sc-acc { color: var(--color-accent); }
22
+ .sc-muted { color: var(--color-muted); }
23
+ .sc-page-rule { position: absolute; left: 96px; right: 96px; height: 1px; background: var(--color-border); }
24
+ .sc-page-rule.top { top: 56px; }
25
+ .sc-page-rule.bottom { bottom: 56px; }
26
+ .sc-folio { position: absolute; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); top: 32px; }
27
+ .sc-folio.l { left: 96px; } .sc-folio.r { right: 96px; }
28
+ .sc-foot { position: absolute; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); bottom: 32px; }
29
+ .sc-foot.l { left: 96px; } .sc-foot.r { right: 96px; }
30
+ </style>
31
+ </head>
32
+ <body>
33
+
34
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
35
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
36
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
37
+
38
+ <div id="root"></div>
39
+
40
+ <script type="text/babel" src="animations.jsx"></script>
41
+ <script type="text/babel">
42
+ const SCENE = 3.8;
43
+ const EOUT = Easing.easeOutQuart;
44
+
45
+ // Slide-in from grid rail: combine subtle translate + fade
46
+ function Slide({ children, at = 0, from = 'right', dist = 32, style = {}, className = '' }) {
47
+ const { localTime } = useSprite();
48
+ const t = clamp((localTime - at) / 0.45, 0, 1);
49
+ const k = EOUT(t);
50
+ const dx = from === 'right' ? (1 - k) * dist : from === 'left' ? -(1 - k) * dist : 0;
51
+ const dy = from === 'top' ? -(1 - k) * dist : from === 'bottom' ? (1 - k) * dist : 0;
52
+ // exit fade
53
+ const exitStart = SCENE - 0.18;
54
+ let op = k;
55
+ if (localTime > exitStart) op *= clamp((SCENE - localTime) / 0.18, 0, 1);
56
+ return <div className={className} style={{ ...style, opacity: op, transform: `translate(${dx}px, ${dy}px)` }}>{children}</div>;
57
+ }
58
+
59
+ function Chrome({ folio, foot }) {
60
+ return (
61
+ <Sprite start={0} end={SCENE * 10} keepMounted>
62
+ <div className="sc-page-rule top" />
63
+ <div className="sc-page-rule bottom" />
64
+ <div className="sc-folio l">{folio}</div>
65
+ <div className="sc-foot l">{foot}</div>
66
+ </Sprite>
67
+ );
68
+ }
69
+
70
+ function CounterUR() {
71
+ const time = useTime();
72
+ const idx = Math.min(9, Math.floor(time / SCENE));
73
+ const labels = ['Title','Section','Statement','List','Stat','Feature','Grid','Console','Content','End'];
74
+ return (
75
+ <div className="sc-folio r">{String(idx+1).padStart(2,'0')} / 10 · {labels[idx]}</div>
76
+ );
77
+ }
78
+ function ClockBR() {
79
+ const time = useTime();
80
+ const m = Math.floor(time/60); const s = Math.floor(time%60);
81
+ return <div className="sc-foot r sc-num">T+ {String(m).padStart(2,'0')}:{String(s).padStart(2,'0')}</div>;
82
+ }
83
+
84
+ /* 12-col grid helper at 1920 wide: 96 margin, 11 gutters of 24, 12 cols of 132 */
85
+ const COL = (n) => 96 + (n-1) * (132 + 24); // start x of column n (1-indexed)
86
+ const COLW = (span) => span * 132 + (span - 1) * 24;
87
+
88
+ // ── Scene 1 — Title ─────────────────────────────────────────────────
89
+ function S1() {
90
+ return <Sprite start={0} end={SCENE}>
91
+ <Slide at={0} style={{ position: 'absolute', left: COL(1), top: 80 }} dist={0}>
92
+ <div className="sc-label fg">01 / Overview · Beacon Inc.</div>
93
+ </Slide>
94
+ <Slide at={0.1} style={{ position: 'absolute', left: COL(1), top: COL(1) ? 360 : 360, width: COLW(10) }}>
95
+ <div className="sc-h1" style={{ fontSize: 220 }}>Beacon.<span className="sc-acc">/</span>console</div>
96
+ </Slide>
97
+ <Slide at={0.3} style={{ position: 'absolute', left: COL(1), top: 720, width: COLW(7) }}>
98
+ <div className="sc-body" style={{ fontSize: 32, color: 'var(--color-muted)' }}>
99
+ A workbench for long-running agents. Memory, recovery, observability.
100
+ </div>
101
+ </Slide>
102
+ <Slide at={0.4} from="bottom" style={{ position: 'absolute', left: COL(9), top: 720, width: COLW(4), borderTop: '1px solid var(--color-fg)', paddingTop: 14 }}>
103
+ <div className="sc-label fg sc-num">Build 2026.05.10 · v0.4.1</div>
104
+ </Slide>
105
+ </Sprite>;
106
+ }
107
+
108
+ // ── Scene 2 — Section ───────────────────────────────────────────────
109
+ function S2() {
110
+ return <Sprite start={SCENE} end={SCENE*2}>
111
+ <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start', paddingLeft: COL(2), gap: 36 }}>
112
+ <Slide at={0} dist={20} from="bottom"><div className="sc-label">Part 02 of 04</div></Slide>
113
+ <Slide at={0.1} dist={20} from="bottom"><div className="sc-h1 sc-num" style={{ fontSize: 320, lineHeight: 0.9, fontWeight: 500 }}>02</div></Slide>
114
+ <Slide at={0.25} dist={20} from="bottom"><div className="sc-h1" style={{ fontSize: 96, fontWeight: 500 }}>The Architecture<span className="sc-acc">.</span></div></Slide>
115
+ <Slide at={0.4} from="left" dist={120} style={{ width: COLW(6), height: 1, background: 'var(--color-fg)' }} />
116
+ </div>
117
+ </Sprite>;
118
+ }
119
+
120
+ // ── Scene 3 — Kinetic statement ─────────────────────────────────────
121
+ function S3() {
122
+ const words = ['Most','agents','fail','because','they',{w:'forget.', acc:true}];
123
+ return <Sprite start={SCENE*2} end={SCENE*3}>
124
+ <Slide at={0} style={{ position: 'absolute', left: COL(1), top: 200 }}><div className="sc-label">Statement · 03</div></Slide>
125
+ <div style={{ position: 'absolute', left: COL(1), top: 320, width: COLW(10), display: 'flex', flexWrap: 'wrap', columnGap: 32, rowGap: 6 }}>
126
+ {words.map((w, i) => {
127
+ const t = typeof w === 'string' ? w : w.w;
128
+ const acc = typeof w === 'object' && w.acc;
129
+ return <Slide key={i} at={0.15 + i * 0.1} from="bottom" dist={20}>
130
+ <div className="sc-h1" style={{ fontSize: 140, color: acc ? 'var(--color-accent)' : 'var(--color-fg)', fontWeight: 500 }}>{t}</div>
131
+ </Slide>;
132
+ })}
133
+ </div>
134
+ <Slide at={1.0} style={{ position: 'absolute', left: COL(1), top: 880, width: COLW(5) }}>
135
+ <div className="sc-rule" style={{ marginBottom: 16 }} />
136
+ <div className="sc-label">Source: Beacon failure-mode taxonomy, internal · 2026Q1</div>
137
+ </Slide>
138
+ </Sprite>;
139
+ }
140
+
141
+ // ── Scene 4 — Bullet ────────────────────────────────────────────────
142
+ function S4() {
143
+ const items = [
144
+ ['01','Context windows decay over long sessions.','Decay'],
145
+ ['02','Tool selection drifts from the original plan.','Drift'],
146
+ ['03','Plans go stale as the world changes.','Stale'],
147
+ ['04','Errors compound silently across calls.','Compound'],
148
+ ['05','Recovery requires restart, not rewind.','Restart'],
149
+ ];
150
+ return <Sprite start={SCENE*3} end={SCENE*4}>
151
+ <Slide at={0} style={{ position: 'absolute', left: COL(1), top: 140 }}><div className="sc-label">Findings · 5</div></Slide>
152
+ <Slide at={0.08} style={{ position: 'absolute', left: COL(1), top: 200, width: COLW(8) }}>
153
+ <div className="sc-h1" style={{ fontSize: 88, fontWeight: 500 }}>Where agents break.</div>
154
+ </Slide>
155
+ <div style={{ position: 'absolute', left: COL(1), top: 380, right: 96 }}>
156
+ <div className="sc-rule" />
157
+ {items.map(([n, t, tag], i) => (
158
+ <Slide key={n} at={0.35 + i * 0.08} from="left" dist={24}>
159
+ <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr 200px', gap: 24, alignItems: 'center', padding: '28px 0', borderBottom: '1px solid var(--color-border)' }}>
160
+ <div className="sc-label fg sc-num" style={{ fontSize: 16 }}>{n}</div>
161
+ <div className="sc-body" style={{ fontSize: 36, fontWeight: 500 }}>{t}</div>
162
+ <div className="sc-label" style={{ textAlign: 'right' }}>{tag}</div>
163
+ </div>
164
+ </Slide>
165
+ ))}
166
+ </div>
167
+ </Sprite>;
168
+ }
169
+
170
+ // ── Scene 5 — Stat ──────────────────────────────────────────────────
171
+ function S5() {
172
+ return <Sprite start={SCENE*4} end={SCENE*5}>
173
+ {({ localTime }) => {
174
+ const cP = clamp((localTime - 0.15) / 0.7, 0, 1);
175
+ const value = Math.round(EOUT(cP) * 84);
176
+ return <>
177
+ <Slide at={0} style={{ position: 'absolute', left: COL(1), top: 140 }}>
178
+ <div className="sc-label">Finding 03 · Beacon Logs Q1 2026</div>
179
+ </Slide>
180
+ <div style={{ position: 'absolute', left: COL(1), top: 240, width: COLW(7), borderTop: '1px solid var(--color-fg)', paddingTop: 24 }}>
181
+ <Slide at={0.08} dist={0}>
182
+ <div className="sc-h1 sc-num" style={{ fontSize: 420, lineHeight: 0.9, fontWeight: 500 }}>{value}<span className="sc-acc">%</span></div>
183
+ </Slide>
184
+ </div>
185
+ <Slide at={0.3} from="right" style={{ position: 'absolute', left: COL(9), top: 280, width: COLW(4) }}>
186
+ <div className="sc-rule" style={{ marginBottom: 20 }} />
187
+ <div className="sc-label" style={{ marginBottom: 12 }}>Failure-after-step-4 rate</div>
188
+ <div className="sc-body" style={{ fontSize: 28, lineHeight: 1.4 }}>
189
+ of agent failures occur after the fourth tool call — when context, plan, and toolset have all drifted from the start.
190
+ </div>
191
+ </Slide>
192
+ {/* mini sparkline mock */}
193
+ <Slide at={0.5} from="bottom" style={{ position: 'absolute', left: COL(9), top: 640, width: COLW(4), height: 120 }}>
194
+ <div className="sc-label" style={{ marginBottom: 12 }}>Q1 ’25 → Q1 ’26</div>
195
+ <svg width="100%" height="80" viewBox="0 0 400 80" preserveAspectRatio="none">
196
+ <polyline points="0,60 50,55 100,52 150,48 200,40 250,32 300,25 350,18 400,12" stroke="var(--color-fg)" strokeWidth="1.5" fill="none" />
197
+ <circle cx="400" cy="12" r="4" fill="var(--color-accent)" />
198
+ </svg>
199
+ </Slide>
200
+ </>;
201
+ }}
202
+ </Sprite>;
203
+ }
204
+
205
+ // ── Scene 6 — Feature ───────────────────────────────────────────────
206
+ function S6() {
207
+ return <Sprite start={SCENE*5} end={SCENE*6}>
208
+ <Slide at={0} style={{ position: 'absolute', left: COL(1), top: 140 }}><div className="sc-label">Feature · 01 of 03</div></Slide>
209
+ <div style={{ position: 'absolute', left: COL(1), top: 220, right: 96, display: 'grid', gridTemplateColumns: `${COLW(3)}px 1px 1fr`, gap: 48 }}>
210
+ <Slide at={0.1} from="left">
211
+ <div className="sc-label sc-num" style={{ fontSize: 18, marginBottom: 16 }}>F.01</div>
212
+ <div style={{ width: 160, height: 160, border: '1.5px solid var(--color-fg)', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-mono)', fontSize: 64, fontWeight: 500 }}>C</div>
213
+ <div className="sc-label" style={{ marginTop: 20 }}>Module: memory</div>
214
+ </Slide>
215
+ <div style={{ background: 'var(--color-border)' }} />
216
+ <div>
217
+ <Slide at={0.2}>
218
+ <div className="sc-h1" style={{ fontSize: 120, marginBottom: 32, fontWeight: 500 }}>Checkpoint memory<span className="sc-acc">.</span></div>
219
+ </Slide>
220
+ <Slide at={0.35} from="bottom">
221
+ <div className="sc-body" style={{ fontSize: 28, maxWidth: 920, lineHeight: 1.5, marginBottom: 32 }}>
222
+ Beacon snapshots an agent's reasoning state at each tool boundary. When a plan goes stale, the agent rewinds — not to the start, but to the last point its model of the world was correct.
223
+ </div>
224
+ </Slide>
225
+ <Slide at={0.5} from="bottom">
226
+ <div style={{ display: 'flex', gap: 48 }}>
227
+ {[['snapshots/min','120'],['avg restore','9 ms'],['retention','14 d']].map(([k,v]) => (
228
+ <div key={k}>
229
+ <div className="sc-label">{k}</div>
230
+ <div className="sc-h1 sc-num" style={{ fontSize: 48, fontWeight: 500, marginTop: 8 }}>{v}</div>
231
+ </div>
232
+ ))}
233
+ </div>
234
+ </Slide>
235
+ </div>
236
+ </div>
237
+ </Sprite>;
238
+ }
239
+
240
+ // ── Scene 7 — Card grid ─────────────────────────────────────────────
241
+ function S7() {
242
+ const cards = [
243
+ ['01','Memory','Persistent state across long sessions.','memory.snap()'],
244
+ ['02','Reasoning','Plans that adapt to fresh evidence.','plan.revise()'],
245
+ ['03','Recovery','Rewind to a last-known-good moment.','rewind.to(t)'],
246
+ ];
247
+ return <Sprite start={SCENE*6} end={SCENE*7}>
248
+ <Slide at={0} style={{ position: 'absolute', left: COL(1), top: 140 }}><div className="sc-label">Architecture · 3 primitives</div></Slide>
249
+ <Slide at={0.1} style={{ position: 'absolute', left: COL(1), top: 200 }}>
250
+ <div className="sc-h1" style={{ fontSize: 88, fontWeight: 500 }}>Three primitives, one runtime.</div>
251
+ </Slide>
252
+ <div style={{ position: 'absolute', left: COL(1), top: 420, right: 96, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24 }}>
253
+ {cards.map(([n,name,d,api], i) => (
254
+ <Slide key={n} at={0.3 + i*0.1} from="bottom" dist={28}>
255
+ <div style={{ border: '1px solid var(--color-border)', padding: '28px 32px 32px', minHeight: 380, position: 'relative' }}>
256
+ <div className="sc-label sc-acc" style={{ fontSize: 16, marginBottom: 28 }}>{n} / 03</div>
257
+ <div className="sc-h1" style={{ fontSize: 56, marginBottom: 28, fontWeight: 600 }}>{name}</div>
258
+ <div className="sc-body" style={{ fontSize: 22, color: 'var(--color-muted)', marginBottom: 32, lineHeight: 1.45 }}>{d}</div>
259
+ <div className="sc-rule" style={{ marginBottom: 12 }} />
260
+ <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, color: 'var(--color-fg)' }}>{api}</div>
261
+ </div>
262
+ </Slide>
263
+ ))}
264
+ </div>
265
+ </Sprite>;
266
+ }
267
+
268
+ // ── Scene 8 — UI showcase ───────────────────────────────────────────
269
+ function S8() {
270
+ return <Sprite start={SCENE*7} end={SCENE*8}>
271
+ {({ localTime }) => {
272
+ const a1 = clamp((localTime-0.9)/0.4, 0, 1);
273
+ const a2 = clamp((localTime-1.2)/0.4, 0, 1);
274
+ return <>
275
+ <Slide at={0} style={{ position: 'absolute', left: COL(1), top: 120 }}><div className="sc-label">Fig. 03 · the console</div></Slide>
276
+ <Slide at={0.1} style={{ position: 'absolute', left: COL(1), top: 170 }}>
277
+ <div className="sc-h1" style={{ fontSize: 56, fontWeight: 500 }}>One view of one run.</div>
278
+ </Slide>
279
+ <Slide at={0.2} dist={0}>
280
+ {/* product mock */}
281
+ <div style={{ position: 'absolute', left: 360, top: 320, width: 1200, height: 660, background: 'var(--color-bg)', border: '1px solid var(--color-fg)' }}>
282
+ <div style={{ height: 40, borderBottom: '1px solid var(--color-fg)', display: 'flex', alignItems: 'center', gap: 8, padding: '0 16px' }}>
283
+ <div style={{ width: 10, height: 10, border: '1px solid var(--color-fg)' }} />
284
+ <div style={{ width: 10, height: 10, border: '1px solid var(--color-fg)' }} />
285
+ <div style={{ width: 10, height: 10, border: '1px solid var(--color-fg)' }} />
286
+ <span style={{ marginLeft: 16, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--color-muted)' }}>BEACON · session 41ac.run</span>
287
+ <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--color-muted)' }}>00:14:22</span>
288
+ </div>
289
+ <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr 280px', height: 'calc(100% - 40px)' }}>
290
+ <div style={{ borderRight: '1px solid var(--color-border)', padding: 16, display: 'flex', flexDirection: 'column', gap: 6 }}>
291
+ {['Run','Memory','Plan','Tools','Trace','Eval'].map((x,i) => (
292
+ <div key={x} style={{ fontSize: 14, padding: '8px 12px', background: i===2 ? 'var(--color-surface)':'transparent', color: i===2 ? 'var(--color-fg)' : 'var(--color-muted)', fontFamily: 'var(--font-body)', fontWeight: i===2 ? 500 : 400 }}>{x}</div>
293
+ ))}
294
+ </div>
295
+ <div style={{ padding: 24 }}>
296
+ <div className="sc-label">Plan · v3 (revised 14:22)</div>
297
+ <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
298
+ {['Read eval spec','Generate 12 candidate prompts','Score each against rubric','Select top-3 by F1','Iterate with reasoning trace','Submit batch to coordinator'].map((s,i) => (
299
+ <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'baseline', paddingBottom: 8, borderBottom: '1px solid var(--color-border)' }}>
300
+ <span className="sc-label sc-num" style={{ minWidth: 28 }}>{String(i+1).padStart(2,'0')}</span>
301
+ <span style={{ fontSize: 16 }}>{s}</span>
302
+ <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 12, color: i < 3 ? 'var(--color-accent)' : 'var(--color-muted)' }}>{i < 3 ? 'done' : 'queued'}</span>
303
+ </div>
304
+ ))}
305
+ </div>
306
+ </div>
307
+ <div style={{ borderLeft: '1px solid var(--color-border)', padding: 16 }}>
308
+ <div className="sc-label">Memory · snapshots</div>
309
+ <div style={{ marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.6, color: 'var(--color-muted)' }}>
310
+ <div>t=00:02 ✓ snap_001</div>
311
+ <div>t=00:05 ✓ snap_002</div>
312
+ <div>t=00:09 ✓ snap_003</div>
313
+ <div style={{ color: 'var(--color-accent)' }}>t=00:14 ● snap_004</div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </Slide>
319
+ {/* callouts */}
320
+ <div style={{ position: 'absolute', left: 96, top: 540, width: 240, opacity: a1 }}>
321
+ <div className="sc-label sc-acc">A / Plan</div>
322
+ <div className="sc-body" style={{ fontSize: 18, marginTop: 6, lineHeight: 1.4 }}>Versioned. Diff-able. Replayable.</div>
323
+ <div style={{ height: 1, width: `${a1*180}px`, background: 'var(--color-accent)', marginTop: 12 }} />
324
+ </div>
325
+ <div style={{ position: 'absolute', left: 1600, top: 760, width: 220, opacity: a2, textAlign: 'right' }}>
326
+ <div className="sc-label sc-acc">B / Memory</div>
327
+ <div className="sc-body" style={{ fontSize: 18, marginTop: 6, lineHeight: 1.4 }}>Snapshot per tool boundary.</div>
328
+ <div style={{ height: 1, width: `${a2*180}px`, background: 'var(--color-accent)', marginTop: 12, marginLeft: 'auto' }} />
329
+ </div>
330
+ </>;
331
+ }}
332
+ </Sprite>;
333
+ }
334
+
335
+ // ── Scene 9 — Content ───────────────────────────────────────────────
336
+ function S9() {
337
+ return <Sprite start={SCENE*8} end={SCENE*9}>
338
+ <Slide at={0} style={{ position: 'absolute', left: COL(1), top: 140 }}><div className="sc-label">On the Record · 09</div></Slide>
339
+ <div style={{ position: 'absolute', left: COL(1), top: 240, right: 96, display: 'grid', gridTemplateColumns: `${COLW(4)}px 1fr`, gap: 96 }}>
340
+ <Slide at={0.1}>
341
+ <div className="sc-h1" style={{ fontSize: 88, fontWeight: 500, lineHeight: 1.0 }}>What we believe<span className="sc-acc">.</span></div>
342
+ </Slide>
343
+ <div>
344
+ <Slide at={0.25}>
345
+ <div className="sc-body" style={{ fontSize: 28, lineHeight: 1.5, marginBottom: 36 }}>
346
+ The next decade of AI infrastructure will be built around <span style={{ fontWeight: 600 }}>long</span> runs — agents that work for hours, not seconds. The bottleneck will not be the model. It will be everything around the model.
347
+ </div>
348
+ </Slide>
349
+ <Slide at={0.4}>
350
+ <div className="sc-body sc-muted" style={{ fontSize: 22, lineHeight: 1.55, maxWidth: 720 }}>
351
+ Beacon is a workbench for that world: memory, recovery, observability. Built for research engineers at labs, founders shipping product, evaluators who need to know what their model just did and why.
352
+ </div>
353
+ </Slide>
354
+ <Slide at={0.55} from="bottom" style={{ marginTop: 48 }}>
355
+ <div className="sc-rule" style={{ marginBottom: 16 }} />
356
+ <div className="sc-label">— Beacon team · May 2026</div>
357
+ </Slide>
358
+ </div>
359
+ </div>
360
+ </Sprite>;
361
+ }
362
+
363
+ // ── Scene 10 — CTA ──────────────────────────────────────────────────
364
+ function S10() {
365
+ return <Sprite start={SCENE*9} end={SCENE*10}>
366
+ <Slide at={0} style={{ position: 'absolute', left: COL(1), top: 140 }}><div className="sc-label">End · 10 / 10</div></Slide>
367
+ <div style={{ position: 'absolute', left: COL(1), top: 320, right: 96, width: COLW(11) }}>
368
+ <Slide at={0.1}><div className="sc-h1" style={{ fontSize: 200, fontWeight: 600, letterSpacing: '-0.03em' }}>Read the spec<span className="sc-acc">.</span></div></Slide>
369
+ </div>
370
+ <Slide at={0.3} from="bottom" style={{ position: 'absolute', left: COL(1), top: 720, width: COLW(11) }}>
371
+ <div className="sc-rule" style={{ marginBottom: 24 }} />
372
+ <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
373
+ <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
374
+ <div style={{ width: 28, height: 28, border: '1.5px solid var(--color-fg)', position: 'relative' }}>
375
+ <div style={{ position: 'absolute', inset: 6, background: 'var(--color-accent)' }} />
376
+ </div>
377
+ <span className="sc-label fg" style={{ fontSize: 14 }}>Beacon · 2026</span>
378
+ </div>
379
+ <div style={{ fontFamily: 'var(--font-mono)', fontSize: 56, fontWeight: 500, letterSpacing: '-0.02em' }}>
380
+ beacon.run/spec <span className="sc-acc">→</span>
381
+ </div>
382
+ </div>
383
+ </Slide>
384
+ </Sprite>;
385
+ }
386
+
387
+ // ── Lower-third demo ────────────────────────────────────────────────
388
+ function LT() {
389
+ const start = SCENE*8 + 1.0; const end = SCENE*8 + 3.0;
390
+ return <Sprite start={start} end={end}>
391
+ {({ localTime, duration }) => {
392
+ const inP = clamp(localTime/0.3, 0, 1);
393
+ const outP = clamp((duration-localTime)/0.3, 0, 1);
394
+ const op = EOUT(inP) * EOUT(outP);
395
+ return <div style={{ position: 'absolute', left: 96, right: 96, bottom: 110, opacity: op }}>
396
+ <div className="sc-rule" style={{ marginBottom: 12 }} />
397
+ <div className="sc-label" style={{ fontSize: 14 }}>Lower third · connective element · narration overlay</div>
398
+ </div>;
399
+ }}
400
+ </Sprite>;
401
+ }
402
+
403
+ function App() {
404
+ return (
405
+ <Stage width={1920} height={1080} duration={SCENE*10} background="var(--color-bg)" persistKey="swiss-console-ref">
406
+ <div className="sc-canvas">
407
+ <Chrome folio="Beacon /console · 2026" foot="Doc rev. 0.4.1" />
408
+ <CounterUR />
409
+ <ClockBR />
410
+ <S1 /><S2 /><S3 /><S4 /><S5 /><S6 /><S7 /><S8 /><S9 /><LT /><S10 />
411
+ </div>
412
+ </Stage>
413
+ );
414
+ }
415
+
416
+ ReactDOM.createRoot(document.getElementById('root')).render(<App />);
417
+ </script>
418
+
419
+ </body>
420
+ </html>
package/skill/assets/styles/swiss-console/sample/bullet.ts ADDED
@@ -0,0 +1,122 @@
1
+ import { defineSegment } from "videowright";
2
+
3
+ let host: HTMLElement | null = null;
4
+
5
+ export default defineSegment({
6
+ id: "swiss-console-sample-bullet",
7
+ advances: [2.0, 5.0],
8
+ voiceover:
9
+ "Bullet reveals in Swiss Console. Numbered rows with mono numerals, rules between, staggered slide-in from the left.",
10
+
11
+ mount(el) {
12
+ host = el;
13
+ el.innerHTML = `
14
+ <div style="
15
+ position: relative;
16
+ height: 100%;
17
+ background: var(--color-bg);
18
+ color: var(--color-fg);
19
+ overflow: hidden;
20
+ ">
21
+ <div style="position: absolute; left: var(--safe-x); right: var(--safe-x); top: 56px; height: 1px; background: var(--color-border);"></div>
22
+
23
+ <div data-ref="label" style="
24
+ position: absolute;
25
+ left: var(--safe-x);
26
+ top: 140px;
27
+ font-family: var(--font-mono);
28
+ font-size: 14px;
29
+ letter-spacing: 0.12em;
30
+ text-transform: uppercase;
31
+ color: var(--color-muted);
32
+ opacity: 0;
33
+ ">Findings / 5</div>
34
+
35
+ <div data-ref="headline" style="
36
+ position: absolute;
37
+ left: var(--safe-x);
38
+ top: 200px;
39
+ font-family: var(--font-display);
40
+ font-size: 88px;
41
+ font-weight: 500;
42
+ opacity: 0;
43
+ ">Where agents break.</div>
44
+
45
+ <div style="position: absolute; left: var(--safe-x); right: var(--safe-x); top: 380px;">
46
+ <div style="height: 1px; background: var(--color-fg);"></div>
47
+
48
+ <div data-ref="row0" style="display: grid; grid-template-columns: 120px 1fr 200px; gap: 24px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--color-border); opacity: 0;">
49
+ <div style="font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.12em; color: var(--color-fg); font-variant-numeric: tabular-nums;">01</div>
50
+ <div style="font-family: var(--font-body); font-size: 36px; font-weight: 500;">Context windows decay.</div>
51
+ <div style="font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); text-align: right;">Decay</div>
52
+ </div>
53
+
54
+ <div data-ref="row1" style="display: grid; grid-template-columns: 120px 1fr 200px; gap: 24px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--color-border); opacity: 0;">
55
+ <div style="font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.12em; color: var(--color-fg); font-variant-numeric: tabular-nums;">02</div>
56
+ <div style="font-family: var(--font-body); font-size: 36px; font-weight: 500;">Tool selection drifts.</div>
57
+ <div style="font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); text-align: right;">Drift</div>
58
+ </div>
59
+
60
+ <div data-ref="row2" style="display: grid; grid-template-columns: 120px 1fr 200px; gap: 24px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--color-border); opacity: 0;">
61
+ <div style="font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.12em; color: var(--color-fg); font-variant-numeric: tabular-nums;">03</div>
62
+ <div style="font-family: var(--font-body); font-size: 36px; font-weight: 500;">Plans go stale.</div>
63
+ <div style="font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); text-align: right;">Stale</div>
64
+ </div>
65
+
66
+ <div data-ref="row3" style="display: grid; grid-template-columns: 120px 1fr 200px; gap: 24px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--color-border); opacity: 0;">
67
+ <div style="font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.12em; color: var(--color-fg); font-variant-numeric: tabular-nums;">04</div>
68
+ <div style="font-family: var(--font-body); font-size: 36px; font-weight: 500;">Errors compound silently.</div>
69
+ <div style="font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); text-align: right;">Compound</div>
70
+ </div>
71
+
72
+ <div data-ref="row4" style="display: grid; grid-template-columns: 120px 1fr 200px; gap: 24px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--color-border); opacity: 0;">
73
+ <div style="font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.12em; color: var(--color-fg); font-variant-numeric: tabular-nums;">05</div>
74
+ <div style="font-family: var(--font-body); font-size: 36px; font-weight: 500;">Recovery requires restart.</div>
75
+ <div style="font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); text-align: right;">Restart</div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ `;
80
+ },
81
+
82
+ async play(ctx) {
83
+ const label = host?.querySelector('[data-ref="label"]') as HTMLElement;
84
+ const headline = host?.querySelector('[data-ref="headline"]') as HTMLElement;
85
+
86
+ const ease = "cubic-bezier(0.2, 0.8, 0.2, 1)";
87
+ const opts = { fill: "forwards" as const, easing: ease };
88
+
89
+ label.animate(
90
+ [
91
+ { opacity: 0, transform: "translateX(-24px)" },
92
+ { opacity: 1, transform: "translateX(0)" },
93
+ ],
94
+ { ...opts, duration: 360 },
95
+ );
96
+
97
+ headline.animate(
98
+ [
99
+ { opacity: 0, transform: "translateX(32px)" },
100
+ { opacity: 1, transform: "translateX(0)" },
101
+ ],
102
+ { ...opts, duration: 360, delay: 60 },
103
+ );
104
+
105
+ for (let i = 0; i < 5; i++) {
106
+ const row = host?.querySelector(`[data-ref="row${i}"]`) as HTMLElement;
107
+ row.animate(
108
+ [
109
+ { opacity: 0, transform: "translateX(-24px)" },
110
+ { opacity: 1, transform: "translateX(0)" },
111
+ ],
112
+ { ...opts, duration: 360, delay: 300 + i * 60 },
113
+ );
114
+ }
115
+
116
+ await ctx.waitForNext();
117
+ },
118
+
119
+ unmount() {
120
+ host = null;
121
+ },
122
+ });