| 1 | <!doctype html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <meta name="viewport" content="width=1920, height=1080" /> |
| 6 | <title>BRANDNAME — 30s Promo</title> |
| 7 | <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> |
| 8 | <style> |
| 9 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 10 | html, body { |
| 11 | margin: 0; |
| 12 | width: 1920px; |
| 13 | height: 1080px; |
| 14 | overflow: hidden; |
| 15 | background: #000; |
| 16 | color: #fff; |
| 17 | } |
| 18 | .beat-layer { |
| 19 | position: absolute; |
| 20 | top: 0; left: 0; |
| 21 | width: 1920px; |
| 22 | height: 1080px; |
| 23 | } |
| 24 | .cap { |
| 25 | position: absolute; |
| 26 | bottom: 72px; |
| 27 | left: 50%; |
| 28 | transform: translateX(-50%); |
| 29 | padding: 12px 22px; |
| 30 | border-radius: 14px; |
| 31 | background: rgba(10, 8, 5, 0.55); |
| 32 | backdrop-filter: blur(8px); |
| 33 | font: 500 24px/1.3 "Geist", "Inter", sans-serif; |
| 34 | color: #fff; |
| 35 | z-index: 50; |
| 36 | } |
| 37 | </style> |
| 38 | </head> |
| 39 | <body> |
| 40 | <div |
| 41 | id="root" |
| 42 | data-composition-id="linear-promo-30s" |
| 43 | data-start="0" |
| 44 | data-duration="30" |
| 45 | data-width="1920" |
| 46 | data-height="1080" |
| 47 | > |
| 48 | <!-- Beat 01 — Problem kinetic type (0–4s) --> |
| 49 | <div class="beat-layer" |
| 50 | data-composition-id="01-problem-type" |
| 51 | data-composition-src="compositions/01-problem-type.html" |
| 52 | data-start="0" data-duration="4" data-track-index="0" |
| 53 | data-width="1920" data-height="1080"></div> |
| 54 | |
| 55 | <!-- Beat 02 — Red card → L-bracket morph (4–8s) --> |
| 56 | <div class="beat-layer" |
| 57 | data-composition-id="02-card-to-logo" |
| 58 | data-composition-src="compositions/02-card-to-logo.html" |
| 59 | data-start="4" data-duration="4" data-track-index="0" |
| 60 | data-width="1920" data-height="1080"></div> |
| 61 | |
| 62 | <!-- Beat 03 — Brand reveal (8–10s) --> |
| 63 | <div class="beat-layer" |
| 64 | data-composition-id="03-brand-reveal" |
| 65 | data-composition-src="compositions/03-brand-reveal.html" |
| 66 | data-start="8" data-duration="2" data-track-index="0" |
| 67 | data-width="1920" data-height="1080"></div> |
| 68 | |
| 69 | <!-- Beat 04 — Benefits flowchart recolor (10–14.8s) --> |
| 70 | <div class="beat-layer" |
| 71 | data-composition-id="04-benefits-flowchart" |
| 72 | data-composition-src="compositions/04-benefits-flowchart.html" |
| 73 | data-start="10" data-duration="4.8" data-track-index="0" |
| 74 | data-width="1920" data-height="1080"></div> |
| 75 | |
| 76 | <!-- Beat 05 — Plan/Build/Monitor surfaces (14.8–19.5s) --> |
| 77 | <div class="beat-layer" |
| 78 | data-composition-id="05-product-surfaces" |
| 79 | data-composition-src="compositions/05-product-surfaces.html" |
| 80 | data-start="14.8" data-duration="4.7" data-track-index="0" |
| 81 | data-width="1920" data-height="1080"></div> |
| 82 | |
| 83 | <!-- Beat 06 — Chrome wheel + side-panels (19.5–22s) --> |
| 84 | <div class="beat-layer" |
| 85 | data-composition-id="06-wheel-pillars" |
| 86 | data-composition-src="compositions/06-wheel-pillars.html" |
| 87 | data-start="19.5" data-duration="2.5" data-track-index="0" |
| 88 | data-width="1920" data-height="1080"></div> |
| 89 | |
| 90 | <!-- Beat 07 — Foundation callback + cluster (22–25s) --> |
| 91 | <div class="beat-layer" |
| 92 | data-composition-id="07-foundation" |
| 93 | data-composition-src="compositions/07-foundation.html" |
| 94 | data-start="22" data-duration="3" data-track-index="0" |
| 95 | data-width="1920" data-height="1080"></div> |
| 96 | |
| 97 | <!-- Beat 08 — CTA outro (25–30s) --> |
| 98 | <div class="beat-layer" |
| 99 | data-composition-id="08-cta-outro" |
| 100 | data-composition-src="compositions/08-cta-outro.html" |
| 101 | data-start="25" data-duration="5" data-track-index="0" |
| 102 | data-width="1920" data-height="1080"></div> |
| 103 | |
| 104 | <!-- Audio: warm ambient pad (full piece) --> |
| 105 | <audio id="warm-pad" |
| 106 | data-start="0" data-duration="30" data-track-index="1" data-volume="0.15" |
| 107 | src="assets/warm-pad.mp3"></audio> |
| 108 | |
| 109 | <!-- SFX: whoosh at 3.8s (whip transition in beat 01) --> |
| 110 | <audio id="sfx-whoosh-1" |
| 111 | data-start="3.8" data-duration="0.4" data-track-index="2" data-volume="0.20" |
| 112 | src="assets/sfx-whoosh-1.mp3"></audio> |
| 113 | |
| 114 | <!-- SFX: whoosh at 6.0s (morph transition in beat 02) --> |
| 115 | <audio id="sfx-whoosh-2" |
| 116 | data-start="6.0" data-duration="0.5" data-track-index="3" data-volume="0.20" |
| 117 | src="assets/sfx-whoosh-2.mp3"></audio> |
| 118 | |
| 119 | <!-- SFX: twinkle at 8.3s (brand reveal in beat 03) --> |
| 120 | <audio id="sfx-twinkle" |
| 121 | data-start="8.3" data-duration="0.5" data-track-index="4" data-volume="0.20" |
| 122 | src="assets/sfx-twinkle.mp3"></audio> |
| 123 | </div> |
| 124 | |
| 125 | <script> |
| 126 | window.__timelines = window.__timelines || {}; |
| 127 | const tl = gsap.timeline({ paused: true }); |
| 128 | // Root anchor — 30s slot. Sub-composition timelines auto-link. |
| 129 | tl.to({}, { duration: 30 }, 0); |
| 130 | window.__timelines["linear-promo-30s"] = tl; |
| 131 | </script> |
| 132 | </body> |
| 133 | </html> |
| 134 |