← back to Marketing Command Center
videos/mcc-streamline-promo/index.html
191 lines
<!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: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; }
.stage { position:absolute; left:0; right:0; top:0; height:1920px;
display:flex; flex-direction:column; align-items:center; justify-content:center; }
.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; }
/* app-window frame — makes the landscape UI an INTENTIONAL window (title bar +
dots) and zoom-crops it so it reads on a phone, not a letterboxed thumbnail */
.winfr { width:980px; border-radius:20px; overflow:hidden; background:#fff;
border:1px solid var(--line); box-shadow:0 46px 104px -34px rgba(20,17,15,.5);
will-change:transform,opacity; }
.winbar { height:46px; background:linear-gradient(#fbf9f5,#f1ece2); border-bottom:1px solid var(--line);
display:flex; align-items:center; gap:11px; padding:0 20px; }
.winbar .wd { width:14px; height:14px; border-radius:50%; }
.winbar .wd:nth-child(1){ background:#cf8a68; }
.winbar .wd:nth-child(2){ background:var(--gold-soft); }
.winbar .wd:nth-child(3){ background:#9fae93; }
.winbody { width:100%; aspect-ratio:4/3; overflow:hidden; background:#fff; }
.winbody img { width:100%; height:100%; object-fit:cover; object-position:top center; 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="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 — 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 — 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="b2g">
<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 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="winfr" id="b3c"><div class="winbar"><span class="wd"></span><span class="wd"></span><span class="wd"></span></div><div class="winbody"><img src="assets/img/compose-m.png" alt=""></div></div>
</div>
<!-- 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="winfr" id="b4c"><div class="winbar"><span class="wd"></span><span class="wd"></span><span class="wd"></span></div><div class="winbody"><img src="assets/img/calendar.png" alt=""></div></div>
</div>
<!-- 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="winfr" id="b5c"><div class="winbar"><span class="wd"></span><span class="wd"></span><span class="wd"></span></div><div class="winbody"><img src="assets/img/insights.png" alt=""></div></div>
</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="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>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
const ease = "power3.out";
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:14, duration:.3, ease }, s)
.to("#"+id, { opacity:0, duration:.25 }, s + d - 0.25)
.set("#"+id, { opacity:0 }, s + d);
});
window.__timelines["main"] = tl;
</script>
</body>
</html>