Setting the file. One moment. Workflow Approve Press · Hyperframes Animation · heygen-com/hyperframes · Skills DocsBlueprints Index
(opens in a new tab)
examples/workflow-approve-press.html
HTML·606 lines·20 KB
8 <!--
9 Blueprint: workflow-approve-press
10 HyperFrames composition.tsx.
11 Same four-phase choreography, GSAP-driven, seek-safe.
12
13 Audio (assumed accompanying narration):
14 "This is AI that renders with you, not just for you.
15 Preview the result, render to MP4, then confirm."
16
17 Sub-phases (local time, 5.5s total):
18 0.17 – 0.72s Headline "AI edits WITH you" slides down
19 0.50 – 1.10s Center editor mockup scales in
20 0.67 – 2.17s Step indicators stagger-enter on the left (3D-tilted)
21 2.00 – 3.33s Step state machine: 1→complete, 2→active … 2→complete, 3→active
22 3.52 – 4.02s Confirm MP4 button (3D-tilted right) bouncy entry after render step is active
23 4.22 – 4.72s Button depression (linear, no overshoot)
24 4.72 – 5.22s Render confirmed: step 3 completes, color shifts to success green + checkmark pop
25
26 Asset placeholders:
27 ./assets/editor-demo.mp4 — center product demo video. Replace with a
28 real export of the AI-editor flow. The
29 composition falls back to a CSS-mockup of
30 an editor timeline so it renders without
31 network or media files.
32 -->
33
34 <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
35
36 <style>
37 :root {
38 /* Palette — port of the the source COLORS / TYPOGRAPHY constants */
39 --text-primary: #ffffff;
40 --text-secondary: #cbd5e1;
41 --text-muted: #94a3b8;
42 --brand-purple: #a78bfa;
43 --brand-purple-glow: rgba(167, 139, 250, 0.6);
44 --brand-green: #22c55e;
45 --brand-green-glow: rgba(34, 197, 94, 0.6);
46 --panel-stroke: rgba(255, 255, 255, 0.1);
47 }
48
49 * {
50 margin: 0;
51 padding: 0;
52 box-sizing: border-box;
53 }
54 html,
55 body {
56 margin: 0;
57 width: 1920px;
58 height: 1080px;
59 overflow: hidden;
60 background: #000;
61 font-family:
62 "Inter",
63 system-ui,
64 -apple-system,
65 sans-serif;
66 color: var(--text-primary);
67 }
68
69 /* ============================================================
70 BACKGROUND — port of <FrostedGlassBackground />
71 ============================================================ */
72 .bg {
73 position: absolute;
74 inset: 0;
75 background:
76 radial-gradient(ellipse at 25% 30%, rgba(167, 139, 250, 0.2), transparent 55%),
77 radial-gradient(ellipse at 80% 70%, rgba(34, 197, 94, 0.12), transparent 55%),
78 linear-gradient(135deg, #1a1530 0%, #0a0815 70%);
79 }
80
81 /* Ambient warm glow on the right (button side) */
82 .ambient {
83 position: absolute;
84 inset: 0;
85 background: radial-gradient(
86 ellipse at 70% 50%,
87 var(--brand-purple-glow) 0%,
88 transparent 40%
89 );
90 opacity: 0.15;
91 pointer-events: none;
92 }
93
94 /* Vignette */
95 .vignette {
96 position: absolute;
97 inset: 0;
98 background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
99 pointer-events: none;
100 }
101
102 /* ============================================================
103 PHASE 1 — HEADLINE
104 ============================================================ */
105 .headline-wrap {
106 position: absolute;
107 top: 80px;
108 left: 50%;
109 transform: translateX(-50%);
110 opacity: 0; /* GSAP fades in */
111 text-align: center;
112 white-space: nowrap;
113 }
114 .headline {
115 font-size: 96px;
116 font-weight: 800;
117 line-height: 1.2;
118 letter-spacing: -0.01em;
119 color: var(--text-primary);
120 }
121 .headline .accent {
122 color: var(--brand-purple);
123 text-shadow: 0 0 30px var(--brand-purple-glow);
124 }
125
126 /* ============================================================
127 PHASE 2 — CENTER DEMO
128 (Falls back to a CSS-mockup editor when ./assets/editor-demo.mp4
129 is missing. The mockup is purely decorative — no animation
130 inside it; the eye reads it as a paused product screenshot.)
131 ============================================================ */
132 .demo-wrap {
133 position: absolute;
134 left: 50%;
135 top: 60%;
136 opacity: 0;
137 }
138 .demo-frame {
139 width: 1000px;
140 height: 600px;
141 border-radius: 16px;
142 overflow: hidden;
143 border: 2px solid var(--panel-stroke);
144 box-shadow:
145 0 0 40px var(--brand-purple-glow),
146 0 20px 60px rgba(0, 0, 0, 0.5);
147 position: relative;
148 }
149 .demo-frame video {
150 display: block;
151 width: 100%;
152 height: 100%;
153 object-fit: cover;
154 }
155
156 /* CSS-mockup fallback for the editor demo */
157 .demo-mockup {
158 position: absolute;
159 inset: 0;
160 display: grid;
161 grid-template-rows: 56px 1fr 100px;
162 background: linear-gradient(180deg, #1f1b3a 0%, #15112a 100%);
163 }
164 .mockup-toolbar {
165 display: flex;
166 align-items: center;
167 gap: 12px;
168 padding: 0 20px;
169 background: #15112a;
170 border-bottom: 1px solid var(--panel-stroke);
171 }
172 .mockup-toolbar .dot {
173 width: 12px;
174 height: 12px;
175 border-radius: 50%;
176 background: rgba(255, 255, 255, 0.18);
177 }
178 .mockup-toolbar .dot.r {
179 background: #ef4444;
180 }
181 .mockup-toolbar .dot.y {
182 background: #eab308;
183 }
184 .mockup-toolbar .dot.g {
185 background: #22c55e;
186 }
187 .mockup-toolbar .title {
188 margin-left: 18px;
189 color: var(--text-secondary);
190 font-size: 16px;
191 font-weight: 500;
192 }
193 .mockup-canvas {
194 position: relative;
195 padding: 30px;
196 overflow: hidden;
197 background:
198 repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 40px),
199 repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 40px);
200 }
201 .mockup-canvas .preview-box {
202 width: 100%;
203 height: 100%;
204 border-radius: 10px;
205 background: linear-gradient(135deg, rgba(167, 139, 250, 0.35), rgba(34, 197, 94, 0.2));
206 border: 1px solid var(--panel-stroke);
207 box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.4);
208 display: flex;
209 align-items: center;
210 justify-content: center;
211 color: var(--text-secondary);
212 font-size: 18px;
213 font-weight: 600;
214 letter-spacing: 0.18em;
215 text-transform: uppercase;
216 }
217 .mockup-timeline {
218 display: flex;
219 flex-direction: column;
220 gap: 6px;
221 padding: 14px 20px;
222 background: #15112a;
223 border-top: 1px solid var(--panel-stroke);
224 }
225 .mockup-timeline .track {
226 height: 24px;
227 display: flex;
228 gap: 4px;
229 }
230 .mockup-timeline .clip {
231 height: 100%;
232 border-radius: 4px;
233 }
234 .mockup-timeline .t1 .a {
235 flex: 3;
236 background: var(--brand-purple);
237 opacity: 0.85;
238 }
239 .mockup-timeline .t1 .b {
240 flex: 2;
241 background: var(--brand-purple);
242 opacity: 0.55;
243 }
244 .mockup-timeline .t1 .c {
245 flex: 4;
246 background: var(--brand-purple);
247 opacity: 0.85;
248 }
249 .mockup-timeline .t2 .a {
250 flex: 5;
251 background: var(--brand-green);
252 opacity: 0.75;
253 }
254 .mockup-timeline .t2 .b {
255 flex: 2;
256 background: var(--brand-green);
257 opacity: 0.45;
258 }
259 .mockup-timeline .t2 .c {
260 flex: 2;
261 background: var(--brand-green);
262 opacity: 0.75;
263 }
264
265 /* ============================================================
266 PHASE 3 — LEFT FLANK: STEP INDICATORS (3D-TILTED)
267 ============================================================ */
268 .steps-flank {
269 position: absolute;
270 left: 100px;
271 top: 55%;
272 transform: translateY(-50%) perspective(800px) rotateY(15deg);
273 display: flex;
274 flex-direction: column;
275 gap: 30px;
276 }
277 .step {
278 display: flex;
279 align-items: center;
280 gap: 16px;
281 opacity: 0; /* GSAP fades in */
282 }
283 .step-circle {
284 width: 40px;
285 height: 40px;
286 border-radius: 50%;
287 display: flex;
288 align-items: center;
289 justify-content: center;
290 border: 2px solid var(--text-muted);
291 background-color: transparent;
292 box-shadow: none;
293 transition: none; /* Steps SNAP between states, no CSS transition */
294 flex-shrink: 0;
295 }
296 .step-num {
297 font-size: 18px;
298 font-weight: 700;
299 color: var(--text-muted);
300 }
301 .step-check {
302 display: none;
303 }
304 .step-label {
305 font-size: 28px;
306 font-weight: 500;
307 color: var(--text-secondary);
308 }
309
310 /* State machine — toggled via tl.set({ attr: data-state }) */
311 .step[data-state="active"] .step-circle {
312 border-color: var(--brand-purple);
313 box-shadow: 0 0 15px var(--brand-purple-glow);
314 }
315 .step[data-state="active"] .step-num {
316 color: var(--brand-purple);
317 }
318 .step[data-state="active"] .step-label {
319 font-weight: 700;
320 color: var(--text-primary);
321 }
322
323 .step[data-state="complete"] .step-circle {
324 border-color: var(--brand-green);
325 background-color: var(--brand-green);
326 }
327 .step[data-state="complete"] .step-num {
328 display: none;
329 }
330 .step[data-state="complete"] .step-check {
331 display: inline-flex;
332 }
333
334 /* ============================================================
335 PHASE 4 — RIGHT FLANK: CONFIRM BUTTON (3D-TILTED)
336 ============================================================ */
337 .button-flank {
338 position: absolute;
339 right: 70px;
340 top: 55%;
341 transform: translateY(-50%) perspective(800px) rotateY(-15deg);
342 }
343 .btn-press {
344 opacity: 0;
345 transform-origin: center center;
346 }
347 .btn {
348 --btn-glow-blur: 20px;
349 padding: 20px 50px;
350 border-radius: 12px;
351 background-color: var(--brand-purple);
352 box-shadow: 0 0 var(--btn-glow-blur) var(--brand-purple-glow);
353 display: flex;
354 align-items: center;
355 justify-content: center;
356 gap: 12px;
357 color: var(--text-primary);
358 font-size: 36px;
359 font-weight: 700;
360 white-space: nowrap;
361 }
362 .btn-check {
363 display: inline-flex;
364 transform-origin: center center;
365 }
366 </style>
367 </head>
368 <body>
369 <div
370 id="root"
371 data-composition-id="interactive-workflow"
372 data-start="0"
373 data-duration="5.5"
374 data-width="1920"
375 data-height="1080"
376 style="position: relative; width: 1920px; height: 1080px; overflow: hidden"
377 >
378 <!-- Background layers -->
379 <div class="bg"></div>
380
381 <!-- PHASE 1: Headline -->
382 <div class="headline-wrap">
383 <div class="headline">
384 HyperFrames builds
385 <span class="accent">WITH</span>
386 you
387 </div>
388 </div>
389
390 <!-- PHASE 2: Center demo (video with CSS-mockup fallback) -->
391 <div class="demo-wrap">
392 <div class="demo-frame">
393 <!--
394 Real asset path (replace for production).
395 If missing, the CSS mockup below shows through the transparent
396 poster region. The video stays muted per HyperFrames rules.
397 -->
398 <!-- Decorative CSS-mockup of an editor — paused screenshot feel. -->
399 <div class="demo-mockup">
400 <div class="mockup-toolbar">
401 <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
402 <span class="title">HyperFrames — Project: Launch Promo</span>
403 </div>
404 <div class="mockup-canvas">
405 <div class="preview-box">Preview · 1920 × 1080</div>
406 </div>
407 <div class="mockup-timeline">
408 <div class="track t1">
409 <div class="clip a"></div>
410 <div class="clip b"></div>
411 <div class="clip c"></div>
412 </div>
413 <div class="track t2">
414 <div class="clip a"></div>
415 <div class="clip b"></div>
416 <div class="clip c"></div>
417 </div>
418 </div>
419 </div>
420 </div>
421 </div>
422
423 <!-- PHASE 3: Left-flank step indicators (3D-tilted +15°) -->
424 <div class="steps-flank">
425 <div class="step step-1" data-step="1" data-state="pending">
426 <div class="step-circle">
427 <span class="step-num">1</span>
428 <svg class="step-check" width="20" height="20" viewBox="0 0 24 24" fill="none">
429 <path d="M20 6L9 17L4 12" stroke="#fff" stroke-width="2.5" stroke-linecap="round" />
430 </svg>
431 </div>
432 <span class="step-label">Compose HTML Scene</span>
433 </div>
434
435 <div class="step step-2" data-step="2" data-state="pending">
436 <div class="step-circle">
437 <span class="step-num">2</span>
438 <svg class="step-check" width="20" height="20" viewBox="0 0 24 24" fill="none">
439 <path d="M20 6L9 17L4 12" stroke="#fff" stroke-width="2.5" stroke-linecap="round" />
440 </svg>
441 </div>
442 <span class="step-label">Seek & Preview</span>
443 </div>
444
445 <div class="step step-3" data-step="3" data-state="pending">
446 <div class="step-circle">
447 <span class="step-num">3</span>
448 <svg class="step-check" width="20" height="20" viewBox="0 0 24 24" fill="none">
449 <path d="M20 6L9 17L4 12" stroke="#fff" stroke-width="2.5" stroke-linecap="round" />
450 </svg>
451 </div>
452 <span class="step-label">Render to MP4</span>
453 </div>
454 </div>
455
456 <!-- PHASE 4: Right-flank confirm button (3D-tilted -15°) -->
457 <div class="button-flank">
458 <div class="btn-press">
459 <div class="btn">
460 <span class="btn-check">
461 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
462 <path
463 d="M20 6L9 17L4 12"
464 stroke="#fff"
465 stroke-width="3"
466 stroke-linecap="round"
467 stroke-linejoin="round"
468 />
469 </svg>
470 </span>
471 <span class="btn-label">Confirm MP4</span>
472 </div>
473 </div>
474 </div>
475
476 <!-- Ambient + vignette overlays (pointer-events: none) -->
477 <div class="ambient"></div>
478 <div class="vignette"></div>
479 </div>
480
481 <script>
482 window.__timelines = window.__timelines || {};
483 const tl = gsap.timeline({ paused: true });
484
485 // ── Phase boundaries (seconds) — match the blueprint ────────────
486 const HEADLINE_START = 0.17;
487 const HEADLINE_END = 0.72;
488 const VIDEO_START = 0.5;
489 const STEPS_START = 0.67;
490 const STEP_STAGGER = 0.5;
491 const STEP_ACTIVE_T2 = 2.0; // step 1 → complete, step 2 → active
492 const STEP_ACTIVE_T3 = 3.33; // step 2 → complete, step 3 → active
493 const BUTTON_ENTER = 3.52; // after "Render to MP4" becomes active
494 const PRESS_FRAME = 4.22;
495 const PRESS_DURATION = 0.5;
496 const CHECK_POP = PRESS_FRAME + PRESS_DURATION;
497 const SCENE_END = 5.5; // matches data-duration on the root
498
499 // ── Phase 1: Headline slides down from top ─────────────────────
500 gsap.set(".demo-wrap", { xPercent: -50, yPercent: -50, scale: 0.8, opacity: 0 });
501 gsap.set(".step", { x: -30, opacity: 0 });
502 gsap.set(".btn-press", { scale: 0, opacity: 0 });
503 gsap.set(".btn-check", { scale: 0 });
504
505 tl.fromTo(
506 ".headline-wrap",
507 { y: -40, opacity: 0 },
508 {
509 y: 0,
510 opacity: 1,
511 duration: HEADLINE_END - HEADLINE_START,
512 ease: "back.out(1.2)", // ≈ the source SPRING_CONFIGS.entrance
513 },
514 HEADLINE_START,
515 );
516
517 // ── Phase 2: Center demo scales in ─────────────────────────────
518 // HyperFrames syncs the <video> element's currentTime to the seek
519 // position automatically — no .play() call needed (and one here
520 // would break deterministic rendering).
521 tl.to(".demo-wrap", { scale: 1, opacity: 1, duration: 0.6, ease: "power3.out" }, VIDEO_START);
522
523 // ── Phase 3a: Stagger entry of the step indicators ─────────────
524 tl.to(
525 ".step",
526 {
527 x: 0,
528 opacity: 1,
529 duration: 0.4,
530 ease: "power3.out",
531 stagger: { each: STEP_STAGGER, from: "start" },
532 },
533 STEPS_START,
534 );
535
536 // ── Phase 3b: Step state machine (snap-toggled here) ──
537 // Step 1 enters in the "active" state because narration starts on it.
538 tl.set(".step-1", { attr: { "data-state": "active" } }, STEPS_START);
539
540 // First transition — step 1 finishes, step 2 takes over.
541 tl.set(".step-1", { attr: { "data-state": "complete" } }, STEP_ACTIVE_T2);
542 tl.set(".step-2", { attr: { "data-state": "active" } }, STEP_ACTIVE_T2);
543
544 // Second transition — step 2 finishes, step 3 takes over.
545 tl.set(".step-2", { attr: { "data-state": "complete" } }, STEP_ACTIVE_T3);
546 tl.set(".step-3", { attr: { "data-state": "active" } }, STEP_ACTIVE_T3);
547
548 // ── Phase 4a: Button bouncy entry ──────────────────────────────
549 tl.to(
550 ".btn-press",
551 { scale: 1, opacity: 1, duration: 0.5, ease: "back.out(1.4)", overwrite: "auto" },
552 BUTTON_ENTER,
553 );
554
555 // ── Phase 4b: Press (linear depression → linear return) ────────
556 // Two adjacent tweens on .btn-press — end value of (1) = start value of (2).
557 tl.to(".btn-press", { scale: 0.95, duration: 0.1, ease: "power1.out" }, PRESS_FRAME);
558 tl.to(
559 ".btn-press",
560 { scale: 1.0, duration: PRESS_DURATION - 0.1, ease: "power1.in" },
561 PRESS_FRAME + 0.1,
562 );
563
564 // ── Phase 4c: Color shift + label swap (at press end) ──────────
565 tl.to(
566 ".btn",
567 {
568 backgroundColor: "#15803d",
569 boxShadow: "0 0 25px rgba(21, 128, 61, 0.68)",
570 duration: 0.3,
571 ease: "power2.out",
572 },
573 CHECK_POP,
574 );
575 tl.set(".btn-label", { textContent: "Approved!" }, CHECK_POP);
576 tl.set(".step-3", { attr: { "data-state": "complete" } }, CHECK_POP);
577
578 // ── Phase 4d: Checkmark pops into view ─────────────────────────
579 // back.out(1.6) ≈ the source spring({ stiffness: 200, damping: 15 }).
580 tl.to(".btn-check", { scale: 1, duration: 0.5, ease: "back.out(1.6)" }, CHECK_POP);
581
582 // ── Ambient pulsing glow on the button (Math.sin) ──
583 // Source: `glowIntensity = 20 + Math.sin(frame * 0.1) * 10` — i.e. blur
584 // oscillates 10 ↔ 30 around 20, with angular freq 0.1 rad/frame.
585 // At 60fps that's 6 rad/s, so full period ≈ 2π / 6 ≈ 1.05s.
586 // Finite yoyo replaces the continuous sine; `box-shadow` reads the
587 // tweened CSS variable so the blur is actually animatable.
588 const PULSE_PERIOD = 1.05;
589 const PULSE_HALVES = Math.max(2, Math.floor((SCENE_END - BUTTON_ENTER) / (PULSE_PERIOD / 2)));
590 tl.fromTo(
591 ".btn",
592 { "--btn-glow-blur": "10px" }, // source amplitude: 20 ± 10
593 {
594 "--btn-glow-blur": "30px",
595 duration: PULSE_PERIOD / 2,
596 ease: "sine.inOut",
597 yoyo: true,
598 repeat: PULSE_HALVES - 1,
599 },
600 BUTTON_ENTER,
601 );
602
603 window.__timelines["interactive-workflow"] = tl;
604 </script>
605 </body>
606</html>