← back to Dw Marketing Reels
commercial flip-book: add vendor logo per page + fix intro/Koroseal VO overlap (cover=7) + rerender/redeploy
293b9958bd3a561a9334af5de10c9184256733ce · 2026-08-13 11:28:06 -0700 · Steve Abrams
Files touched
M flipbooks/commercial-collection/index.htmlA public/collections/commercial-collection.htmlM scripts/build-collection-flipbook.mjsM server.js
Diff
commit 293b9958bd3a561a9334af5de10c9184256733ce
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Aug 13 11:28:06 2026 -0700
commercial flip-book: add vendor logo per page + fix intro/Koroseal VO overlap (cover=7) + rerender/redeploy
---
flipbooks/commercial-collection/index.html | 432 ++++++++++++++------------
public/collections/commercial-collection.html | 56 ++++
scripts/build-collection-flipbook.mjs | 5 +
server.js | 1 +
4 files changed, 292 insertions(+), 202 deletions(-)
diff --git a/flipbooks/commercial-collection/index.html b/flipbooks/commercial-collection/index.html
index 3c6e2d4..76cf022 100644
--- a/flipbooks/commercial-collection/index.html
+++ b/flipbooks/commercial-collection/index.html
@@ -29,6 +29,10 @@
.rcap { position:absolute; left:0; right:0; bottom:0; padding:38px 42px; color:#fff; }
.rcap .rpat { font-family:Georgia, serif; font-size:48px; line-height:1.05; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.rcap .rcol { margin-top:8px; font-size:20px; letter-spacing:.2em; text-transform:uppercase; color:#e7d8bd; }
+ .room .rlogo { position:absolute; top:38px; left:42px;
+ background:rgba(255,255,255,.95); border-radius:6px; padding:17px 25px;
+ box-shadow:0 8px 22px rgba(0,0,0,.34); max-width:56%; }
+ .room .rlogo img { display:block; height:46px; width:auto; max-width:100%; object-fit:contain; }
/* RIGHT recto: page-turn stack of pattern swatches */
.leaf { position:absolute; top:97px; left:960px; width:768px; height:886px;
@@ -50,7 +54,7 @@
</style>
</head>
<body>
- <div id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="30.55">
+ <div id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="82.5">
<div class="card" id="cover">
<div class="kicker">Designer Wallcoverings presents</div>
@@ -66,121 +70,145 @@
<div class="room fallback" id="room0">
<img class="rimg" src="assets/room/r0.jpg" alt="Linsey, Beige room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/koroseal.png" alt="Koroseal" /></div>
<div class="rcap"><div class="rpat">Linsey, Beige</div><div class="rcol">Commercial & Contract · Koroseal</div></div>
</div>
<div class="room fallback" id="room1">
<img class="rimg" src="assets/room/r1.jpg" alt="Renzu Pink room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/koroseal.png" alt="Koroseal" /></div>
<div class="rcap"><div class="rpat">Renzu Pink</div><div class="rcol">Commercial & Contract · Koroseal</div></div>
</div>
<div class="room fallback" id="room2">
<img class="rimg" src="assets/room/r2.jpg" alt="Silken One, Gold room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/koroseal.png" alt="Koroseal" /></div>
<div class="rcap"><div class="rpat">Silken One, Gold</div><div class="rcol">Commercial & Contract · Koroseal</div></div>
</div>
<div class="room fallback" id="room3">
<img class="rimg" src="assets/room/r3.jpg" alt="Corragatio Vinyl room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/hollywood.png" alt="Hollywood Wallcoverings" /></div>
<div class="rcap"><div class="rpat">Corragatio Vinyl</div><div class="rcol">Commercial & Contract · Hollywood Wallcoverings</div></div>
</div>
<div class="room fallback" id="room4">
<img class="rimg" src="assets/room/r4.jpg" alt="Olney Type II room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/hollywood.png" alt="Hollywood Wallcoverings" /></div>
<div class="rcap"><div class="rpat">Olney Type II</div><div class="rcol">Commercial & Contract · Hollywood Wallcoverings</div></div>
</div>
<div class="room fallback" id="room5">
<img class="rimg" src="assets/room/r5.jpg" alt="Rustic Glam Vinyl room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/hollywood.png" alt="Hollywood Wallcoverings" /></div>
<div class="rcap"><div class="rpat">Rustic Glam Vinyl</div><div class="rcol">Commercial & Contract · Hollywood Wallcoverings</div></div>
</div>
<div class="room fallback" id="room6">
<img class="rimg" src="assets/room/r6.jpg" alt="Tek-Wall Ridge room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/maharam.png" alt="Maharam" /></div>
<div class="rcap"><div class="rpat">Tek-Wall Ridge</div><div class="rcol">Commercial & Contract · Maharam</div></div>
</div>
<div class="room fallback" id="room7">
<img class="rimg" src="assets/room/r7.jpg" alt="Filigree, Charcoal room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/maharam.png" alt="Maharam" /></div>
<div class="rcap"><div class="rpat">Filigree, Charcoal</div><div class="rcol">Commercial & Contract · Maharam</div></div>
</div>
<div class="room fallback" id="room8">
<img class="rimg" src="assets/room/r8.jpg" alt="Vest, Dock room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/maharam.png" alt="Maharam" /></div>
<div class="rcap"><div class="rpat">Vest, Dock</div><div class="rcol">Commercial & Contract · Maharam</div></div>
</div>
<div class="room fallback" id="room9">
<img class="rimg" src="assets/room/r9.jpg" alt="Firenze, Swell room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/knoll.png" alt="Knoll" /></div>
<div class="rcap"><div class="rpat">Firenze, Swell</div><div class="rcol">Commercial & Contract · Knoll</div></div>
</div>
<div class="room fallback" id="room10">
<img class="rimg" src="assets/room/r10.jpg" alt="Stencil, Ginger room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/knoll.png" alt="Knoll" /></div>
<div class="rcap"><div class="rpat">Stencil, Ginger</div><div class="rcol">Commercial & Contract · Knoll</div></div>
</div>
<div class="room fallback" id="room11">
<img class="rimg" src="assets/room/r11.jpg" alt="Big Floral, Bloom room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/knoll.png" alt="Knoll" /></div>
<div class="rcap"><div class="rpat">Big Floral, Bloom</div><div class="rcol">Commercial & Contract · Knoll</div></div>
</div>
<div class="room fallback" id="room12">
<img class="rimg" src="assets/room/r12.jpg" alt="Xorel, Seafoam room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/carnegie.png" alt="Carnegie" /></div>
<div class="rcap"><div class="rpat">Xorel, Seafoam</div><div class="rcol">Commercial & Contract · Carnegie</div></div>
</div>
<div class="room fallback" id="room13">
<img class="rimg" src="assets/room/r13.jpg" alt="Xorel, Bamboo room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/carnegie.png" alt="Carnegie" /></div>
<div class="rcap"><div class="rpat">Xorel, Bamboo</div><div class="rcol">Commercial & Contract · Carnegie</div></div>
</div>
<div class="room fallback" id="room14">
<img class="rimg" src="assets/room/r14.jpg" alt="Xorel, Prism room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/carnegie.png" alt="Carnegie" /></div>
<div class="rcap"><div class="rpat">Xorel, Prism</div><div class="rcol">Commercial & Contract · Carnegie</div></div>
</div>
<div class="room fallback" id="room15">
<img class="rimg" src="assets/room/r15.jpg" alt="Wannabe, Blue Jay room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/designtex.png" alt="Designtex" /></div>
<div class="rcap"><div class="rpat">Wannabe, Blue Jay</div><div class="rcol">Commercial & Contract · Designtex</div></div>
</div>
<div class="room fallback" id="room16">
<img class="rimg" src="assets/room/r16.jpg" alt="Wannabe, Red room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/designtex.png" alt="Designtex" /></div>
<div class="rcap"><div class="rpat">Wannabe, Red</div><div class="rcol">Commercial & Contract · Designtex</div></div>
</div>
<div class="room fallback" id="room17">
<img class="rimg" src="assets/room/r17.jpg" alt="Grasscloth, Sprig room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/designtex.png" alt="Designtex" /></div>
<div class="rcap"><div class="rpat">Grasscloth, Sprig</div><div class="rcol">Commercial & Contract · Designtex</div></div>
</div>
<div class="room fallback" id="room18">
<img class="rimg" src="assets/room/r18.jpg" alt="Bead 11112 room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/wolfgordon.png" alt="Wolf Gordon" /></div>
<div class="rcap"><div class="rpat">Bead 11112</div><div class="rcol">Commercial & Contract · Wolf Gordon</div></div>
</div>
<div class="room fallback" id="room19">
<img class="rimg" src="assets/room/r19.jpg" alt="Dasma, Gold room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/wolfgordon.png" alt="Wolf Gordon" /></div>
<div class="rcap"><div class="rpat">Dasma, Gold</div><div class="rcol">Commercial & Contract · Wolf Gordon</div></div>
</div>
<div class="room fallback" id="room20">
<img class="rimg" src="assets/room/r20.jpg" alt="Glasgow, Umber room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/wolfgordon.png" alt="Wolf Gordon" /></div>
<div class="rcap"><div class="rpat">Glasgow, Umber</div><div class="rcol">Commercial & Contract · Wolf Gordon</div></div>
</div>
<div class="room fallback" id="room21">
<img class="rimg" src="assets/room/r21.jpg" alt="Finesse, Pearl room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/majilite.png" alt="Majilite" /></div>
<div class="rcap"><div class="rpat">Finesse, Pearl</div><div class="rcol">Commercial & Contract · Majilite</div></div>
</div>
<div class="room fallback" id="room22">
<img class="rimg" src="assets/room/r22.jpg" alt="Cross-Hatch, Gold room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/majilite.png" alt="Majilite" /></div>
<div class="rcap"><div class="rpat">Cross-Hatch, Gold</div><div class="rcol">Commercial & Contract · Majilite</div></div>
</div>
<div class="room fallback" id="room23">
<img class="rimg" src="assets/room/r23.jpg" alt="Radiance, Pearl room" />
<div class="rtint"></div>
+ <div class="rlogo"><img src="assets/logos/majilite.png" alt="Majilite" /></div>
<div class="rcap"><div class="rpat">Radiance, Pearl</div><div class="rcol">Commercial & Contract · Majilite</div></div>
</div>
</div>
@@ -290,17 +318,17 @@
<div class="url">designerwallcoverings.com</div>
</div>
- <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="30.55" data-track-index="20" data-volume="0.18"></audio>
- <audio id="vo0" src="assets/audio/vo1.wav" data-start="2.4" data-track-index="21" data-volume="1"></audio>
- <audio id="vo1" src="assets/audio/vo2.wav" data-start="2.9" data-track-index="22" data-volume="1"></audio>
- <audio id="vo2" src="assets/audio/vo3.wav" data-start="4.8" data-track-index="23" data-volume="1"></audio>
- <audio id="vo3" src="assets/audio/vo4.wav" data-start="7.65" data-track-index="24" data-volume="1"></audio>
- <audio id="vo4" src="assets/audio/vo5.wav" data-start="10.5" data-track-index="25" data-volume="1"></audio>
- <audio id="vo5" src="assets/audio/vo6.wav" data-start="13.35" data-track-index="26" data-volume="1"></audio>
- <audio id="vo6" src="assets/audio/vo7.wav" data-start="16.2" data-track-index="27" data-volume="1"></audio>
- <audio id="vo7" src="assets/audio/vo8.wav" data-start="19.05" data-track-index="28" data-volume="1"></audio>
- <audio id="vo8" src="assets/audio/vo9.wav" data-start="21.9" data-track-index="29" data-volume="1"></audio>
- <audio id="vo9" src="assets/audio/vo10.wav" data-start="27.7" data-track-index="30" data-volume="1"></audio>
+ <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="82.5" data-track-index="20" data-volume="0.18"></audio>
+ <audio id="vo0" src="assets/audio/vo1.wav" data-start="0.3" data-track-index="21" data-volume="1"></audio>
+ <audio id="vo1" src="assets/audio/vo2.wav" data-start="7.7" data-track-index="22" data-volume="1"></audio>
+ <audio id="vo2" src="assets/audio/vo3.wav" data-start="13.7" data-track-index="23" data-volume="1"></audio>
+ <audio id="vo3" src="assets/audio/vo4.wav" data-start="22.7" data-track-index="24" data-volume="1"></audio>
+ <audio id="vo4" src="assets/audio/vo5.wav" data-start="31.7" data-track-index="25" data-volume="1"></audio>
+ <audio id="vo5" src="assets/audio/vo6.wav" data-start="40.7" data-track-index="26" data-volume="1"></audio>
+ <audio id="vo6" src="assets/audio/vo7.wav" data-start="49.7" data-track-index="27" data-volume="1"></audio>
+ <audio id="vo7" src="assets/audio/vo8.wav" data-start="58.7" data-track-index="28" data-volume="1"></audio>
+ <audio id="vo8" src="assets/audio/vo9.wav" data-start="67.7" data-track-index="29" data-volume="1"></audio>
+ <audio id="vo9" src="assets/audio/vo10.wav" data-start="79.65" data-track-index="30" data-volume="1"></audio>
<script>
window.__timelines = window.__timelines || {};
@@ -362,203 +390,203 @@
tl.to("#cover .kicker", { opacity:1, duration:0.5 }, 0.2);
tl.to("#cover .big", { opacity:1, y:0, duration:0.8, ease:"power3.out" }, 0.4);
tl.to("#cover .rule,#cover .sub", { opacity:1, duration:0.5 }, 1.0);
- tl.to("#cover", { opacity:0, duration:0.5, ease:"power1.in" }, 1.70);
- tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, 1.70);
+ tl.to("#cover", { opacity:0, duration:0.5, ease:"power1.in" }, 6.50);
+ tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, 6.50);
// page turns + room crossfades
- tl.to("#leaf0", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 2.9);
- tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 2.9);
- tl.to("#leaf0 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 3.2);
- tl.set("#leaf0", { zIndex: 1000 }, 3.2);
- tl.set("#leaf0", { opacity: 0 }, 3.500);
- tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 3.2);
- tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 3.2);
- tl.to("#leaf1", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 3.85);
- tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 3.85);
- tl.to("#leaf1 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 4.15);
- tl.set("#leaf1", { zIndex: 1001 }, 4.15);
- tl.set("#leaf1", { opacity: 0 }, 4.450);
- tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 4.15);
- tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 4.15);
- tl.to("#leaf2", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 4.8);
- tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 4.8);
- tl.to("#leaf2 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 5.1);
- tl.set("#leaf2", { zIndex: 1002 }, 5.1);
- tl.set("#leaf2", { opacity: 0 }, 5.400);
- tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 5.1);
- tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 5.1);
- tl.to("#leaf3", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 5.75);
- tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 5.75);
- tl.to("#leaf3 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 6.05);
- tl.set("#leaf3", { zIndex: 1003 }, 6.05);
- tl.set("#leaf3", { opacity: 0 }, 6.350);
- tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 6.05);
- tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 6.05);
- tl.to("#leaf4", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 6.7);
- tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 6.7);
- tl.to("#leaf4 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 7);
- tl.set("#leaf4", { zIndex: 1004 }, 7);
- tl.set("#leaf4", { opacity: 0 }, 7.300);
- tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 7);
- tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 7);
- tl.to("#leaf5", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 7.65);
- tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 7.65);
- tl.to("#leaf5 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 7.95);
- tl.set("#leaf5", { zIndex: 1005 }, 7.95);
- tl.set("#leaf5", { opacity: 0 }, 8.250);
- tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 7.95);
- tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 7.95);
- tl.to("#leaf6", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 8.6);
- tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 8.6);
- tl.to("#leaf6 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 8.9);
- tl.set("#leaf6", { zIndex: 1006 }, 8.9);
- tl.set("#leaf6", { opacity: 0 }, 9.200);
- tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 8.9);
- tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 8.9);
- tl.to("#leaf7", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 9.55);
- tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 9.55);
- tl.to("#leaf7 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 9.85);
- tl.set("#leaf7", { zIndex: 1007 }, 9.85);
- tl.set("#leaf7", { opacity: 0 }, 10.150);
- tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 9.85);
- tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 9.85);
- tl.to("#leaf8", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 10.5);
- tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 10.5);
- tl.to("#leaf8 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 10.8);
- tl.set("#leaf8", { zIndex: 1008 }, 10.8);
- tl.set("#leaf8", { opacity: 0 }, 11.100);
- tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 10.8);
- tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 10.8);
- tl.to("#leaf9", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 11.45);
- tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 11.45);
- tl.to("#leaf9 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 11.75);
- tl.set("#leaf9", { zIndex: 1009 }, 11.75);
- tl.set("#leaf9", { opacity: 0 }, 12.050);
- tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 11.75);
- tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 11.75);
- tl.to("#leaf10", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 12.4);
- tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 12.4);
- tl.to("#leaf10 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 12.7);
- tl.set("#leaf10", { zIndex: 1010 }, 12.7);
- tl.set("#leaf10", { opacity: 0 }, 13.000);
- tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 12.7);
- tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 12.7);
- tl.to("#leaf11", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 13.35);
- tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 13.35);
- tl.to("#leaf11 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 13.65);
- tl.set("#leaf11", { zIndex: 1011 }, 13.65);
- tl.set("#leaf11", { opacity: 0 }, 13.950);
- tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 13.65);
- tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 13.65);
- tl.to("#leaf12", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 14.3);
- tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 14.3);
- tl.to("#leaf12 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 14.6);
- tl.set("#leaf12", { zIndex: 1012 }, 14.6);
- tl.set("#leaf12", { opacity: 0 }, 14.900);
- tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14.6);
- tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14.6);
- tl.to("#leaf13", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 15.25);
- tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 15.25);
- tl.to("#leaf13 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 15.55);
- tl.set("#leaf13", { zIndex: 1013 }, 15.55);
- tl.set("#leaf13", { opacity: 0 }, 15.850);
- tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 15.55);
- tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 15.55);
- tl.to("#leaf14", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 16.2);
- tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 16.2);
- tl.to("#leaf14 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 16.5);
- tl.set("#leaf14", { zIndex: 1014 }, 16.5);
- tl.set("#leaf14", { opacity: 0 }, 16.800);
- tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 16.5);
- tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 16.5);
- tl.to("#leaf15", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 17.15);
- tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 17.15);
- tl.to("#leaf15 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 17.45);
- tl.set("#leaf15", { zIndex: 1015 }, 17.45);
- tl.set("#leaf15", { opacity: 0 }, 17.750);
- tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17.45);
- tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17.45);
- tl.to("#leaf16", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 18.1);
- tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 18.1);
- tl.to("#leaf16 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 18.4);
- tl.set("#leaf16", { zIndex: 1016 }, 18.4);
- tl.set("#leaf16", { opacity: 0 }, 18.700);
- tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 18.4);
- tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 18.4);
- tl.to("#leaf17", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 19.05);
- tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 19.05);
- tl.to("#leaf17 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 19.35);
- tl.set("#leaf17", { zIndex: 1017 }, 19.35);
- tl.set("#leaf17", { opacity: 0 }, 19.650);
- tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 19.35);
- tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 19.35);
- tl.to("#leaf18", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 20);
- tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 20);
- tl.to("#leaf18 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 20.3);
- tl.set("#leaf18", { zIndex: 1018 }, 20.3);
- tl.set("#leaf18", { opacity: 0 }, 20.600);
- tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20.3);
- tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20.3);
- tl.to("#leaf19", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 20.95);
- tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 20.95);
- tl.to("#leaf19 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 21.25);
- tl.set("#leaf19", { zIndex: 1019 }, 21.25);
- tl.set("#leaf19", { opacity: 0 }, 21.550);
- tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 21.25);
- tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 21.25);
- tl.to("#leaf20", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 21.9);
- tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 21.9);
- tl.to("#leaf20 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 22.2);
- tl.set("#leaf20", { zIndex: 1020 }, 22.2);
- tl.set("#leaf20", { opacity: 0 }, 22.500);
- tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 22.2);
- tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 22.2);
- tl.to("#leaf21", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 22.85);
- tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 22.85);
- tl.to("#leaf21 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 23.15);
- tl.set("#leaf21", { zIndex: 1021 }, 23.15);
- tl.set("#leaf21", { opacity: 0 }, 23.450);
- tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23.15);
- tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23.15);
- tl.to("#leaf22", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 23.8);
- tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 23.8);
- tl.to("#leaf22 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 24.1);
- tl.set("#leaf22", { zIndex: 1022 }, 24.1);
- tl.set("#leaf22", { opacity: 0 }, 24.400);
- tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 24.1);
- tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 24.1);
- tl.to("#leaf23 .art", { scale: 1.05, duration: 3.20, ease:"power1.out" }, 24.75);
- tl.to("#room23 .rimg", { scale: 1.06, duration: 3.20, ease:"power1.out" }, 24.75);
+ tl.to("#leaf0", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 7.7);
+ tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 7.7);
+ tl.to("#leaf0 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 8);
+ tl.set("#leaf0", { zIndex: 1000 }, 8);
+ tl.set("#leaf0", { opacity: 0 }, 8.300);
+ tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 8);
+ tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 8);
+ tl.to("#leaf1", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 10.7);
+ tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 10.7);
+ tl.to("#leaf1 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 11);
+ tl.set("#leaf1", { zIndex: 1001 }, 11);
+ tl.set("#leaf1", { opacity: 0 }, 11.300);
+ tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 11);
+ tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 11);
+ tl.to("#leaf2", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 13.7);
+ tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 13.7);
+ tl.to("#leaf2 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 14);
+ tl.set("#leaf2", { zIndex: 1002 }, 14);
+ tl.set("#leaf2", { opacity: 0 }, 14.300);
+ tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14);
+ tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14);
+ tl.to("#leaf3", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 16.7);
+ tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 16.7);
+ tl.to("#leaf3 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 17);
+ tl.set("#leaf3", { zIndex: 1003 }, 17);
+ tl.set("#leaf3", { opacity: 0 }, 17.300);
+ tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17);
+ tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17);
+ tl.to("#leaf4", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 19.7);
+ tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 19.7);
+ tl.to("#leaf4 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 20);
+ tl.set("#leaf4", { zIndex: 1004 }, 20);
+ tl.set("#leaf4", { opacity: 0 }, 20.300);
+ tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20);
+ tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20);
+ tl.to("#leaf5", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 22.7);
+ tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 22.7);
+ tl.to("#leaf5 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 23);
+ tl.set("#leaf5", { zIndex: 1005 }, 23);
+ tl.set("#leaf5", { opacity: 0 }, 23.300);
+ tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23);
+ tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23);
+ tl.to("#leaf6", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 25.7);
+ tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 25.7);
+ tl.to("#leaf6 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 26);
+ tl.set("#leaf6", { zIndex: 1006 }, 26);
+ tl.set("#leaf6", { opacity: 0 }, 26.300);
+ tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 26);
+ tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 26);
+ tl.to("#leaf7", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 28.7);
+ tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 28.7);
+ tl.to("#leaf7 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 29);
+ tl.set("#leaf7", { zIndex: 1007 }, 29);
+ tl.set("#leaf7", { opacity: 0 }, 29.300);
+ tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 29);
+ tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 29);
+ tl.to("#leaf8", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 31.7);
+ tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 31.7);
+ tl.to("#leaf8 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 32);
+ tl.set("#leaf8", { zIndex: 1008 }, 32);
+ tl.set("#leaf8", { opacity: 0 }, 32.300);
+ tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 32);
+ tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 32);
+ tl.to("#leaf9", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 34.7);
+ tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 34.7);
+ tl.to("#leaf9 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 35);
+ tl.set("#leaf9", { zIndex: 1009 }, 35);
+ tl.set("#leaf9", { opacity: 0 }, 35.300);
+ tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 35);
+ tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 35);
+ tl.to("#leaf10", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 37.7);
+ tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 37.7);
+ tl.to("#leaf10 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 38);
+ tl.set("#leaf10", { zIndex: 1010 }, 38);
+ tl.set("#leaf10", { opacity: 0 }, 38.300);
+ tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 38);
+ tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 38);
+ tl.to("#leaf11", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 40.7);
+ tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 40.7);
+ tl.to("#leaf11 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 41);
+ tl.set("#leaf11", { zIndex: 1011 }, 41);
+ tl.set("#leaf11", { opacity: 0 }, 41.300);
+ tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 41);
+ tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 41);
+ tl.to("#leaf12", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 43.7);
+ tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 43.7);
+ tl.to("#leaf12 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 44);
+ tl.set("#leaf12", { zIndex: 1012 }, 44);
+ tl.set("#leaf12", { opacity: 0 }, 44.300);
+ tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 44);
+ tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 44);
+ tl.to("#leaf13", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 46.7);
+ tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 46.7);
+ tl.to("#leaf13 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 47);
+ tl.set("#leaf13", { zIndex: 1013 }, 47);
+ tl.set("#leaf13", { opacity: 0 }, 47.300);
+ tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 47);
+ tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 47);
+ tl.to("#leaf14", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 49.7);
+ tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 49.7);
+ tl.to("#leaf14 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 50);
+ tl.set("#leaf14", { zIndex: 1014 }, 50);
+ tl.set("#leaf14", { opacity: 0 }, 50.300);
+ tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 50);
+ tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 50);
+ tl.to("#leaf15", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 52.7);
+ tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 52.7);
+ tl.to("#leaf15 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 53);
+ tl.set("#leaf15", { zIndex: 1015 }, 53);
+ tl.set("#leaf15", { opacity: 0 }, 53.300);
+ tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 53);
+ tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 53);
+ tl.to("#leaf16", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 55.7);
+ tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 55.7);
+ tl.to("#leaf16 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 56);
+ tl.set("#leaf16", { zIndex: 1016 }, 56);
+ tl.set("#leaf16", { opacity: 0 }, 56.300);
+ tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 56);
+ tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 56);
+ tl.to("#leaf17", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 58.7);
+ tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 58.7);
+ tl.to("#leaf17 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 59);
+ tl.set("#leaf17", { zIndex: 1017 }, 59);
+ tl.set("#leaf17", { opacity: 0 }, 59.300);
+ tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 59);
+ tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 59);
+ tl.to("#leaf18", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 61.7);
+ tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 61.7);
+ tl.to("#leaf18 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 62);
+ tl.set("#leaf18", { zIndex: 1018 }, 62);
+ tl.set("#leaf18", { opacity: 0 }, 62.300);
+ tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 62);
+ tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 62);
+ tl.to("#leaf19", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 64.7);
+ tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 64.7);
+ tl.to("#leaf19 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 65);
+ tl.set("#leaf19", { zIndex: 1019 }, 65);
+ tl.set("#leaf19", { opacity: 0 }, 65.300);
+ tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 65);
+ tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 65);
+ tl.to("#leaf20", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 67.7);
+ tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 67.7);
+ tl.to("#leaf20 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 68);
+ tl.set("#leaf20", { zIndex: 1020 }, 68);
+ tl.set("#leaf20", { opacity: 0 }, 68.300);
+ tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 68);
+ tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 68);
+ tl.to("#leaf21", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 70.7);
+ tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 70.7);
+ tl.to("#leaf21 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 71);
+ tl.set("#leaf21", { zIndex: 1021 }, 71);
+ tl.set("#leaf21", { opacity: 0 }, 71.300);
+ tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 71);
+ tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 71);
+ tl.to("#leaf22", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 73.7);
+ tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 73.7);
+ tl.to("#leaf22 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 74);
+ tl.set("#leaf22", { zIndex: 1022 }, 74);
+ tl.set("#leaf22", { opacity: 0 }, 74.300);
+ tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 74);
+ tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 74);
+ tl.to("#leaf23 .art", { scale: 1.05, duration: 3.20, ease:"power1.out" }, 76.7);
+ tl.to("#room23 .rimg", { scale: 1.06, duration: 3.20, ease:"power1.out" }, 76.7);
// outro
- tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 27.55);
- tl.to("#outro", { opacity:1, duration:0.5 }, 27.75);
- tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 27.95);
- tl.to("#outro .url", { opacity:1, duration:0.5 }, 28.45);
+ tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 79.50);
+ tl.to("#outro", { opacity:1, duration:0.5 }, 79.70);
+ tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 79.90);
+ tl.to("#outro .url", { opacity:1, duration:0.5 }, 80.40);
gsap.set("#bgm", { volume: 0.18 });
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 2.10);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 5.00);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 2.60);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 5.50);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 4.50);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 7.40);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 7.35);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 10.25);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 10.20);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 13.10);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 13.05);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 15.95);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 15.90);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 18.80);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 18.75);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 21.65);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 21.60);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 24.50);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 27.40);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 30.30);
- tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 29.45);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 0.00);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 2.90);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 7.40);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 10.30);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 13.40);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 16.30);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 22.40);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 25.30);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 31.40);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 34.30);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 40.40);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 43.30);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 49.40);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 52.30);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 58.40);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 61.30);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 67.40);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 70.30);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 79.35);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 82.25);
+ tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 81.40);
window.__timelines["flipbook"] = tl;
</script>
diff --git a/public/collections/commercial-collection.html b/public/collections/commercial-collection.html
new file mode 100644
index 0000000..2182732
--- /dev/null
+++ b/public/collections/commercial-collection.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Commercial & Contract — Designer Wallcoverings</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
+<style>
+ :root{ --ink:#111; --body:#444; --canvas:#fff; --gold:#b08212; --line:#e7e2d8; }
+ *{ box-sizing:border-box; margin:0; padding:0; }
+ body{ font-family:'Lora',Georgia,serif; color:var(--body); background:var(--canvas); -webkit-font-smoothing:antialiased; }
+ .banner{ position:relative; height:50vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; overflow:hidden; }
+ .banner .bg{ position:absolute; inset:0; background:url('/public/collections/commercial-collection-banner.jpg') center/cover; transform:scale(1.03); }
+ .banner .scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,16,12,.42),rgba(20,16,12,.62)); }
+ .banner .inner{ position:relative; padding:0 24px; }
+ .banner .kicker{ text-transform:uppercase; letter-spacing:5px; font-size:13px; color:#e7d8bd; margin-bottom:16px; }
+ .banner h1{ font-weight:400; font-size:clamp(34px,6vw,64px); line-height:1.08; text-shadow:0 2px 22px rgba(0,0,0,.5); }
+ .banner .sub{ margin-top:14px; font-size:clamp(15px,2.2vw,19px); font-style:italic; color:#f3ece0; }
+ .banner .rule{ width:52px; height:1px; background:var(--gold); margin:20px auto 0; }
+ .wrap{ max-width:1100px; margin:0 auto; padding:44px 24px 8px; }
+ .section-label{ text-transform:uppercase; letter-spacing:3px; font-size:12px; color:var(--gold); margin:0 0 18px; padding-bottom:10px; border-bottom:1px solid var(--line); text-align:center; }
+ .film video{ width:100%; border-radius:8px; background:#14110e; display:block; box-shadow:0 10px 40px rgba(0,0,0,.18); }
+ .film .note{ text-align:center; margin-top:14px; font-size:14px; font-style:italic; color:var(--body); }
+ .film .note b{ color:var(--ink); font-style:normal; }
+ .cta{ text-align:center; padding:34px 24px 8px; }
+ .cta a{ display:inline-block; text-transform:uppercase; letter-spacing:2px; font-size:13px; color:#fff; background:var(--ink); padding:14px 30px; border-radius:2px; text-decoration:none; }
+ .cta a:hover{ background:var(--gold); }
+ footer{ text-align:center; padding:52px 24px 72px; border-top:1px solid var(--line); margin-top:44px; }
+ footer .mark{ text-transform:uppercase; letter-spacing:5px; color:var(--ink); font-size:15px; }
+ footer a{ color:var(--gold); text-decoration:none; letter-spacing:1px; font-size:14px; display:inline-block; margin-top:10px; }
+ .player{ position:relative; }
+ .vchip{ position:absolute; top:12px; right:12px; display:flex; gap:8px; z-index:5; }
+ .vchip button{ font:600 13px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; letter-spacing:.02em; color:#fff; background:rgba(20,20,20,.72); border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:7px 12px; cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
+ .vchip button:hover{ background:rgba(20,20,20,.92); }
+</style></head><body>
+ <header class="banner"><div class="bg"></div><div class="scrim"></div>
+ <div class="inner"><div class="kicker">Designer Wallcoverings</div><h1>Commercial & Contract</h1>
+ <div class="sub">The Commercial Edit — eight contract houses</div><div class="rule"></div></div></header>
+ <div class="wrap"><div class="section-label">The Flip Book · narrated</div>
+ <div class="film"><div class="player">
+ <video id="fbvid" controls playsinline preload="metadata" poster="/public/collections/commercial-collection-poster.jpg">
+ <source src="/reels/commercial-collection-flipbook.mp4?v=2" type="video/mp4"></video>
+ <div class="vchip">
+ <button type="button" id="fbspeed" title="Playback speed" aria-label="Adjust playback speed">⏩ 1×</button>
+ <button type="button" id="fbsound" title="Sound on/off" aria-label="Toggle sound">🔊</button>
+ </div></div>
+ <div class="note">🔊 <b>Sound on</b> — adjust <b>speed</b> & <b>sound</b> with the controls on the video. Narrated in Steve Abrams' voice.</div></div></div>
+ <script>(function(){var v=document.getElementById('fbvid');if(!v)return;
+ var sp=document.getElementById('fbspeed'),sd=document.getElementById('fbsound');
+ var rates=[1,1.25,1.5,0.5,0.75],ri=0;
+ sp.addEventListener('click',function(){ri=(ri+1)%rates.length;v.playbackRate=rates[ri];sp.textContent='⏩ '+rates[ri]+'×';});
+ function paint(){sd.textContent=v.muted||v.volume===0?'🔇':'🔊';}
+ sd.addEventListener('click',function(){v.muted=!v.muted;if(!v.muted&&v.volume===0)v.volume=1;paint();});
+ v.addEventListener('volumechange',paint);paint();
+ })();</script>
+ <div class="cta"><a href="https://www.designerwallcoverings.com/pages/commercial-wallcoverings">Shop the collection →</a></div>
+ <footer><div class="mark">Designer Wallcoverings</div><a href="https://designerwallcoverings.com">designerwallcoverings.com →</a></footer>
+</body></html>
\ No newline at end of file
diff --git a/scripts/build-collection-flipbook.mjs b/scripts/build-collection-flipbook.mjs
index 72d1dd4..4da10cc 100644
--- a/scripts/build-collection-flipbook.mjs
+++ b/scripts/build-collection-flipbook.mjs
@@ -139,6 +139,7 @@ const rooms = products.map((p, i) => `
<div class="room${p._fallback ? ' fallback' : ''}" id="room${i}">
<img class="rimg" src="${p._room}" alt="${esc(p._name)} room" />
<div class="rtint"></div>
+ ${p.logo ? `<div class="rlogo"><img src="${esc(p.logo)}" alt="${esc(p.chapter || '')}" /></div>` : ''}
<div class="rcap"><div class="rpat">${esc(p._name)}</div><div class="rcol">${esc(title)} · ${esc(p.chapter || '')}</div></div>
</div>`).join('');
@@ -218,6 +219,10 @@ const html = `<!doctype html>
.rcap { position:absolute; left:0; right:0; bottom:0; padding:${Math.round(pageW*0.05)}px ${Math.round(pageW*0.055)}px; color:#fff; }
.rcap .rpat { font-family:Georgia, serif; font-size:${Math.round(pageW*0.062)}px; line-height:1.05; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.rcap .rcol { margin-top:8px; font-size:${Math.round(pageW*0.026)}px; letter-spacing:.2em; text-transform:uppercase; color:#e7d8bd; }
+ .room .rlogo { position:absolute; top:${Math.round(pageW*0.05)}px; left:${Math.round(pageW*0.055)}px;
+ background:rgba(255,255,255,.95); border-radius:6px; padding:${Math.round(pageW*0.022)}px ${Math.round(pageW*0.032)}px;
+ box-shadow:0 8px 22px rgba(0,0,0,.34); max-width:56%; }
+ .room .rlogo img { display:block; height:${Math.round(pageH*0.052)}px; width:auto; max-width:100%; object-fit:contain; }
/* RIGHT recto: page-turn stack of pattern swatches */
.leaf { position:absolute; top:${bookTop}px; left:${spineX}px; width:${pageW}px; height:${pageH}px;
diff --git a/server.js b/server.js
index c860a52..c51deb0 100644
--- a/server.js
+++ b/server.js
@@ -129,6 +129,7 @@ const server = http.createServer(async (req, res) => {
if (p === '/privacy') return await serveFile(join(ROOT, 'public', 'privacy.html'), req, res);
if (p === '/terms') return await serveFile(join(ROOT, 'public', 'terms.html'), req, res);
if (p === '/showcase') return await serveFile(join(ROOT, 'public', 'showcase.html'), req, res);
+ if (p === '/collections/commercial-collection') return await serveFile(join(ROOT, 'public', 'collections', 'commercial-collection.html'), req, res);
if (p === '/collections/glitter-walls') return await serveFile(join(ROOT, 'public', 'collections', 'glitter-walls.html'), req, res);
if (p === '/collections/maya-romanoff') return await serveFile(join(ROOT, 'public', 'collections', 'maya-romanoff.html'), req, res);
if (p === '/collections/majilite-metallics') return await serveFile(join(ROOT, 'public', 'collections', 'majilite-metallics.html'), req, res);
← b043fd1 auto-data-snapshot: 2026-08-13T11:25:20 (11 data files) — da
·
back to Dw Marketing Reels
·
commercial flip-book: 2s/flip + narration synced over each p 854502c →