← back to Dw Marketing Reels
commercial flip-book: remove per-page logos + 1.3s/flip + gap-free narration; rerender/redeploy (?v=4)
94e00f50d2ce866b2fe9a199a44551f949243b9a · 2026-08-13 11:49:40 -0700 · Steve Abrams
Files touched
M data/commercial-collection.jsonM flipbooks/commercial-collection/audio.jsonM flipbooks/commercial-collection/index.htmlM public/collections/commercial-collection.html
Diff
commit 94e00f50d2ce866b2fe9a199a44551f949243b9a
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Aug 13 11:49:40 2026 -0700
commercial flip-book: remove per-page logos + 1.3s/flip + gap-free narration; rerender/redeploy (?v=4)
---
data/commercial-collection.json | 72 ++---
flipbooks/commercial-collection/audio.json | 57 +++-
flipbooks/commercial-collection/index.html | 428 +++++++++++++-------------
public/collections/commercial-collection.html | 2 +-
4 files changed, 284 insertions(+), 275 deletions(-)
diff --git a/data/commercial-collection.json b/data/commercial-collection.json
index 80b6835..728c46b 100644
--- a/data/commercial-collection.json
+++ b/data/commercial-collection.json
@@ -3,168 +3,144 @@
"title": "Linsey, Beige",
"chapter": "Koroseal",
"url": "https://www.designerwallcoverings.com/products/dwk-30492-koroseal-koroseal-type-2-vinyl-se21-19-linsey-pvc-free-type-ii-oatmeal",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/linsey_jute_se21_19.jpg",
- "logo": "assets/logos/koroseal.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/linsey_jute_se21_19.jpg"
},
{
"title": "Renzu Pink",
"chapter": "Koroseal",
"url": "https://www.designerwallcoverings.com/products/dwk-32384-koroseal-republic-of-ii-by-iv-0204d232-renzu-pink",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Renzu_Pink_0204D232__REPUBLIC_OF_II_BY_IV_FOR_KOROSEAL.jpg",
- "logo": "assets/logos/koroseal.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Renzu_Pink_0204D232__REPUBLIC_OF_II_BY_IV_FOR_KOROSEAL.jpg"
},
{
"title": "Silken One, Gold",
"chapter": "Koroseal",
"url": "https://www.designerwallcoverings.com/products/dwk-31568-koroseal-roger-thomas-s522-35-silken-one-grand",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/SILKEN_ONE-GRANDIOSE_S522-35_e44d551f-dcb5-4f08-b64d-2c5456b598a2.jpg",
- "logo": "assets/logos/koroseal.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/SILKEN_ONE-GRANDIOSE_S522-35_e44d551f-dcb5-4f08-b64d-2c5456b598a2.jpg"
},
{
"title": "Corragatio Vinyl",
"chapter": "Hollywood Wallcoverings",
"url": "https://www.designerwallcoverings.com/products/corragatio-vinyl-hwc-61096",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/HWC-61096-sample-clean.jpg",
- "logo": "assets/logos/hollywood.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/HWC-61096-sample-clean.jpg"
},
{
"title": "Olney Type II",
"chapter": "Hollywood Wallcoverings",
"url": "https://www.designerwallcoverings.com/products/olney-type-ii-vinyl-wallcovering-xmy-48105",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xmy-48105-sample-olney-type-ii-vinyl-hollywood-wallcoverings.jpg",
- "logo": "assets/logos/hollywood.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/xmy-48105-sample-olney-type-ii-vinyl-hollywood-wallcoverings.jpg"
},
{
"title": "Rustic Glam Vinyl",
"chapter": "Hollywood Wallcoverings",
"url": "https://www.designerwallcoverings.com/products/rustic-glam-vinyl-gpr-76630",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/gpr-76630-sample-rustic-glam-vinyl-hollywood-wallcoverings.jpg",
- "logo": "assets/logos/hollywood.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/gpr-76630-sample-rustic-glam-vinyl-hollywood-wallcoverings.jpg"
},
{
"title": "Tek-Wall Ridge",
"chapter": "Maharam",
"url": "https://www.designerwallcoverings.com/products/tek-wall-ridge-wombat-maharam",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/MH-TEK_WALL_RIDGE-004_0.jpg",
- "logo": "assets/logos/maharam.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/MH-TEK_WALL_RIDGE-004_0.jpg"
},
{
"title": "Filigree, Charcoal",
"chapter": "Maharam",
"url": "https://www.designerwallcoverings.com/products/filigree-charcoal-gray-maharam",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/MH-FILIGREE-016_0.jpg",
- "logo": "assets/logos/maharam.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/MH-FILIGREE-016_0.jpg"
},
{
"title": "Vest, Dock",
"chapter": "Maharam",
"url": "https://www.designerwallcoverings.com/products/vest-dock-maharam",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/MH-VEST-004_0.jpg",
- "logo": "assets/logos/maharam.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/MH-VEST-004_0.jpg"
},
{
"title": "Firenze, Swell",
"chapter": "Knoll",
"url": "https://www.designerwallcoverings.com/products/firenze-swell-knoll",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/KT-FIRENZE-003_0.jpg",
- "logo": "assets/logos/knoll.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/KT-FIRENZE-003_0.jpg"
},
{
"title": "Stencil, Ginger",
"chapter": "Knoll",
"url": "https://www.designerwallcoverings.com/products/stencil-ginger-knoll",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/KT-STENCIL-005_0.jpg",
- "logo": "assets/logos/knoll.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/KT-STENCIL-005_0.jpg"
},
{
"title": "Big Floral, Bloom",
"chapter": "Knoll",
"url": "https://www.designerwallcoverings.com/products/big-floral-by-nick-cave-bloom-knoll",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/KT-BIG_FLORAL_BY_NICK_CAVE-002_0.jpg",
- "logo": "assets/logos/knoll.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/KT-BIG_FLORAL_BY_NICK_CAVE-002_0.jpg"
},
{
"title": "Xorel, Seafoam",
"chapter": "Carnegie",
"url": "https://www.designerwallcoverings.com/products/carnegie-xorel-seafoam",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/b134e30f02dfa9d5e3075a22351e91ff.jpg",
- "logo": "assets/logos/carnegie.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/b134e30f02dfa9d5e3075a22351e91ff.jpg"
},
{
"title": "Xorel, Bamboo",
"chapter": "Carnegie",
"url": "https://www.designerwallcoverings.com/products/carnegie-xorel-bamboo-signature",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/4e743e98265701613dac301313c698e1.jpg",
- "logo": "assets/logos/carnegie.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/4e743e98265701613dac301313c698e1.jpg"
},
{
"title": "Xorel, Prism",
"chapter": "Carnegie",
"url": "https://www.designerwallcoverings.com/products/carnegie-xorel-prism",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/bff939f8838311c6744d4d1c489729d9.jpg",
- "logo": "assets/logos/carnegie.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/bff939f8838311c6744d4d1c489729d9.jpg"
},
{
"title": "Wannabe, Blue Jay",
"chapter": "Designtex",
"url": "https://www.designerwallcoverings.com/products/wannabe-blue-jay-dwdx-220187",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/6646401__12725.1759419923.jpg",
- "logo": "assets/logos/designtex.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/6646401__12725.1759419923.jpg"
},
{
"title": "Wannabe, Red",
"chapter": "Designtex",
"url": "https://www.designerwallcoverings.com/products/wannabe-red-dwdx-220185",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/6646301__52340.1759419919.jpg",
- "logo": "assets/logos/designtex.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/6646301__52340.1759419919.jpg"
},
{
"title": "Grasscloth, Sprig",
"chapter": "Designtex",
"url": "https://www.designerwallcoverings.com/products/grasscloth-sprig-dwdx-220244",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/8405652__38314.1712930923.jpg",
- "logo": "assets/logos/designtex.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/8405652__38314.1712930923.jpg"
},
{
"title": "Bead 11112",
"chapter": "Wolf Gordon",
"url": "https://www.designerwallcoverings.com/products/bead-11112-bead-11112-wolf-gordon-wallcoverings",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/bead-11112.jpg",
- "logo": "assets/logos/wolfgordon.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/bead-11112.jpg"
},
{
"title": "Dasma, Gold",
"chapter": "Wolf Gordon",
"url": "https://www.designerwallcoverings.com/products/wolfgordonwallcovering_dwwg_dsm-5037-jpg",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/dsm-5037.jpg",
- "logo": "assets/logos/wolfgordon.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/dsm-5037.jpg"
},
{
"title": "Glasgow, Umber",
"chapter": "Wolf Gordon",
"url": "https://www.designerwallcoverings.com/products/wolfgordonwallcovering_dwwg_gsg9-5396-jpg",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/gsg9-5396.jpg",
- "logo": "assets/logos/wolfgordon.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/gsg9-5396.jpg"
},
{
"title": "Finesse, Pearl",
"chapter": "Majilite",
"url": "https://www.designerwallcoverings.com/products/majilite-finesse-pearl-white",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DWMJ-600050.png",
- "logo": "assets/logos/majilite.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DWMJ-600050.png"
},
{
"title": "Cross-Hatch, Gold",
"chapter": "Majilite",
"url": "https://www.designerwallcoverings.com/products/majilite-cross-hatch-gold",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DWMJ-600093.png",
- "logo": "assets/logos/majilite.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DWMJ-600093.png"
},
{
"title": "Radiance, Pearl",
"chapter": "Majilite",
"url": "https://www.designerwallcoverings.com/products/majilite-radiance-pearl-white",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DWMJ-600048.png",
- "logo": "assets/logos/majilite.png"
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DWMJ-600048.png"
}
]
\ No newline at end of file
diff --git a/flipbooks/commercial-collection/audio.json b/flipbooks/commercial-collection/audio.json
index ab1fed0..d9d7cdc 100644
--- a/flipbooks/commercial-collection/audio.json
+++ b/flipbooks/commercial-collection/audio.json
@@ -1,15 +1,48 @@
{
- "bgm": { "src": "assets/audio/jazz.wav", "volume": 0.18 },
+ "bgm": {
+ "src": "assets/audio/jazz.wav",
+ "volume": 0.18
+ },
"vo": [
- { "src": "assets/audio/vo1.wav", "anchor": 0.3 },
- { "src": "assets/audio/vo2.wav", "anchor": 5.9 },
- { "src": "assets/audio/vo3.wav", "anchor": "chapter:Hollywood Wallcoverings" },
- { "src": "assets/audio/vo4.wav", "anchor": "chapter:Maharam" },
- { "src": "assets/audio/vo5.wav", "anchor": "chapter:Knoll" },
- { "src": "assets/audio/vo6.wav", "anchor": "chapter:Carnegie" },
- { "src": "assets/audio/vo7.wav", "anchor": "chapter:Designtex" },
- { "src": "assets/audio/vo8.wav", "anchor": "chapter:Wolf Gordon" },
- { "src": "assets/audio/vo9.wav", "anchor": "chapter:Majilite" },
- { "src": "assets/audio/vo10.wav", "anchor": "outro" }
+ {
+ "src": "assets/audio/vo1.wav",
+ "anchor": 0.3
+ },
+ {
+ "src": "assets/audio/vo2.wav",
+ "anchor": 5.84
+ },
+ {
+ "src": "assets/audio/vo3.wav",
+ "anchor": 10.78
+ },
+ {
+ "src": "assets/audio/vo4.wav",
+ "anchor": 15.31
+ },
+ {
+ "src": "assets/audio/vo5.wav",
+ "anchor": 18.81
+ },
+ {
+ "src": "assets/audio/vo6.wav",
+ "anchor": 21.94
+ },
+ {
+ "src": "assets/audio/vo7.wav",
+ "anchor": 26.55
+ },
+ {
+ "src": "assets/audio/vo8.wav",
+ "anchor": 30.24
+ },
+ {
+ "src": "assets/audio/vo9.wav",
+ "anchor": 34.76
+ },
+ {
+ "src": "assets/audio/vo10.wav",
+ "anchor": 38.4
+ }
]
-}
+}
\ No newline at end of file
diff --git a/flipbooks/commercial-collection/index.html b/flipbooks/commercial-collection/index.html
index 1318193..6e6306a 100644
--- a/flipbooks/commercial-collection/index.html
+++ b/flipbooks/commercial-collection/index.html
@@ -54,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="60">
+ <div id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="42.9">
<div class="card" id="cover">
<div class="kicker">Designer Wallcoverings presents</div>
@@ -70,145 +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>
@@ -318,17 +318,17 @@
<div class="url">designerwallcoverings.com</div>
</div>
- <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="60" data-track-index="20" data-volume="0.18"></audio>
+ <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="42.9" 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="5.9" data-track-index="22" data-volume="1"></audio>
- <audio id="vo2" src="assets/audio/vo3.wav" data-start="10.7" data-track-index="23" data-volume="1"></audio>
- <audio id="vo3" src="assets/audio/vo4.wav" data-start="16.7" data-track-index="24" data-volume="1"></audio>
- <audio id="vo4" src="assets/audio/vo5.wav" data-start="22.7" data-track-index="25" data-volume="1"></audio>
- <audio id="vo5" src="assets/audio/vo6.wav" data-start="28.7" data-track-index="26" data-volume="1"></audio>
- <audio id="vo6" src="assets/audio/vo7.wav" data-start="34.7" data-track-index="27" data-volume="1"></audio>
- <audio id="vo7" src="assets/audio/vo8.wav" data-start="40.7" data-track-index="28" data-volume="1"></audio>
- <audio id="vo8" src="assets/audio/vo9.wav" data-start="46.7" data-track-index="29" data-volume="1"></audio>
- <audio id="vo9" src="assets/audio/vo10.wav" data-start="55.65" data-track-index="30" data-volume="1"></audio>
+ <audio id="vo1" src="assets/audio/vo2.wav" data-start="5.84" data-track-index="22" data-volume="1"></audio>
+ <audio id="vo2" src="assets/audio/vo3.wav" data-start="10.78" data-track-index="23" data-volume="1"></audio>
+ <audio id="vo3" src="assets/audio/vo4.wav" data-start="15.31" data-track-index="24" data-volume="1"></audio>
+ <audio id="vo4" src="assets/audio/vo5.wav" data-start="18.81" data-track-index="25" data-volume="1"></audio>
+ <audio id="vo5" src="assets/audio/vo6.wav" data-start="21.94" data-track-index="26" data-volume="1"></audio>
+ <audio id="vo6" src="assets/audio/vo7.wav" data-start="26.55" data-track-index="27" data-volume="1"></audio>
+ <audio id="vo7" src="assets/audio/vo8.wav" data-start="30.24" data-track-index="28" data-volume="1"></audio>
+ <audio id="vo8" src="assets/audio/vo9.wav" data-start="34.76" data-track-index="29" data-volume="1"></audio>
+ <audio id="vo9" src="assets/audio/vo10.wav" data-start="38.4" data-track-index="30" data-volume="1"></audio>
<script>
window.__timelines = window.__timelines || {};
@@ -402,191 +402,191 @@
tl.set("#leaf0", { opacity: 0 }, 7.300);
tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 7);
tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 7);
- tl.to("#leaf1", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 8.7);
- tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 8.7);
- tl.to("#leaf1 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 9);
- tl.set("#leaf1", { zIndex: 1001 }, 9);
- tl.set("#leaf1", { opacity: 0 }, 9.300);
- tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 9);
- tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 9);
- tl.to("#leaf2", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 10.7);
- tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 10.7);
- tl.to("#leaf2 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 11);
- tl.set("#leaf2", { zIndex: 1002 }, 11);
- tl.set("#leaf2", { opacity: 0 }, 11.300);
- tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 11);
- tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 11);
- tl.to("#leaf3", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 12.7);
- tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 12.7);
- tl.to("#leaf3 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 13);
- tl.set("#leaf3", { zIndex: 1003 }, 13);
- tl.set("#leaf3", { opacity: 0 }, 13.300);
- tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 13);
- tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 13);
- tl.to("#leaf4", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 14.7);
- tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 14.7);
- tl.to("#leaf4 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 15);
- tl.set("#leaf4", { zIndex: 1004 }, 15);
- tl.set("#leaf4", { opacity: 0 }, 15.300);
- tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 15);
- tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 15);
- tl.to("#leaf5", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 16.7);
- tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 16.7);
- tl.to("#leaf5 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 17);
- tl.set("#leaf5", { zIndex: 1005 }, 17);
- tl.set("#leaf5", { opacity: 0 }, 17.300);
- tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17);
- tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17);
- tl.to("#leaf6", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 18.7);
- tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 18.7);
- tl.to("#leaf6 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 19);
- tl.set("#leaf6", { zIndex: 1006 }, 19);
- tl.set("#leaf6", { opacity: 0 }, 19.300);
- tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 19);
- tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 19);
- tl.to("#leaf7", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 20.7);
- tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 20.7);
- tl.to("#leaf7 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 21);
- tl.set("#leaf7", { zIndex: 1007 }, 21);
- tl.set("#leaf7", { opacity: 0 }, 21.300);
- tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 21);
- tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 21);
- tl.to("#leaf8", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 22.7);
- tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 22.7);
- tl.to("#leaf8 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 23);
- tl.set("#leaf8", { zIndex: 1008 }, 23);
- tl.set("#leaf8", { opacity: 0 }, 23.300);
- tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23);
- tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23);
- tl.to("#leaf9", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 24.7);
- tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 24.7);
- tl.to("#leaf9 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 25);
- tl.set("#leaf9", { zIndex: 1009 }, 25);
- tl.set("#leaf9", { opacity: 0 }, 25.300);
- tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 25);
- tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 25);
- tl.to("#leaf10", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 26.7);
- tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 26.7);
- tl.to("#leaf10 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 27);
- tl.set("#leaf10", { zIndex: 1010 }, 27);
- tl.set("#leaf10", { opacity: 0 }, 27.300);
- tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 27);
- tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 27);
- tl.to("#leaf11", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 28.7);
- tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 28.7);
- tl.to("#leaf11 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 29);
- tl.set("#leaf11", { zIndex: 1011 }, 29);
- tl.set("#leaf11", { opacity: 0 }, 29.300);
- tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 29);
- tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 29);
- tl.to("#leaf12", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 30.7);
- tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 30.7);
- tl.to("#leaf12 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 31);
- tl.set("#leaf12", { zIndex: 1012 }, 31);
- tl.set("#leaf12", { opacity: 0 }, 31.300);
- tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 31);
- tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 31);
- tl.to("#leaf13", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 32.7);
- tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 32.7);
- tl.to("#leaf13 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 33);
- tl.set("#leaf13", { zIndex: 1013 }, 33);
- tl.set("#leaf13", { opacity: 0 }, 33.300);
- tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 33);
- tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 33);
- tl.to("#leaf14", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 34.7);
- tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 34.7);
- tl.to("#leaf14 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 35);
- tl.set("#leaf14", { zIndex: 1014 }, 35);
- tl.set("#leaf14", { opacity: 0 }, 35.300);
- tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 35);
- tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 35);
- tl.to("#leaf15", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 36.7);
- tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 36.7);
- tl.to("#leaf15 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 37);
- tl.set("#leaf15", { zIndex: 1015 }, 37);
- tl.set("#leaf15", { opacity: 0 }, 37.300);
- tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 37);
- tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 37);
- tl.to("#leaf16", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 38.7);
- tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 38.7);
- tl.to("#leaf16 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 39);
- tl.set("#leaf16", { zIndex: 1016 }, 39);
- tl.set("#leaf16", { opacity: 0 }, 39.300);
- tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 39);
- tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 39);
- tl.to("#leaf17", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 40.7);
- tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 40.7);
- tl.to("#leaf17 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 41);
- tl.set("#leaf17", { zIndex: 1017 }, 41);
- tl.set("#leaf17", { opacity: 0 }, 41.300);
- tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 41);
- tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 41);
- tl.to("#leaf18", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 42.7);
- tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 42.7);
- tl.to("#leaf18 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 43);
- tl.set("#leaf18", { zIndex: 1018 }, 43);
- tl.set("#leaf18", { opacity: 0 }, 43.300);
- tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 43);
- tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 43);
- tl.to("#leaf19", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 44.7);
- tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 44.7);
- tl.to("#leaf19 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 45);
- tl.set("#leaf19", { zIndex: 1019 }, 45);
- tl.set("#leaf19", { opacity: 0 }, 45.300);
- tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 45);
- tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 45);
- tl.to("#leaf20", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 46.7);
- tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 46.7);
- tl.to("#leaf20 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 47);
- tl.set("#leaf20", { zIndex: 1020 }, 47);
- tl.set("#leaf20", { opacity: 0 }, 47.300);
- tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 47);
- tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 47);
- tl.to("#leaf21", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 48.7);
- tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 48.7);
- tl.to("#leaf21 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 49);
- tl.set("#leaf21", { zIndex: 1021 }, 49);
- tl.set("#leaf21", { opacity: 0 }, 49.300);
- tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 49);
- tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 49);
- tl.to("#leaf22", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 50.7);
- tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 50.7);
- tl.to("#leaf22 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 51);
- tl.set("#leaf22", { zIndex: 1022 }, 51);
- tl.set("#leaf22", { opacity: 0 }, 51.300);
- tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 51);
- tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 51);
- tl.to("#leaf23 .art", { scale: 1.05, duration: 3.20, ease:"power1.out" }, 52.7);
- tl.to("#room23 .rimg", { scale: 1.06, duration: 3.20, ease:"power1.out" }, 52.7);
+ tl.to("#leaf1", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 8);
+ tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 8);
+ tl.to("#leaf1 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 8.3);
+ tl.set("#leaf1", { zIndex: 1001 }, 8.3);
+ tl.set("#leaf1", { opacity: 0 }, 8.600);
+ tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 8.3);
+ tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 8.3);
+ tl.to("#leaf2", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 9.3);
+ tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 9.3);
+ tl.to("#leaf2 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 9.6);
+ tl.set("#leaf2", { zIndex: 1002 }, 9.6);
+ tl.set("#leaf2", { opacity: 0 }, 9.900);
+ tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 9.6);
+ tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 9.6);
+ tl.to("#leaf3", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 10.6);
+ tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 10.6);
+ tl.to("#leaf3 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 10.9);
+ tl.set("#leaf3", { zIndex: 1003 }, 10.9);
+ tl.set("#leaf3", { opacity: 0 }, 11.200);
+ tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 10.9);
+ tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 10.9);
+ tl.to("#leaf4", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 11.9);
+ tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 11.9);
+ tl.to("#leaf4 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 12.2);
+ tl.set("#leaf4", { zIndex: 1004 }, 12.2);
+ tl.set("#leaf4", { opacity: 0 }, 12.500);
+ tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 12.2);
+ tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 12.2);
+ tl.to("#leaf5", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 13.2);
+ tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 13.2);
+ tl.to("#leaf5 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 13.5);
+ tl.set("#leaf5", { zIndex: 1005 }, 13.5);
+ tl.set("#leaf5", { opacity: 0 }, 13.800);
+ tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 13.5);
+ tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 13.5);
+ tl.to("#leaf6", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 14.5);
+ tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 14.5);
+ tl.to("#leaf6 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 14.8);
+ tl.set("#leaf6", { zIndex: 1006 }, 14.8);
+ tl.set("#leaf6", { opacity: 0 }, 15.100);
+ tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14.8);
+ tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14.8);
+ tl.to("#leaf7", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 15.8);
+ tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 15.8);
+ tl.to("#leaf7 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 16.1);
+ tl.set("#leaf7", { zIndex: 1007 }, 16.1);
+ tl.set("#leaf7", { opacity: 0 }, 16.400);
+ tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 16.1);
+ tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 16.1);
+ tl.to("#leaf8", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 17.1);
+ tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 17.1);
+ tl.to("#leaf8 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 17.4);
+ tl.set("#leaf8", { zIndex: 1008 }, 17.4);
+ tl.set("#leaf8", { opacity: 0 }, 17.700);
+ tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17.4);
+ tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17.4);
+ tl.to("#leaf9", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 18.4);
+ tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 18.4);
+ tl.to("#leaf9 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 18.7);
+ tl.set("#leaf9", { zIndex: 1009 }, 18.7);
+ tl.set("#leaf9", { opacity: 0 }, 19.000);
+ tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 18.7);
+ tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 18.7);
+ tl.to("#leaf10", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 19.7);
+ tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 19.7);
+ tl.to("#leaf10 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 20);
+ tl.set("#leaf10", { zIndex: 1010 }, 20);
+ tl.set("#leaf10", { opacity: 0 }, 20.300);
+ tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20);
+ tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20);
+ tl.to("#leaf11", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 21);
+ tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 21);
+ tl.to("#leaf11 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 21.3);
+ tl.set("#leaf11", { zIndex: 1011 }, 21.3);
+ tl.set("#leaf11", { opacity: 0 }, 21.600);
+ tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 21.3);
+ tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 21.3);
+ tl.to("#leaf12", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 22.3);
+ tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 22.3);
+ tl.to("#leaf12 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 22.6);
+ tl.set("#leaf12", { zIndex: 1012 }, 22.6);
+ tl.set("#leaf12", { opacity: 0 }, 22.900);
+ tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 22.6);
+ tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 22.6);
+ tl.to("#leaf13", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 23.6);
+ tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 23.6);
+ tl.to("#leaf13 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 23.9);
+ tl.set("#leaf13", { zIndex: 1013 }, 23.9);
+ tl.set("#leaf13", { opacity: 0 }, 24.200);
+ tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23.9);
+ tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23.9);
+ tl.to("#leaf14", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 24.9);
+ tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 24.9);
+ tl.to("#leaf14 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 25.2);
+ tl.set("#leaf14", { zIndex: 1014 }, 25.2);
+ tl.set("#leaf14", { opacity: 0 }, 25.500);
+ tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 25.2);
+ tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 25.2);
+ tl.to("#leaf15", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 26.2);
+ tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 26.2);
+ tl.to("#leaf15 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 26.5);
+ tl.set("#leaf15", { zIndex: 1015 }, 26.5);
+ tl.set("#leaf15", { opacity: 0 }, 26.800);
+ tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 26.5);
+ tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 26.5);
+ tl.to("#leaf16", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 27.5);
+ tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 27.5);
+ tl.to("#leaf16 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 27.8);
+ tl.set("#leaf16", { zIndex: 1016 }, 27.8);
+ tl.set("#leaf16", { opacity: 0 }, 28.100);
+ tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 27.8);
+ tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 27.8);
+ tl.to("#leaf17", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 28.8);
+ tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 28.8);
+ tl.to("#leaf17 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 29.1);
+ tl.set("#leaf17", { zIndex: 1017 }, 29.1);
+ tl.set("#leaf17", { opacity: 0 }, 29.400);
+ tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 29.1);
+ tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 29.1);
+ tl.to("#leaf18", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 30.1);
+ tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 30.1);
+ tl.to("#leaf18 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 30.4);
+ tl.set("#leaf18", { zIndex: 1018 }, 30.4);
+ tl.set("#leaf18", { opacity: 0 }, 30.700);
+ tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 30.4);
+ tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 30.4);
+ tl.to("#leaf19", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 31.4);
+ tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 31.4);
+ tl.to("#leaf19 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 31.7);
+ tl.set("#leaf19", { zIndex: 1019 }, 31.7);
+ tl.set("#leaf19", { opacity: 0 }, 32.000);
+ tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 31.7);
+ tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 31.7);
+ tl.to("#leaf20", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 32.7);
+ tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 32.7);
+ tl.to("#leaf20 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 33);
+ tl.set("#leaf20", { zIndex: 1020 }, 33);
+ tl.set("#leaf20", { opacity: 0 }, 33.300);
+ tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 33);
+ tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 33);
+ tl.to("#leaf21", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 34);
+ tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 34);
+ tl.to("#leaf21 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 34.3);
+ tl.set("#leaf21", { zIndex: 1021 }, 34.3);
+ tl.set("#leaf21", { opacity: 0 }, 34.600);
+ tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 34.3);
+ tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 34.3);
+ tl.to("#leaf22", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 35.3);
+ tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 35.3);
+ tl.to("#leaf22 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 35.6);
+ tl.set("#leaf22", { zIndex: 1022 }, 35.6);
+ tl.set("#leaf22", { opacity: 0 }, 35.900);
+ tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 35.6);
+ tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 35.6);
+ tl.to("#leaf23 .art", { scale: 1.05, duration: 2.20, ease:"power1.out" }, 36.6);
+ tl.to("#room23 .rimg", { scale: 1.06, duration: 2.20, ease:"power1.out" }, 36.6);
// outro
- tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 55.50);
- tl.to("#outro", { opacity:1, duration:0.5 }, 55.70);
- tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 55.90);
- tl.to("#outro .url", { opacity:1, duration:0.5 }, 56.40);
+ tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 38.40);
+ tl.to("#outro", { opacity:1, duration:0.5 }, 38.60);
+ tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 38.80);
+ tl.to("#outro .url", { opacity:1, duration:0.5 }, 39.30);
gsap.set("#bgm", { volume: 0.18 });
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 }, 5.60);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 8.50);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 10.40);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 13.30);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 16.40);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 19.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 }, 28.40);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 31.30);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 34.40);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 37.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 }, 46.40);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 49.30);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 55.35);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 58.25);
- tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 58.90);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 5.54);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 8.44);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 10.48);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 13.38);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 15.01);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 17.91);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 18.51);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 21.41);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 21.64);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 24.54);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 26.25);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 29.15);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 29.94);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 32.84);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 34.46);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 37.36);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 38.10);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 41.00);
+ tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 41.80);
window.__timelines["flipbook"] = tl;
</script>
diff --git a/public/collections/commercial-collection.html b/public/collections/commercial-collection.html
index ba6604c..a81de0e 100644
--- a/public/collections/commercial-collection.html
+++ b/public/collections/commercial-collection.html
@@ -37,7 +37,7 @@
<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=3" type="video/mp4"></video>
+ <source src="/reels/commercial-collection-flipbook.mp4?v=4" 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>
← 854502c commercial flip-book: 2s/flip + narration synced over each p
·
back to Dw Marketing Reels
·
chore: lint, refactor, v0.9.0 (session close) — commercial f 423d2ca →