← back to Dw Marketing Reels
auto-save: 2026-08-04T13:33:48 (6 files) — server.js data/fetch-innovations-recent.mjs data/innovations-usa.json flipbooks/innovations-usa/ public/collections/innovations-usa-poster.jpg
992c76903368b286592148c51a2f04350511e0a8 · 2026-08-04 13:33:56 -0700 · Steve Abrams
Files touched
A data/fetch-innovations-recent.mjsA data/innovations-usa.jsonA flipbooks/innovations-usa/audio.jsonA flipbooks/innovations-usa/index.htmlA flipbooks/innovations-usa/lines.txtA public/collections/innovations-usa-poster.jpgA public/collections/innovations-usa.htmlM server.js
Diff
commit 992c76903368b286592148c51a2f04350511e0a8
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Tue Aug 4 13:33:56 2026 -0700
auto-save: 2026-08-04T13:33:48 (6 files) — server.js data/fetch-innovations-recent.mjs data/innovations-usa.json flipbooks/innovations-usa/ public/collections/innovations-usa-poster.jpg
---
data/fetch-innovations-recent.mjs | 19 +
data/innovations-usa.json | 502 ++++++++++++
flipbooks/innovations-usa/audio.json | 11 +
flipbooks/innovations-usa/index.html | 1023 +++++++++++++++++++++++++
flipbooks/innovations-usa/lines.txt | 6 +
public/collections/innovations-usa-poster.jpg | Bin 0 -> 1247587 bytes
public/collections/innovations-usa.html | 56 ++
server.js | 1 +
8 files changed, 1618 insertions(+)
diff --git a/data/fetch-innovations-recent.mjs b/data/fetch-innovations-recent.mjs
new file mode 100644
index 0000000..e22bd40
--- /dev/null
+++ b/data/fetch-innovations-recent.mjs
@@ -0,0 +1,19 @@
+import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os';
+const env = fs.readFileSync(path.join(os.homedir(),'Projects/secrets-manager/.env'),'utf8');
+const TOKEN=(env.match(/^SHOPIFY_ADMIN_TOKEN=(.+)$/m)||[])[1]?.replace(/"/g,'').trim();
+const API='https://designer-laboratory-sandbox.myshopify.com/admin/api/2024-10/graphql.json';
+async function q(vendor){
+ const query=`{ products(first:50, sortKey:CREATED_AT, reverse:true, query:"vendor:'${vendor}' status:active"){ edges{ node{ title handle createdAt onlineStoreUrl images(first:10){edges{node{url width height}}} } } } }`;
+ const r=await fetch(API,{method:'POST',headers:{'X-Shopify-Access-Token':TOKEN,'Content-Type':'application/json'},body:JSON.stringify({query})});
+ return (await r.json())?.data?.products?.edges||[];
+}
+let vendor='Innovations USA'; let edges=await q(vendor);
+if(!edges.length){ vendor='Innovations'; edges=await q(vendor); }
+const rows=edges.map(e=>{const n=e.node;const imgs=n.images.edges.map(i=>i.node);if(!imgs.length)return null;
+ const room=imgs.length>1?imgs.slice(1).reduce((b,im)=>(im.width*im.height>b.width*b.height?im:b)):null;
+ const title=n.title.replace(/ Wallcovering \| .*$/,'').replace(/ \| .*$/,'').replace(/ Wallcovering$/,'').trim();
+ return {title,handle:n.handle,created_at:n.createdAt,url:n.onlineStoreUrl||`https://www.designerwallcoverings.com/products/${n.handle}`,
+ image:imgs[0].url,room:(room||imgs[0]).url,has_room:!!room,chapter:'all'};}).filter(Boolean);
+fs.writeFileSync('data/innovations-usa.json',JSON.stringify(rows,null,2));
+console.log(`vendor="${vendor}" wrote ${rows.length} products (${rows.filter(r=>r.has_room).length} real rooms)`);
+console.log('newest 3:',rows.slice(0,3).map(r=>r.title+' ['+r.created_at.slice(0,10)+']').join(' | '));
diff --git a/data/innovations-usa.json b/data/innovations-usa.json
new file mode 100644
index 0000000..de11b53
--- /dev/null
+++ b/data/innovations-usa.json
@@ -0,0 +1,502 @@
+[
+ {
+ "title": "Huntress",
+ "handle": "huntress-wallcovering-innovationsusa",
+ "created_at": "2025-10-27T03:44:54Z",
+ "url": "https://www.designerwallcoverings.com/products/huntress-wallcovering-innovationsusa",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/huntress.jpg?v=1761536704",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/huntress.jpg?v=1761536704",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Damier 4",
+ "handle": "damier-wallcovering-innovationsusa-4",
+ "created_at": "2025-10-27T03:07:53Z",
+ "url": "https://www.designerwallcoverings.com/products/damier-wallcovering-innovationsusa-4",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/damier_b6f337f4-6f7c-4c82-b8aa-017272311513.jpg?v=1761534482",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/damier_b6f337f4-6f7c-4c82-b8aa-017272311513.jpg?v=1761534482",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Damier 3",
+ "handle": "damier-wallcovering-innovationsusa-3",
+ "created_at": "2025-10-27T03:07:25Z",
+ "url": "https://www.designerwallcoverings.com/products/damier-wallcovering-innovationsusa-3",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/damier_6f15007c-3997-4b84-9e0c-327cb517966d.jpg?v=1761534452",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/damier_6f15007c-3997-4b84-9e0c-327cb517966d.jpg?v=1761534452",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Damier 2",
+ "handle": "damier-wallcovering-innovationsusa-2",
+ "created_at": "2025-10-27T02:55:35Z",
+ "url": "https://www.designerwallcoverings.com/products/damier-wallcovering-innovationsusa-2",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/damier_9e41f1e8-4b6d-4045-95dd-dfd19bd8af25.jpg?v=1761533742",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/damier_9e41f1e8-4b6d-4045-95dd-dfd19bd8af25.jpg?v=1761533742",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Damier 1",
+ "handle": "damier-wallcovering-innovationsusa-1",
+ "created_at": "2025-10-27T02:55:07Z",
+ "url": "https://www.designerwallcoverings.com/products/damier-wallcovering-innovationsusa-1",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/damier_914ff47c-4b4e-4db8-9635-1fc26e5d3446.jpg?v=1761533714",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/damier_914ff47c-4b4e-4db8-9635-1fc26e5d3446.jpg?v=1761533714",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Damier",
+ "handle": "damier-wallcovering-innovationsusa",
+ "created_at": "2025-10-27T02:54:39Z",
+ "url": "https://www.designerwallcoverings.com/products/damier-wallcovering-innovationsusa",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/damier.jpg?v=1761533687",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/damier.jpg?v=1761533687",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Agate 1",
+ "handle": "agate-wallcovering-innovationsusa-1",
+ "created_at": "2025-10-26T23:27:20Z",
+ "url": "https://www.designerwallcoverings.com/products/agate-wallcovering-innovationsusa-1",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/agate_a44f34ea-0024-4402-8610-3d0766b8c8f2.jpg?v=1761521248",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/agate_a44f34ea-0024-4402-8610-3d0766b8c8f2.jpg?v=1761521248",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Abstract Suede",
+ "handle": "abstract-suede-wallcovering-innovationsusa",
+ "created_at": "2025-10-26T22:59:17Z",
+ "url": "https://www.designerwallcoverings.com/products/abstract-suede-wallcovering-innovationsusa",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/abstract-suede.jpg?v=1761519564",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/abstract-suede.jpg?v=1761519564",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Agate",
+ "handle": "agate-wallcovering-innovationsusa",
+ "created_at": "2025-10-26T22:59:00Z",
+ "url": "https://www.designerwallcoverings.com/products/agate-wallcovering-innovationsusa",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/agate_b3d7be86-13a2-4391-ba89-8f97c12c39a7.jpg?v=1761519549",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/agate_b3d7be86-13a2-4391-ba89-8f97c12c39a7.jpg?v=1761519549",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Sumatra",
+ "handle": "sumatra-by-innovations-usa-dwc-sumatra-8",
+ "created_at": "2020-03-09T21:15:46Z",
+ "url": "https://www.designerwallcoverings.com/products/sumatra-by-innovations-usa-dwc-sumatra-8",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Sumatra-8.jpg?v=1736198815",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Sumatra-8.jpg?v=1736198815",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Sumatra",
+ "handle": "sumatra-by-innovations-usa-dwc-sumatra-7",
+ "created_at": "2020-03-09T21:15:43Z",
+ "url": "https://www.designerwallcoverings.com/products/sumatra-by-innovations-usa-dwc-sumatra-7",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Sumatra-7.jpg?v=1736198817",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Sumatra-7.jpg?v=1736198817",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Sumatra",
+ "handle": "sumatra-by-innovations-usa-dwc-sumatra-6",
+ "created_at": "2020-03-09T21:15:40Z",
+ "url": "https://www.designerwallcoverings.com/products/sumatra-by-innovations-usa-dwc-sumatra-6",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Sumatra-6.jpg?v=1736198819",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Sumatra-6.jpg?v=1736198819",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Sumatra",
+ "handle": "sumatra-by-innovations-usa-dwc-sumatra-5",
+ "created_at": "2020-03-09T21:15:38Z",
+ "url": "https://www.designerwallcoverings.com/products/sumatra-by-innovations-usa-dwc-sumatra-5",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Sumatra-5.jpg?v=1736198820",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Sumatra-5.jpg?v=1736198820",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Sumatra",
+ "handle": "sumatra-by-innovations-usa-dwc-sumatra-4",
+ "created_at": "2020-03-09T21:15:36Z",
+ "url": "https://www.designerwallcoverings.com/products/sumatra-by-innovations-usa-dwc-sumatra-4",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Sumatra-4.jpg?v=1736198825",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Sumatra-4.jpg?v=1736198825",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Sumatra",
+ "handle": "sumatra-by-innovations-usa-dwc-sumatra-3",
+ "created_at": "2020-03-09T21:15:35Z",
+ "url": "https://www.designerwallcoverings.com/products/sumatra-by-innovations-usa-dwc-sumatra-3",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Sumatra-3.jpg?v=1736198826",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Sumatra-3.jpg?v=1736198826",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Sumatra",
+ "handle": "sumatra-by-innovations-usa-dwc-sumatra-2",
+ "created_at": "2020-03-09T21:15:33Z",
+ "url": "https://www.designerwallcoverings.com/products/sumatra-by-innovations-usa-dwc-sumatra-2",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Sumatra-2.jpg?v=1736198828",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Sumatra-2.jpg?v=1736198828",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Splice",
+ "handle": "splice-by-innovations-usa-dwc-splice-6",
+ "created_at": "2020-03-09T21:15:16Z",
+ "url": "https://www.designerwallcoverings.com/products/splice-by-innovations-usa-dwc-splice-6",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Splice-6.jpg?v=1736198829",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Splice-6.jpg?v=1736198829",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Splice",
+ "handle": "splice-by-innovations-usa-dwc-splice-5",
+ "created_at": "2020-03-09T21:15:15Z",
+ "url": "https://www.designerwallcoverings.com/products/splice-by-innovations-usa-dwc-splice-5",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Splice-5.jpg?v=1736198831",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Splice-5.jpg?v=1736198831",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Sombra",
+ "handle": "sombra-by-innovations-usa-dwc-som-008",
+ "created_at": "2020-03-09T21:13:52Z",
+ "url": "https://www.designerwallcoverings.com/products/sombra-by-innovations-usa-dwc-som-008",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/SOM-008.jpg?v=1736198855",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/SOM-008.jpg?v=1736198855",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Sombra",
+ "handle": "sombra-by-innovations-usa-dwc-som-006",
+ "created_at": "2020-03-09T21:13:48Z",
+ "url": "https://www.designerwallcoverings.com/products/sombra-by-innovations-usa-dwc-som-006",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/SOM-006.jpg?v=1736198858",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/SOM-006.jpg?v=1736198858",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Sombra",
+ "handle": "sombra-by-innovations-usa-dwc-som-004",
+ "created_at": "2020-03-09T21:13:30Z",
+ "url": "https://www.designerwallcoverings.com/products/sombra-by-innovations-usa-dwc-som-004",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/SOM-004.jpg?v=1736198861",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/SOM-004.jpg?v=1736198861",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Sombra",
+ "handle": "sombra-by-innovations-usa-dwc-som-003",
+ "created_at": "2020-03-09T21:13:28Z",
+ "url": "https://www.designerwallcoverings.com/products/sombra-by-innovations-usa-dwc-som-003",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/SOM-003.jpg?v=1736198862",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/SOM-003.jpg?v=1736198862",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Sombra",
+ "handle": "sombra-by-innovations-usa-dwc-som-002",
+ "created_at": "2020-03-09T21:13:26Z",
+ "url": "https://www.designerwallcoverings.com/products/sombra-by-innovations-usa-dwc-som-002",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/SOM-002.jpg?v=1736198864",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/SOM-002.jpg?v=1736198864",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Sombra",
+ "handle": "sombra-by-innovations-usa-dwc-som-001",
+ "created_at": "2020-03-09T21:13:23Z",
+ "url": "https://www.designerwallcoverings.com/products/sombra-by-innovations-usa-dwc-som-001",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/SOM-001.jpg?v=1736198865",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/SOM-001.jpg?v=1736198865",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Sanctuary",
+ "handle": "sanctuary-by-innovations-usa-dwc-sac-003",
+ "created_at": "2020-03-09T21:13:19Z",
+ "url": "https://www.designerwallcoverings.com/products/sanctuary-by-innovations-usa-dwc-sac-003",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/SAC-003.jpg?v=1736198867",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/SAC-003.jpg?v=1736198867",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Rangoon Silk",
+ "handle": "rangoon-silk-by-innovations-usa-dwc-rs8505",
+ "created_at": "2020-03-09T21:13:05Z",
+ "url": "https://www.designerwallcoverings.com/products/rangoon-silk-by-innovations-usa-dwc-rs8505",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/RS8505.jpg?v=1736198871",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/RS8505.jpg?v=1736198871",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Rangoon Silk",
+ "handle": "rangoon-silk-by-innovations-usa-dwc-rs8504",
+ "created_at": "2020-03-09T21:13:02Z",
+ "url": "https://www.designerwallcoverings.com/products/rangoon-silk-by-innovations-usa-dwc-rs8504",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/RS8504.jpg?v=1736198872",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/RS8504.jpg?v=1736198872",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Rangoon Silk",
+ "handle": "rangoon-silk-by-innovations-usa-dwc-rs8503",
+ "created_at": "2020-03-09T21:13:01Z",
+ "url": "https://www.designerwallcoverings.com/products/rangoon-silk-by-innovations-usa-dwc-rs8503",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/RS8503.jpg?v=1736198874",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/RS8503.jpg?v=1736198874",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Rangoon Silk",
+ "handle": "rangoon-silk-by-innovations-usa-dwc-rs8502",
+ "created_at": "2020-03-09T21:12:59Z",
+ "url": "https://www.designerwallcoverings.com/products/rangoon-silk-by-innovations-usa-dwc-rs8502",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/RS8502.jpg?v=1736198876",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/RS8502.jpg?v=1736198876",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Origami",
+ "handle": "origami-by-innovations-usa-dwc-origami-12",
+ "created_at": "2020-03-09T21:12:35Z",
+ "url": "https://www.designerwallcoverings.com/products/origami-by-innovations-usa-dwc-origami-12",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-12.jpg?v=1736198878",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-12.jpg?v=1736198878",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Origami",
+ "handle": "origami-by-innovations-usa-dwc-origami-11",
+ "created_at": "2020-03-09T21:12:33Z",
+ "url": "https://www.designerwallcoverings.com/products/origami-by-innovations-usa-dwc-origami-11",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-11.jpg?v=1736198880",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-11.jpg?v=1736198880",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Origami",
+ "handle": "origami-by-innovations-usa-dwc-origami-10",
+ "created_at": "2020-03-09T21:12:31Z",
+ "url": "https://www.designerwallcoverings.com/products/origami-by-innovations-usa-dwc-origami-10",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ORI10_9dd37a5b-684f-4913-a22c-71941871c148.jpg?v=1781980596",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-10.jpg?v=1736198882",
+ "has_room": true,
+ "chapter": "all"
+ },
+ {
+ "title": "Origami",
+ "handle": "origami-by-innovations-usa-dwc-origami-9",
+ "created_at": "2020-03-09T21:12:29Z",
+ "url": "https://www.designerwallcoverings.com/products/origami-by-innovations-usa-dwc-origami-9",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-9.jpg?v=1736198884",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-9.jpg?v=1736198884",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Origami",
+ "handle": "origami-by-innovations-usa-dwc-origami-8",
+ "created_at": "2020-03-09T21:12:26Z",
+ "url": "https://www.designerwallcoverings.com/products/origami-by-innovations-usa-dwc-origami-8",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-8.jpg?v=1736198886",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-8.jpg?v=1736198886",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Origami",
+ "handle": "origami-by-innovations-usa-dwc-origami-7",
+ "created_at": "2020-03-09T21:12:24Z",
+ "url": "https://www.designerwallcoverings.com/products/origami-by-innovations-usa-dwc-origami-7",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-7.jpg?v=1736198889",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-7.jpg?v=1736198889",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Origami",
+ "handle": "origami-by-innovations-usa-dwc-origami-6",
+ "created_at": "2020-03-09T21:12:23Z",
+ "url": "https://www.designerwallcoverings.com/products/origami-by-innovations-usa-dwc-origami-6",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-6.jpg?v=1736198890",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-6.jpg?v=1736198890",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Origami",
+ "handle": "origami-by-innovations-usa-dwc-origami-5",
+ "created_at": "2020-03-09T21:12:21Z",
+ "url": "https://www.designerwallcoverings.com/products/origami-by-innovations-usa-dwc-origami-5",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-5.jpg?v=1736198892",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-5.jpg?v=1736198892",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Origami",
+ "handle": "origami-by-innovations-usa-dwc-origami-4",
+ "created_at": "2020-03-09T21:12:19Z",
+ "url": "https://www.designerwallcoverings.com/products/origami-by-innovations-usa-dwc-origami-4",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-4.jpg?v=1736198893",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-4.jpg?v=1736198893",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Origami",
+ "handle": "origami-by-innovations-usa-dwc-origami-3",
+ "created_at": "2020-03-09T21:12:18Z",
+ "url": "https://www.designerwallcoverings.com/products/origami-by-innovations-usa-dwc-origami-3",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-3.jpg?v=1736198895",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-3.jpg?v=1736198895",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Origami",
+ "handle": "origami-by-innovations-usa-dwc-origami-2",
+ "created_at": "2020-03-09T21:12:15Z",
+ "url": "https://www.designerwallcoverings.com/products/origami-by-innovations-usa-dwc-origami-2",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-2.jpg?v=1736198896",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-2.jpg?v=1736198896",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Origami",
+ "handle": "origami-by-innovations-usa-dwc-origami-1",
+ "created_at": "2020-03-09T21:12:12Z",
+ "url": "https://www.designerwallcoverings.com/products/origami-by-innovations-usa-dwc-origami-1",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-1.jpg?v=1736198897",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Origami-1.jpg?v=1736198897",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Origami",
+ "handle": "origami-by-innovations-usa-dwc-ori21",
+ "created_at": "2020-03-09T21:12:09Z",
+ "url": "https://www.designerwallcoverings.com/products/origami-by-innovations-usa-dwc-ori21",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ORI21.jpg?v=1736198899",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ORI21.jpg?v=1736198899",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Origami",
+ "handle": "origami-by-innovations-usa-dwc-ori20",
+ "created_at": "2020-03-09T21:12:06Z",
+ "url": "https://www.designerwallcoverings.com/products/origami-by-innovations-usa-dwc-ori20",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ORI20.jpg?v=1736198900",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ORI20.jpg?v=1736198900",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Nautilus",
+ "handle": "nautilus-by-innovations-usa-dwc-nautilus-2",
+ "created_at": "2020-03-09T21:11:47Z",
+ "url": "https://www.designerwallcoverings.com/products/nautilus-by-innovations-usa-dwc-nautilus-2",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Nautilus-2.jpg?v=1736198902",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Nautilus-2.jpg?v=1736198902",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Nautilus",
+ "handle": "nautilus-by-innovations-usa-dwc-nautilus-1",
+ "created_at": "2020-03-09T21:11:45Z",
+ "url": "https://www.designerwallcoverings.com/products/nautilus-by-innovations-usa-dwc-nautilus-1",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Nautilus-1.jpg?v=1736198903",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Nautilus-1.jpg?v=1736198903",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Nautilus",
+ "handle": "nautilus-by-innovations-usa-dwc-j609",
+ "created_at": "2020-03-09T21:11:44Z",
+ "url": "https://www.designerwallcoverings.com/products/nautilus-by-innovations-usa-dwc-j609",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/J609.jpg?v=1736198905",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/J609.jpg?v=1736198905",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Nautilus",
+ "handle": "nautilus-by-innovations-usa-dwc-j607",
+ "created_at": "2020-03-09T21:11:41Z",
+ "url": "https://www.designerwallcoverings.com/products/nautilus-by-innovations-usa-dwc-j607",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/J607.jpg?v=1736198906",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/J607.jpg?v=1736198906",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Nautilus",
+ "handle": "nautilus-by-innovations-usa-dwc-j606",
+ "created_at": "2020-03-09T21:11:39Z",
+ "url": "https://www.designerwallcoverings.com/products/nautilus-by-innovations-usa-dwc-j606",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/J606.jpg?v=1736198907",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/J606.jpg?v=1736198907",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Nautilus",
+ "handle": "nautilus-by-innovations-usa-dwc-j605",
+ "created_at": "2020-03-09T21:11:37Z",
+ "url": "https://www.designerwallcoverings.com/products/nautilus-by-innovations-usa-dwc-j605",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/J605.jpg?v=1736198909",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/J605.jpg?v=1736198909",
+ "has_room": false,
+ "chapter": "all"
+ },
+ {
+ "title": "Nautilus",
+ "handle": "nautilus-by-innovations-usa-dwc-j604",
+ "created_at": "2020-03-09T21:11:36Z",
+ "url": "https://www.designerwallcoverings.com/products/nautilus-by-innovations-usa-dwc-j604",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/J604.jpg?v=1736198910",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/J604.jpg?v=1736198910",
+ "has_room": false,
+ "chapter": "all"
+ }
+]
\ No newline at end of file
diff --git a/flipbooks/innovations-usa/audio.json b/flipbooks/innovations-usa/audio.json
new file mode 100644
index 0000000..910ee12
--- /dev/null
+++ b/flipbooks/innovations-usa/audio.json
@@ -0,0 +1,11 @@
+{
+ "bgm": { "src": "assets/audio/jazz.wav", "volume": 0.2 },
+ "vo": [
+ { "src": "assets/audio/vo1.wav", "anchor": "intro" },
+ { "src": "assets/audio/vo2.wav", "anchor": "+18" },
+ { "src": "assets/audio/vo3.wav", "anchor": "+40" },
+ { "src": "assets/audio/vo4.wav", "anchor": "+60" },
+ { "src": "assets/audio/vo5.wav", "anchor": "hold" },
+ { "src": "assets/audio/vo6.wav", "anchor": "outro" }
+ ]
+}
diff --git a/flipbooks/innovations-usa/index.html b/flipbooks/innovations-usa/index.html
new file mode 100644
index 0000000..6934445
--- /dev/null
+++ b/flipbooks/innovations-usa/index.html
@@ -0,0 +1,1023 @@
+<!doctype html>
+<html lang="en" data-resolution="landscape">
+<head>
+<meta charset="UTF-8" />
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<style>
+ :root { --ink:#1c1a17; --cream:#f4efe6; --paper:#fbf8f1; --gold:#b08d57; }
+ html,body { margin:0; padding:0; width:1920px; height:1080px; overflow:hidden;
+ background:radial-gradient(120% 120% at 50% 0%, #2a2622 0%, #14110e 72%);
+ font-family:"Helvetica Neue",system-ui,sans-serif; }
+ #main-composition { position:relative; width:1920px; height:1080px; overflow:hidden; }
+ .stage { position:absolute; inset:0; perspective:3000px; perspective-origin:50% 46%; }
+
+ /* LEFT verso: brand + room + name */
+ .verso { position:absolute; top:97px; left:192px; width:768px; height:886px;
+ background:var(--paper); border-radius:8px 2px 2px 8px; overflow:hidden;
+ box-shadow: inset -30px 0 46px rgba(0,0,0,.12), 0 34px 66px rgba(0,0,0,.5);
+ display:flex; flex-direction:column; }
+ .wordmark { flex:0 0 auto; text-align:center; padding:49px 0 27px; }
+ .wordmark .wm { font-family:Georgia, serif; font-size:55px; color:var(--ink); letter-spacing:.02em; line-height:1; }
+ .wordmark .wsub { margin-top:8px; font-size:18px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
+ .wordmark .wr { width:64px; height:2px; background:var(--gold); margin:25px auto 0; }
+ .roomstack { position:relative; flex:1 1 auto; margin:0 42px 42px; border-radius:4px; overflow:hidden; background:#e9e3d7; }
+ .room { position:absolute; inset:0; opacity:0; }
+ .room .rimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
+ .room.fallback .rimg { transform:scale(1.4); filter:blur(3px) brightness(.82) saturate(1.05); }
+ .room .rtint { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
+ .room.fallback .rtint { background:linear-gradient(180deg, rgba(20,16,12,.30) 0%, rgba(20,16,12,.62) 100%); }
+ .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; }
+
+ /* RIGHT recto: page-turn stack of pattern swatches */
+ .leaf { position:absolute; top:97px; left:960px; width:768px; height:886px;
+ transform-origin:left center; transform-style:preserve-3d; will-change:transform; }
+ .leaf .face { position:absolute; inset:0; backface-visibility:hidden; overflow:hidden; border-radius:2px 8px 8px 2px;
+ background:var(--paper); box-shadow: 24px 28px 54px rgba(0,0,0,.42), inset 24px 0 42px rgba(0,0,0,.08); }
+ .leaf .back { transform:rotateY(180deg); background:linear-gradient(90deg,#efe9dc,#fbf8f1 22%);
+ box-shadow:-22px 28px 54px rgba(0,0,0,.36), inset -24px 0 42px rgba(0,0,0,.08); }
+ .leaf .art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
+ .leaf .shade { position:absolute; inset:0; opacity:0; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,0) 62%); }
+
+ /* cover + outro cards */
+ .card { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--cream); }
+ .card .kicker { font-size:31px; letter-spacing:.44em; text-transform:uppercase; color:var(--gold); }
+ .card .big { font-family:Georgia, serif; font-size:134px; line-height:1.0; margin:22px 60px; }
+ .card .sub { font-size:35px; letter-spacing:.18em; text-transform:uppercase; color:#c9bfae; }
+ .card .rule { width:120px; height:2px; background:var(--gold); margin:32px 0; }
+ .card .url { margin-top:28px; font-size:31px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); }
+</style>
+</head>
+<body>
+ <div id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="92.1">
+
+ <div class="card" id="cover">
+ <div class="kicker">Designer Wallcoverings presents</div>
+ <div class="big">Innovations USA</div>
+ <div class="rule"></div>
+ <div class="sub">50 Newest Arrivals</div>
+ </div>
+
+ <div class="stage" id="stage">
+ <div class="verso">
+ <div class="wordmark"><div class="wm">Designer Wallcoverings</div><div class="wsub">est. lookbook</div><div class="wr"></div></div>
+ <div class="roomstack">
+ <div class="room fallback" id="room0">
+ <img class="rimg" src="assets/room/r0.jpg" alt="Huntress room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Huntress</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room1">
+ <img class="rimg" src="assets/room/r1.jpg" alt="Damier 4 room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Damier 4</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room2">
+ <img class="rimg" src="assets/room/r2.jpg" alt="Damier 3 room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Damier 3</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room3">
+ <img class="rimg" src="assets/room/r3.jpg" alt="Damier 2 room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Damier 2</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room4">
+ <img class="rimg" src="assets/room/r4.jpg" alt="Damier 1 room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Damier 1</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room5">
+ <img class="rimg" src="assets/room/r5.jpg" alt="Damier room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Damier</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room6">
+ <img class="rimg" src="assets/room/r6.jpg" alt="Agate 1 room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Agate 1</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room7">
+ <img class="rimg" src="assets/room/r7.jpg" alt="Abstract Suede room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Abstract Suede</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room8">
+ <img class="rimg" src="assets/room/r8.jpg" alt="Agate room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Agate</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room9">
+ <img class="rimg" src="assets/room/r9.jpg" alt="Sumatra room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Sumatra</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room10">
+ <img class="rimg" src="assets/room/r10.jpg" alt="Sumatra room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Sumatra</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room11">
+ <img class="rimg" src="assets/room/r11.jpg" alt="Sumatra room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Sumatra</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room12">
+ <img class="rimg" src="assets/room/r12.jpg" alt="Sumatra room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Sumatra</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room13">
+ <img class="rimg" src="assets/room/r13.jpg" alt="Sumatra room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Sumatra</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room14">
+ <img class="rimg" src="assets/room/r14.jpg" alt="Sumatra room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Sumatra</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room15">
+ <img class="rimg" src="assets/room/r15.jpg" alt="Sumatra room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Sumatra</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room16">
+ <img class="rimg" src="assets/room/r16.jpg" alt="Splice room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Splice</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room17">
+ <img class="rimg" src="assets/room/r17.jpg" alt="Splice room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Splice</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room18">
+ <img class="rimg" src="assets/room/r18.jpg" alt="Sombra room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Sombra</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room19">
+ <img class="rimg" src="assets/room/r19.jpg" alt="Sombra room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Sombra</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room20">
+ <img class="rimg" src="assets/room/r20.jpg" alt="Sombra room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Sombra</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room21">
+ <img class="rimg" src="assets/room/r21.jpg" alt="Sombra room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Sombra</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room22">
+ <img class="rimg" src="assets/room/r22.jpg" alt="Sombra room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Sombra</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room23">
+ <img class="rimg" src="assets/room/r23.jpg" alt="Sombra room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Sombra</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room24">
+ <img class="rimg" src="assets/room/r24.jpg" alt="Sanctuary room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Sanctuary</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room25">
+ <img class="rimg" src="assets/room/r25.jpg" alt="Rangoon Silk room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Rangoon Silk</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room26">
+ <img class="rimg" src="assets/room/r26.jpg" alt="Rangoon Silk room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Rangoon Silk</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room27">
+ <img class="rimg" src="assets/room/r27.jpg" alt="Rangoon Silk room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Rangoon Silk</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room28">
+ <img class="rimg" src="assets/room/r28.jpg" alt="Rangoon Silk room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Rangoon Silk</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room29">
+ <img class="rimg" src="assets/room/r29.jpg" alt="Origami room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room30">
+ <img class="rimg" src="assets/room/r30.jpg" alt="Origami room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room" id="room31">
+ <img class="rimg" src="assets/room/r31.jpg" alt="Origami room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room32">
+ <img class="rimg" src="assets/room/r32.jpg" alt="Origami room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room33">
+ <img class="rimg" src="assets/room/r33.jpg" alt="Origami room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room34">
+ <img class="rimg" src="assets/room/r34.jpg" alt="Origami room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room35">
+ <img class="rimg" src="assets/room/r35.jpg" alt="Origami room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room36">
+ <img class="rimg" src="assets/room/r36.jpg" alt="Origami room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room37">
+ <img class="rimg" src="assets/room/r37.jpg" alt="Origami room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room38">
+ <img class="rimg" src="assets/room/r38.jpg" alt="Origami room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room39">
+ <img class="rimg" src="assets/room/r39.jpg" alt="Origami room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room40">
+ <img class="rimg" src="assets/room/r40.jpg" alt="Origami room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room41">
+ <img class="rimg" src="assets/room/r41.jpg" alt="Origami room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room42">
+ <img class="rimg" src="assets/room/r42.jpg" alt="Origami room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room43">
+ <img class="rimg" src="assets/room/r43.jpg" alt="Nautilus room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Nautilus</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room44">
+ <img class="rimg" src="assets/room/r44.jpg" alt="Nautilus room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Nautilus</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room45">
+ <img class="rimg" src="assets/room/r45.jpg" alt="Nautilus room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Nautilus</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room46">
+ <img class="rimg" src="assets/room/r46.jpg" alt="Nautilus room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Nautilus</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room47">
+ <img class="rimg" src="assets/room/r47.jpg" alt="Nautilus room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Nautilus</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room48">
+ <img class="rimg" src="assets/room/r48.jpg" alt="Nautilus room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Nautilus</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ <div class="room fallback" id="room49">
+ <img class="rimg" src="assets/room/r49.jpg" alt="Nautilus room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Nautilus</div><div class="rcol">Innovations USA · all</div></div>
+ </div>
+ </div>
+ </div>
+
+ <div class="leaf" id="leaf0">
+ <div class="face front"><img class="art" src="assets/img/p0.jpg" alt="Huntress" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf1">
+ <div class="face front"><img class="art" src="assets/img/p1.jpg" alt="Damier 4" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf2">
+ <div class="face front"><img class="art" src="assets/img/p2.jpg" alt="Damier 3" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf3">
+ <div class="face front"><img class="art" src="assets/img/p3.jpg" alt="Damier 2" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf4">
+ <div class="face front"><img class="art" src="assets/img/p4.jpg" alt="Damier 1" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf5">
+ <div class="face front"><img class="art" src="assets/img/p5.jpg" alt="Damier" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf6">
+ <div class="face front"><img class="art" src="assets/img/p6.jpg" alt="Agate 1" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf7">
+ <div class="face front"><img class="art" src="assets/img/p7.jpg" alt="Abstract Suede" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf8">
+ <div class="face front"><img class="art" src="assets/img/p8.jpg" alt="Agate" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf9">
+ <div class="face front"><img class="art" src="assets/img/p9.jpg" alt="Sumatra" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf10">
+ <div class="face front"><img class="art" src="assets/img/p10.jpg" alt="Sumatra" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf11">
+ <div class="face front"><img class="art" src="assets/img/p11.jpg" alt="Sumatra" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf12">
+ <div class="face front"><img class="art" src="assets/img/p12.jpg" alt="Sumatra" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf13">
+ <div class="face front"><img class="art" src="assets/img/p13.jpg" alt="Sumatra" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf14">
+ <div class="face front"><img class="art" src="assets/img/p14.jpg" alt="Sumatra" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf15">
+ <div class="face front"><img class="art" src="assets/img/p15.jpg" alt="Sumatra" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf16">
+ <div class="face front"><img class="art" src="assets/img/p16.jpg" alt="Splice" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf17">
+ <div class="face front"><img class="art" src="assets/img/p17.jpg" alt="Splice" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf18">
+ <div class="face front"><img class="art" src="assets/img/p18.jpg" alt="Sombra" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf19">
+ <div class="face front"><img class="art" src="assets/img/p19.jpg" alt="Sombra" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf20">
+ <div class="face front"><img class="art" src="assets/img/p20.jpg" alt="Sombra" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf21">
+ <div class="face front"><img class="art" src="assets/img/p21.jpg" alt="Sombra" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf22">
+ <div class="face front"><img class="art" src="assets/img/p22.jpg" alt="Sombra" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf23">
+ <div class="face front"><img class="art" src="assets/img/p23.jpg" alt="Sombra" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf24">
+ <div class="face front"><img class="art" src="assets/img/p24.jpg" alt="Sanctuary" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf25">
+ <div class="face front"><img class="art" src="assets/img/p25.jpg" alt="Rangoon Silk" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf26">
+ <div class="face front"><img class="art" src="assets/img/p26.jpg" alt="Rangoon Silk" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf27">
+ <div class="face front"><img class="art" src="assets/img/p27.jpg" alt="Rangoon Silk" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf28">
+ <div class="face front"><img class="art" src="assets/img/p28.jpg" alt="Rangoon Silk" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf29">
+ <div class="face front"><img class="art" src="assets/img/p29.jpg" alt="Origami" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf30">
+ <div class="face front"><img class="art" src="assets/img/p30.jpg" alt="Origami" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf31">
+ <div class="face front"><img class="art" src="assets/img/p31.jpg" alt="Origami" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf32">
+ <div class="face front"><img class="art" src="assets/img/p32.jpg" alt="Origami" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf33">
+ <div class="face front"><img class="art" src="assets/img/p33.jpg" alt="Origami" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf34">
+ <div class="face front"><img class="art" src="assets/img/p34.jpg" alt="Origami" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf35">
+ <div class="face front"><img class="art" src="assets/img/p35.jpg" alt="Origami" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf36">
+ <div class="face front"><img class="art" src="assets/img/p36.jpg" alt="Origami" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf37">
+ <div class="face front"><img class="art" src="assets/img/p37.jpg" alt="Origami" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf38">
+ <div class="face front"><img class="art" src="assets/img/p38.jpg" alt="Origami" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf39">
+ <div class="face front"><img class="art" src="assets/img/p39.jpg" alt="Origami" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf40">
+ <div class="face front"><img class="art" src="assets/img/p40.jpg" alt="Origami" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf41">
+ <div class="face front"><img class="art" src="assets/img/p41.jpg" alt="Origami" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf42">
+ <div class="face front"><img class="art" src="assets/img/p42.jpg" alt="Origami" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf43">
+ <div class="face front"><img class="art" src="assets/img/p43.jpg" alt="Nautilus" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf44">
+ <div class="face front"><img class="art" src="assets/img/p44.jpg" alt="Nautilus" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf45">
+ <div class="face front"><img class="art" src="assets/img/p45.jpg" alt="Nautilus" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf46">
+ <div class="face front"><img class="art" src="assets/img/p46.jpg" alt="Nautilus" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf47">
+ <div class="face front"><img class="art" src="assets/img/p47.jpg" alt="Nautilus" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf48">
+ <div class="face front"><img class="art" src="assets/img/p48.jpg" alt="Nautilus" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf49">
+ <div class="face front"><img class="art" src="assets/img/p49.jpg" alt="Nautilus" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ </div>
+
+ <div class="card" id="outro">
+ <div class="kicker">Shop the collection</div>
+ <div class="big">Innovations USA</div>
+ <div class="url">designerwallcoverings.com</div>
+ </div>
+
+ <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="92.1" data-track-index="20" data-volume="0.2"></audio>
+ <audio id="vo0" src="assets/audio/vo1.wav" data-start="3.7" data-track-index="21" data-volume="1"></audio>
+ <audio id="vo1" src="assets/audio/vo2.wav" data-start="33" data-track-index="22" data-volume="1"></audio>
+ <audio id="vo2" src="assets/audio/vo3.wav" data-start="68.2" data-track-index="23" data-volume="1"></audio>
+ <audio id="vo3" src="assets/audio/vo4.wav" data-start="100.2" data-track-index="24" data-volume="1"></audio>
+ <audio id="vo4" src="assets/audio/vo5.wav" data-start="82.7" data-track-index="25" data-volume="1"></audio>
+ <audio id="vo5" src="assets/audio/vo6.wav" data-start="87.25" data-track-index="26" data-volume="1"></audio>
+
+ <script>
+ window.__timelines = window.__timelines || {};
+ const tl = gsap.timeline({ paused: true });
+
+ gsap.set("#leaf0", { rotateY:0, zIndex:50 });
+ gsap.set("#leaf1", { rotateY:0, zIndex:49 });
+ gsap.set("#leaf2", { rotateY:0, zIndex:48 });
+ gsap.set("#leaf3", { rotateY:0, zIndex:47 });
+ gsap.set("#leaf4", { rotateY:0, zIndex:46 });
+ gsap.set("#leaf5", { rotateY:0, zIndex:45 });
+ gsap.set("#leaf6", { rotateY:0, zIndex:44 });
+ gsap.set("#leaf7", { rotateY:0, zIndex:43 });
+ gsap.set("#leaf8", { rotateY:0, zIndex:42 });
+ gsap.set("#leaf9", { rotateY:0, zIndex:41 });
+ gsap.set("#leaf10", { rotateY:0, zIndex:40 });
+ gsap.set("#leaf11", { rotateY:0, zIndex:39 });
+ gsap.set("#leaf12", { rotateY:0, zIndex:38 });
+ gsap.set("#leaf13", { rotateY:0, zIndex:37 });
+ gsap.set("#leaf14", { rotateY:0, zIndex:36 });
+ gsap.set("#leaf15", { rotateY:0, zIndex:35 });
+ gsap.set("#leaf16", { rotateY:0, zIndex:34 });
+ gsap.set("#leaf17", { rotateY:0, zIndex:33 });
+ gsap.set("#leaf18", { rotateY:0, zIndex:32 });
+ gsap.set("#leaf19", { rotateY:0, zIndex:31 });
+ gsap.set("#leaf20", { rotateY:0, zIndex:30 });
+ gsap.set("#leaf21", { rotateY:0, zIndex:29 });
+ gsap.set("#leaf22", { rotateY:0, zIndex:28 });
+ gsap.set("#leaf23", { rotateY:0, zIndex:27 });
+ gsap.set("#leaf24", { rotateY:0, zIndex:26 });
+ gsap.set("#leaf25", { rotateY:0, zIndex:25 });
+ gsap.set("#leaf26", { rotateY:0, zIndex:24 });
+ gsap.set("#leaf27", { rotateY:0, zIndex:23 });
+ gsap.set("#leaf28", { rotateY:0, zIndex:22 });
+ gsap.set("#leaf29", { rotateY:0, zIndex:21 });
+ gsap.set("#leaf30", { rotateY:0, zIndex:20 });
+ gsap.set("#leaf31", { rotateY:0, zIndex:19 });
+ gsap.set("#leaf32", { rotateY:0, zIndex:18 });
+ gsap.set("#leaf33", { rotateY:0, zIndex:17 });
+ gsap.set("#leaf34", { rotateY:0, zIndex:16 });
+ gsap.set("#leaf35", { rotateY:0, zIndex:15 });
+ gsap.set("#leaf36", { rotateY:0, zIndex:14 });
+ gsap.set("#leaf37", { rotateY:0, zIndex:13 });
+ gsap.set("#leaf38", { rotateY:0, zIndex:12 });
+ gsap.set("#leaf39", { rotateY:0, zIndex:11 });
+ gsap.set("#leaf40", { rotateY:0, zIndex:10 });
+ gsap.set("#leaf41", { rotateY:0, zIndex:9 });
+ gsap.set("#leaf42", { rotateY:0, zIndex:8 });
+ gsap.set("#leaf43", { rotateY:0, zIndex:7 });
+ gsap.set("#leaf44", { rotateY:0, zIndex:6 });
+ gsap.set("#leaf45", { rotateY:0, zIndex:5 });
+ gsap.set("#leaf46", { rotateY:0, zIndex:4 });
+ gsap.set("#leaf47", { rotateY:0, zIndex:3 });
+ gsap.set("#leaf48", { rotateY:0, zIndex:2 });
+ gsap.set("#leaf49", { rotateY:0, zIndex:1 });
+ gsap.set("#room0", { opacity:1 });
+ gsap.set("#room1", { opacity:0 });
+ gsap.set("#room2", { opacity:0 });
+ gsap.set("#room3", { opacity:0 });
+ gsap.set("#room4", { opacity:0 });
+ gsap.set("#room5", { opacity:0 });
+ gsap.set("#room6", { opacity:0 });
+ gsap.set("#room7", { opacity:0 });
+ gsap.set("#room8", { opacity:0 });
+ gsap.set("#room9", { opacity:0 });
+ gsap.set("#room10", { opacity:0 });
+ gsap.set("#room11", { opacity:0 });
+ gsap.set("#room12", { opacity:0 });
+ gsap.set("#room13", { opacity:0 });
+ gsap.set("#room14", { opacity:0 });
+ gsap.set("#room15", { opacity:0 });
+ gsap.set("#room16", { opacity:0 });
+ gsap.set("#room17", { opacity:0 });
+ gsap.set("#room18", { opacity:0 });
+ gsap.set("#room19", { opacity:0 });
+ gsap.set("#room20", { opacity:0 });
+ gsap.set("#room21", { opacity:0 });
+ gsap.set("#room22", { opacity:0 });
+ gsap.set("#room23", { opacity:0 });
+ gsap.set("#room24", { opacity:0 });
+ gsap.set("#room25", { opacity:0 });
+ gsap.set("#room26", { opacity:0 });
+ gsap.set("#room27", { opacity:0 });
+ gsap.set("#room28", { opacity:0 });
+ gsap.set("#room29", { opacity:0 });
+ gsap.set("#room30", { opacity:0 });
+ gsap.set("#room31", { opacity:0 });
+ gsap.set("#room32", { opacity:0 });
+ gsap.set("#room33", { opacity:0 });
+ gsap.set("#room34", { opacity:0 });
+ gsap.set("#room35", { opacity:0 });
+ gsap.set("#room36", { opacity:0 });
+ gsap.set("#room37", { opacity:0 });
+ gsap.set("#room38", { opacity:0 });
+ gsap.set("#room39", { opacity:0 });
+ gsap.set("#room40", { opacity:0 });
+ gsap.set("#room41", { opacity:0 });
+ gsap.set("#room42", { opacity:0 });
+ gsap.set("#room43", { opacity:0 });
+ gsap.set("#room44", { opacity:0 });
+ gsap.set("#room45", { opacity:0 });
+ gsap.set("#room46", { opacity:0 });
+ gsap.set("#room47", { opacity:0 });
+ gsap.set("#room48", { opacity:0 });
+ gsap.set("#room49", { opacity:0 });
+ gsap.set("#stage", { opacity: 0 });
+ gsap.set("#outro", { opacity: 0 }); gsap.set("#outro .big", { y: 34, opacity: 0 }); gsap.set("#outro .url", { opacity: 0 });
+ gsap.set("#cover .big", { y: 40, opacity: 0 }); gsap.set("#cover .kicker,#cover .sub,#cover .rule", { opacity: 0 });
+
+ // cover
+ 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" }, 3.00);
+ tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, 3.00);
+
+ // page turns + room crossfades
+
+ tl.to("#leaf0", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 4.2);
+ tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 4.2);
+ tl.to("#leaf0 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 4.7);
+ tl.set("#leaf0", { zIndex: 1000 }, 4.7);
+ tl.set("#leaf0", { opacity: 0 }, 5.200);
+ tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 4.7);
+ tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 4.7);
+ tl.to("#leaf1", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 5.8);
+ tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 5.8);
+ tl.to("#leaf1 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 6.3);
+ tl.set("#leaf1", { zIndex: 1001 }, 6.3);
+ tl.set("#leaf1", { opacity: 0 }, 6.800);
+ tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 6.3);
+ tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 6.3);
+ tl.to("#leaf2", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 7.4);
+ tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 7.4);
+ tl.to("#leaf2 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 7.9);
+ tl.set("#leaf2", { zIndex: 1002 }, 7.9);
+ tl.set("#leaf2", { opacity: 0 }, 8.400);
+ tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 7.9);
+ tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 7.9);
+ tl.to("#leaf3", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 9);
+ tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 9);
+ tl.to("#leaf3 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 9.5);
+ tl.set("#leaf3", { zIndex: 1003 }, 9.5);
+ tl.set("#leaf3", { opacity: 0 }, 10.000);
+ tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 9.5);
+ tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 9.5);
+ tl.to("#leaf4", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 10.6);
+ tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 10.6);
+ tl.to("#leaf4 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 11.1);
+ tl.set("#leaf4", { zIndex: 1004 }, 11.1);
+ tl.set("#leaf4", { opacity: 0 }, 11.600);
+ tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 11.1);
+ tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 11.1);
+ tl.to("#leaf5", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 12.2);
+ tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 12.2);
+ tl.to("#leaf5 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 12.7);
+ tl.set("#leaf5", { zIndex: 1005 }, 12.7);
+ tl.set("#leaf5", { opacity: 0 }, 13.200);
+ tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 12.7);
+ tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 12.7);
+ tl.to("#leaf6", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 13.8);
+ tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 13.8);
+ tl.to("#leaf6 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 14.3);
+ tl.set("#leaf6", { zIndex: 1006 }, 14.3);
+ tl.set("#leaf6", { opacity: 0 }, 14.800);
+ tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14.3);
+ tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14.3);
+ tl.to("#leaf7", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 15.4);
+ tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 15.4);
+ tl.to("#leaf7 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 15.9);
+ tl.set("#leaf7", { zIndex: 1007 }, 15.9);
+ tl.set("#leaf7", { opacity: 0 }, 16.400);
+ tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 15.9);
+ tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 15.9);
+ tl.to("#leaf8", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 17);
+ tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 17);
+ tl.to("#leaf8 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 17.5);
+ tl.set("#leaf8", { zIndex: 1008 }, 17.5);
+ tl.set("#leaf8", { opacity: 0 }, 18.000);
+ tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17.5);
+ tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17.5);
+ tl.to("#leaf9", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 18.6);
+ tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 18.6);
+ tl.to("#leaf9 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 19.1);
+ tl.set("#leaf9", { zIndex: 1009 }, 19.1);
+ tl.set("#leaf9", { opacity: 0 }, 19.600);
+ tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 19.1);
+ tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 19.1);
+ tl.to("#leaf10", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 20.2);
+ tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 20.2);
+ tl.to("#leaf10 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 20.7);
+ tl.set("#leaf10", { zIndex: 1010 }, 20.7);
+ tl.set("#leaf10", { opacity: 0 }, 21.200);
+ tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20.7);
+ tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20.7);
+ tl.to("#leaf11", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 21.8);
+ tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 21.8);
+ tl.to("#leaf11 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 22.3);
+ tl.set("#leaf11", { zIndex: 1011 }, 22.3);
+ tl.set("#leaf11", { opacity: 0 }, 22.800);
+ tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 22.3);
+ tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 22.3);
+ tl.to("#leaf12", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 23.4);
+ tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 23.4);
+ tl.to("#leaf12 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 23.9);
+ tl.set("#leaf12", { zIndex: 1012 }, 23.9);
+ tl.set("#leaf12", { opacity: 0 }, 24.400);
+ tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23.9);
+ tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23.9);
+ tl.to("#leaf13", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 25);
+ tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 25);
+ tl.to("#leaf13 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 25.5);
+ tl.set("#leaf13", { zIndex: 1013 }, 25.5);
+ tl.set("#leaf13", { opacity: 0 }, 26.000);
+ tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 25.5);
+ tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 25.5);
+ tl.to("#leaf14", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 26.6);
+ tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 26.6);
+ tl.to("#leaf14 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 27.1);
+ tl.set("#leaf14", { zIndex: 1014 }, 27.1);
+ tl.set("#leaf14", { opacity: 0 }, 27.600);
+ tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 27.1);
+ tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 27.1);
+ tl.to("#leaf15", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 28.2);
+ tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 28.2);
+ tl.to("#leaf15 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 28.7);
+ tl.set("#leaf15", { zIndex: 1015 }, 28.7);
+ tl.set("#leaf15", { opacity: 0 }, 29.200);
+ tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 28.7);
+ tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 28.7);
+ tl.to("#leaf16", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 29.8);
+ tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 29.8);
+ tl.to("#leaf16 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 30.3);
+ tl.set("#leaf16", { zIndex: 1016 }, 30.3);
+ tl.set("#leaf16", { opacity: 0 }, 30.800);
+ tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 30.3);
+ tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 30.3);
+ tl.to("#leaf17", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 31.4);
+ tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 31.4);
+ tl.to("#leaf17 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 31.9);
+ tl.set("#leaf17", { zIndex: 1017 }, 31.9);
+ tl.set("#leaf17", { opacity: 0 }, 32.400);
+ tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 31.9);
+ tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 31.9);
+ tl.to("#leaf18", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 33);
+ tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 33);
+ tl.to("#leaf18 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 33.5);
+ tl.set("#leaf18", { zIndex: 1018 }, 33.5);
+ tl.set("#leaf18", { opacity: 0 }, 34.000);
+ tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 33.5);
+ tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 33.5);
+ tl.to("#leaf19", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 34.6);
+ tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 34.6);
+ tl.to("#leaf19 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 35.1);
+ tl.set("#leaf19", { zIndex: 1019 }, 35.1);
+ tl.set("#leaf19", { opacity: 0 }, 35.600);
+ tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 35.1);
+ tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 35.1);
+ tl.to("#leaf20", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 36.2);
+ tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 36.2);
+ tl.to("#leaf20 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 36.7);
+ tl.set("#leaf20", { zIndex: 1020 }, 36.7);
+ tl.set("#leaf20", { opacity: 0 }, 37.200);
+ tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 36.7);
+ tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 36.7);
+ tl.to("#leaf21", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 37.8);
+ tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 37.8);
+ tl.to("#leaf21 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 38.3);
+ tl.set("#leaf21", { zIndex: 1021 }, 38.3);
+ tl.set("#leaf21", { opacity: 0 }, 38.800);
+ tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 38.3);
+ tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 38.3);
+ tl.to("#leaf22", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 39.4);
+ tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 39.4);
+ tl.to("#leaf22 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 39.9);
+ tl.set("#leaf22", { zIndex: 1022 }, 39.9);
+ tl.set("#leaf22", { opacity: 0 }, 40.400);
+ tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 39.9);
+ tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 39.9);
+ tl.to("#leaf23", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 41);
+ tl.to("#leaf23 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 41);
+ tl.to("#leaf23 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 41.5);
+ tl.set("#leaf23", { zIndex: 1023 }, 41.5);
+ tl.set("#leaf23", { opacity: 0 }, 42.000);
+ tl.to("#room23", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 41.5);
+ tl.to("#room24", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 41.5);
+ tl.to("#leaf24", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 42.6);
+ tl.to("#leaf24 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 42.6);
+ tl.to("#leaf24 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 43.1);
+ tl.set("#leaf24", { zIndex: 1024 }, 43.1);
+ tl.set("#leaf24", { opacity: 0 }, 43.600);
+ tl.to("#room24", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 43.1);
+ tl.to("#room25", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 43.1);
+ tl.to("#leaf25", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 44.2);
+ tl.to("#leaf25 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 44.2);
+ tl.to("#leaf25 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 44.7);
+ tl.set("#leaf25", { zIndex: 1025 }, 44.7);
+ tl.set("#leaf25", { opacity: 0 }, 45.200);
+ tl.to("#room25", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 44.7);
+ tl.to("#room26", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 44.7);
+ tl.to("#leaf26", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 45.8);
+ tl.to("#leaf26 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 45.8);
+ tl.to("#leaf26 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 46.3);
+ tl.set("#leaf26", { zIndex: 1026 }, 46.3);
+ tl.set("#leaf26", { opacity: 0 }, 46.800);
+ tl.to("#room26", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 46.3);
+ tl.to("#room27", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 46.3);
+ tl.to("#leaf27", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 47.4);
+ tl.to("#leaf27 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 47.4);
+ tl.to("#leaf27 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 47.9);
+ tl.set("#leaf27", { zIndex: 1027 }, 47.9);
+ tl.set("#leaf27", { opacity: 0 }, 48.400);
+ tl.to("#room27", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 47.9);
+ tl.to("#room28", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 47.9);
+ tl.to("#leaf28", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 49);
+ tl.to("#leaf28 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 49);
+ tl.to("#leaf28 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 49.5);
+ tl.set("#leaf28", { zIndex: 1028 }, 49.5);
+ tl.set("#leaf28", { opacity: 0 }, 50.000);
+ tl.to("#room28", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 49.5);
+ tl.to("#room29", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 49.5);
+ tl.to("#leaf29", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 50.6);
+ tl.to("#leaf29 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 50.6);
+ tl.to("#leaf29 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 51.1);
+ tl.set("#leaf29", { zIndex: 1029 }, 51.1);
+ tl.set("#leaf29", { opacity: 0 }, 51.600);
+ tl.to("#room29", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 51.1);
+ tl.to("#room30", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 51.1);
+ tl.to("#leaf30", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 52.2);
+ tl.to("#leaf30 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 52.2);
+ tl.to("#leaf30 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 52.7);
+ tl.set("#leaf30", { zIndex: 1030 }, 52.7);
+ tl.set("#leaf30", { opacity: 0 }, 53.200);
+ tl.to("#room30", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 52.7);
+ tl.to("#room31", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 52.7);
+ tl.to("#leaf31", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 53.8);
+ tl.to("#leaf31 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 53.8);
+ tl.to("#leaf31 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 54.3);
+ tl.set("#leaf31", { zIndex: 1031 }, 54.3);
+ tl.set("#leaf31", { opacity: 0 }, 54.800);
+ tl.to("#room31", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 54.3);
+ tl.to("#room32", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 54.3);
+ tl.to("#leaf32", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 55.4);
+ tl.to("#leaf32 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 55.4);
+ tl.to("#leaf32 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 55.9);
+ tl.set("#leaf32", { zIndex: 1032 }, 55.9);
+ tl.set("#leaf32", { opacity: 0 }, 56.400);
+ tl.to("#room32", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 55.9);
+ tl.to("#room33", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 55.9);
+ tl.to("#leaf33", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 57);
+ tl.to("#leaf33 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 57);
+ tl.to("#leaf33 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 57.5);
+ tl.set("#leaf33", { zIndex: 1033 }, 57.5);
+ tl.set("#leaf33", { opacity: 0 }, 58.000);
+ tl.to("#room33", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 57.5);
+ tl.to("#room34", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 57.5);
+ tl.to("#leaf34", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 58.6);
+ tl.to("#leaf34 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 58.6);
+ tl.to("#leaf34 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 59.1);
+ tl.set("#leaf34", { zIndex: 1034 }, 59.1);
+ tl.set("#leaf34", { opacity: 0 }, 59.600);
+ tl.to("#room34", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 59.1);
+ tl.to("#room35", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 59.1);
+ tl.to("#leaf35", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 60.2);
+ tl.to("#leaf35 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 60.2);
+ tl.to("#leaf35 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 60.7);
+ tl.set("#leaf35", { zIndex: 1035 }, 60.7);
+ tl.set("#leaf35", { opacity: 0 }, 61.200);
+ tl.to("#room35", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 60.7);
+ tl.to("#room36", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 60.7);
+ tl.to("#leaf36", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 61.8);
+ tl.to("#leaf36 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 61.8);
+ tl.to("#leaf36 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 62.3);
+ tl.set("#leaf36", { zIndex: 1036 }, 62.3);
+ tl.set("#leaf36", { opacity: 0 }, 62.800);
+ tl.to("#room36", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 62.3);
+ tl.to("#room37", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 62.3);
+ tl.to("#leaf37", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 63.4);
+ tl.to("#leaf37 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 63.4);
+ tl.to("#leaf37 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 63.9);
+ tl.set("#leaf37", { zIndex: 1037 }, 63.9);
+ tl.set("#leaf37", { opacity: 0 }, 64.400);
+ tl.to("#room37", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 63.9);
+ tl.to("#room38", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 63.9);
+ tl.to("#leaf38", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 65);
+ tl.to("#leaf38 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 65);
+ tl.to("#leaf38 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 65.5);
+ tl.set("#leaf38", { zIndex: 1038 }, 65.5);
+ tl.set("#leaf38", { opacity: 0 }, 66.000);
+ tl.to("#room38", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 65.5);
+ tl.to("#room39", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 65.5);
+ tl.to("#leaf39", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 66.6);
+ tl.to("#leaf39 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 66.6);
+ tl.to("#leaf39 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 67.1);
+ tl.set("#leaf39", { zIndex: 1039 }, 67.1);
+ tl.set("#leaf39", { opacity: 0 }, 67.600);
+ tl.to("#room39", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 67.1);
+ tl.to("#room40", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 67.1);
+ tl.to("#leaf40", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 68.2);
+ tl.to("#leaf40 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 68.2);
+ tl.to("#leaf40 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 68.7);
+ tl.set("#leaf40", { zIndex: 1040 }, 68.7);
+ tl.set("#leaf40", { opacity: 0 }, 69.200);
+ tl.to("#room40", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 68.7);
+ tl.to("#room41", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 68.7);
+ tl.to("#leaf41", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 69.8);
+ tl.to("#leaf41 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 69.8);
+ tl.to("#leaf41 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 70.3);
+ tl.set("#leaf41", { zIndex: 1041 }, 70.3);
+ tl.set("#leaf41", { opacity: 0 }, 70.800);
+ tl.to("#room41", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 70.3);
+ tl.to("#room42", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 70.3);
+ tl.to("#leaf42", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 71.4);
+ tl.to("#leaf42 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 71.4);
+ tl.to("#leaf42 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 71.9);
+ tl.set("#leaf42", { zIndex: 1042 }, 71.9);
+ tl.set("#leaf42", { opacity: 0 }, 72.400);
+ tl.to("#room42", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 71.9);
+ tl.to("#room43", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 71.9);
+ tl.to("#leaf43", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 73);
+ tl.to("#leaf43 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 73);
+ tl.to("#leaf43 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 73.5);
+ tl.set("#leaf43", { zIndex: 1043 }, 73.5);
+ tl.set("#leaf43", { opacity: 0 }, 74.000);
+ tl.to("#room43", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 73.5);
+ tl.to("#room44", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 73.5);
+ tl.to("#leaf44", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 74.6);
+ tl.to("#leaf44 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 74.6);
+ tl.to("#leaf44 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 75.1);
+ tl.set("#leaf44", { zIndex: 1044 }, 75.1);
+ tl.set("#leaf44", { opacity: 0 }, 75.600);
+ tl.to("#room44", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 75.1);
+ tl.to("#room45", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 75.1);
+ tl.to("#leaf45", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 76.2);
+ tl.to("#leaf45 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 76.2);
+ tl.to("#leaf45 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 76.7);
+ tl.set("#leaf45", { zIndex: 1045 }, 76.7);
+ tl.set("#leaf45", { opacity: 0 }, 77.200);
+ tl.to("#room45", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 76.7);
+ tl.to("#room46", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 76.7);
+ tl.to("#leaf46", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 77.8);
+ tl.to("#leaf46 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 77.8);
+ tl.to("#leaf46 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 78.3);
+ tl.set("#leaf46", { zIndex: 1046 }, 78.3);
+ tl.set("#leaf46", { opacity: 0 }, 78.800);
+ tl.to("#room46", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 78.3);
+ tl.to("#room47", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 78.3);
+ tl.to("#leaf47", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 79.4);
+ tl.to("#leaf47 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 79.4);
+ tl.to("#leaf47 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 79.9);
+ tl.set("#leaf47", { zIndex: 1047 }, 79.9);
+ tl.set("#leaf47", { opacity: 0 }, 80.400);
+ tl.to("#room47", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 79.9);
+ tl.to("#room48", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 79.9);
+ tl.to("#leaf48", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 81);
+ tl.to("#leaf48 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 81);
+ tl.to("#leaf48 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 81.5);
+ tl.set("#leaf48", { zIndex: 1048 }, 81.5);
+ tl.set("#leaf48", { opacity: 0 }, 82.000);
+ tl.to("#room48", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 81.5);
+ tl.to("#room49", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 81.5);
+ tl.to("#leaf49 .art", { scale: 1.05, duration: 4.90, ease:"power1.out" }, 82.6);
+ tl.to("#room49 .rimg", { scale: 1.06, duration: 4.90, ease:"power1.out" }, 82.6);
+
+ // outro
+ tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 87.10);
+ tl.to("#outro", { opacity:1, duration:0.5 }, 87.30);
+ tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 87.50);
+ tl.to("#outro .url", { opacity:1, duration:0.5 }, 88.00);
+
+ gsap.set("#bgm", { volume: 0.2 });
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 3.40);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 6.30);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 32.70);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 35.60);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 67.90);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 70.80);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 99.90);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 102.80);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 82.40);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 85.30);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 86.95);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 89.85);
+ tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 91.00);
+
+ window.__timelines["flipbook"] = tl;
+ </script>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/flipbooks/innovations-usa/lines.txt b/flipbooks/innovations-usa/lines.txt
new file mode 100644
index 0000000..e173528
--- /dev/null
+++ b/flipbooks/innovations-usa/lines.txt
@@ -0,0 +1,6 @@
+Innovations. Fifty of the newest arrivals, from Designer Wallcoverings.
+A contract line built for spaces that demand presence — textural, tonal, and quietly architectural.
+Turn each page: grasscloths and metallics, embossed vinyls, and the soft geometry of the Damier weave.
+Every pattern is commercial-grade — engineered to wear, designed to be noticed.
+Leaf through fifty, and find the one that sets the room.
+Innovations USA — now at Designer Wallcoverings.
diff --git a/public/collections/innovations-usa-poster.jpg b/public/collections/innovations-usa-poster.jpg
new file mode 100644
index 0000000..f26068d
Binary files /dev/null and b/public/collections/innovations-usa-poster.jpg differ
diff --git a/public/collections/innovations-usa.html b/public/collections/innovations-usa.html
new file mode 100644
index 0000000..79eebce
--- /dev/null
+++ b/public/collections/innovations-usa.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>Innovations USA — 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/innovations-usa-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>Innovations USA</h1>
+ <div class="sub">50 Newest Arrivals</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/innovations-usa-poster.jpg">
+ <source src="/reels/innovations-usa-flipbook.mp4" 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/collections/innovations-usa">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/server.js b/server.js
index 0ce6146..7686984 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/innovations-usa') return await serveFile(join(ROOT, 'public', 'collections', 'innovations-usa.html'), req, res);
if (p === '/collections/graduate-collection') return await serveFile(join(ROOT, 'public', 'collections', 'graduate-collection.html'), req, res);
if (p === '/api/reels') {
const fp = join(ROOT, 'data', 'reels.json');
← 792dc26 auto-save: 2026-08-04T07:31:10 (3 files) — data/new-arrivals
·
back to Dw Marketing Reels
·
auto-save: 2026-08-04T14:04:01 (3 files) — flipbooks/innovat ca1162d →