frameyard 0.4.0 → 0.6.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 (175) hide show
  1. package/CHANGELOG.md +101 -0
  2. package/GLOSSARY.md +156 -24
  3. package/README.md +103 -31
  4. package/dist/cli.js +112 -19
  5. package/dist/cli.js.map +1 -1
  6. package/dist/composition/adapter.d.ts +30 -0
  7. package/dist/composition/adapter.d.ts.map +1 -0
  8. package/dist/composition/adapter.js +2 -0
  9. package/dist/composition/adapter.js.map +1 -0
  10. package/dist/composition/animation.d.ts +19 -0
  11. package/dist/composition/animation.d.ts.map +1 -0
  12. package/dist/composition/animation.js +55 -0
  13. package/dist/composition/animation.js.map +1 -0
  14. package/dist/composition/attributes.d.ts +7 -0
  15. package/dist/composition/attributes.d.ts.map +1 -0
  16. package/dist/composition/attributes.js +24 -0
  17. package/dist/composition/attributes.js.map +1 -0
  18. package/dist/composition/descriptor.d.ts +30 -0
  19. package/dist/composition/descriptor.d.ts.map +1 -0
  20. package/dist/composition/descriptor.js +188 -0
  21. package/dist/composition/descriptor.js.map +1 -0
  22. package/dist/composition/diagnostics.d.ts +12 -0
  23. package/dist/composition/diagnostics.d.ts.map +1 -0
  24. package/dist/composition/diagnostics.js +38 -0
  25. package/dist/composition/diagnostics.js.map +1 -0
  26. package/dist/composition/index.d.ts +12 -0
  27. package/dist/composition/index.d.ts.map +1 -0
  28. package/dist/composition/index.js +7 -0
  29. package/dist/composition/index.js.map +1 -0
  30. package/dist/composition/media.d.ts +27 -0
  31. package/dist/composition/media.d.ts.map +1 -0
  32. package/dist/composition/media.js +162 -0
  33. package/dist/composition/media.js.map +1 -0
  34. package/dist/composition/paths.d.ts +5 -0
  35. package/dist/composition/paths.d.ts.map +1 -0
  36. package/dist/composition/paths.js +16 -0
  37. package/dist/composition/paths.js.map +1 -0
  38. package/dist/composition/transcripts.d.ts +19 -0
  39. package/dist/composition/transcripts.d.ts.map +1 -0
  40. package/dist/composition/transcripts.js +57 -0
  41. package/dist/composition/transcripts.js.map +1 -0
  42. package/dist/composition/walk.d.ts +10 -0
  43. package/dist/composition/walk.d.ts.map +1 -0
  44. package/dist/composition/walk.js +32 -0
  45. package/dist/composition/walk.js.map +1 -0
  46. package/dist/contracts.d.ts +14 -0
  47. package/dist/contracts.d.ts.map +1 -1
  48. package/dist/contracts.js.map +1 -1
  49. package/dist/errors.d.ts +1 -1
  50. package/dist/errors.d.ts.map +1 -1
  51. package/dist/errors.js.map +1 -1
  52. package/dist/html/document-adapter.d.ts +5 -0
  53. package/dist/html/document-adapter.d.ts.map +1 -0
  54. package/dist/html/document-adapter.js +17 -0
  55. package/dist/html/document-adapter.js.map +1 -0
  56. package/dist/html/parse.d.ts +2 -6
  57. package/dist/html/parse.d.ts.map +1 -1
  58. package/dist/html/parse.js.map +1 -1
  59. package/dist/html/validate.d.ts.map +1 -1
  60. package/dist/html/validate.js +92 -375
  61. package/dist/html/validate.js.map +1 -1
  62. package/dist/index.d.ts +2 -0
  63. package/dist/index.d.ts.map +1 -1
  64. package/dist/index.js +1 -0
  65. package/dist/index.js.map +1 -1
  66. package/dist/preview/main.d.ts.map +1 -1
  67. package/dist/preview/main.js +93 -13
  68. package/dist/preview/main.js.map +1 -1
  69. package/dist/preview/timeline-data.d.ts +85 -0
  70. package/dist/preview/timeline-data.d.ts.map +1 -0
  71. package/dist/preview/timeline-data.js +2 -0
  72. package/dist/preview/timeline-data.js.map +1 -0
  73. package/dist/preview/timeline-host.d.ts +19 -0
  74. package/dist/preview/timeline-host.d.ts.map +1 -0
  75. package/dist/preview/timeline-host.js +297 -0
  76. package/dist/preview/timeline-host.js.map +1 -0
  77. package/dist/preview/timeline-main.d.ts +17 -0
  78. package/dist/preview/timeline-main.d.ts.map +1 -0
  79. package/dist/preview/timeline-main.js +364 -0
  80. package/dist/preview/timeline-main.js.map +1 -0
  81. package/dist/project.d.ts +16 -1
  82. package/dist/project.d.ts.map +1 -1
  83. package/dist/project.js +81 -26
  84. package/dist/project.js.map +1 -1
  85. package/dist/renderer/browser.d.ts +2 -0
  86. package/dist/renderer/browser.d.ts.map +1 -1
  87. package/dist/renderer/browser.js +38 -6
  88. package/dist/renderer/browser.js.map +1 -1
  89. package/dist/renderer/ffmpeg.d.ts +61 -0
  90. package/dist/renderer/ffmpeg.d.ts.map +1 -1
  91. package/dist/renderer/ffmpeg.js +198 -0
  92. package/dist/renderer/ffmpeg.js.map +1 -1
  93. package/dist/renderer/index.d.ts.map +1 -1
  94. package/dist/renderer/index.js +18 -7
  95. package/dist/renderer/index.js.map +1 -1
  96. package/dist/renderer/timeline.d.ts +109 -0
  97. package/dist/renderer/timeline.d.ts.map +1 -0
  98. package/dist/renderer/timeline.js +984 -0
  99. package/dist/renderer/timeline.js.map +1 -0
  100. package/dist/runtime/document-adapter.d.ts +4 -0
  101. package/dist/runtime/document-adapter.d.ts.map +1 -0
  102. package/dist/runtime/document-adapter.js +19 -0
  103. package/dist/runtime/document-adapter.js.map +1 -0
  104. package/dist/runtime/host.d.ts +2 -0
  105. package/dist/runtime/host.d.ts.map +1 -1
  106. package/dist/runtime/host.js +78 -183
  107. package/dist/runtime/host.js.map +1 -1
  108. package/dist/runtime/media.d.ts.map +1 -1
  109. package/dist/runtime/media.js +19 -50
  110. package/dist/runtime/media.js.map +1 -1
  111. package/dist/scaffold.d.ts.map +1 -1
  112. package/dist/scaffold.js +93 -23
  113. package/dist/scaffold.js.map +1 -1
  114. package/dist/server/preview-html.d.ts.map +1 -1
  115. package/dist/server/preview-html.js +15 -1
  116. package/dist/server/preview-html.js.map +1 -1
  117. package/dist/server/server.d.ts.map +1 -1
  118. package/dist/server/server.js +39 -1
  119. package/dist/server/server.js.map +1 -1
  120. package/dist/server/timeline-preview-data.d.ts +4 -0
  121. package/dist/server/timeline-preview-data.d.ts.map +1 -0
  122. package/dist/server/timeline-preview-data.js +97 -0
  123. package/dist/server/timeline-preview-data.js.map +1 -0
  124. package/dist/server/timeline-preview-html.d.ts +4 -0
  125. package/dist/server/timeline-preview-html.d.ts.map +1 -0
  126. package/dist/server/timeline-preview-html.js +227 -0
  127. package/dist/server/timeline-preview-html.js.map +1 -0
  128. package/dist/timeline/plan.d.ts +32 -0
  129. package/dist/timeline/plan.d.ts.map +1 -0
  130. package/dist/timeline/plan.js +68 -0
  131. package/dist/timeline/plan.js.map +1 -0
  132. package/dist/timeline/resolve.d.ts +60 -0
  133. package/dist/timeline/resolve.d.ts.map +1 -0
  134. package/dist/timeline/resolve.js +523 -0
  135. package/dist/timeline/resolve.js.map +1 -0
  136. package/dist/timeline/schema.d.ts +71 -0
  137. package/dist/timeline/schema.d.ts.map +1 -0
  138. package/dist/timeline/schema.js +425 -0
  139. package/dist/timeline/schema.js.map +1 -0
  140. package/dist/version.d.ts +1 -1
  141. package/dist/version.js +1 -1
  142. package/docs/adr/0002-make-frame-and-props-the-only-animation-state.md +2 -0
  143. package/docs/adr/0005-keep-parallel-rendering-opt-in-and-frame-ordered.md +2 -0
  144. package/docs/adr/0006-seek-embedded-media-from-the-frame-clock.md +4 -0
  145. package/docs/adr/0007-make-html-documents-the-composition-unit.md +1 -1
  146. package/docs/adr/0008-share-the-composition-document-grammar.md +18 -0
  147. package/docs/adr/0009-composite-production-frames-in-software.md +37 -0
  148. package/docs/adr/0010-make-timelines-the-render-unit.md +24 -0
  149. package/docs/adr/0011-compose-timeline-frames-in-a-live-browser-host.md +22 -0
  150. package/docs/adr/0012-render-timelines-with-segmented-lossless-clip-intermediates.md +31 -0
  151. package/docs/v0.1-design.md +135 -85
  152. package/examples/demo/README.md +11 -4
  153. package/examples/demo/timelines/demo.timeline.json +12 -0
  154. package/examples/demo/video.config.js +4 -0
  155. package/examples/video/README.md +105 -0
  156. package/examples/video/assets/clip.mp4 +0 -0
  157. package/examples/video/assets/clip.webm +0 -0
  158. package/examples/video/compositions/video-mp4.html +362 -0
  159. package/examples/video/compositions/video-overlay.html +350 -0
  160. package/examples/video/compositions/video.html +362 -0
  161. package/examples/video/props/video-timeline.json +10 -0
  162. package/examples/video/props/video.json +8 -0
  163. package/examples/video/scripts/make-clip.sh +109 -0
  164. package/examples/video/timelines/video-timeline-mp4.timeline.json +44 -0
  165. package/examples/video/timelines/video-timeline.timeline.json +44 -0
  166. package/examples/video/video.config.js +12 -0
  167. package/examples/webgl/README.md +30 -0
  168. package/examples/webgl/compositions/webgl.controller.js +200 -0
  169. package/examples/webgl/compositions/webgl.html +215 -0
  170. package/examples/webgl/props/webgl.json +6 -0
  171. package/examples/webgl/video.config.js +5 -0
  172. package/package.json +4 -2
  173. package/skills/frameyard/SKILL.md +18 -13
  174. package/skills/frameyard/references/json-results.md +2 -2
  175. package/skills/frameyard/references/timelines.md +141 -0
package/examples/video/compositions/video-overlay.html ADDED
@@ -0,0 +1,350 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <script type="application/json" data-fy="props">
6
+ {
7
+ "kicker": "Frameyard / Timeline Overlay 001",
8
+ "title": "Timeline",
9
+ "titleAccent": "Overlay",
10
+ "subtitle": "The clip lives on a timeline track. This HTML layer composites over it with alpha.",
11
+ "detail": "Detail / second pass",
12
+ "format": "30 FPS",
13
+ "accent": "#ffc37a"
14
+ }
15
+ </script>
16
+ <style>
17
+ @keyframes fade-in {
18
+ from {
19
+ opacity: 0;
20
+ }
21
+ to {
22
+ opacity: 1;
23
+ }
24
+ }
25
+ @keyframes rise {
26
+ from {
27
+ opacity: 0;
28
+ transform: translateY(42px);
29
+ }
30
+ to {
31
+ opacity: 1;
32
+ transform: translateY(0);
33
+ }
34
+ }
35
+ @keyframes draw {
36
+ from {
37
+ opacity: 0;
38
+ transform: scaleX(0);
39
+ }
40
+ to {
41
+ opacity: 1;
42
+ transform: scaleX(1);
43
+ }
44
+ }
45
+ @keyframes detail-cycle {
46
+ 0% {
47
+ opacity: 0;
48
+ }
49
+ 6% {
50
+ opacity: 1;
51
+ }
52
+ 94% {
53
+ opacity: 1;
54
+ }
55
+ 100% {
56
+ opacity: 0;
57
+ }
58
+ }
59
+ @keyframes outro-fade {
60
+ from {
61
+ opacity: 0;
62
+ }
63
+ to {
64
+ opacity: 1;
65
+ }
66
+ }
67
+ html,
68
+ body,
69
+ fy-composition {
70
+ background: transparent;
71
+ }
72
+ #scene {
73
+ position: relative;
74
+ width: 100%;
75
+ height: 100%;
76
+ overflow: hidden;
77
+ isolation: isolate;
78
+ color: #eef4f1;
79
+ font-family: Inter, "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
80
+ }
81
+ #scrim {
82
+ position: absolute;
83
+ inset: 0;
84
+ background: linear-gradient(
85
+ 90deg,
86
+ rgba(4, 8, 11, 0.94) 0%,
87
+ rgba(4, 8, 11, 0.82) 22%,
88
+ rgba(4, 8, 11, 0.35) 46%,
89
+ rgba(4, 8, 11, 0) 66%
90
+ );
91
+ pointer-events: none;
92
+ }
93
+ #footer-scrim {
94
+ position: absolute;
95
+ left: 0;
96
+ right: 0;
97
+ bottom: 0;
98
+ height: 150px;
99
+ background: linear-gradient(0deg, rgba(4, 8, 11, 0.88) 0%, rgba(4, 8, 11, 0) 100%);
100
+ pointer-events: none;
101
+ }
102
+ #frame-border {
103
+ position: absolute;
104
+ inset: 36px;
105
+ border: 1px solid rgba(238, 244, 241, 0.16);
106
+ pointer-events: none;
107
+ }
108
+ #header {
109
+ position: absolute;
110
+ top: 80px;
111
+ left: 148px;
112
+ right: 148px;
113
+ display: flex;
114
+ justify-content: space-between;
115
+ align-items: center;
116
+ gap: 32px;
117
+ animation: fade-in 1s linear both;
118
+ }
119
+ #kicker {
120
+ display: flex;
121
+ align-items: center;
122
+ gap: 15px;
123
+ font:
124
+ 600 14px/1 ui-monospace,
125
+ monospace;
126
+ letter-spacing: 0.24em;
127
+ text-transform: uppercase;
128
+ color: var(--fy-prop-accent);
129
+ }
130
+ #kicker::before {
131
+ content: "";
132
+ width: 8px;
133
+ height: 8px;
134
+ background: var(--fy-prop-accent);
135
+ box-shadow: 0 0 16px var(--fy-prop-accent);
136
+ }
137
+ #format {
138
+ font:
139
+ 500 12px/1 ui-monospace,
140
+ monospace;
141
+ letter-spacing: 0.16em;
142
+ text-transform: uppercase;
143
+ color: #b9c6c8;
144
+ text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
145
+ }
146
+ #copy {
147
+ position: absolute;
148
+ top: 278px;
149
+ left: 148px;
150
+ width: 860px;
151
+ }
152
+ #title {
153
+ margin: 0;
154
+ font-size: 174px;
155
+ line-height: 0.84;
156
+ letter-spacing: -0.064em;
157
+ font-weight: 660;
158
+ }
159
+ #title span,
160
+ #title em {
161
+ display: block;
162
+ animation: rise 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
163
+ }
164
+ #title em {
165
+ margin-top: 0.06em;
166
+ font-family: "Iowan Old Style", "Palatino Linotype", Georgia, ui-serif, serif;
167
+ font-style: italic;
168
+ font-weight: 400;
169
+ letter-spacing: -0.035em;
170
+ color: var(--fy-prop-accent);
171
+ }
172
+ #subtitle {
173
+ width: 720px;
174
+ margin: 38px 0 0;
175
+ font-size: 29px;
176
+ line-height: 1.5;
177
+ font-weight: 420;
178
+ color: #b3c1c4;
179
+ animation: rise 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
180
+ }
181
+ #detail {
182
+ position: absolute;
183
+ left: 1332px;
184
+ top: 646px;
185
+ width: 440px;
186
+ animation: detail-cycle 1s linear both;
187
+ }
188
+ #detail-bar {
189
+ display: flex;
190
+ justify-content: space-between;
191
+ align-items: center;
192
+ gap: 16px;
193
+ height: 22px;
194
+ margin-bottom: 10px;
195
+ padding: 0 10px;
196
+ background: rgba(4, 8, 11, 0.55);
197
+ font:
198
+ 600 11px/1 ui-monospace,
199
+ monospace;
200
+ letter-spacing: 0.18em;
201
+ text-transform: uppercase;
202
+ }
203
+ #detail-bar > span:first-child {
204
+ color: var(--fy-prop-accent);
205
+ }
206
+ #detail-time {
207
+ color: #c0cdcf;
208
+ font-weight: 500;
209
+ }
210
+ #detail-window {
211
+ position: relative;
212
+ width: 440px;
213
+ height: 248px;
214
+ box-sizing: border-box;
215
+ overflow: hidden;
216
+ border: 1px solid rgba(255, 195, 122, 0.75);
217
+ background: transparent;
218
+ box-shadow: 0 24px 90px rgba(0, 0, 0, 0.45);
219
+ }
220
+ #detail-tint {
221
+ position: absolute;
222
+ inset: 0;
223
+ background: linear-gradient(0deg, rgba(4, 8, 11, 0.32) 0%, rgba(4, 8, 11, 0) 45%);
224
+ pointer-events: none;
225
+ }
226
+ #footer {
227
+ position: absolute;
228
+ left: 148px;
229
+ right: 148px;
230
+ bottom: 70px;
231
+ contain: layout paint style;
232
+ animation: fade-in 1s linear both;
233
+ }
234
+ #rule {
235
+ position: relative;
236
+ height: 1px;
237
+ background: rgba(238, 244, 241, 0.24);
238
+ transform-origin: left center;
239
+ animation: draw 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
240
+ }
241
+ #progress {
242
+ position: absolute;
243
+ inset: 0 auto 0 0;
244
+ width: calc(var(--fy-progress) * 100%);
245
+ background: var(--fy-prop-accent);
246
+ box-shadow: 0 0 14px var(--fy-prop-accent);
247
+ }
248
+ #footer-row {
249
+ display: flex;
250
+ justify-content: space-between;
251
+ align-items: baseline;
252
+ gap: 24px;
253
+ margin-top: 18px;
254
+ font:
255
+ 500 12px/1 ui-monospace,
256
+ monospace;
257
+ letter-spacing: 0.14em;
258
+ color: #a4b1b3;
259
+ text-transform: uppercase;
260
+ text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
261
+ }
262
+ #footer-row strong {
263
+ color: #edf5f2;
264
+ font-weight: 600;
265
+ }
266
+ #footer-row .accent {
267
+ color: var(--fy-prop-accent);
268
+ }
269
+ #frame-counter {
270
+ display: inline-block;
271
+ min-width: 3ch;
272
+ text-align: right;
273
+ }
274
+ #frame-counter::after {
275
+ counter-reset: fy-frame var(--fy-frame);
276
+ content: counter(fy-frame);
277
+ }
278
+ #outro-fade {
279
+ position: absolute;
280
+ inset: 0;
281
+ background: #04080b;
282
+ pointer-events: none;
283
+ opacity: 0;
284
+ animation: outro-fade 1s linear both;
285
+ }
286
+ </style>
287
+ </head>
288
+ <body>
289
+ <fy-composition width="1920" height="1080" fps="30" duration-in-frames="360">
290
+ <div id="scene">
291
+ <div id="scrim"></div>
292
+ <div id="footer-scrim"></div>
293
+ <div id="frame-border"></div>
294
+
295
+ <header id="header" data-fy-anim-start="8" data-fy-anim-duration="28">
296
+ <div id="kicker" data-fy-text="kicker"></div>
297
+ <div id="format">Timeline video / <span data-fy-text="format"></span></div>
298
+ </header>
299
+
300
+ <div id="copy">
301
+ <h1 id="title">
302
+ <span
303
+ data-fy-text="title"
304
+ data-fy-anim-start="14"
305
+ data-fy-anim-duration="44"
306
+ data-fy-anim-easing="cubic-bezier(0.215, 0.61, 0.355, 1)"
307
+ ></span>
308
+ <em
309
+ data-fy-text="titleAccent"
310
+ data-fy-anim-start="26"
311
+ data-fy-anim-duration="44"
312
+ data-fy-anim-easing="cubic-bezier(0.215, 0.61, 0.355, 1)"
313
+ ></em>
314
+ </h1>
315
+ <p
316
+ id="subtitle"
317
+ data-fy-text="subtitle"
318
+ data-fy-anim-start="40"
319
+ data-fy-anim-duration="40"
320
+ data-fy-anim-easing="cubic-bezier(0.215, 0.61, 0.355, 1)"
321
+ ></p>
322
+ </div>
323
+
324
+ <div id="detail" data-fy-anim-start="112" data-fy-anim-duration="170">
325
+ <div id="detail-bar">
326
+ <span data-fy-text="detail"></span>
327
+ <span id="detail-time">SRC 5.8–10.8 S</span>
328
+ </div>
329
+ <div id="detail-window">
330
+ <div id="detail-tint"></div>
331
+ </div>
332
+ </div>
333
+
334
+ <div id="footer" data-fy-anim-start="46" data-fy-anim-duration="30">
335
+ <div id="rule" data-fy-anim-start="52" data-fy-anim-duration="50">
336
+ <div id="progress"></div>
337
+ </div>
338
+ <div id="footer-row">
339
+ <span>Hero / v1 · SRC <strong>0.0–12.0 S</strong></span>
340
+ <span>Detail / v2 · SRC <strong>5.8–10.8 S</strong></span>
341
+ <span>Frame <strong id="frame-counter"></strong> / 359</span>
342
+ <span class="accent">HTML overlay / v3 · 30 FPS</span>
343
+ </div>
344
+ </div>
345
+
346
+ <div id="outro-fade" data-fy-anim-start="329" data-fy-anim-duration="30"></div>
347
+ </div>
348
+ </fy-composition>
349
+ </body>
350
+ </html>
package/examples/video/compositions/video.html ADDED
@@ -0,0 +1,362 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <script type="application/json" data-fy="props">
6
+ {
7
+ "kicker": "Frameyard / Clip Study 001",
8
+ "title": "Moving",
9
+ "titleAccent": "Image",
10
+ "subtitle": "A local clip, loaded once and seeked twice from the composition clock.",
11
+ "detail": "Detail / second pass",
12
+ "accent": "#ffc37a"
13
+ }
14
+ </script>
15
+ <style>
16
+ @keyframes fade-in {
17
+ from {
18
+ opacity: 0;
19
+ }
20
+ to {
21
+ opacity: 1;
22
+ }
23
+ }
24
+ @keyframes rise {
25
+ from {
26
+ opacity: 0;
27
+ transform: translateY(42px);
28
+ }
29
+ to {
30
+ opacity: 1;
31
+ transform: translateY(0);
32
+ }
33
+ }
34
+ @keyframes draw {
35
+ from {
36
+ opacity: 0;
37
+ transform: scaleX(0);
38
+ }
39
+ to {
40
+ opacity: 1;
41
+ transform: scaleX(1);
42
+ }
43
+ }
44
+ @keyframes outro-fade {
45
+ from {
46
+ opacity: 0;
47
+ }
48
+ to {
49
+ opacity: 1;
50
+ }
51
+ }
52
+ html,
53
+ body,
54
+ fy-composition {
55
+ background: #04080b;
56
+ }
57
+ #scene {
58
+ position: relative;
59
+ width: 100%;
60
+ height: 100%;
61
+ overflow: hidden;
62
+ isolation: isolate;
63
+ background: #04080b;
64
+ color: #eef4f1;
65
+ font-family: Inter, "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
66
+ }
67
+ #hero {
68
+ position: absolute;
69
+ inset: 0;
70
+ display: block;
71
+ width: 100%;
72
+ height: 100%;
73
+ object-fit: cover;
74
+ transform: scale(calc(1 + var(--fy-progress) * 0.035));
75
+ transform-origin: center;
76
+ }
77
+ #scrim {
78
+ position: absolute;
79
+ inset: 0;
80
+ background:
81
+ linear-gradient(
82
+ 90deg,
83
+ rgba(4, 8, 11, 0.94) 0%,
84
+ rgba(4, 8, 11, 0.8) 24%,
85
+ rgba(4, 8, 11, 0.24) 52%,
86
+ rgba(4, 8, 11, 0) 74%
87
+ ),
88
+ linear-gradient(0deg, rgba(4, 8, 11, 0.9) 0%, rgba(4, 8, 11, 0) 34%);
89
+ }
90
+ #vignette {
91
+ position: absolute;
92
+ inset: 0;
93
+ background: radial-gradient(ellipse at 62% 44%, transparent 42%, rgba(0, 0, 0, 0.3) 100%);
94
+ pointer-events: none;
95
+ }
96
+ #frame-border {
97
+ position: absolute;
98
+ inset: 36px;
99
+ border: 1px solid rgba(238, 244, 241, 0.16);
100
+ pointer-events: none;
101
+ }
102
+ #header {
103
+ position: absolute;
104
+ top: 80px;
105
+ left: 148px;
106
+ right: 148px;
107
+ display: flex;
108
+ justify-content: space-between;
109
+ align-items: center;
110
+ gap: 32px;
111
+ animation: fade-in 1s linear both;
112
+ }
113
+ #kicker {
114
+ display: flex;
115
+ align-items: center;
116
+ gap: 15px;
117
+ font:
118
+ 600 14px/1 ui-monospace,
119
+ monospace;
120
+ letter-spacing: 0.24em;
121
+ text-transform: uppercase;
122
+ color: var(--fy-prop-accent);
123
+ }
124
+ #kicker::before {
125
+ content: "";
126
+ width: 8px;
127
+ height: 8px;
128
+ background: var(--fy-prop-accent);
129
+ box-shadow: 0 0 16px var(--fy-prop-accent);
130
+ }
131
+ #format {
132
+ font:
133
+ 500 12px/1 ui-monospace,
134
+ monospace;
135
+ letter-spacing: 0.16em;
136
+ text-transform: uppercase;
137
+ color: #8b999c;
138
+ }
139
+ #copy {
140
+ position: absolute;
141
+ top: 278px;
142
+ left: 148px;
143
+ width: 860px;
144
+ }
145
+ #title {
146
+ margin: 0;
147
+ font-size: 174px;
148
+ line-height: 0.84;
149
+ letter-spacing: -0.064em;
150
+ font-weight: 660;
151
+ }
152
+ #title span,
153
+ #title em {
154
+ display: block;
155
+ animation: rise 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
156
+ }
157
+ #title em {
158
+ margin-top: 0.06em;
159
+ font-family: "Iowan Old Style", "Palatino Linotype", Georgia, ui-serif, serif;
160
+ font-style: italic;
161
+ font-weight: 400;
162
+ letter-spacing: -0.035em;
163
+ color: var(--fy-prop-accent);
164
+ }
165
+ #subtitle {
166
+ width: 720px;
167
+ margin: 38px 0 0;
168
+ font-size: 29px;
169
+ line-height: 1.5;
170
+ font-weight: 420;
171
+ color: #a6b3b6;
172
+ animation: rise 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
173
+ }
174
+ #footer {
175
+ position: absolute;
176
+ left: 148px;
177
+ right: 148px;
178
+ bottom: 70px;
179
+ contain: layout paint style;
180
+ animation: fade-in 1s linear both;
181
+ }
182
+ #rule {
183
+ position: relative;
184
+ height: 1px;
185
+ background: rgba(238, 244, 241, 0.16);
186
+ transform-origin: left center;
187
+ animation: draw 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
188
+ }
189
+ #progress {
190
+ position: absolute;
191
+ inset: 0 auto 0 0;
192
+ width: calc(var(--fy-progress) * 100%);
193
+ background: var(--fy-prop-accent);
194
+ box-shadow: 0 0 14px var(--fy-prop-accent);
195
+ }
196
+ #footer-row {
197
+ display: flex;
198
+ justify-content: space-between;
199
+ align-items: baseline;
200
+ gap: 24px;
201
+ margin-top: 18px;
202
+ font:
203
+ 500 12px/1 ui-monospace,
204
+ monospace;
205
+ letter-spacing: 0.14em;
206
+ color: #879598;
207
+ text-transform: uppercase;
208
+ }
209
+ #footer-row strong {
210
+ color: #edf5f2;
211
+ font-weight: 600;
212
+ }
213
+ #footer-row .accent {
214
+ color: var(--fy-prop-accent);
215
+ }
216
+ #frame-counter {
217
+ display: inline-block;
218
+ min-width: 3ch;
219
+ text-align: right;
220
+ }
221
+ #frame-counter::after {
222
+ counter-reset: fy-frame var(--fy-frame);
223
+ content: counter(fy-frame);
224
+ }
225
+ #detail {
226
+ position: absolute;
227
+ right: 148px;
228
+ bottom: 154px;
229
+ width: 440px;
230
+ }
231
+ #detail-bar {
232
+ display: flex;
233
+ justify-content: space-between;
234
+ align-items: baseline;
235
+ gap: 24px;
236
+ margin-bottom: 10px;
237
+ contain: layout paint style;
238
+ font:
239
+ 600 11px/1 ui-monospace,
240
+ monospace;
241
+ letter-spacing: 0.18em;
242
+ text-transform: uppercase;
243
+ }
244
+ #detail-bar > span:first-child {
245
+ color: var(--fy-prop-accent);
246
+ }
247
+ #detail-time {
248
+ color: #98a5a6;
249
+ font-weight: 500;
250
+ }
251
+ #detail-window {
252
+ position: relative;
253
+ width: 440px;
254
+ height: 248px;
255
+ overflow: hidden;
256
+ border: 1px solid rgba(255, 195, 122, 0.65);
257
+ background: #000;
258
+ box-shadow: 0 24px 90px rgba(0, 0, 0, 0.55);
259
+ }
260
+ #detail-clip {
261
+ display: block;
262
+ width: 100%;
263
+ height: 100%;
264
+ object-fit: cover;
265
+ object-position: 68% 50%;
266
+ transform: scale(1.3);
267
+ }
268
+ #detail-tint {
269
+ position: absolute;
270
+ inset: 0;
271
+ background: linear-gradient(0deg, rgba(4, 8, 11, 0.28) 0%, rgba(4, 8, 11, 0) 45%);
272
+ pointer-events: none;
273
+ }
274
+ #outro-fade {
275
+ position: absolute;
276
+ inset: 0;
277
+ background: #04080b;
278
+ pointer-events: none;
279
+ opacity: 0;
280
+ animation: outro-fade 1s linear both;
281
+ }
282
+ </style>
283
+ </head>
284
+ <body>
285
+ <fy-composition width="1920" height="1080" fps="30" duration-in-frames="360">
286
+ <div id="scene">
287
+ <video
288
+ id="hero"
289
+ src="assets/clip.webm"
290
+ data-fy-start="0"
291
+ data-fy-trim="0"
292
+ data-fy-duration="12"
293
+ data-fy-volume="0.85"
294
+ ></video>
295
+ <div id="scrim"></div>
296
+ <div id="vignette"></div>
297
+ <div id="frame-border"></div>
298
+
299
+ <header id="header" data-fy-anim-start="8" data-fy-anim-duration="28">
300
+ <div id="kicker" data-fy-text="kicker"></div>
301
+ <div id="format">Embedded video / VP9 + Opus / 30 FPS</div>
302
+ </header>
303
+
304
+ <div id="copy">
305
+ <h1 id="title">
306
+ <span
307
+ data-fy-text="title"
308
+ data-fy-anim-start="14"
309
+ data-fy-anim-duration="44"
310
+ data-fy-anim-easing="cubic-bezier(0.215, 0.61, 0.355, 1)"
311
+ ></span>
312
+ <em
313
+ data-fy-text="titleAccent"
314
+ data-fy-anim-start="26"
315
+ data-fy-anim-duration="44"
316
+ data-fy-anim-easing="cubic-bezier(0.215, 0.61, 0.355, 1)"
317
+ ></em>
318
+ </h1>
319
+ <p
320
+ id="subtitle"
321
+ data-fy-text="subtitle"
322
+ data-fy-anim-start="40"
323
+ data-fy-anim-duration="40"
324
+ data-fy-anim-easing="cubic-bezier(0.215, 0.61, 0.355, 1)"
325
+ ></p>
326
+ </div>
327
+
328
+ <div id="detail">
329
+ <div id="detail-bar">
330
+ <span data-fy-text="detail"></span>
331
+ <span id="detail-time">SRC 5.8–10.8 S</span>
332
+ </div>
333
+ <div id="detail-window">
334
+ <video
335
+ id="detail-clip"
336
+ src="assets/clip.webm"
337
+ data-fy-start="120"
338
+ data-fy-trim="5.8"
339
+ data-fy-duration="5"
340
+ data-fy-audio="off"
341
+ ></video>
342
+ <div id="detail-tint"></div>
343
+ </div>
344
+ </div>
345
+
346
+ <div id="footer" data-fy-anim-start="46" data-fy-anim-duration="30">
347
+ <div id="rule" data-fy-anim-start="52" data-fy-anim-duration="50">
348
+ <div id="progress"></div>
349
+ </div>
350
+ <div id="footer-row">
351
+ <span>Hero / SRC <strong>0.0–12.0 S</strong></span>
352
+ <span>Frame <strong id="frame-counter"></strong> / 359</span>
353
+ <span class="accent">Frame-seeked</span>
354
+ <span>12.00 S · 30 FPS</span>
355
+ </div>
356
+ </div>
357
+
358
+ <div id="outro-fade" data-fy-anim-start="329" data-fy-anim-duration="30"></div>
359
+ </div>
360
+ </fy-composition>
361
+ </body>
362
+ </html>
package/examples/video/props/video-timeline.json ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "overlay": {
3
+ "kicker": "Frameyard / Timeline Overlay 001",
4
+ "title": "Track",
5
+ "titleAccent": "Overlay",
6
+ "subtitle": "One clip on v1, a second pass on v2, and this HTML layer on v3.",
7
+ "detail": "Detail / second pass",
8
+ "accent": "#8fe6c8"
9
+ }
10
+ }