← back to Marketing Command Center
MCC promo v2: hook-first, tighter (15.9s), new hook line; 9:16 + 4:5 + 1:1 aspects
dee3f1f998e21ed50624ed8f80d3518d6fa4c493 · 2026-08-12 14:57:25 -0700 · Steve
Files touched
M videos/mcc-streamline-promo/SCRIPT.mdM videos/mcc-streamline-promo/index.html
Diff
commit dee3f1f998e21ed50624ed8f80d3518d6fa4c493
Author: Steve <steve@designerwallcoverings.com>
Date: Wed Aug 12 14:57:25 2026 -0700
MCC promo v2: hook-first, tighter (15.9s), new hook line; 9:16 + 4:5 + 1:1 aspects
---
videos/mcc-streamline-promo/SCRIPT.md | 14 +--
videos/mcc-streamline-promo/index.html | 152 +++++++++++++++------------------
2 files changed, 74 insertions(+), 92 deletions(-)
diff --git a/videos/mcc-streamline-promo/SCRIPT.md b/videos/mcc-streamline-promo/SCRIPT.md
index 026e726..b1ff79d 100644
--- a/videos/mcc-streamline-promo/SCRIPT.md
+++ b/videos/mcc-streamline-promo/SCRIPT.md
@@ -1,8 +1,8 @@
-# Narration (Steve, cloned voice)
+# Narration v2 — tighter, hook-first (Steve, cloned voice)
-Designer Wallcoverings' marketing command center just got a serious cleanup.
-Twenty-eight tabs — gone. Now, six calendar-led groups.
-Compose merges your suggested and manual posts into one.
-The calendar unifies your whole timeline.
-And eight preview tools tuck behind a single Insights tab.
-Everything you need — a click or two away.
+Twenty-eight tabs. That's what running marketing used to feel like.
+Now — six calendar-led groups.
+Compose puts your suggested and manual posts in one place.
+One calendar for your whole timeline.
+And eight tools tuck behind a single Insights tab.
+The command center — streamlined.
diff --git a/videos/mcc-streamline-promo/index.html b/videos/mcc-streamline-promo/index.html
index 6ddd3fe..4567ecf 100644
--- a/videos/mcc-streamline-promo/index.html
+++ b/videos/mcc-streamline-promo/index.html
@@ -25,7 +25,7 @@
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; }
+ font-size:28px; 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; }
@@ -33,7 +33,7 @@
.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;
+ .card { width:900px; 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; }
@@ -61,33 +61,26 @@
</style>
</head>
<body>
- <div id="root" data-composition-id="main" data-start="0" data-duration="23.6" data-width="1080" data-height="1920">
+ <div id="root" data-composition-id="main" data-start="0" data-duration="15.9" 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>
+ <!-- BEAT 1 — HOOK: 28 (front-loaded) -->
+ <div id="b1" class="clip stage" data-start="0" data-duration="3.2" data-track-index="1">
+ <div class="kicker" id="b1k">The old way</div>
+ <div class="huge" id="b1n" style="font-size:470px">28</div>
+ <div class="sub" id="b1s" style="font-size:54px;color:var(--accent)">tabs — too many</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">
+ <!-- BEAT 2 — 6 groups + chips -->
+ <div id="b2" class="clip stage" data-start="3.0" data-duration="2.3" data-track-index="3">
<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="groups" id="b2g">
<div class="chip">Calendar</div>
<div class="chip">Plan</div>
<div class="chip">Compose</div>
@@ -97,41 +90,39 @@
</div>
</div>
- <!-- BEAT 4 — Compose -->
- <div id="b4" class="clip stage" data-start="9.1" data-duration="4.0" data-track-index="3">
+ <!-- BEAT 3 — Compose -->
+ <div id="b3" class="clip stage" data-start="5.1" data-duration="3.5" data-track-index="1">
<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 class="card" id="b3c" 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">
+ <!-- BEAT 4 — Calendar -->
+ <div id="b4" class="clip stage" data-start="8.4" data-duration="2.3" data-track-index="3">
<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 class="card" id="b4c"><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">
+ <!-- BEAT 5 — Insights -->
+ <div id="b5" class="clip stage" data-start="10.5" data-duration="3.1" data-track-index="1">
<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 class="card" id="b5c"><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>
+ <!-- BEAT 6 — outro -->
+ <div id="b6" class="clip stage" data-start="13.4" data-duration="2.5" data-track-index="3">
+ <div class="kicker" id="b6k">The Command Center</div>
+ <div class="display" id="b6t" style="font-size:150px;margin-top:12px">Streamlined</div>
+ <div id="b6w" style="margin-top:44px;font-family:'Cormorant Garamond',serif;font-weight:600;letter-spacing:.22em;font-size:38px;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 -->
+ <div class="caption clip" id="c1" data-start="0.2" data-duration="2.8" data-track-index="2"><span class="pill"><span class="g">28 tabs</span> was too many</span></div>
+ <div class="caption clip" id="c2" data-start="3.3" data-duration="1.8" data-track-index="2"><span class="pill">Now — <span class="g">6</span> calendar-led groups</span></div>
+ <div class="caption clip" id="c3" data-start="5.4" data-duration="3.0" data-track-index="2"><span class="pill"><span class="g">Compose</span>: Suggested + Manual, one place</span></div>
+ <div class="caption clip" id="c4" data-start="8.8" data-duration="1.7" data-track-index="2"><span class="pill">One <span class="g">Calendar</span>, your whole timeline</span></div>
+ <div class="caption clip" id="c5" data-start="10.9" data-duration="2.5" data-track-index="2"><span class="pill">8 tools → one <span class="g">Insights</span> tab</span></div>
+ <div class="caption clip" id="c6" data-start="13.8" data-duration="1.9" data-track-index="2"><span class="pill">The command center, <span class="g">streamlined</span></span></div>
+
<audio id="narration" src=".media/audio/narration.wav" data-start="0" data-track-index="10"></audio>
</div>
@@ -140,52 +131,43 @@
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 => {
+ tl.from("#b1k", { opacity:0, duration:.4 }, 0.05)
+ .from("#b1n", { opacity:0, scale:1.5, duration:.6, ease:"back.out(1.5)" }, 0.1)
+ .from("#b1s", { opacity:0, y:20, duration:.5, ease }, 0.6)
+ .to("#b1", { opacity:0, duration:.35 }, 2.85)
+ .set("#b1", { opacity:0 }, 3.2);
+
+ tl.from("#b2 .beatlbl", { opacity:0, y:24, duration:.45, ease }, 3.1)
+ .from("#b2 .chip", { opacity:0, y:22, duration:.4, stagger:.05, ease }, 3.3)
+ .to("#b2", { opacity:0, duration:.35 }, 4.95)
+ .set("#b2", { opacity:0 }, 5.3);
+
+ tl.from("#b3 .beatlbl", { opacity:0, y:20, duration:.4, ease }, 5.2)
+ .from("#b3c", { opacity:0, y:50, duration:.6, ease }, 5.35)
+ .to("#b3c", { y:-34, duration:2.3, ease:"none" }, 6.0)
+ .to("#b3", { opacity:0, duration:.35 }, 8.25)
+ .set("#b3", { opacity:0 }, 8.6);
+
+ tl.from("#b4 .beatlbl", { opacity:0, y:20, duration:.4, ease }, 8.5)
+ .from("#b4c", { opacity:0, scale:1.06, duration:.55, ease }, 8.65)
+ .to("#b4", { opacity:0, duration:.35 }, 10.35)
+ .set("#b4", { opacity:0 }, 10.7);
+
+ tl.from("#b5 .beatlbl", { opacity:0, y:20, duration:.4, ease }, 10.6)
+ .from("#b5c", { opacity:0, y:50, duration:.6, ease }, 10.75)
+ .to("#b5c", { y:-30, duration:2.0, ease:"none" }, 11.4)
+ .to("#b5", { opacity:0, duration:.35 }, 13.25)
+ .set("#b5", { opacity:0 }, 13.6);
+
+ tl.from("#b6k", { opacity:0, duration:.4 }, 13.5)
+ .from("#b6t", { opacity:0, y:34, duration:.7, ease }, 13.6)
+ .from("#b6w", { opacity:0, duration:.7, ease }, 14.3);
+
+ ["c1","c2","c3","c4","c5","c6"].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)
+ tl.from("#"+id, { opacity:0, y:14, duration:.3, ease }, s)
+ .to("#"+id, { opacity:0, duration:.25 }, s + d - 0.25)
.set("#"+id, { opacity:0 }, s + d);
});
← 79e1798 MCC LinkedIn Network Feed: paste-URL curation board (the wor
·
back to Marketing Command Center
·
MCC deploy: exclude churning videos/*/renders build artifact 1444bf7 →