← back to Marketing Command Center
HyperFrames social promo for streamlined MCC (9:16 + 1:1, cloned VO + captions)
2a3f00fbf8ae77f95bcfcf97b60243dc4f6c5ce7 · 2026-08-12 14:37:06 -0700 · Steve
Files touched
M .gitignoreA videos/mcc-streamline-promo/index.htmlA videos/mcc-streamline-promo/square.html
Diff
commit 2a3f00fbf8ae77f95bcfcf97b60243dc4f6c5ce7
Author: Steve <steve@designerwallcoverings.com>
Date: Wed Aug 12 14:37:06 2026 -0700
HyperFrames social promo for streamlined MCC (9:16 + 1:1, cloned VO + captions)
---
.gitignore | 6 +
videos/mcc-streamline-promo/index.html | 195 ++++++++++++++++++++++++++++++++
videos/mcc-streamline-promo/square.html | 195 ++++++++++++++++++++++++++++++++
3 files changed, 396 insertions(+)
diff --git a/.gitignore b/.gitignore
index eb49f7c..b31d18e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -62,3 +62,9 @@ screenrecord/rec/
# locally-cached remote post media (durable copies of expiring IG/fbcdn urls)
public/cache/
data/linkedin-feed.json
+
+# hyperframes video projects — keep source, ignore heavy artifacts
+videos/**/node_modules/
+videos/**/renders/
+videos/**/.media/
+videos/**/capture/
diff --git a/videos/mcc-streamline-promo/index.html b/videos/mcc-streamline-promo/index.html
new file mode 100644
index 0000000..6ddd3fe
--- /dev/null
+++ b/videos/mcc-streamline-promo/index.html
@@ -0,0 +1,195 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=1080, height=1920" />
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
+ <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+ <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+ <style>
+ * { margin: 0; padding: 0; box-sizing: border-box; }
+ html, body { width: 1080px; height: 1920px; overflow: hidden; }
+ :root {
+ --ink:#14110f; --cream:#f4efe7; --paper:#fbf9f5; --gold:#b8925a;
+ --gold-soft:#d8c19a; --accent:#8a5a44; --line:#e3ddd0; --mut:#8a8275;
+ }
+ #root {
+ position: relative; width: 1080px; height: 1920px; overflow: hidden;
+ font-family: "Inter", sans-serif; color: var(--ink);
+ background: radial-gradient(1200px 900px at 50% 12%, #fffdf9 0%, var(--paper) 45%, var(--cream) 100%);
+ }
+ .bgtex { position:absolute; inset:0;
+ background-image:
+ linear-gradient(0deg, rgba(184,146,90,.05) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(184,146,90,.05) 1px, transparent 1px);
+ background-size: 60px 60px; opacity:.5; }
+ .wordmark { position:absolute; top:70px; left:0; right:0; text-align:center;
+ font-family:"Cormorant Garamond",serif; font-weight:600; letter-spacing:.22em;
+ font-size:34px; color:var(--ink); text-transform:uppercase; }
+ .wordmark .dot { color:#9c7328; }
+ .footer { position:absolute; bottom:70px; left:0; right:0; text-align:center;
+ font-size:22px; letter-spacing:.32em; text-transform:uppercase; color:#544d44; }
+
+ .stage { position:absolute; left:0; right:0; top:0; height:1920px;
+ display:flex; flex-direction:column; align-items:center; justify-content:center; }
+
+ .card { width:940px; border-radius:26px; overflow:hidden; background:#fff;
+ border:1px solid var(--line); box-shadow:0 40px 90px -30px rgba(20,17,15,.45);
+ will-change:transform,opacity; }
+ .card img { width:100%; display:block; }
+
+ .kicker { font-size:26px; letter-spacing:.34em; text-transform:uppercase; color:#6f4030; font-weight:600; }
+ .display { font-family:"Cormorant Garamond",serif; font-weight:700; color:var(--ink); line-height:.98; }
+ .huge { font-family:"Cormorant Garamond",serif; font-weight:700; color:var(--ink); line-height:1; }
+ .huge .g { color:#9c7328; }
+ .sub { font-family:"Cormorant Garamond",serif; font-style:italic; font-size:44px; color:#5f4232; }
+
+ .groups { display:flex; flex-direction:column; gap:16px; align-items:center; margin-top:8px; }
+ .chip { font-size:34px; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--line);
+ border-radius:999px; padding:14px 34px; box-shadow:0 10px 24px -14px rgba(20,17,15,.3); }
+
+ .beatlbl { text-align:center; margin-bottom:34px; }
+ .beatlbl .k { font-size:24px; letter-spacing:.3em; text-transform:uppercase; color:#7a5416; font-weight:600; }
+ .beatlbl .t { font-family:"Cormorant Garamond",serif; font-weight:700; font-size:76px; color:var(--ink); line-height:1.02; margin-top:6px; }
+ .beatlbl .t i { font-style:italic; color:var(--accent); }
+
+ .caption { position:absolute; left:60px; right:60px; bottom:150px; text-align:center;
+ font-size:38px; line-height:1.5; font-weight:600; color:#fff; }
+ .caption span.pill { background:rgba(20,17,15,.82); border-radius:14px; padding:8px 16px;
+ box-decoration-break:clone; -webkit-box-decoration-break:clone; }
+ .caption .g { color:var(--gold-soft); }
+ </style>
+ </head>
+ <body>
+ <div id="root" data-composition-id="main" data-start="0" data-duration="23.6" data-width="1080" data-height="1920">
+
+ <div class="bgtex"></div>
+ <div class="wordmark">Designer Wallcoverings<span class="dot">.</span></div>
+ <div class="footer">Marketing Command Center</div>
+
+ <!-- BEAT 1 — title -->
+ <div id="b1" class="clip stage" data-start="0" data-duration="3.7" data-track-index="1">
+ <div class="kicker" id="b1k">The Command Center</div>
+ <div class="display" style="font-size:150px;margin-top:14px" id="b1t">Streamlined</div>
+ <div class="sub" id="b1s" style="margin-top:18px">a cleaner way to run marketing</div>
+ </div>
+
+ <!-- BEAT 2 — 28 tabs, gone -->
+ <div id="b2" class="clip stage" data-start="3.5" data-duration="2.9" data-track-index="3">
+ <div class="kicker" id="b2k">Before</div>
+ <div class="huge" id="b2n" style="font-size:460px">28</div>
+ <div class="sub" id="b2s" style="font-size:52px;color:var(--accent)">tabs — gone</div>
+ </div>
+
+ <!-- BEAT 3 — 6 groups + chips -->
+ <div id="b3" class="clip stage" data-start="6.2" data-duration="3.1" data-track-index="1">
+ <div class="beatlbl">
+ <div class="k">Now</div>
+ <div class="t"><span class="huge" style="font-size:120px"><span class="g">6</span></span> <i>calendar-led groups</i></div>
+ </div>
+ <div class="groups" id="b3g">
+ <div class="chip">Calendar</div>
+ <div class="chip">Plan</div>
+ <div class="chip">Compose</div>
+ <div class="chip">Library</div>
+ <div class="chip">Accounts & Email</div>
+ <div class="chip">Insights</div>
+ </div>
+ </div>
+
+ <!-- BEAT 4 — Compose -->
+ <div id="b4" class="clip stage" data-start="9.1" data-duration="4.0" data-track-index="3">
+ <div class="beatlbl"><div class="k">Smart hub · 1</div><div class="t"><i>Compose</i></div></div>
+ <div class="card" id="b4c1" style="width:840px"><img src="assets/img/compose-m.png" alt=""></div>
+ </div>
+
+ <!-- BEAT 5 — Calendar -->
+ <div id="b5" class="clip stage" data-start="13.0" data-duration="3.1" data-track-index="1">
+ <div class="beatlbl"><div class="k">Smart hub · 2</div><div class="t"><i>Calendar</i></div></div>
+ <div class="card" id="b5c"><img src="assets/img/calendar.png" alt=""></div>
+ </div>
+
+ <!-- BEAT 6 — Insights -->
+ <div id="b6" class="clip stage" data-start="16.0" data-duration="4.1" data-track-index="3">
+ <div class="beatlbl"><div class="k">Smart hub · 3</div><div class="t">8 tools, <i>one Insights tab</i></div></div>
+ <div class="card" id="b6c"><img src="assets/img/insights.png" alt=""></div>
+ </div>
+
+ <!-- BEAT 7 — outro -->
+ <div id="b7" class="clip stage" data-start="20.0" data-duration="3.6" data-track-index="1">
+ <div class="display" id="b7t" style="font-size:120px;text-align:center">Everything you need</div>
+ <div class="sub" id="b7s" style="font-size:48px;margin-top:20px">a click or two away</div>
+ <div id="b7w" style="margin-top:60px;font-family:'Cormorant Garamond',serif;font-weight:600;letter-spacing:.22em;font-size:40px;text-transform:uppercase">Designer Wallcoverings<span style="color:#9c7328">.</span></div>
+ </div>
+
+ <!-- CAPTIONS (muted-safe) -->
+ <div class="caption clip" id="c1" data-start="0.2" data-duration="3.3" data-track-index="2"><span class="pill">The command center just got a <span class="g">serious cleanup</span></span></div>
+ <div class="caption clip" id="c2" data-start="3.6" data-duration="2.7" data-track-index="2"><span class="pill"><span class="g">28 tabs</span> — gone</span></div>
+ <div class="caption clip" id="c3" data-start="6.3" data-duration="2.8" data-track-index="2"><span class="pill">Now <span class="g">6</span> calendar-led groups</span></div>
+ <div class="caption clip" id="c4" data-start="9.2" data-duration="3.8" data-track-index="2"><span class="pill"><span class="g">Compose</span> merges Suggested + Manual</span></div>
+ <div class="caption clip" id="c5" data-start="13.1" data-duration="2.8" data-track-index="2"><span class="pill">One <span class="g">Calendar</span> for your whole timeline</span></div>
+ <div class="caption clip" id="c6" data-start="16.1" data-duration="3.8" data-track-index="2"><span class="pill">8 preview tools → one <span class="g">Insights</span> tab</span></div>
+ <div class="caption clip" id="c7" data-start="20.1" data-duration="3.3" data-track-index="2"><span class="pill">A click or two <span class="g">away</span></span></div>
+
+ <!-- continuous narration -->
+ <audio id="narration" src=".media/audio/narration.wav" data-start="0" data-track-index="10"></audio>
+ </div>
+
+ <script>
+ window.__timelines = window.__timelines || {};
+ const tl = gsap.timeline({ paused: true });
+ const ease = "power3.out";
+
+ tl.from("#b1k", { opacity:0, y:20, duration:.6, ease }, 0.1)
+ .from("#b1t", { opacity:0, y:40, duration:.8, ease }, 0.25)
+ .from("#b1s", { opacity:0, y:20, duration:.7, ease }, 0.6)
+ .to("#b1", { opacity:0, duration:.4 }, 3.3)
+ .set("#b1", { opacity:0 }, 3.7);
+
+ tl.from("#b2k", { opacity:0, duration:.4 }, 3.6)
+ .from("#b2n", { opacity:0, scale:1.6, duration:.6, ease:"back.out(1.6)" }, 3.6)
+ .from("#b2s", { opacity:0, y:20, duration:.5, ease }, 4.1)
+ .to("#b2n", { opacity:.15, scale:.9, duration:.5, ease }, 5.4)
+ .to("#b2", { opacity:0, duration:.4 }, 6.0)
+ .set("#b2", { opacity:0 }, 6.4);
+
+ tl.from("#b3 .beatlbl", { opacity:0, y:30, duration:.6, ease }, 6.35)
+ .from("#b3 .chip", { opacity:0, y:26, duration:.5, stagger:.08, ease }, 6.6)
+ .to("#b3", { opacity:0, duration:.4 }, 8.9)
+ .set("#b3", { opacity:0 }, 9.3);
+
+ // card intro (opacity+y) then a slow parallax drift that STARTS after the intro (no property overlap)
+ tl.from("#b4 .beatlbl", { opacity:0, y:24, duration:.5, ease }, 9.25)
+ .from("#b4c1", { opacity:0, y:60, duration:.7, ease }, 9.4)
+ .to("#b4c1", { y:-46, duration:2.6, ease:"none" }, 10.2)
+ .to("#b4", { opacity:0, duration:.4 }, 12.7)
+ .set("#b4", { opacity:0 }, 13.1);
+
+ tl.from("#b5 .beatlbl", { opacity:0, y:24, duration:.5, ease }, 13.15)
+ .from("#b5c", { opacity:0, y:50, duration:.8, ease }, 13.3)
+ .to("#b5c", { y:-28, duration:1.9, ease:"none" }, 14.2)
+ .to("#b5", { opacity:0, duration:.4 }, 15.7)
+ .set("#b5", { opacity:0 }, 16.1);
+
+ tl.from("#b6 .beatlbl", { opacity:0, y:24, duration:.5, ease }, 16.15)
+ .from("#b6c", { opacity:0, y:60, duration:.8, ease }, 16.3)
+ .to("#b6c", { y:-34, duration:2.6, ease:"none" }, 17.1)
+ .to("#b6", { opacity:0, duration:.4 }, 19.7)
+ .set("#b6", { opacity:0 }, 20.1);
+
+ tl.from("#b7t", { opacity:0, y:40, duration:.8, ease }, 20.15)
+ .from("#b7s", { opacity:0, y:24, duration:.7, ease }, 20.6)
+ .from("#b7w", { opacity:0, duration:.8, ease }, 21.2);
+
+ ["c1","c2","c3","c4","c5","c6","c7"].forEach(id => {
+ const el = document.getElementById(id);
+ const s = parseFloat(el.dataset.start), d = parseFloat(el.dataset.duration);
+ tl.from("#"+id, { opacity:0, y:16, duration:.35, ease }, s)
+ .to("#"+id, { opacity:0, duration:.3 }, s + d - 0.3)
+ .set("#"+id, { opacity:0 }, s + d);
+ });
+
+ window.__timelines["main"] = tl;
+ </script>
+ </body>
+</html>
diff --git a/videos/mcc-streamline-promo/square.html b/videos/mcc-streamline-promo/square.html
new file mode 100644
index 0000000..36a3afd
--- /dev/null
+++ b/videos/mcc-streamline-promo/square.html
@@ -0,0 +1,195 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=1080, height=1080" />
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
+ <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+ <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+ <style>
+ * { margin: 0; padding: 0; box-sizing: border-box; }
+ html, body { width: 1080px; height: 1080px; overflow: hidden; }
+ :root {
+ --ink:#14110f; --cream:#f4efe7; --paper:#fbf9f5; --gold:#b8925a;
+ --gold-soft:#d8c19a; --accent:#8a5a44; --line:#e3ddd0; --mut:#8a8275;
+ }
+ #root {
+ position: relative; width: 1080px; height: 1080px; overflow: hidden;
+ font-family: "Inter", sans-serif; color: var(--ink);
+ background: radial-gradient(1200px 900px at 50% 12%, #fffdf9 0%, var(--paper) 45%, var(--cream) 100%);
+ }
+ .bgtex { position:absolute; inset:0;
+ background-image:
+ linear-gradient(0deg, rgba(184,146,90,.05) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(184,146,90,.05) 1px, transparent 1px);
+ background-size: 60px 60px; opacity:.5; }
+ .wordmark { position:absolute; top:30px; left:0; right:0; text-align:center;
+ font-family:"Cormorant Garamond",serif; font-weight:600; letter-spacing:.22em;
+ font-size:28px; color:var(--ink); text-transform:uppercase; }
+ .wordmark .dot { color:#9c7328; }
+ .footer { position:absolute; bottom:30px; left:0; right:0; text-align:center;
+ font-size:22px; letter-spacing:.32em; text-transform:uppercase; color:#544d44; }
+
+ .stage { position:absolute; left:0; right:0; top:0; height:1080px;
+ display:flex; flex-direction:column; align-items:center; justify-content:center; }
+
+ .card { width:680px; border-radius:26px; overflow:hidden; background:#fff;
+ border:1px solid var(--line); box-shadow:0 40px 90px -30px rgba(20,17,15,.45);
+ will-change:transform,opacity; }
+ .card img { width:100%; display:block; }
+
+ .kicker { font-size:26px; letter-spacing:.34em; text-transform:uppercase; color:#6f4030; font-weight:600; }
+ .display { font-family:"Cormorant Garamond",serif; font-weight:700; color:var(--ink); line-height:.98; }
+ .huge { font-family:"Cormorant Garamond",serif; font-weight:700; color:var(--ink); line-height:1; }
+ .huge .g { color:#9c7328; }
+ .sub { font-family:"Cormorant Garamond",serif; font-style:italic; font-size:44px; color:#5f4232; }
+
+ .groups { display:flex; flex-direction:column; gap:10px; align-items:center; margin-top:8px; }
+ .chip { font-size:34px; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--line);
+ border-radius:999px; padding:14px 34px; box-shadow:0 10px 24px -14px rgba(20,17,15,.3); }
+
+ .beatlbl { text-align:center; margin-bottom:16px; }
+ .beatlbl .k { font-size:24px; letter-spacing:.3em; text-transform:uppercase; color:#7a5416; font-weight:600; }
+ .beatlbl .t { font-family:"Cormorant Garamond",serif; font-weight:700; font-size:52px; color:var(--ink); line-height:1.02; margin-top:6px; }
+ .beatlbl .t i { font-style:italic; color:var(--accent); }
+
+ .caption { position:absolute; left:60px; right:60px; bottom:40px; text-align:center;
+ font-size:33px; line-height:1.4; font-weight:600; color:#fff; }
+ .caption span.pill { background:rgba(20,17,15,.82); border-radius:14px; padding:8px 16px;
+ box-decoration-break:clone; -webkit-box-decoration-break:clone; }
+ .caption .g { color:var(--gold-soft); }
+ </style>
+ </head>
+ <body>
+ <div id="root" data-composition-id="main" data-start="0" data-duration="23.6" data-width="1080" data-height="1080">
+
+ <div class="bgtex"></div>
+ <div class="wordmark">Designer Wallcoverings<span class="dot">.</span></div>
+ <div class="footer">Marketing Command Center</div>
+
+ <!-- BEAT 1 — title -->
+ <div id="b1" class="clip stage" data-start="0" data-duration="3.7" data-track-index="1">
+ <div class="kicker" id="b1k">The Command Center</div>
+ <div class="display" style="font-size:104px;margin-top:10px" id="b1t">Streamlined</div>
+ <div class="sub" id="b1s" style="margin-top:18px">a cleaner way to run marketing</div>
+ </div>
+
+ <!-- BEAT 2 — 28 tabs, gone -->
+ <div id="b2" class="clip stage" data-start="3.5" data-duration="2.9" data-track-index="3">
+ <div class="kicker" id="b2k">Before</div>
+ <div class="huge" id="b2n" style="font-size:300px">28</div>
+ <div class="sub" id="b2s" style="font-size:52px;color:var(--accent)">tabs — gone</div>
+ </div>
+
+ <!-- BEAT 3 — 6 groups + chips -->
+ <div id="b3" class="clip stage" data-start="6.2" data-duration="3.1" data-track-index="1">
+ <div class="beatlbl">
+ <div class="k">Now</div>
+ <div class="t"><span class="huge" style="font-size:92px"><span class="g">6</span></span> <i>calendar-led groups</i></div>
+ </div>
+ <div class="groups" id="b3g">
+ <div class="chip">Calendar</div>
+ <div class="chip">Plan</div>
+ <div class="chip">Compose</div>
+ <div class="chip">Library</div>
+ <div class="chip">Accounts & Email</div>
+ <div class="chip">Insights</div>
+ </div>
+ </div>
+
+ <!-- BEAT 4 — Compose -->
+ <div id="b4" class="clip stage" data-start="9.1" data-duration="4.0" data-track-index="3">
+ <div class="beatlbl"><div class="k">Smart hub · 1</div><div class="t"><i>Compose</i></div></div>
+ <div class="card" id="b4c1" style="width:680px"><img src="assets/img/compose-m.png" alt=""></div>
+ </div>
+
+ <!-- BEAT 5 — Calendar -->
+ <div id="b5" class="clip stage" data-start="13.0" data-duration="3.1" data-track-index="1">
+ <div class="beatlbl"><div class="k">Smart hub · 2</div><div class="t"><i>Calendar</i></div></div>
+ <div class="card" id="b5c"><img src="assets/img/calendar.png" alt=""></div>
+ </div>
+
+ <!-- BEAT 6 — Insights -->
+ <div id="b6" class="clip stage" data-start="16.0" data-duration="4.1" data-track-index="3">
+ <div class="beatlbl"><div class="k">Smart hub · 3</div><div class="t">8 tools, <i>one Insights tab</i></div></div>
+ <div class="card" id="b6c"><img src="assets/img/insights.png" alt=""></div>
+ </div>
+
+ <!-- BEAT 7 — outro -->
+ <div id="b7" class="clip stage" data-start="20.0" data-duration="3.6" data-track-index="1">
+ <div class="display" id="b7t" style="font-size:92px;text-align:center">Everything you need</div>
+ <div class="sub" id="b7s" style="font-size:40px;margin-top:14px">a click or two away</div>
+ <div id="b7w" style="margin-top:60px;font-family:'Cormorant Garamond',serif;font-weight:600;letter-spacing:.22em;font-size:40px;text-transform:uppercase">Designer Wallcoverings<span style="color:#9c7328">.</span></div>
+ </div>
+
+ <!-- CAPTIONS (muted-safe) -->
+ <div class="caption clip" id="c1" data-start="0.2" data-duration="3.3" data-track-index="2"><span class="pill">The command center just got a <span class="g">serious cleanup</span></span></div>
+ <div class="caption clip" id="c2" data-start="3.6" data-duration="2.7" data-track-index="2"><span class="pill"><span class="g">28 tabs</span> — gone</span></div>
+ <div class="caption clip" id="c3" data-start="6.3" data-duration="2.8" data-track-index="2"><span class="pill">Now <span class="g">6</span> calendar-led groups</span></div>
+ <div class="caption clip" id="c4" data-start="9.2" data-duration="3.8" data-track-index="2"><span class="pill"><span class="g">Compose</span> merges Suggested + Manual</span></div>
+ <div class="caption clip" id="c5" data-start="13.1" data-duration="2.8" data-track-index="2"><span class="pill">One <span class="g">Calendar</span> for your whole timeline</span></div>
+ <div class="caption clip" id="c6" data-start="16.1" data-duration="3.8" data-track-index="2"><span class="pill">8 preview tools → one <span class="g">Insights</span> tab</span></div>
+ <div class="caption clip" id="c7" data-start="20.1" data-duration="3.3" data-track-index="2"><span class="pill">A click or two <span class="g">away</span></span></div>
+
+ <!-- continuous narration -->
+ <audio id="narration" src=".media/audio/narration.wav" data-start="0" data-track-index="10"></audio>
+ </div>
+
+ <script>
+ window.__timelines = window.__timelines || {};
+ const tl = gsap.timeline({ paused: true });
+ const ease = "power3.out";
+
+ tl.from("#b1k", { opacity:0, y:20, duration:.6, ease }, 0.1)
+ .from("#b1t", { opacity:0, y:40, duration:.8, ease }, 0.25)
+ .from("#b1s", { opacity:0, y:20, duration:.7, ease }, 0.6)
+ .to("#b1", { opacity:0, duration:.4 }, 3.3)
+ .set("#b1", { opacity:0 }, 3.7);
+
+ tl.from("#b2k", { opacity:0, duration:.4 }, 3.6)
+ .from("#b2n", { opacity:0, scale:1.6, duration:.6, ease:"back.out(1.6)" }, 3.6)
+ .from("#b2s", { opacity:0, y:20, duration:.5, ease }, 4.1)
+ .to("#b2n", { opacity:.15, scale:.9, duration:.5, ease }, 5.4)
+ .to("#b2", { opacity:0, duration:.4 }, 6.0)
+ .set("#b2", { opacity:0 }, 6.4);
+
+ tl.from("#b3 .beatlbl", { opacity:0, y:30, duration:.6, ease }, 6.35)
+ .from("#b3 .chip", { opacity:0, y:26, duration:.5, stagger:.08, ease }, 6.6)
+ .to("#b3", { opacity:0, duration:.4 }, 8.9)
+ .set("#b3", { opacity:0 }, 9.3);
+
+ // card intro (opacity+y) then a slow parallax drift that STARTS after the intro (no property overlap)
+ tl.from("#b4 .beatlbl", { opacity:0, y:24, duration:.5, ease }, 9.25)
+ .from("#b4c1", { opacity:0, y:60, duration:.7, ease }, 9.4)
+ .to("#b4c1", { y:-46, duration:2.6, ease:"none" }, 10.2)
+ .to("#b4", { opacity:0, duration:.4 }, 12.7)
+ .set("#b4", { opacity:0 }, 13.1);
+
+ tl.from("#b5 .beatlbl", { opacity:0, y:24, duration:.5, ease }, 13.15)
+ .from("#b5c", { opacity:0, y:50, duration:.8, ease }, 13.3)
+ .to("#b5c", { y:-28, duration:1.9, ease:"none" }, 14.2)
+ .to("#b5", { opacity:0, duration:.4 }, 15.7)
+ .set("#b5", { opacity:0 }, 16.1);
+
+ tl.from("#b6 .beatlbl", { opacity:0, y:24, duration:.5, ease }, 16.15)
+ .from("#b6c", { opacity:0, y:60, duration:.8, ease }, 16.3)
+ .to("#b6c", { y:-34, duration:2.6, ease:"none" }, 17.1)
+ .to("#b6", { opacity:0, duration:.4 }, 19.7)
+ .set("#b6", { opacity:0 }, 20.1);
+
+ tl.from("#b7t", { opacity:0, y:40, duration:.8, ease }, 20.15)
+ .from("#b7s", { opacity:0, y:24, duration:.7, ease }, 20.6)
+ .from("#b7w", { opacity:0, duration:.8, ease }, 21.2);
+
+ ["c1","c2","c3","c4","c5","c6","c7"].forEach(id => {
+ const el = document.getElementById(id);
+ const s = parseFloat(el.dataset.start), d = parseFloat(el.dataset.duration);
+ tl.from("#"+id, { opacity:0, y:16, duration:.35, ease }, s)
+ .to("#"+id, { opacity:0, duration:.3 }, s + d - 0.3)
+ .set("#"+id, { opacity:0 }, s + d);
+ });
+
+ window.__timelines["main"] = tl;
+ </script>
+ </body>
+</html>
← 7c9bd03 auto-data-snapshot: 2026-08-12T14:30:58 (20 data files) — pa
·
back to Marketing Command Center
·
MCC LinkedIn Network Feed: mark EXPERIMENTAL — scrape non-fu 1749ce4 →