← back to Dw Marketing Reels
Graduate Collection flipbook: reusable generator + narrated spread video + marketing.dw collection page
76e3f7b06bdce64a7262c459613822acd6436645 · 2026-07-30 09:42:43 -0700 · Steve Abrams
Files touched
M .gitignoreA data/graduate-ordered.jsonA data/graduate-with-rooms.jsonA flipbooks/graduate-collection/STORYBOARD.mdA flipbooks/graduate-collection/audio.jsonM flipbooks/graduate-collection/index.htmlA public/collections/graduate-collection.htmlM scripts/build-collection-flipbook.mjsM server.js
Diff
commit 76e3f7b06bdce64a7262c459613822acd6436645
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Jul 30 09:42:43 2026 -0700
Graduate Collection flipbook: reusable generator + narrated spread video + marketing.dw collection page
---
.gitignore | 10 +
data/graduate-ordered.json | 282 +++++++
data/graduate-with-rooms.json | 247 ++++++
flipbooks/graduate-collection/STORYBOARD.md | 63 ++
flipbooks/graduate-collection/audio.json | 11 +
flipbooks/graduate-collection/index.html | 1181 +++++++++++++++------------
public/collections/graduate-collection.html | 79 ++
scripts/build-collection-flipbook.mjs | 351 ++++----
server.js | 1 +
9 files changed, 1568 insertions(+), 657 deletions(-)
diff --git a/.gitignore b/.gitignore
index 2bb1990..6f4ab19 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,13 @@ videos/*/node_modules/
Videos/
reels-1x1-work/
reels/*.caption.txt
+
+# collection flipbook — regenerable binaries
+flipbooks/*/assets/img/
+flipbooks/*/assets/room/
+flipbooks/*/assets/audio/
+flipbooks/*/renders/
+flipbooks/*/snapshots/
+public/reels/*.mp4
+public/collections/graduate-banner.jpg
+public/collections/graduate-poster.jpg
diff --git a/data/graduate-ordered.json b/data/graduate-ordered.json
new file mode 100644
index 0000000..433c7df
--- /dev/null
+++ b/data/graduate-ordered.json
@@ -0,0 +1,282 @@
+[
+ {
+ "title": "Savannah Cheetah - Mustard",
+ "handle": "savannah-cheetah-cream",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2021-10-08at2.38.34PM.png?v=1709589603",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2021-10-08at2.44.37PM.png?v=1633729530",
+ "has_room": true,
+ "chapter": "jungle"
+ },
+ {
+ "title": "Tiger Tiger - In the Jungle - Cream",
+ "handle": "tigers-tigers-tigers-in-the-jungle",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/HOOT-EXPORT-IMAGE-1.jpg?v=1689805112",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/HOOT-EXPORT-IMAGE-7.png?v=1689805112",
+ "has_room": true,
+ "chapter": "jungle"
+ },
+ {
+ "title": "Tiger Tiger - In the Jungle - Green",
+ "handle": "tigers-tigers-tigers-in-the-jungle-1",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_02_Image_0006.jpg?v=1570091053",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_02_Image_0006.jpg?v=1570091053",
+ "has_room": false,
+ "chapter": "jungle"
+ },
+ {
+ "title": "Toucan And Bee Catcher",
+ "handle": "toucan-and-bee-catcher-wallpaper-1",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_11_Image_0001.jpg?v=1747080307",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_12_Image_0001.jpg?v=1747080307",
+ "has_room": true,
+ "chapter": "jungle"
+ },
+ {
+ "title": "Tiger Cream Bathroom",
+ "handle": "dwc-1001316",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Tiger_Cream_Bathroom_WEB.jpg?v=1602006869",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Tiger_Cream_Bathroom_WEB.jpg?v=1602006869",
+ "has_room": false,
+ "chapter": "jungle"
+ },
+ {
+ "title": "Savannah Cheetah - Charcoal",
+ "handle": "savannah-cheetah-charcoal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2021-10-08at2.55.41PM.png?v=1633730364",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2021-10-08at2.55.53PM.png?v=1633730385",
+ "has_room": true,
+ "chapter": "jungle"
+ },
+ {
+ "title": "Tiger And Temple Green",
+ "handle": "tiger-and-temple-green",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/tigertemple.jpg?v=1647024988",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/HOOT-EXPORT-IMAGE-3_0da30cd1-270b-4cf2-b9ff-52402301c972.png?v=1689805062",
+ "has_room": true,
+ "chapter": "jungle"
+ },
+ {
+ "title": "Botanical Print - Multi",
+ "handle": "jungle-print-wallpaper-multi",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2022-12-07at9.30.07AM.png?v=1670434232",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2022-12-07at9.30.13AM.png?v=1670434236",
+ "has_room": true,
+ "chapter": "jungle"
+ },
+ {
+ "title": "Savannah Cheetah - Green",
+ "handle": "savannah-cheetah-green",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2024-03-04at1.58.23PM.png?v=1709589538",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2024-03-04at1.58.32PM.png?v=1709589526",
+ "has_room": true,
+ "chapter": "jungle"
+ },
+ {
+ "title": "All Over Leopard - Blue",
+ "handle": "copy-of-exotic-tiger-wallpaper-charcoal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AlloverLeopardCharcoal.png?v=1709835248",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AlloverLeopardCharcoalRoom.png?v=1709835248",
+ "has_room": true,
+ "chapter": "jungle"
+ },
+ {
+ "title": "All Over Leopard Blue",
+ "handle": "copy-of-all-over-leopard-blue",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Screenshot2025-06-24at12.37.36PM.png?v=1750793883",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AlloverLeopardCharcoalRoom_e9a4799e-903c-417e-99b9-158270cc5cfd.png?v=1750793863",
+ "has_room": true,
+ "chapter": "jungle"
+ },
+ {
+ "title": "All Over Leopard Charcoal",
+ "handle": "copy-of-all-over-leopard-charcoal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Screenshot2025-06-24at12.36.31PM.png?v=1750793823",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Screenshot2025-06-24at12.36.55PM.png?v=1750793822",
+ "has_room": true,
+ "chapter": "jungle"
+ },
+ {
+ "title": "Monkey Biz Black",
+ "handle": "copy-of-monkey-biz-black",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/MonkeyBusiness_0b1e2f1a-e83e-4f96-b1c3-33bce1010512.png?v=1730484572",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/MonkeyBusinessroom_d9231a22-384b-42eb-a621-f7f54c466978.png?v=1730484572",
+ "has_room": true,
+ "chapter": "jungle"
+ },
+ {
+ "title": "Monkey Biz Pink",
+ "handle": "copy-of-monkey-biz-pink",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/MonkeyBusinessPink_00e8571a-3065-4a60-a714-02ab08fb557e.png?v=1730484563",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/MonkeyBusinessPinkRoom_a42f3647-a226-409a-8caf-7f501ea535b6.png?v=1730484563",
+ "has_room": true,
+ "chapter": "jungle"
+ },
+ {
+ "title": "On Safari Cream",
+ "handle": "on-safari-cream-wallpaper-the-graduate-collection",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/OnSafariCream_45b24b2f-3605-4ab2-9408-b9be2a5f43e9.png?v=1730484553",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/OnSafariCream_45b24b2f-3605-4ab2-9408-b9be2a5f43e9.png?v=1730484553",
+ "has_room": false,
+ "chapter": "jungle"
+ },
+ {
+ "title": "All Over Leopard - Aubergine",
+ "handle": "all-over-leopard-aubergine-graduate-collection",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/B48C9B51-6F0D-4973-985F-992BBF14F800.jpg?v=1772164893",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/A902549B-ECE0-4410-8226-32E31F07196B.jpg?v=1772164893",
+ "has_room": true,
+ "chapter": "jungle"
+ },
+ {
+ "title": "All Over Leopard - Brown",
+ "handle": "all-over-leopard-brown-graduate-collection",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/80F7ADF4-D400-4D78-89E2-E8024E0C12EB.jpg?v=1772164915",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/9B0CD372-BE5E-4886-9E91-0574F2BADC00.jpg?v=1772164915",
+ "has_room": true,
+ "chapter": "jungle"
+ },
+ {
+ "title": "Cheetah - Brown",
+ "handle": "cheetah-brown-graduate-collection",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/IMG-1501.jpg?v=1772164931",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/3E800CF2-DCD4-4AF0-A7D9-344DB9DD0CDB.jpg?v=1772164931",
+ "has_room": true,
+ "chapter": "jungle"
+ },
+ {
+ "title": "Cheetah Brown",
+ "handle": "cheetah-brown-wallpaper-graduate-collection",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/IMG-1501_1eec4f1c-a048-47e3-9ff5-cb5966b054b7.jpg?v=1773663602",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/IMG-1501_0ea917fa-2488-405b-a543-2cb32ef2e233.jpg?v=1775762462",
+ "has_room": true,
+ "chapter": "jungle"
+ },
+ {
+ "title": "Visitorian - Taupe",
+ "handle": "visitorian-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_06_Image_0001.jpg?v=1570091053",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2021-10-08at4.01.27PM.png?v=1633734145",
+ "has_room": true,
+ "chapter": "characters"
+ },
+ {
+ "title": "Visitorian Navy",
+ "handle": "visitorian-wallpaper-1",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_06_Image_0002.jpg?v=1570091053",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_06_Image_0002.jpg?v=1570091053",
+ "has_room": false,
+ "chapter": "characters"
+ },
+ {
+ "title": "Visitorian Mauve",
+ "handle": "visitorian-wallpaper-2",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_06_Image_0003.jpg?v=1570091053",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_06_Image_0003.jpg?v=1570091053",
+ "has_room": false,
+ "chapter": "characters"
+ },
+ {
+ "title": "Visitorian Blue",
+ "handle": "visitorian-wallpaper-3",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_06_Image_0004.jpg?v=1570091053",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2021-10-08at3.49.25PM.png?v=1633733413",
+ "has_room": true,
+ "chapter": "characters"
+ },
+ {
+ "title": "Jolly Boy Dog & Friends",
+ "handle": "jolly-boy-friends-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Screenshot2025-05-12at7.30.51AM.png?v=1747060405",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Screenshot2025-05-12at7.31.36AM.png?v=1747060363",
+ "has_room": true,
+ "chapter": "characters"
+ },
+ {
+ "title": "Steampunk Notice Board",
+ "handle": "steampunk-notice-board-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_07_Image_0002.jpg?v=1612388486",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/QqjaFxcfRPyeCGYhD9G3_steampunk_notice_board_insitu_grande_7d8d9494-189c-43cb-9488-24944ce782b8.jpg?v=1612388487",
+ "has_room": true,
+ "chapter": "characters"
+ },
+ {
+ "title": "Portarait Gallery Taupe",
+ "handle": "dwc-1001302",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Portarait_Gallery_Taupe_1.jpg?v=1602006843",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Portarait_Gallery_Taupe_1.jpg?v=1602006843",
+ "has_room": false,
+ "chapter": "characters"
+ },
+ {
+ "title": "Dachshund Dog",
+ "handle": "copy-of-dachshund-natural",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/NEWDachshund_NATURAL.jpg?v=1750792583",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DachshundNaturalRoom_dce6601a-c864-4764-b024-8e4d2ac7b818.png?v=1750792583",
+ "has_room": true,
+ "chapter": "characters"
+ },
+ {
+ "title": "Colonel Fox at the Gentleman's Club - Mustard",
+ "handle": "grd-8900-designerwallcoverings-com",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GRD-8900-DesignerWallcoverings-Los-Angeles-1_e3102e92-3911-4763-8ffd-1bb3d218d57e.jpg?v=1730485220",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Gentlemans_Club_Mustard.png?v=1730485289",
+ "has_room": true,
+ "chapter": "characters"
+ },
+ {
+ "title": "Stag Grande - Plum",
+ "handle": "stag-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_17_Image_0002.jpg?v=1570091054",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/stag_plum_offset_grande_7ce7d09c-2260-43df-9408-be0985c14fe0.jpg?v=1570091054",
+ "has_room": true,
+ "chapter": "stags"
+ },
+ {
+ "title": "Stag Grande Teal",
+ "handle": "stag-grande-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_17_Image_0006.jpg?v=1570091054",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Stag_Teal_Large_head_grande_e3b54fee-2979-4805-9de2-145b12fe2eed.jpg?v=1570091054",
+ "has_room": true,
+ "chapter": "stags"
+ },
+ {
+ "title": "Stag Grande Grey",
+ "handle": "stag-grande-wallpaper-1",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_17_Image_0007.jpg?v=1570091054",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ABgIgtqVS3OOiOgAFth3_stag_head_grey_grande_28e10eef-c4f6-4ac0-831d-139f08c675f3.jpg?v=1570091054",
+ "has_room": true,
+ "chapter": "stags"
+ },
+ {
+ "title": "Small Stag Teal",
+ "handle": "small-stag-wallpaper-teal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2021-10-08at3.36.54PM.png?v=1633732668",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Stag_Print_Wallpaper_-_Teal_1024x1024_74130f65-820d-4318-862d-4a3bb0bf93a5.png?v=1730488729",
+ "has_room": true,
+ "chapter": "stags"
+ },
+ {
+ "title": "Dipped In Moonlight Charcoal",
+ "handle": "copy-of-dipped-in-moonlight-charcoal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DippedinMoonlightMetalllicGold_Teal_c272519f-6ae8-4897-b33d-f518c24008df.png?v=1730484627",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DippedinMoonlightMetalllicGold_TealRoom_891a94b2-3962-4f18-b19d-102772052fd7.png?v=1730484627",
+ "has_room": true,
+ "chapter": "stags"
+ },
+ {
+ "title": "Dipped In Moonlight Cream",
+ "handle": "copy-of-dipped-in-moonlight-cream",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DippedinMoonlightMetalllic_Cream_4c873c3d-77ee-4fcf-8900-ad39cdbdfe1c.png?v=1730484621",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DippedinMoonlightMetalllic_CreamRoom_b6207c57-e66f-4645-979e-cb39a415a9fb.png?v=1730484621",
+ "has_room": true,
+ "chapter": "stags"
+ },
+ {
+ "title": "Dipped In Moonlight Teal",
+ "handle": "copy-of-dipped-in-moonlight-teal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DippedinMoonlightMetalllic_Teal_fc6a1852-7e7d-472b-a075-06ef92f14c8a.png?v=1730484615",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DippedinMoonlightMetalllic_TealRoom_cada0f29-52ed-43d3-b40c-4e78c71b3e1e.png?v=1730484615",
+ "has_room": true,
+ "chapter": "stags"
+ }
+]
\ No newline at end of file
diff --git a/data/graduate-with-rooms.json b/data/graduate-with-rooms.json
new file mode 100644
index 0000000..6bb7eb0
--- /dev/null
+++ b/data/graduate-with-rooms.json
@@ -0,0 +1,247 @@
+[
+ {
+ "title": "Savannah Cheetah - Mustard",
+ "handle": "savannah-cheetah-cream",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2021-10-08at2.38.34PM.png?v=1709589603",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2021-10-08at2.44.37PM.png?v=1633729530",
+ "has_room": true
+ },
+ {
+ "title": "Tiger Tiger - In the Jungle - Cream",
+ "handle": "tigers-tigers-tigers-in-the-jungle",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/HOOT-EXPORT-IMAGE-1.jpg?v=1689805112",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/HOOT-EXPORT-IMAGE-7.png?v=1689805112",
+ "has_room": true
+ },
+ {
+ "title": "Tiger Tiger - In the Jungle - Green",
+ "handle": "tigers-tigers-tigers-in-the-jungle-1",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_02_Image_0006.jpg?v=1570091053",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_02_Image_0006.jpg?v=1570091053",
+ "has_room": false
+ },
+ {
+ "title": "Visitorian - Taupe",
+ "handle": "visitorian-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_06_Image_0001.jpg?v=1570091053",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2021-10-08at4.01.27PM.png?v=1633734145",
+ "has_room": true
+ },
+ {
+ "title": "Visitorian Navy",
+ "handle": "visitorian-wallpaper-1",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_06_Image_0002.jpg?v=1570091053",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_06_Image_0002.jpg?v=1570091053",
+ "has_room": false
+ },
+ {
+ "title": "Visitorian Mauve",
+ "handle": "visitorian-wallpaper-2",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_06_Image_0003.jpg?v=1570091053",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_06_Image_0003.jpg?v=1570091053",
+ "has_room": false
+ },
+ {
+ "title": "Visitorian Blue",
+ "handle": "visitorian-wallpaper-3",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_06_Image_0004.jpg?v=1570091053",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2021-10-08at3.49.25PM.png?v=1633733413",
+ "has_room": true
+ },
+ {
+ "title": "Jolly Boy Dog & Friends",
+ "handle": "jolly-boy-friends-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Screenshot2025-05-12at7.30.51AM.png?v=1747060405",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Screenshot2025-05-12at7.31.36AM.png?v=1747060363",
+ "has_room": true
+ },
+ {
+ "title": "Steampunk Notice Board",
+ "handle": "steampunk-notice-board-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_07_Image_0002.jpg?v=1612388486",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/QqjaFxcfRPyeCGYhD9G3_steampunk_notice_board_insitu_grande_7d8d9494-189c-43cb-9488-24944ce782b8.jpg?v=1612388487",
+ "has_room": true
+ },
+ {
+ "title": "Toucan And Bee Catcher",
+ "handle": "toucan-and-bee-catcher-wallpaper-1",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_11_Image_0001.jpg?v=1747080307",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_12_Image_0001.jpg?v=1747080307",
+ "has_room": true
+ },
+ {
+ "title": "Stag Grande - Plum",
+ "handle": "stag-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_17_Image_0002.jpg?v=1570091054",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/stag_plum_offset_grande_7ce7d09c-2260-43df-9408-be0985c14fe0.jpg?v=1570091054",
+ "has_room": true
+ },
+ {
+ "title": "Stag Grande Teal",
+ "handle": "stag-grande-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_17_Image_0006.jpg?v=1570091054",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Stag_Teal_Large_head_grande_e3b54fee-2979-4805-9de2-145b12fe2eed.jpg?v=1570091054",
+ "has_room": true
+ },
+ {
+ "title": "Stag Grande Grey",
+ "handle": "stag-grande-wallpaper-1",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_17_Image_0007.jpg?v=1570091054",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ABgIgtqVS3OOiOgAFth3_stag_head_grey_grande_28e10eef-c4f6-4ac0-831d-139f08c675f3.jpg?v=1570091054",
+ "has_room": true
+ },
+ {
+ "title": "Portarait Gallery Taupe",
+ "handle": "dwc-1001302",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Portarait_Gallery_Taupe_1.jpg?v=1602006843",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Portarait_Gallery_Taupe_1.jpg?v=1602006843",
+ "has_room": false
+ },
+ {
+ "title": "Tiger Cream Bathroom",
+ "handle": "dwc-1001316",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Tiger_Cream_Bathroom_WEB.jpg?v=1602006869",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Tiger_Cream_Bathroom_WEB.jpg?v=1602006869",
+ "has_room": false
+ },
+ {
+ "title": "Savannah Cheetah - Charcoal",
+ "handle": "savannah-cheetah-charcoal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2021-10-08at2.55.41PM.png?v=1633730364",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2021-10-08at2.55.53PM.png?v=1633730385",
+ "has_room": true
+ },
+ {
+ "title": "Small Stag Teal",
+ "handle": "small-stag-wallpaper-teal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2021-10-08at3.36.54PM.png?v=1633732668",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Stag_Print_Wallpaper_-_Teal_1024x1024_74130f65-820d-4318-862d-4a3bb0bf93a5.png?v=1730488729",
+ "has_room": true
+ },
+ {
+ "title": "Tiger And Temple Green",
+ "handle": "tiger-and-temple-green",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/tigertemple.jpg?v=1647024988",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/HOOT-EXPORT-IMAGE-3_0da30cd1-270b-4cf2-b9ff-52402301c972.png?v=1689805062",
+ "has_room": true
+ },
+ {
+ "title": "Botanical Print - Multi",
+ "handle": "jungle-print-wallpaper-multi",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2022-12-07at9.30.07AM.png?v=1670434232",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2022-12-07at9.30.13AM.png?v=1670434236",
+ "has_room": true
+ },
+ {
+ "title": "Savannah Cheetah - Green",
+ "handle": "savannah-cheetah-green",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2024-03-04at1.58.23PM.png?v=1709589538",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2024-03-04at1.58.32PM.png?v=1709589526",
+ "has_room": true
+ },
+ {
+ "title": "All Over Leopard - Blue",
+ "handle": "copy-of-exotic-tiger-wallpaper-charcoal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AlloverLeopardCharcoal.png?v=1709835248",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AlloverLeopardCharcoalRoom.png?v=1709835248",
+ "has_room": true
+ },
+ {
+ "title": "All Over Leopard Blue",
+ "handle": "copy-of-all-over-leopard-blue",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Screenshot2025-06-24at12.37.36PM.png?v=1750793883",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AlloverLeopardCharcoalRoom_e9a4799e-903c-417e-99b9-158270cc5cfd.png?v=1750793863",
+ "has_room": true
+ },
+ {
+ "title": "All Over Leopard Charcoal",
+ "handle": "copy-of-all-over-leopard-charcoal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Screenshot2025-06-24at12.36.31PM.png?v=1750793823",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Screenshot2025-06-24at12.36.55PM.png?v=1750793822",
+ "has_room": true
+ },
+ {
+ "title": "Dipped In Moonlight Charcoal",
+ "handle": "copy-of-dipped-in-moonlight-charcoal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DippedinMoonlightMetalllicGold_Teal_c272519f-6ae8-4897-b33d-f518c24008df.png?v=1730484627",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DippedinMoonlightMetalllicGold_TealRoom_891a94b2-3962-4f18-b19d-102772052fd7.png?v=1730484627",
+ "has_room": true
+ },
+ {
+ "title": "Dipped In Moonlight Cream",
+ "handle": "copy-of-dipped-in-moonlight-cream",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DippedinMoonlightMetalllic_Cream_4c873c3d-77ee-4fcf-8900-ad39cdbdfe1c.png?v=1730484621",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DippedinMoonlightMetalllic_CreamRoom_b6207c57-e66f-4645-979e-cb39a415a9fb.png?v=1730484621",
+ "has_room": true
+ },
+ {
+ "title": "Dipped In Moonlight Teal",
+ "handle": "copy-of-dipped-in-moonlight-teal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DippedinMoonlightMetalllic_Teal_fc6a1852-7e7d-472b-a075-06ef92f14c8a.png?v=1730484615",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DippedinMoonlightMetalllic_TealRoom_cada0f29-52ed-43d3-b40c-4e78c71b3e1e.png?v=1730484615",
+ "has_room": true
+ },
+ {
+ "title": "Dachshund Dog",
+ "handle": "copy-of-dachshund-natural",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/NEWDachshund_NATURAL.jpg?v=1750792583",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DachshundNaturalRoom_dce6601a-c864-4764-b024-8e4d2ac7b818.png?v=1750792583",
+ "has_room": true
+ },
+ {
+ "title": "Monkey Biz Black",
+ "handle": "copy-of-monkey-biz-black",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/MonkeyBusiness_0b1e2f1a-e83e-4f96-b1c3-33bce1010512.png?v=1730484572",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/MonkeyBusinessroom_d9231a22-384b-42eb-a621-f7f54c466978.png?v=1730484572",
+ "has_room": true
+ },
+ {
+ "title": "Monkey Biz Pink",
+ "handle": "copy-of-monkey-biz-pink",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/MonkeyBusinessPink_00e8571a-3065-4a60-a714-02ab08fb557e.png?v=1730484563",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/MonkeyBusinessPinkRoom_a42f3647-a226-409a-8caf-7f501ea535b6.png?v=1730484563",
+ "has_room": true
+ },
+ {
+ "title": "On Safari Cream",
+ "handle": "on-safari-cream-wallpaper-the-graduate-collection",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/OnSafariCream_45b24b2f-3605-4ab2-9408-b9be2a5f43e9.png?v=1730484553",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/OnSafariCream_45b24b2f-3605-4ab2-9408-b9be2a5f43e9.png?v=1730484553",
+ "has_room": false
+ },
+ {
+ "title": "Colonel Fox at the Gentleman's Club - Mustard",
+ "handle": "grd-8900-designerwallcoverings-com",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GRD-8900-DesignerWallcoverings-Los-Angeles-1_e3102e92-3911-4763-8ffd-1bb3d218d57e.jpg?v=1730485220",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Gentlemans_Club_Mustard.png?v=1730485289",
+ "has_room": true
+ },
+ {
+ "title": "All Over Leopard - Aubergine",
+ "handle": "all-over-leopard-aubergine-graduate-collection",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/B48C9B51-6F0D-4973-985F-992BBF14F800.jpg?v=1772164893",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/A902549B-ECE0-4410-8226-32E31F07196B.jpg?v=1772164893",
+ "has_room": true
+ },
+ {
+ "title": "All Over Leopard - Brown",
+ "handle": "all-over-leopard-brown-graduate-collection",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/80F7ADF4-D400-4D78-89E2-E8024E0C12EB.jpg?v=1772164915",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/9B0CD372-BE5E-4886-9E91-0574F2BADC00.jpg?v=1772164915",
+ "has_room": true
+ },
+ {
+ "title": "Cheetah - Brown",
+ "handle": "cheetah-brown-graduate-collection",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/IMG-1501.jpg?v=1772164931",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/3E800CF2-DCD4-4AF0-A7D9-344DB9DD0CDB.jpg?v=1772164931",
+ "has_room": true
+ },
+ {
+ "title": "Cheetah Brown",
+ "handle": "cheetah-brown-wallpaper-graduate-collection",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/IMG-1501_1eec4f1c-a048-47e3-9ff5-cb5966b054b7.jpg?v=1773663602",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/IMG-1501_0ea917fa-2488-405b-a543-2cb32ef2e233.jpg?v=1775762462",
+ "has_room": true
+ }
+]
\ No newline at end of file
diff --git a/flipbooks/graduate-collection/STORYBOARD.md b/flipbooks/graduate-collection/STORYBOARD.md
new file mode 100644
index 0000000..db5ef01
--- /dev/null
+++ b/flipbooks/graduate-collection/STORYBOARD.md
@@ -0,0 +1,63 @@
+---
+format: 1920x1080
+message: The Graduate Collection is a maximalist British storybook of a wallpaper line — 35 patterns you leaf through like a designer's lookbook.
+arc: Invitation → Leaf-through reveal (chaptered) → Shop the collection
+audience: Interior designers and maximalist-leaning retail shoppers browsing marketing.dw
+---
+
+## Frame 1 — Cover
+- duration: 1.7s
+- transition_in: fade
+- status: outline
+- src: compositions/frames/01-cover.html
+
+A closed-book title card on a warm dark ground. Kicker "DESIGNER WALLCOVERINGS PRESENTS", serif hero "Graduate Collection", hairline rule, subtitle "London · Maximalist British Wallpaper". No narration — sets the lookbook tone before the book opens.
+
+## Frame 2 — Into the Jungle
+- duration: 9s
+- transition_in: book-open
+- status: outline
+- src: compositions/frames/02-jungle.html
+
+The book opens and pages begin turning. Chapter one riffles the collection's boldest run — Tiger Tiger, Savannah Cheetah, All Over Leopard, Toucan & Bee Catcher, Tiger & Temple, On Safari, Monkey Biz — each recto showing the pattern full-bleed with its name in serif beneath. Roughly one page every ~0.6s, with a brief linger on the two Tiger Tiger colourways as heroes.
+
+## Frame 3 — Characters & Curiosities
+- duration: 6.5s
+- transition_in: page-turn
+- status: outline
+- src: compositions/frames/03-characters.html
+
+The riffle continues into the collection's storybook side — the four Visitorian portrait colourways, Jolly Boy Dog & Friends, Dachshund Dog, Colonel Fox at the Gentleman's Club, Steampunk Notice Board, Portrait Gallery. Same cadence; the whimsy carries the middle of the film.
+
+## Frame 4 — Stags & Moonlight
+- duration: 5s
+- transition_in: page-turn
+- status: outline
+- src: compositions/frames/04-stags.html
+
+Final run of turns settles the mood — the three Stag Grande colourways, Small Stag, and the Dipped in Moonlight trio. Heraldic and nocturnal, a calmer close to the reveal before the hold.
+
+## Frame 5 — Hero hold
+- duration: 2s
+- transition_in: settle
+- status: outline
+- src: compositions/frames/05-hero-hold.html
+
+The turning stops on one showstopper spread (Tiger Tiger – Green) held full and still for a breath — a slow ~1.04 push-in on the art — so the eye rests on a single flagship pattern before the call to action.
+
+## Frame 6 — Shop the collection
+- duration: 2.2s
+- transition_in: crossfade
+- status: outline
+- src: compositions/frames/06-outro.html
+
+The book fades to a warm dark outro card: kicker "SHOP THE COLLECTION", serif "Graduate Collection", and the URL designerwallcoverings.com. The single CTA that sends the viewer to the live product pages.
+
+<!--
+Build note: the final piece is one continuous page-turn book (35 stacked leaves,
+transform-origin at the spine, opaque faces = correct occlusion). Frames 2–4 are
+the CHAPTERS of that single timeline — the leaf order is regrouped by theme
+(jungle → characters → stags) rather than catalog order. Generated by
+scripts/build-collection-flipbook.mjs; the sketch pass wireframes each chapter's
+key moment as a poster for board review.
+-->
diff --git a/flipbooks/graduate-collection/audio.json b/flipbooks/graduate-collection/audio.json
new file mode 100644
index 0000000..270b7d7
--- /dev/null
+++ b/flipbooks/graduate-collection/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": "+6" },
+ { "src": "assets/audio/vo3.wav", "anchor": "chapter:characters" },
+ { "src": "assets/audio/vo4.wav", "anchor": "chapter:stags" },
+ { "src": "assets/audio/vo5.wav", "anchor": "hold" },
+ { "src": "assets/audio/vo6.wav", "anchor": "outro" }
+ ]
+}
diff --git a/flipbooks/graduate-collection/index.html b/flipbooks/graduate-collection/index.html
index e5a22e0..e0dfb34 100644
--- a/flipbooks/graduate-collection/index.html
+++ b/flipbooks/graduate-collection/index.html
@@ -1,573 +1,750 @@
-<!doctype html>
+<!DOCTYPE html>
<html lang="en" data-resolution="landscape">
<head>
-<meta charset="UTF-8" />
+<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 70%);
+ 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:2600px; perspective-origin:50% 46%; }
+ .stage { position:absolute; inset:0; perspective:3000px; perspective-origin:50% 46%; }
- /* left static page (the book's verso) */
- .verso { position:absolute; top:97px; left:290px; width:670px; height:886px;
- background:var(--paper); border-radius:6px 2px 2px 6px;
- box-shadow: inset -28px 0 44px rgba(0,0,0,.10), 0 30px 60px rgba(0,0,0,.45);
- display:flex; align-items:center; justify-content:center; }
- .verso .spinemark { font-family:Georgia, serif; color:#cbb48f;
- writing-mode:vertical-rl; font-size:34px; letter-spacing:.28em; text-transform:uppercase; opacity:.6; }
+ /* 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; }
- /* stacked flipping leaves — pinned at the spine */
- .leaf { position:absolute; top:97px; left:960px; width:670px; height:886px;
- transform-origin:left center; transform-style:preserve-3d; will-change:transform;
- border-radius:2px 6px 6px 2px; }
- .leaf .face { position:absolute; inset:0; backface-visibility:hidden; overflow:hidden;
- border-radius:2px 6px 6px 2px; background:var(--paper);
- box-shadow: 20px 26px 50px rgba(0,0,0,.40), inset 22px 0 40px rgba(0,0,0,.08); }
- .leaf .front { }
- .leaf .back { transform:rotateY(180deg); background:
- linear-gradient(90deg,#efe9dc, #fbf8f1 22%);
- box-shadow: -20px 26px 50px rgba(0,0,0,.35), inset -22px 0 40px rgba(0,0,0,.08); }
- .leaf .art { position:absolute; left:0; top:0; width:100%; height:78%; object-fit:cover; }
- .leaf .cap { position:absolute; left:0; right:0; bottom:0; height:22%; padding:0 34px;
- display:flex; flex-direction:column; justify-content:center; background:var(--paper); }
- .leaf .cap .pat { font-family:Georgia, serif; font-size:42px;
- line-height:1.04; color:var(--ink); }
- .leaf .cap .col { margin-top:8px; font-size:19px; letter-spacing:.22em;
- text-transform:uppercase; color:var(--gold); }
- .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) 60%); }
+ /* 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:33px; letter-spacing:.44em; text-transform:uppercase; color:var(--gold); }
- .card .big { font-family:Georgia, serif; font-size:138px; line-height:1.0; margin:22px 60px; }
- .card .sub { font-size:36px; letter-spacing:.18em; text-transform:uppercase; color:#c9bfae; }
- .card .rule { width:120px; height:2px; background:var(--gold); margin:34px 0; }
- .card .url { margin-top:30px; font-size:33px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); }
+ .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="28.7">
+ <div data-hf-id="hf-dj4a" id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="41">
- <!-- cover -->
- <div class="card" id="cover">
- <div class="kicker">Designer Wallcoverings presents</div>
- <div class="big">Graduate Collection</div>
- <div class="rule"></div>
- <div class="sub">London · Maximalist British Wallpaper</div>
+ <div data-hf-id="hf-t48p" class="card" id="cover">
+ <div data-hf-id="hf-8ss8" class="kicker">Designer Wallcoverings presents</div>
+ <div data-hf-id="hf-rocx" class="big">Graduate Collection</div>
+ <div data-hf-id="hf-a46i" class="rule"></div>
+ <div data-hf-id="hf-d7ol" class="sub">London · Maximalist British Wallpaper</div>
</div>
- <div class="stage" id="stage">
- <div class="verso"><div class="spinemark">Graduate Collection</div></div>
+ <div data-hf-id="hf-lp42" class="stage" id="stage">
+ <div data-hf-id="hf-lu5p" class="verso">
+ <div data-hf-id="hf-cb03" class="wordmark"><div data-hf-id="hf-68tn" class="wm">Designer Wallcoverings</div><div data-hf-id="hf-i20x" class="wsub">est. lookbook</div><div data-hf-id="hf-qmxb" class="wr"></div></div>
+ <div data-hf-id="hf-63nz" class="roomstack">
+ <div data-hf-id="hf-ce2m" class="room" id="room0">
+ <img data-hf-id="hf-0n0p" class="rimg" src="assets/room/r0.jpg" alt="Savannah Cheetah - Mustard room">
+ <div data-hf-id="hf-p81p" class="rtint"></div>
+ <div data-hf-id="hf-az76" class="rcap"><div data-hf-id="hf-vwxa" class="rpat">Savannah Cheetah - Mustard</div><div data-hf-id="hf-0mhf" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-ijsf" class="room" id="room1">
+ <img data-hf-id="hf-j4ly" class="rimg" src="assets/room/r1.jpg" alt="Tiger Tiger - In the Jungle - Cream room">
+ <div data-hf-id="hf-xt01" class="rtint"></div>
+ <div data-hf-id="hf-ezxy" class="rcap"><div data-hf-id="hf-nqjg" class="rpat">Tiger Tiger - In the Jungle - Cream</div><div data-hf-id="hf-scab" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-epvk" class="room fallback" id="room2">
+ <img data-hf-id="hf-wys4" class="rimg" src="assets/room/r2.jpg" alt="Tiger Tiger - In the Jungle - Green room">
+ <div data-hf-id="hf-yzx4" class="rtint"></div>
+ <div data-hf-id="hf-fe8z" class="rcap"><div data-hf-id="hf-evj9" class="rpat">Tiger Tiger - In the Jungle - Green</div><div data-hf-id="hf-rxza" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-8fyl" class="room" id="room3">
+ <img data-hf-id="hf-msmu" class="rimg" src="assets/room/r3.jpg" alt="Toucan And Bee Catcher room">
+ <div data-hf-id="hf-ylm3" class="rtint"></div>
+ <div data-hf-id="hf-fsk0" class="rcap"><div data-hf-id="hf-x326" class="rpat">Toucan And Bee Catcher</div><div data-hf-id="hf-rjo9" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-6tni" class="room fallback" id="room4">
+ <img data-hf-id="hf-29qz" class="rimg" src="assets/room/r4.jpg" alt="Tiger Cream Bathroom room">
+ <div data-hf-id="hf-wm2y" class="rtint"></div>
+ <div data-hf-id="hf-d0et" class="rcap"><div data-hf-id="hf-ousw" class="rpat">Tiger Cream Bathroom</div><div data-hf-id="hf-r5d8" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-v5sb" class="room" id="room5">
+ <img data-hf-id="hf-vaip" class="rimg" src="assets/room/r5.jpg" alt="Savannah Cheetah - Charcoal room">
+ <div data-hf-id="hf-w7rx" class="rtint"></div>
+ <div data-hf-id="hf-depu" class="rcap"><div data-hf-id="hf-qur7" class="rpat">Savannah Cheetah - Charcoal</div><div data-hf-id="hf-qr27" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-mhwg" class="room" id="room6">
+ <img data-hf-id="hf-3as4" class="rimg" src="assets/room/r6.jpg" alt="Tiger And Temple Green room">
+ <div data-hf-id="hf-xep0" class="rtint"></div>
+ <div data-hf-id="hf-dt0v" class="rcap"><div data-hf-id="hf-r0bt" class="rpat">Tiger And Temple Green</div><div data-hf-id="hf-qcr6" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-n9k9" class="room" id="room7">
+ <img data-hf-id="hf-8q2p" class="rimg" src="assets/room/r7.jpg" alt="Botanical Print - Multi room">
+ <div data-hf-id="hf-x0dz" class="rtint"></div>
+ <div data-hf-id="hf-e7bw" class="rcap"><div data-hf-id="hf-fvq9" class="rpat">Botanical Print - Multi</div><div data-hf-id="hf-pyg5" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-619y" class="room" id="room8">
+ <img data-hf-id="hf-li28" class="rimg" src="assets/room/r8.jpg" alt="Savannah Cheetah - Green room">
+ <div data-hf-id="hf-1dra" class="rtint"></div>
+ <div data-hf-id="hf-bf6p" class="rcap"><div data-hf-id="hf-wwej" class="rpat">Savannah Cheetah - Green</div><div data-hf-id="hf-pk54" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-9zdz" class="room" id="room9">
+ <img data-hf-id="hf-ca72" class="rimg" src="assets/room/r9.jpg" alt="All Over Leopard - Blue room">
+ <div data-hf-id="hf-0zg9" class="rtint"></div>
+ <div data-hf-id="hf-bthq" class="rcap"><div data-hf-id="hf-uzlw" class="rpat">All Over Leopard - Blue</div><div data-hf-id="hf-p5u3" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-kvd1" class="room" id="room10">
+ <img data-hf-id="hf-zh6r" class="rimg" src="assets/room/r10.jpg" alt="All Over Leopard Blue room">
+ <div data-hf-id="hf-ipkj" class="rtint"></div>
+ <div data-hf-id="hf-bub6" class="rcap"><div data-hf-id="hf-eid9" class="rpat">All Over Leopard Blue</div><div data-hf-id="hf-boah" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-k3p8" class="room" id="room11">
+ <img data-hf-id="hf-5kyf" class="rimg" src="assets/room/r11.jpg" alt="All Over Leopard Charcoal room">
+ <div data-hf-id="hf-j3vk" class="rtint"></div>
+ <div data-hf-id="hf-bg05" class="rcap"><div data-hf-id="hf-ubia" class="rpat">All Over Leopard Charcoal</div><div data-hf-id="hf-c2li" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-srl3" class="room" id="room12">
+ <img data-hf-id="hf-tajw" class="rimg" src="assets/room/r12.jpg" alt="Monkey Biz Black room">
+ <div data-hf-id="hf-hwyh" class="rtint"></div>
+ <div data-hf-id="hf-cmx8" class="rcap"><div data-hf-id="hf-9qby" class="rpat">Monkey Biz Black</div><div data-hf-id="hf-cgwj" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-oth2" class="room" id="room13">
+ <img data-hf-id="hf-8zey" class="rimg" src="assets/room/r13.jpg" alt="Monkey Biz Pink room">
+ <div data-hf-id="hf-ib9i" class="rtint"></div>
+ <div data-hf-id="hf-c8m7" class="rcap"><div data-hf-id="hf-vmcv" class="rpat">Monkey Biz Pink</div><div data-hf-id="hf-cv7k" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-1mm5" class="room fallback" id="room14">
+ <img data-hf-id="hf-mg3e" class="rimg" src="assets/room/r14.jpg" alt="On Safari Cream room">
+ <div data-hf-id="hf-h4cf" class="rtint"></div>
+ <div data-hf-id="hf-dfja" class="rcap"><div data-hf-id="hf-evla" class="rpat">On Safari Cream</div><div data-hf-id="hf-a32d" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-wpp4" class="room" id="room15">
+ <img data-hf-id="hf-x8pj" class="rimg" src="assets/room/r15.jpg" alt="All Over Leopard - Aubergine room">
+ <div data-hf-id="hf-hing" class="rtint"></div>
+ <div data-hf-id="hf-d189" class="rcap"><div data-hf-id="hf-xe5y" class="rpat">All Over Leopard - Aubergine</div><div data-hf-id="hf-ahde" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-7l6r" class="room" id="room16">
+ <img data-hf-id="hf-7dga" class="rimg" src="assets/room/r16.jpg" alt="All Over Leopard - Brown room">
+ <div data-hf-id="hf-gbqd" class="rtint"></div>
+ <div data-hf-id="hf-e85c" class="rcap"><div data-hf-id="hf-oxok" class="rpat">All Over Leopard - Brown</div><div data-hf-id="hf-avof" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-3n2q" class="room" id="room17">
+ <img data-hf-id="hf-ifqx" class="rimg" src="assets/room/r17.jpg" alt="Cheetah - Brown room">
+ <div data-hf-id="hf-gq1e" class="rtint"></div>
+ <div data-hf-id="hf-dtub" class="rcap"><div data-hf-id="hf-vm82" class="rpat">Cheetah - Brown</div><div data-hf-id="hf-b9zg" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-tfrh" class="room" id="room18">
+ <img data-hf-id="hf-yy1n" class="rimg" src="assets/room/r18.jpg" alt="Cheetah Brown room">
+ <div data-hf-id="hf-fj4b" class="rtint"></div>
+ <div data-hf-id="hf-8nuy" class="rcap"><div data-hf-id="hf-4unh" class="rpat">Cheetah Brown</div><div data-hf-id="hf-8hu9" class="rcol">Graduate Collection · jungle</div></div>
+ </div>
+ <div data-hf-id="hf-so3o" class="room" id="room19">
+ <img data-hf-id="hf-392m" class="rimg" src="assets/room/r19.jpg" alt="Visitorian - Taupe room">
+ <div data-hf-id="hf-fxfc" class="rtint"></div>
+ <div data-hf-id="hf-89jx" class="rcap"><div data-hf-id="hf-8gxx" class="rpat">Visitorian - Taupe</div><div data-hf-id="hf-xtx2" class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div data-hf-id="hf-930o" class="room fallback" id="room20">
+ <img data-hf-id="hf-lulu" class="rimg" src="assets/room/r20.jpg" alt="Visitorian Navy room">
+ <div data-hf-id="hf-ijzs" class="rtint"></div>
+ <div data-hf-id="hf-b2nd" class="rcap"><div data-hf-id="hf-g1s9" class="rpat">Visitorian Navy</div><div data-hf-id="hf-puze" class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div data-hf-id="hf-9uoh" class="room fallback" id="room21">
+ <img data-hf-id="hf-a9y5" class="rimg" src="assets/room/r21.jpg" alt="Visitorian Mauve room">
+ <div data-hf-id="hf-i5or" class="rtint"></div>
+ <div data-hf-id="hf-bgye" class="rcap"><div data-hf-id="hf-avbv" class="rpat">Visitorian Mauve</div><div data-hf-id="hf-q9af" class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div data-hf-id="hf-ghji" class="room" id="room22">
+ <img data-hf-id="hf-5ono" class="rimg" src="assets/room/r22.jpg" alt="Visitorian Blue room">
+ <div data-hf-id="hf-hrdq" class="rtint"></div>
+ <div data-hf-id="hf-bv9f" class="rcap"><div data-hf-id="hf-n0d1" class="rpat">Visitorian Blue</div><div data-hf-id="hf-qnlg" class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div data-hf-id="hf-kfnj" class="room" id="room23">
+ <img data-hf-id="hf-g7qs" class="rimg" src="assets/room/r23.jpg" alt="Jolly Boy Dog & Friends room">
+ <div data-hf-id="hf-hd2p" class="rtint"></div>
+ <div data-hf-id="hf-c9kg" class="rcap"><div data-hf-id="hf-9f0e" class="rpat">Jolly Boy Dog & Friends</div><div data-hf-id="hf-r1wh" class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div data-hf-id="hf-odrk" class="room" id="room24">
+ <img data-hf-id="hf-xrda" class="rimg" src="assets/room/r24.jpg" alt="Steampunk Notice Board room">
+ <div data-hf-id="hf-gyro" class="rtint"></div>
+ <div data-hf-id="hf-9hf9" class="rcap"><div data-hf-id="hf-edn5" class="rpat">Steampunk Notice Board</div><div data-hf-id="hf-rg7i" class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div data-hf-id="hf-v12t" class="room fallback" id="room25">
+ <img data-hf-id="hf-twvy" class="rimg" src="assets/room/r25.jpg" alt="Portarait Gallery Taupe room">
+ <div data-hf-id="hf-gkgn" class="rtint"></div>
+ <div data-hf-id="hf-9vqa" class="rcap"><div data-hf-id="hf-bo6q" class="rpat">Portarait Gallery Taupe</div><div data-hf-id="hf-ruij" class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div data-hf-id="hf-vb56" class="room" id="room26">
+ <img data-hf-id="hf-gkyo" class="rimg" src="assets/room/r26.jpg" alt="Dachshund Dog room">
+ <div data-hf-id="hf-g65m" class="rtint"></div>
+ <div data-hf-id="hf-aa1b" class="rcap"><div data-hf-id="hf-5xr9" class="rpat">Dachshund Dog</div><div data-hf-id="hf-s8tk" class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div data-hf-id="hf-z997" class="room" id="room27">
+ <img data-hf-id="hf-je0q" class="rimg" src="assets/room/r27.jpg" alt="Colonel Fox at the Gentleman's Club - Mustard room">
+ <div data-hf-id="hf-frul" class="rtint"></div>
+ <div data-hf-id="hf-aocc" class="rcap"><div data-hf-id="hf-itew" class="rpat">Colonel Fox at the Gentleman's Club - Mustard</div><div data-hf-id="hf-sn4l" class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div data-hf-id="hf-37d8" class="room" id="room28">
+ <img data-hf-id="hf-4hvf" class="rimg" src="assets/room/r28.jpg" alt="Stag Grande - Plum room">
+ <div data-hf-id="hf-lqg0" class="rtint"></div>
+ <div data-hf-id="hf-7w75" class="rcap"><div data-hf-id="hf-u1ji" class="rpat">Stag Grande - Plum</div><div data-hf-id="hf-5p02" class="rcol">Graduate Collection · stags</div></div>
+ </div>
+ <div data-hf-id="hf-3z11" class="room" id="room29">
+ <img data-hf-id="hf-ekh1" class="rimg" src="assets/room/r29.jpg" alt="Stag Grande Teal room">
+ <div data-hf-id="hf-lc4z" class="rtint"></div>
+ <div data-hf-id="hf-8ai6" class="rcap"><div data-hf-id="hf-vo2r" class="rpat">Stag Grande Teal</div><div data-hf-id="hf-gs2e" class="rcol">Graduate Collection · stags</div></div>
+ </div>
+ <div data-hf-id="hf-zmtr" class="room" id="room30">
+ <img data-hf-id="hf-w3iw" class="rimg" src="assets/room/r30.jpg" alt="Stag Grande Grey room">
+ <div data-hf-id="hf-jbnl" class="rtint"></div>
+ <div data-hf-id="hf-aazk" class="rcap"><div data-hf-id="hf-l602" class="rpat">Stag Grande Grey</div><div data-hf-id="hf-h6df" class="rcol">Graduate Collection · stags</div></div>
+ </div>
+ <div data-hf-id="hf-vopq" class="room" id="room31">
+ <img data-hf-id="hf-3rkq" class="rimg" src="assets/room/r31.jpg" alt="Small Stag Teal room">
+ <div data-hf-id="hf-jpym" class="rtint"></div>
+ <div data-hf-id="hf-9woj" class="rcap"><div data-hf-id="hf-nbwb" class="rpat">Small Stag Teal</div><div data-hf-id="hf-hkog" class="rcol">Graduate Collection · stags</div></div>
+ </div>
+ <div data-hf-id="hf-rqlp" class="room" id="room32">
+ <img data-hf-id="hf-sw54" class="rimg" src="assets/room/r32.jpg" alt="Dipped In Moonlight Charcoal room">
+ <div data-hf-id="hf-k49n" class="rtint"></div>
+ <div data-hf-id="hf-9idi" class="rcap"><div data-hf-id="hf-an08" class="rpat">Dipped In Moonlight Charcoal</div><div data-hf-id="hf-esj9" class="rcol">Graduate Collection · stags</div></div>
+ </div>
+ <div data-hf-id="hf-orc4" class="room" id="room33">
+ <img data-hf-id="hf-eu9o" class="rimg" src="assets/room/r33.jpg" alt="Dipped In Moonlight Cream room">
+ <div data-hf-id="hf-kiko" class="rtint"></div>
+ <div data-hf-id="hf-942h" class="rcap"><div data-hf-id="hf-oskn" class="rpat">Dipped In Moonlight Cream</div><div data-hf-id="hf-f6ua" class="rcol">Graduate Collection · stags</div></div>
+ </div>
+ <div data-hf-id="hf-c8tn" class="room" id="room34">
+ <img data-hf-id="hf-77b5" class="rimg" src="assets/room/r34.jpg" alt="Dipped In Moonlight Teal room">
+ <div data-hf-id="hf-hqfh" class="rtint"></div>
+ <div data-hf-id="hf-8prg" class="rcap"><div data-hf-id="hf-i2px" class="rpat">Dipped In Moonlight Teal</div><div data-hf-id="hf-fl5b" class="rcol">Graduate Collection · stags</div></div>
+ </div>
+ </div>
+ </div>
- <div class="leaf" id="leaf0">
- <div class="face front">
- <img class="art" src="assets/img/p0.jpg" alt="Savannah Cheetah - Mustard" />
- <div class="cap"><div class="pat">Savannah Cheetah - Mustard</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-94su" class="leaf" id="leaf0">
+ <div data-hf-id="hf-d62e" class="face front"><img data-hf-id="hf-gi12" class="art" src="assets/img/p0.jpg" alt="Savannah Cheetah - Mustard"><div data-hf-id="hf-q0n7" class="shade"></div></div>
+ <div data-hf-id="hf-yq90" class="face back"></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="Tiger Tiger - In the Jungle - Cream" />
- <div class="cap"><div class="pat">Tiger Tiger - In the Jungle - Cream</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-d2wv" class="leaf" id="leaf1">
+ <div data-hf-id="hf-d74q" class="face front"><img data-hf-id="hf-26kt" class="art" src="assets/img/p1.jpg" alt="Tiger Tiger - In the Jungle - Cream"><div data-hf-id="hf-iber" class="shade"></div></div>
+ <div data-hf-id="hf-6pzw" class="face back"></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="Tiger Tiger - In the Jungle - Green" />
- <div class="cap"><div class="pat">Tiger Tiger - In the Jungle - Green</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-27f8" class="leaf" id="leaf2">
+ <div data-hf-id="hf-dlfr" class="face front"><img data-hf-id="hf-qz1x" class="art" src="assets/img/p2.jpg" alt="Tiger Tiger - In the Jungle - Green"><div data-hf-id="hf-hx3q" class="shade"></div></div>
+ <div data-hf-id="hf-5j2t" class="face back"></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="Visitorian - Taupe" />
- <div class="cap"><div class="pat">Visitorian - Taupe</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-2z31" class="leaf" id="leaf3">
+ <div data-hf-id="hf-dzqs" class="face front"><img data-hf-id="hf-h921" class="art" src="assets/img/p3.jpg" alt="Toucan And Bee Catcher"><div data-hf-id="hf-hisp" class="shade"></div></div>
+ <div data-hf-id="hf-5xdu" class="face back"></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="Visitorian Navy" />
- <div class="cap"><div class="pat">Visitorian Navy</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-lqsq" class="leaf" id="leaf4">
+ <div data-hf-id="hf-ee1t" class="face front"><img data-hf-id="hf-snp4" class="art" src="assets/img/p4.jpg" alt="Tiger Cream Bathroom"><div data-hf-id="hf-h4ho" class="shade"></div></div>
+ <div data-hf-id="hf-7wwz" class="face back"></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="Visitorian Mauve" />
- <div class="cap"><div class="pat">Visitorian Mauve</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-powr" class="leaf" id="leaf5">
+ <div data-hf-id="hf-escu" class="face front"><img data-hf-id="hf-xvpk" class="art" src="assets/img/p5.jpg" alt="Savannah Cheetah - Charcoal"><div data-hf-id="hf-gq6n" class="shade"></div></div>
+ <div data-hf-id="hf-8b80" class="face back"></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="Visitorian Blue" />
- <div class="cap"><div class="pat">Visitorian Blue</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-h10w" class="leaf" id="leaf6">
+ <div data-hf-id="hf-f6nv" class="face front"><img data-hf-id="hf-cpct" class="art" src="assets/img/p6.jpg" alt="Tiger And Temple Green"><div data-hf-id="hf-gbvm" class="shade"></div></div>
+ <div data-hf-id="hf-74ax" class="face back"></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="Jolly Boy Dog & Friends" />
- <div class="cap"><div class="pat">Jolly Boy Dog & Friends</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-hsop" class="leaf" id="leaf7">
+ <div data-hf-id="hf-fkyw" class="face front"><img data-hf-id="hf-tggg" class="art" src="assets/img/p7.jpg" alt="Botanical Print - Multi"><div data-hf-id="hf-fxkl" class="shade"></div></div>
+ <div data-hf-id="hf-7ily" class="face back"></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="Steampunk Notice Board" />
- <div class="cap"><div class="pat">Steampunk Notice Board</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-0kee" class="leaf" id="leaf8">
+ <div data-hf-id="hf-fz9x" class="face front"><img data-hf-id="hf-3eix" class="art" src="assets/img/p8.jpg" alt="Savannah Cheetah - Green"><div data-hf-id="hf-fj9k" class="shade"></div></div>
+ <div data-hf-id="hf-358n" class="face back"></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="Toucan And Bee Catcher" />
- <div class="cap"><div class="pat">Toucan And Bee Catcher</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-4iif" class="leaf" id="leaf9">
+ <div data-hf-id="hf-gdky" class="face front"><img data-hf-id="hf-vqph" class="art" src="assets/img/p9.jpg" alt="All Over Leopard - Blue"><div data-hf-id="hf-f4yj" class="shade"></div></div>
+ <div data-hf-id="hf-3jjo" class="face back"></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="Stag Grande - Plum" />
- <div class="cap"><div class="pat">Stag Grande - Plum</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-vmj9" class="leaf" id="leaf10">
+ <div data-hf-id="hf-57tq" class="face front"><img data-hf-id="hf-xiz4" class="art" src="assets/img/p10.jpg" alt="All Over Leopard Blue"><div data-hf-id="hf-j9c9" class="shade"></div></div>
+ <div data-hf-id="hf-624k" class="face back"></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="Stag Grande Teal" />
- <div class="cap"><div class="pat">Stag Grande Teal</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-sn9o" class="leaf" id="leaf11">
+ <div data-hf-id="hf-4tip" class="face front"><img data-hf-id="hf-3fre" class="art" src="assets/img/p11.jpg" alt="All Over Leopard Charcoal"><div data-hf-id="hf-jnna" class="shade"></div></div>
+ <div data-hf-id="hf-5ntj" class="face back"></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="Stag Grande Grey" />
- <div class="cap"><div class="pat">Stag Grande Grey</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-3irb" class="leaf" id="leaf12">
+ <div data-hf-id="hf-60fs" class="face front"><img data-hf-id="hf-xggx" class="art" src="assets/img/p12.jpg" alt="Monkey Biz Black"><div data-hf-id="hf-k1yb" class="shade"></div></div>
+ <div data-hf-id="hf-59ii" class="face back"></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="Portarait Gallery Taupe | The Graduate Collection" />
- <div class="cap"><div class="pat">Portarait Gallery Taupe | The Graduate Collection</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-zkna" class="leaf" id="leaf13">
+ <div data-hf-id="hf-5m4r" class="face front"><img data-hf-id="hf-rwul" class="art" src="assets/img/p13.jpg" alt="Monkey Biz Pink"><div data-hf-id="hf-kg9c" class="shade"></div></div>
+ <div data-hf-id="hf-4v7h" class="face back"></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="Tiger Cream Bathroom | The Graduate Collection" />
- <div class="cap"><div class="pat">Tiger Cream Bathroom | The Graduate Collection</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-88j5" class="leaf" id="leaf14">
+ <div data-hf-id="hf-3mlm" class="face front"><img data-hf-id="hf-jjtz" class="art" src="assets/img/p14.jpg" alt="On Safari Cream"><div data-hf-id="hf-ho45" class="shade"></div></div>
+ <div data-hf-id="hf-7nco" class="face back"></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="Savannah Cheetah - Charcoal" />
- <div class="cap"><div class="pat">Savannah Cheetah - Charcoal</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-7gvc" class="leaf" id="leaf15">
+ <div data-hf-id="hf-38al" class="face front"><img data-hf-id="hf-gxvu" class="art" src="assets/img/p15.jpg" alt="All Over Leopard - Aubergine"><div data-hf-id="hf-i2f6" class="shade"></div></div>
+ <div data-hf-id="hf-791n" class="face back"></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="Small Stag Teal" />
- <div class="cap"><div class="pat">Small Stag Teal</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-g4r7" class="leaf" id="leaf16">
+ <div data-hf-id="hf-4f7o" class="face front"><img data-hf-id="hf-rig7" class="art" src="assets/img/p16.jpg" alt="All Over Leopard - Brown"><div data-hf-id="hf-igq7" class="shade"></div></div>
+ <div data-hf-id="hf-6uqm" class="face back"></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="Tiger And Temple Green" />
- <div class="cap"><div class="pat">Tiger And Temple Green</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-c6n6" class="leaf" id="leaf17">
+ <div data-hf-id="hf-40wn" class="face front"><img data-hf-id="hf-aigk" class="art" src="assets/img/p17.jpg" alt="Cheetah - Brown"><div data-hf-id="hf-iv18" class="shade"></div></div>
+ <div data-hf-id="hf-6gfl" class="face back"></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="Botanical Print - Multi" />
- <div class="cap"><div class="pat">Botanical Print - Multi</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-1zbx" class="leaf" id="leaf18">
+ <div data-hf-id="hf-8e9y" class="face front"><img data-hf-id="hf-3r08" class="art" src="assets/img/p18.jpg" alt="Cheetah Brown"><div data-hf-id="hf-g2w1" class="shade"></div></div>
+ <div data-hf-id="hf-98ks" class="face back"></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="Savannah Cheetah - Green" />
- <div class="cap"><div class="pat">Savannah Cheetah - Green</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-17o4" class="leaf" id="leaf19">
+ <div data-hf-id="hf-7zyx" class="face front"><img data-hf-id="hf-f9vh" class="art" src="assets/img/p19.jpg" alt="Visitorian - Taupe"><div data-hf-id="hf-gh72" class="shade"></div></div>
+ <div data-hf-id="hf-8u9r" class="face back"></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="All Over Leopard - Blue" />
- <div class="cap"><div class="pat">All Over Leopard - Blue</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-odb8" class="leaf" id="leaf20">
+ <div data-hf-id="hf-4g5x" class="face front"><img data-hf-id="hf-tv8l" class="art" src="assets/img/p20.jpg" alt="Visitorian Navy"><div data-hf-id="hf-k102" class="shade"></div></div>
+ <div data-hf-id="hf-25q7" class="face back"></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="All Over Leopard Blue" />
- <div class="cap"><div class="pat">All Over Leopard Blue</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-rckt" class="leaf" id="leaf21">
+ <div data-hf-id="hf-4ugy" class="face front"><img data-hf-id="hf-hi7i" class="art" src="assets/img/p21.jpg" alt="Visitorian Mauve"><div data-hf-id="hf-jmp1" class="shade"></div></div>
+ <div data-hf-id="hf-2k18" class="face back"></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="All Over Leopard Charcoal" />
- <div class="cap"><div class="pat">All Over Leopard Charcoal</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-vaou" class="leaf" id="leaf22">
+ <div data-hf-id="hf-58rz" class="face front"><img data-hf-id="hf-9a2b" class="art" src="assets/img/p22.jpg" alt="Visitorian Blue"><div data-hf-id="hf-ktm4" class="shade"></div></div>
+ <div data-hf-id="hf-1d45" class="face back"></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="Dipped In Moonlight Charcoal" />
- <div class="cap"><div class="pat">Dipped In Moonlight Charcoal</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-z8sv" class="leaf" id="leaf23">
+ <div data-hf-id="hf-5n30" class="face front"><img data-hf-id="hf-zxy1" class="art" src="assets/img/p23.jpg" alt="Jolly Boy Dog & Friends"><div data-hf-id="hf-kfb3" class="shade"></div></div>
+ <div data-hf-id="hf-1rf6" class="face back"></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="Dipped In Moonlight Cream" />
- <div class="cap"><div class="pat">Dipped In Moonlight Cream</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-36ww" class="leaf" id="leaf24">
+ <div data-hf-id="hf-61e1" class="face front"><img data-hf-id="hf-3vo1" class="art" src="assets/img/p24.jpg" alt="Steampunk Notice Board"><div data-hf-id="hf-lm86" class="shade"></div></div>
+ <div data-hf-id="hf-3qyb" class="face back"></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="Dipped In Moonlight Teal" />
- <div class="cap"><div class="pat">Dipped In Moonlight Teal</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-3ykp" class="leaf" id="leaf25">
+ <div data-hf-id="hf-6fp2" class="face front"><img data-hf-id="hf-mpkb" class="art" src="assets/img/p25.jpg" alt="Portarait Gallery Taupe"><div data-hf-id="hf-l7x5" class="shade"></div></div>
+ <div data-hf-id="hf-459c" class="face back"></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="Dachshund Dog" />
- <div class="cap"><div class="pat">Dachshund Dog</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-7woq" class="leaf" id="leaf26">
+ <div data-hf-id="hf-6u03" class="face front"><img data-hf-id="hf-3dlr" class="art" src="assets/img/p26.jpg" alt="Dachshund Dog"><div data-hf-id="hf-meu8" class="shade"></div></div>
+ <div data-hf-id="hf-2yc9" class="face back"></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="Monkey Biz Black" />
- <div class="cap"><div class="pat">Monkey Biz Black</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-busr" class="leaf" id="leaf27">
+ <div data-hf-id="hf-78b4" class="face front"><img data-hf-id="hf-8cu7" class="art" src="assets/img/p27.jpg" alt="Colonel Fox at the Gentleman's Club - Mustard"><div data-hf-id="hf-m0j7" class="shade"></div></div>
+ <div data-hf-id="hf-3cna" class="face back"></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="Monkey Biz Pink" />
- <div class="cap"><div class="pat">Monkey Biz Pink</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-i0ik" class="leaf" id="leaf28">
+ <div data-hf-id="hf-19pp" class="face front"><img data-hf-id="hf-6gda" class="art" src="assets/img/p28.jpg" alt="Stag Grande - Plum"><div data-hf-id="hf-guju" class="shade"></div></div>
+ <div data-hf-id="hf-yz9z" class="face back"></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="On Safari Cream" />
- <div class="cap"><div class="pat">On Safari Cream</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-is6d" class="leaf" id="leaf29">
+ <div data-hf-id="hf-1o0q" class="face front"><img data-hf-id="hf-9vk6" class="art" src="assets/img/p29.jpg" alt="Stag Grande Teal"><div data-hf-id="hf-gg8t" class="shade"></div></div>
+ <div data-hf-id="hf-zdl0" class="face back"></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="Colonel Fox at the Gentleman's Club - Mustard" />
- <div class="cap"><div class="pat">Colonel Fox at the Gentleman's Club - Mustard</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-86e7" class="leaf" id="leaf30">
+ <div data-hf-id="hf-mlos" class="face front"><img data-hf-id="hf-s6a9" class="art" src="assets/img/p30.jpg" alt="Stag Grande Grey"><div data-hf-id="hf-ksnv" class="shade"></div></div>
+ <div data-hf-id="hf-1e2e" class="face back"></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="All Over Leopard - Aubergine" />
- <div class="cap"><div class="pat">All Over Leopard - Aubergine</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-48a6" class="leaf" id="leaf31">
+ <div data-hf-id="hf-m7dr" class="face front"><img data-hf-id="hf-pf81" class="art" src="assets/img/p31.jpg" alt="Small Stag Teal"><div data-hf-id="hf-l6yw" class="shade"></div></div>
+ <div data-hf-id="hf-0zrd" class="face back"></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="All Over Leopard - Brown" />
- <div class="cap"><div class="pat">All Over Leopard - Brown</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-0a65" class="leaf" id="leaf32">
+ <div data-hf-id="hf-lt2q" class="face front"><img data-hf-id="hf-5ls9" class="art" src="assets/img/p32.jpg" alt="Dipped In Moonlight Charcoal"><div data-hf-id="hf-k01t" class="shade"></div></div>
+ <div data-hf-id="hf-26og" class="face back"></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="Cheetah - Brown" />
- <div class="cap"><div class="pat">Cheetah - Brown</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-ziic" class="leaf" id="leaf33">
+ <div data-hf-id="hf-lerp" class="face front"><img data-hf-id="hf-nf73" class="art" src="assets/img/p33.jpg" alt="Dipped In Moonlight Cream"><div data-hf-id="hf-kecu" class="shade"></div></div>
+ <div data-hf-id="hf-1sdf" class="face back"></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="Cheetah Brown" />
- <div class="cap"><div class="pat">Cheetah Brown</div><div class="col">Graduate Collection</div></div>
- <div class="shade"></div>
+ <div data-hf-id="hf-mzzv" class="leaf" id="leaf34">
+ <div data-hf-id="hf-o6ww" class="face front"><img data-hf-id="hf-67wm" class="art" src="assets/img/p34.jpg" alt="Dipped In Moonlight Teal"><div data-hf-id="hf-j7fr" class="shade"></div></div>
+ <div data-hf-id="hf-zsua" class="face back"></div>
</div>
- <div class="face back"></div>
- </div>
</div>
- <!-- outro -->
- <div class="card" id="outro">
- <div class="kicker">Shop the collection</div>
- <div class="big">Graduate Collection</div>
- <div class="url">designerwallcoverings.com</div>
+ <div data-hf-id="hf-aj3h" class="card" id="outro">
+ <div data-hf-id="hf-8vyo" class="kicker">Shop the collection</div>
+ <div data-hf-id="hf-y3d1" class="big">Graduate Collection</div>
+ <div data-hf-id="hf-9hzb" class="url">designerwallcoverings.com</div>
</div>
+ <audio data-hf-id="hf-4pru" id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="41" data-track-index="20" data-volume="0.2"></audio>
+ <audio data-hf-id="hf-2y33" id="vo0" src="assets/audio/vo1.wav" data-start="2.4" data-track-index="21" data-volume="1"></audio>
+ <audio data-hf-id="hf-36io" id="vo1" src="assets/audio/vo2.wav" data-start="8.6" data-track-index="22" data-volume="1"></audio>
+ <audio data-hf-id="hf-65bb" id="vo2" src="assets/audio/vo3.wav" data-start="20" data-track-index="23" data-volume="1"></audio>
+ <audio data-hf-id="hf-p04g" id="vo3" src="assets/audio/vo4.wav" data-start="28.55" data-track-index="24" data-volume="1"></audio>
+ <audio data-hf-id="hf-q7c2" id="vo4" src="assets/audio/vo5.wav" data-start="35.3" data-track-index="25" data-volume="1"></audio>
+ <audio data-hf-id="hf-vmc7" id="vo5" src="assets/audio/vo6.wav" data-start="38.15" data-track-index="26" data-volume="1"></audio>
+
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
- // initial state — leaves stacked, page 0 on top of the right stack
- gsap.set("#leaf0", { rotateY: 0, zIndex: 35 });
- gsap.set("#leaf1", { rotateY: 0, zIndex: 34 });
- gsap.set("#leaf2", { rotateY: 0, zIndex: 33 });
- gsap.set("#leaf3", { rotateY: 0, zIndex: 32 });
- gsap.set("#leaf4", { rotateY: 0, zIndex: 31 });
- gsap.set("#leaf5", { rotateY: 0, zIndex: 30 });
- gsap.set("#leaf6", { rotateY: 0, zIndex: 29 });
- gsap.set("#leaf7", { rotateY: 0, zIndex: 28 });
- gsap.set("#leaf8", { rotateY: 0, zIndex: 27 });
- gsap.set("#leaf9", { rotateY: 0, zIndex: 26 });
- gsap.set("#leaf10", { rotateY: 0, zIndex: 25 });
- gsap.set("#leaf11", { rotateY: 0, zIndex: 24 });
- gsap.set("#leaf12", { rotateY: 0, zIndex: 23 });
- gsap.set("#leaf13", { rotateY: 0, zIndex: 22 });
- gsap.set("#leaf14", { rotateY: 0, zIndex: 21 });
- gsap.set("#leaf15", { rotateY: 0, zIndex: 20 });
- gsap.set("#leaf16", { rotateY: 0, zIndex: 19 });
- gsap.set("#leaf17", { rotateY: 0, zIndex: 18 });
- gsap.set("#leaf18", { rotateY: 0, zIndex: 17 });
- gsap.set("#leaf19", { rotateY: 0, zIndex: 16 });
- gsap.set("#leaf20", { rotateY: 0, zIndex: 15 });
- gsap.set("#leaf21", { rotateY: 0, zIndex: 14 });
- gsap.set("#leaf22", { rotateY: 0, zIndex: 13 });
- gsap.set("#leaf23", { rotateY: 0, zIndex: 12 });
- gsap.set("#leaf24", { rotateY: 0, zIndex: 11 });
- gsap.set("#leaf25", { rotateY: 0, zIndex: 10 });
- gsap.set("#leaf26", { rotateY: 0, zIndex: 9 });
- gsap.set("#leaf27", { rotateY: 0, zIndex: 8 });
- gsap.set("#leaf28", { rotateY: 0, zIndex: 7 });
- gsap.set("#leaf29", { rotateY: 0, zIndex: 6 });
- gsap.set("#leaf30", { rotateY: 0, zIndex: 5 });
- gsap.set("#leaf31", { rotateY: 0, zIndex: 4 });
- gsap.set("#leaf32", { rotateY: 0, zIndex: 3 });
- gsap.set("#leaf33", { rotateY: 0, zIndex: 2 });
- gsap.set("#leaf34", { rotateY: 0, zIndex: 1 });
+ gsap.set("#leaf0", { rotateY:0, zIndex:35 });
+ gsap.set("#leaf1", { rotateY:0, zIndex:34 });
+ gsap.set("#leaf2", { rotateY:0, zIndex:33 });
+ gsap.set("#leaf3", { rotateY:0, zIndex:32 });
+ gsap.set("#leaf4", { rotateY:0, zIndex:31 });
+ gsap.set("#leaf5", { rotateY:0, zIndex:30 });
+ gsap.set("#leaf6", { rotateY:0, zIndex:29 });
+ gsap.set("#leaf7", { rotateY:0, zIndex:28 });
+ gsap.set("#leaf8", { rotateY:0, zIndex:27 });
+ gsap.set("#leaf9", { rotateY:0, zIndex:26 });
+ gsap.set("#leaf10", { rotateY:0, zIndex:25 });
+ gsap.set("#leaf11", { rotateY:0, zIndex:24 });
+ gsap.set("#leaf12", { rotateY:0, zIndex:23 });
+ gsap.set("#leaf13", { rotateY:0, zIndex:22 });
+ gsap.set("#leaf14", { rotateY:0, zIndex:21 });
+ gsap.set("#leaf15", { rotateY:0, zIndex:20 });
+ gsap.set("#leaf16", { rotateY:0, zIndex:19 });
+ gsap.set("#leaf17", { rotateY:0, zIndex:18 });
+ gsap.set("#leaf18", { rotateY:0, zIndex:17 });
+ gsap.set("#leaf19", { rotateY:0, zIndex:16 });
+ gsap.set("#leaf20", { rotateY:0, zIndex:15 });
+ gsap.set("#leaf21", { rotateY:0, zIndex:14 });
+ gsap.set("#leaf22", { rotateY:0, zIndex:13 });
+ gsap.set("#leaf23", { rotateY:0, zIndex:12 });
+ gsap.set("#leaf24", { rotateY:0, zIndex:11 });
+ gsap.set("#leaf25", { rotateY:0, zIndex:10 });
+ gsap.set("#leaf26", { rotateY:0, zIndex:9 });
+ gsap.set("#leaf27", { rotateY:0, zIndex:8 });
+ gsap.set("#leaf28", { rotateY:0, zIndex:7 });
+ gsap.set("#leaf29", { rotateY:0, zIndex:6 });
+ gsap.set("#leaf30", { rotateY:0, zIndex:5 });
+ gsap.set("#leaf31", { rotateY:0, zIndex:4 });
+ gsap.set("#leaf32", { rotateY:0, zIndex:3 });
+ gsap.set("#leaf33", { rotateY:0, zIndex:2 });
+ gsap.set("#leaf34", { 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("#stage", { opacity: 0 });
- gsap.set("#outro", { opacity: 0 });
- gsap.set("#outro .big", { y: 36, 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 });
+ 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 in
- tl.to("#cover .kicker", { opacity: 1, duration: 0.5 }, 0.15);
- tl.to("#cover .big", { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 0.35);
- tl.to("#cover .rule,#cover .sub", { opacity: 1, duration: 0.5 }, 0.95);
- tl.to("#cover", { opacity: 0, duration: 0.5, ease: "power1.in" }, 1.15);
- tl.to("#stage", { opacity: 1, duration: 0.5, ease: "power1.out" }, 1.20);
+ // 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" }, 1.70);
+ tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, 1.70);
- // page turns
+ // page turns + room crossfades
- tl.to("#leaf0", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 1.700);
- tl.to("#leaf0 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 1.700);
- tl.to("#leaf0 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 1.95);
- tl.set("#leaf0", { zIndex: 1000 }, 1.95);
- tl.to("#leaf1 .art", { scale: 1.04, duration: 0.5, ease:"power2.out" }, 2.200);
- tl.to("#leaf1 .art", { scale: 1.0, duration: 0.4, ease:"power2.in" }, 2.700);
- tl.to("#leaf1", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 2.740);
- tl.to("#leaf1 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 2.740);
- tl.to("#leaf1 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 2.99);
- tl.set("#leaf1", { zIndex: 1001 }, 2.99);
- tl.to("#leaf2", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 3.380);
- tl.to("#leaf2 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 3.380);
- tl.to("#leaf2 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 3.63);
- tl.set("#leaf2", { zIndex: 1002 }, 3.63);
- tl.to("#leaf3", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 4.020);
- tl.to("#leaf3 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 4.020);
- tl.to("#leaf3 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 4.27);
- tl.set("#leaf3", { zIndex: 1003 }, 4.27);
- tl.to("#leaf4", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 4.660);
- tl.to("#leaf4 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 4.660);
- tl.to("#leaf4 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 4.91);
- tl.set("#leaf4", { zIndex: 1004 }, 4.91);
- tl.to("#leaf5", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 5.300);
- tl.to("#leaf5 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 5.300);
- tl.to("#leaf5 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 5.55);
- tl.set("#leaf5", { zIndex: 1005 }, 5.55);
- tl.to("#leaf6", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 5.940);
- tl.to("#leaf6 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 5.940);
- tl.to("#leaf6 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 6.19);
- tl.set("#leaf6", { zIndex: 1006 }, 6.19);
- tl.to("#leaf7 .art", { scale: 1.04, duration: 0.5, ease:"power2.out" }, 6.440);
- tl.to("#leaf7 .art", { scale: 1.0, duration: 0.4, ease:"power2.in" }, 6.940);
- tl.to("#leaf7", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 6.980);
- tl.to("#leaf7 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 6.980);
- tl.to("#leaf7 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 7.23);
- tl.set("#leaf7", { zIndex: 1007 }, 7.23);
- tl.to("#leaf8", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 7.620);
- tl.to("#leaf8 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 7.620);
- tl.to("#leaf8 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 7.87);
- tl.set("#leaf8", { zIndex: 1008 }, 7.87);
- tl.to("#leaf9", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 8.260);
- tl.to("#leaf9 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 8.260);
- tl.to("#leaf9 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 8.51);
- tl.set("#leaf9", { zIndex: 1009 }, 8.51);
- tl.to("#leaf10", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 8.900);
- tl.to("#leaf10 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 8.900);
- tl.to("#leaf10 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 9.15);
- tl.set("#leaf10", { zIndex: 1010 }, 9.15);
- tl.to("#leaf11", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 9.540);
- tl.to("#leaf11 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 9.540);
- tl.to("#leaf11 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 9.79);
- tl.set("#leaf11", { zIndex: 1011 }, 9.79);
- tl.to("#leaf12", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 10.180);
- tl.to("#leaf12 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 10.180);
- tl.to("#leaf12 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 10.43);
- tl.set("#leaf12", { zIndex: 1012 }, 10.43);
- tl.to("#leaf13 .art", { scale: 1.04, duration: 0.5, ease:"power2.out" }, 10.680);
- tl.to("#leaf13 .art", { scale: 1.0, duration: 0.4, ease:"power2.in" }, 11.180);
- tl.to("#leaf13", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 11.220);
- tl.to("#leaf13 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 11.220);
- tl.to("#leaf13 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 11.47);
- tl.set("#leaf13", { zIndex: 1013 }, 11.47);
- tl.to("#leaf14", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 11.860);
- tl.to("#leaf14 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 11.860);
- tl.to("#leaf14 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 12.11);
- tl.set("#leaf14", { zIndex: 1014 }, 12.11);
- tl.to("#leaf15", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 12.500);
- tl.to("#leaf15 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 12.500);
- tl.to("#leaf15 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 12.75);
- tl.set("#leaf15", { zIndex: 1015 }, 12.75);
- tl.to("#leaf16", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 13.140);
- tl.to("#leaf16 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 13.140);
- tl.to("#leaf16 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 13.39);
- tl.set("#leaf16", { zIndex: 1016 }, 13.39);
- tl.to("#leaf17", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 13.780);
- tl.to("#leaf17 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 13.780);
- tl.to("#leaf17 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 14.03);
- tl.set("#leaf17", { zIndex: 1017 }, 14.03);
- tl.to("#leaf18", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 14.420);
- tl.to("#leaf18 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 14.420);
- tl.to("#leaf18 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 14.67);
- tl.set("#leaf18", { zIndex: 1018 }, 14.67);
- tl.to("#leaf19 .art", { scale: 1.04, duration: 0.5, ease:"power2.out" }, 14.920);
- tl.to("#leaf19 .art", { scale: 1.0, duration: 0.4, ease:"power2.in" }, 15.420);
- tl.to("#leaf19", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 15.460);
- tl.to("#leaf19 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 15.460);
- tl.to("#leaf19 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 15.71);
- tl.set("#leaf19", { zIndex: 1019 }, 15.71);
- tl.to("#leaf20", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 16.100);
- tl.to("#leaf20 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 16.100);
- tl.to("#leaf20 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 16.35);
- tl.set("#leaf20", { zIndex: 1020 }, 16.35);
- tl.to("#leaf21", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 16.740);
- tl.to("#leaf21 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 16.740);
- tl.to("#leaf21 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 16.99);
- tl.set("#leaf21", { zIndex: 1021 }, 16.99);
- tl.to("#leaf22", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 17.380);
- tl.to("#leaf22 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 17.380);
- tl.to("#leaf22 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 17.63);
- tl.set("#leaf22", { zIndex: 1022 }, 17.63);
- tl.to("#leaf23", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 18.020);
- tl.to("#leaf23 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 18.020);
- tl.to("#leaf23 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 18.27);
- tl.set("#leaf23", { zIndex: 1023 }, 18.27);
- tl.to("#leaf24", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 18.660);
- tl.to("#leaf24 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 18.660);
- tl.to("#leaf24 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 18.91);
- tl.set("#leaf24", { zIndex: 1024 }, 18.91);
- tl.to("#leaf25 .art", { scale: 1.04, duration: 0.5, ease:"power2.out" }, 19.160);
- tl.to("#leaf25 .art", { scale: 1.0, duration: 0.4, ease:"power2.in" }, 19.660);
- tl.to("#leaf25", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 19.700);
- tl.to("#leaf25 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 19.700);
- tl.to("#leaf25 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 19.95);
- tl.set("#leaf25", { zIndex: 1025 }, 19.95);
- tl.to("#leaf26", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 20.340);
- tl.to("#leaf26 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 20.340);
- tl.to("#leaf26 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 20.59);
- tl.set("#leaf26", { zIndex: 1026 }, 20.59);
- tl.to("#leaf27", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 20.980);
- tl.to("#leaf27 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 20.980);
- tl.to("#leaf27 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 21.23);
- tl.set("#leaf27", { zIndex: 1027 }, 21.23);
- tl.to("#leaf28", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 21.620);
- tl.to("#leaf28 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 21.620);
- tl.to("#leaf28 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 21.87);
- tl.set("#leaf28", { zIndex: 1028 }, 21.87);
- tl.to("#leaf29", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 22.260);
- tl.to("#leaf29 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 22.260);
- tl.to("#leaf29 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 22.51);
- tl.set("#leaf29", { zIndex: 1029 }, 22.51);
- tl.to("#leaf30", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 22.900);
- tl.to("#leaf30 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 22.900);
- tl.to("#leaf30 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 23.15);
- tl.set("#leaf30", { zIndex: 1030 }, 23.15);
- tl.to("#leaf31 .art", { scale: 1.04, duration: 0.5, ease:"power2.out" }, 23.400);
- tl.to("#leaf31 .art", { scale: 1.0, duration: 0.4, ease:"power2.in" }, 23.900);
- tl.to("#leaf31", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 23.940);
- tl.to("#leaf31 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 23.940);
- tl.to("#leaf31 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 24.19);
- tl.set("#leaf31", { zIndex: 1031 }, 24.19);
- tl.to("#leaf32", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 24.580);
- tl.to("#leaf32 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 24.580);
- tl.to("#leaf32 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 24.83);
- tl.set("#leaf32", { zIndex: 1032 }, 24.83);
- tl.to("#leaf33", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 25.220);
- tl.to("#leaf33 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 25.220);
- tl.to("#leaf33 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 25.47);
- tl.set("#leaf33", { zIndex: 1033 }, 25.47);
- tl.to("#leaf34", { rotateY: -180, duration: 0.5, ease: "power2.inOut" }, 25.860);
- tl.to("#leaf34 .shade", { opacity: 0.55, duration: 0.250, ease:"power1.in" }, 25.860);
- tl.to("#leaf34 .shade", { opacity: 0, duration: 0.250, ease:"power1.out" }, 26.11);
- tl.set("#leaf34", { zIndex: 1034 }, 26.11);
+ tl.to("#leaf0", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 2.9);
+ tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 2.9);
+ tl.to("#leaf0 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 3.2);
+ tl.set("#leaf0", { zIndex: 1000 }, 3.2);
+ tl.set("#leaf0", { opacity: 0 }, 3.500);
+ tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 3.2);
+ tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 3.2);
+ tl.to("#leaf1", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 3.85);
+ tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 3.85);
+ tl.to("#leaf1 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 4.15);
+ tl.set("#leaf1", { zIndex: 1001 }, 4.15);
+ tl.set("#leaf1", { opacity: 0 }, 4.450);
+ tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 4.15);
+ tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 4.15);
+ tl.to("#leaf2", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 4.8);
+ tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 4.8);
+ tl.to("#leaf2 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 5.1);
+ tl.set("#leaf2", { zIndex: 1002 }, 5.1);
+ tl.set("#leaf2", { opacity: 0 }, 5.400);
+ tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 5.1);
+ tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 5.1);
+ tl.to("#leaf3", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 5.75);
+ tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 5.75);
+ tl.to("#leaf3 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 6.05);
+ tl.set("#leaf3", { zIndex: 1003 }, 6.05);
+ tl.set("#leaf3", { opacity: 0 }, 6.350);
+ tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 6.05);
+ tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 6.05);
+ tl.to("#leaf4", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 6.7);
+ tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 6.7);
+ tl.to("#leaf4 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 7);
+ tl.set("#leaf4", { zIndex: 1004 }, 7);
+ tl.set("#leaf4", { opacity: 0 }, 7.300);
+ tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 7);
+ tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 7);
+ tl.to("#leaf5", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 7.65);
+ tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 7.65);
+ tl.to("#leaf5 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 7.95);
+ tl.set("#leaf5", { zIndex: 1005 }, 7.95);
+ tl.set("#leaf5", { opacity: 0 }, 8.250);
+ tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 7.95);
+ tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 7.95);
+ tl.to("#leaf6", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 8.6);
+ tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 8.6);
+ tl.to("#leaf6 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 8.9);
+ tl.set("#leaf6", { zIndex: 1006 }, 8.9);
+ tl.set("#leaf6", { opacity: 0 }, 9.200);
+ tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 8.9);
+ tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 8.9);
+ tl.to("#leaf7", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 9.55);
+ tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 9.55);
+ tl.to("#leaf7 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 9.85);
+ tl.set("#leaf7", { zIndex: 1007 }, 9.85);
+ tl.set("#leaf7", { opacity: 0 }, 10.150);
+ tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 9.85);
+ tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 9.85);
+ tl.to("#leaf8", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 10.5);
+ tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 10.5);
+ tl.to("#leaf8 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 10.8);
+ tl.set("#leaf8", { zIndex: 1008 }, 10.8);
+ tl.set("#leaf8", { opacity: 0 }, 11.100);
+ tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 10.8);
+ tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 10.8);
+ tl.to("#leaf9", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 11.45);
+ tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 11.45);
+ tl.to("#leaf9 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 11.75);
+ tl.set("#leaf9", { zIndex: 1009 }, 11.75);
+ tl.set("#leaf9", { opacity: 0 }, 12.050);
+ tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 11.75);
+ tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 11.75);
+ tl.to("#leaf10", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 12.4);
+ tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 12.4);
+ tl.to("#leaf10 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 12.7);
+ tl.set("#leaf10", { zIndex: 1010 }, 12.7);
+ tl.set("#leaf10", { opacity: 0 }, 13.000);
+ tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 12.7);
+ tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 12.7);
+ tl.to("#leaf11", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 13.35);
+ tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 13.35);
+ tl.to("#leaf11 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 13.65);
+ tl.set("#leaf11", { zIndex: 1011 }, 13.65);
+ tl.set("#leaf11", { opacity: 0 }, 13.950);
+ tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 13.65);
+ tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 13.65);
+ tl.to("#leaf12", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 14.3);
+ tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 14.3);
+ tl.to("#leaf12 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 14.6);
+ tl.set("#leaf12", { zIndex: 1012 }, 14.6);
+ tl.set("#leaf12", { opacity: 0 }, 14.900);
+ tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14.6);
+ tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14.6);
+ tl.to("#leaf13", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 15.25);
+ tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 15.25);
+ tl.to("#leaf13 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 15.55);
+ tl.set("#leaf13", { zIndex: 1013 }, 15.55);
+ tl.set("#leaf13", { opacity: 0 }, 15.850);
+ tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 15.55);
+ tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 15.55);
+ tl.to("#leaf14", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 16.2);
+ tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 16.2);
+ tl.to("#leaf14 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 16.5);
+ tl.set("#leaf14", { zIndex: 1014 }, 16.5);
+ tl.set("#leaf14", { opacity: 0 }, 16.800);
+ tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 16.5);
+ tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 16.5);
+ tl.to("#leaf15", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 17.15);
+ tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 17.15);
+ tl.to("#leaf15 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 17.45);
+ tl.set("#leaf15", { zIndex: 1015 }, 17.45);
+ tl.set("#leaf15", { opacity: 0 }, 17.750);
+ tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17.45);
+ tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17.45);
+ tl.to("#leaf16", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 18.1);
+ tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 18.1);
+ tl.to("#leaf16 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 18.4);
+ tl.set("#leaf16", { zIndex: 1016 }, 18.4);
+ tl.set("#leaf16", { opacity: 0 }, 18.700);
+ tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 18.4);
+ tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 18.4);
+ tl.to("#leaf17", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 19.05);
+ tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 19.05);
+ tl.to("#leaf17 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 19.35);
+ tl.set("#leaf17", { zIndex: 1017 }, 19.35);
+ tl.set("#leaf17", { opacity: 0 }, 19.650);
+ tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 19.35);
+ tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 19.35);
+ tl.to("#leaf18", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 20);
+ tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 20);
+ tl.to("#leaf18 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 20.3);
+ tl.set("#leaf18", { zIndex: 1018 }, 20.3);
+ tl.set("#leaf18", { opacity: 0 }, 20.600);
+ tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20.3);
+ tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20.3);
+ tl.to("#leaf19", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 20.95);
+ tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 20.95);
+ tl.to("#leaf19 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 21.25);
+ tl.set("#leaf19", { zIndex: 1019 }, 21.25);
+ tl.set("#leaf19", { opacity: 0 }, 21.550);
+ tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 21.25);
+ tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 21.25);
+ tl.to("#leaf20", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 21.9);
+ tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 21.9);
+ tl.to("#leaf20 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 22.2);
+ tl.set("#leaf20", { zIndex: 1020 }, 22.2);
+ tl.set("#leaf20", { opacity: 0 }, 22.500);
+ tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 22.2);
+ tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 22.2);
+ tl.to("#leaf21", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 22.85);
+ tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 22.85);
+ tl.to("#leaf21 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 23.15);
+ tl.set("#leaf21", { zIndex: 1021 }, 23.15);
+ tl.set("#leaf21", { opacity: 0 }, 23.450);
+ tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23.15);
+ tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23.15);
+ tl.to("#leaf22", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 23.8);
+ tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 23.8);
+ tl.to("#leaf22 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 24.1);
+ tl.set("#leaf22", { zIndex: 1022 }, 24.1);
+ tl.set("#leaf22", { opacity: 0 }, 24.400);
+ tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 24.1);
+ tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 24.1);
+ tl.to("#leaf23", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 24.75);
+ tl.to("#leaf23 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 24.75);
+ tl.to("#leaf23 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 25.05);
+ tl.set("#leaf23", { zIndex: 1023 }, 25.05);
+ tl.set("#leaf23", { opacity: 0 }, 25.350);
+ tl.to("#room23", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 25.05);
+ tl.to("#room24", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 25.05);
+ tl.to("#leaf24", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 25.7);
+ tl.to("#leaf24 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 25.7);
+ tl.to("#leaf24 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 26);
+ tl.set("#leaf24", { zIndex: 1024 }, 26);
+ tl.set("#leaf24", { opacity: 0 }, 26.300);
+ tl.to("#room24", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 26);
+ tl.to("#room25", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 26);
+ tl.to("#leaf25", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 26.65);
+ tl.to("#leaf25 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 26.65);
+ tl.to("#leaf25 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 26.95);
+ tl.set("#leaf25", { zIndex: 1025 }, 26.95);
+ tl.set("#leaf25", { opacity: 0 }, 27.250);
+ tl.to("#room25", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 26.95);
+ tl.to("#room26", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 26.95);
+ tl.to("#leaf26", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 27.6);
+ tl.to("#leaf26 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 27.6);
+ tl.to("#leaf26 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 27.9);
+ tl.set("#leaf26", { zIndex: 1026 }, 27.9);
+ tl.set("#leaf26", { opacity: 0 }, 28.200);
+ tl.to("#room26", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 27.9);
+ tl.to("#room27", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 27.9);
+ tl.to("#leaf27", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 28.55);
+ tl.to("#leaf27 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 28.55);
+ tl.to("#leaf27 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 28.85);
+ tl.set("#leaf27", { zIndex: 1027 }, 28.85);
+ tl.set("#leaf27", { opacity: 0 }, 29.150);
+ tl.to("#room27", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 28.85);
+ tl.to("#room28", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 28.85);
+ tl.to("#leaf28", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 29.5);
+ tl.to("#leaf28 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 29.5);
+ tl.to("#leaf28 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 29.8);
+ tl.set("#leaf28", { zIndex: 1028 }, 29.8);
+ tl.set("#leaf28", { opacity: 0 }, 30.100);
+ tl.to("#room28", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 29.8);
+ tl.to("#room29", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 29.8);
+ tl.to("#leaf29", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 30.45);
+ tl.to("#leaf29 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 30.45);
+ tl.to("#leaf29 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 30.75);
+ tl.set("#leaf29", { zIndex: 1029 }, 30.75);
+ tl.set("#leaf29", { opacity: 0 }, 31.050);
+ tl.to("#room29", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 30.75);
+ tl.to("#room30", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 30.75);
+ tl.to("#leaf30", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 31.4);
+ tl.to("#leaf30 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 31.4);
+ tl.to("#leaf30 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 31.7);
+ tl.set("#leaf30", { zIndex: 1030 }, 31.7);
+ tl.set("#leaf30", { opacity: 0 }, 32.000);
+ tl.to("#room30", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 31.7);
+ tl.to("#room31", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 31.7);
+ tl.to("#leaf31", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 32.35);
+ tl.to("#leaf31 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 32.35);
+ tl.to("#leaf31 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 32.65);
+ tl.set("#leaf31", { zIndex: 1031 }, 32.65);
+ tl.set("#leaf31", { opacity: 0 }, 32.950);
+ tl.to("#room31", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 32.65);
+ tl.to("#room32", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 32.65);
+ tl.to("#leaf32", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 33.3);
+ tl.to("#leaf32 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 33.3);
+ tl.to("#leaf32 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 33.6);
+ tl.set("#leaf32", { zIndex: 1032 }, 33.6);
+ tl.set("#leaf32", { opacity: 0 }, 33.900);
+ tl.to("#room32", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 33.6);
+ tl.to("#room33", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 33.6);
+ tl.to("#leaf33", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 34.25);
+ tl.to("#leaf33 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 34.25);
+ tl.to("#leaf33 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 34.55);
+ tl.set("#leaf33", { zIndex: 1033 }, 34.55);
+ tl.set("#leaf33", { opacity: 0 }, 34.850);
+ tl.to("#room33", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 34.55);
+ tl.to("#room34", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 34.55);
+ tl.to("#leaf34 .art", { scale: 1.05, duration: 3.20, ease:"power1.out" }, 35.2);
+ tl.to("#room34 .rimg", { scale: 1.06, duration: 3.20, ease:"power1.out" }, 35.2);
// outro
- tl.to("#stage", { opacity: 0, duration: 0.5, ease: "power1.in" }, 26.50);
- tl.to("#outro", { opacity: 1, duration: 0.5 }, 26.60);
- tl.to("#outro .big", { opacity: 1, y: 0, duration: 0.7, ease: "power2.out" }, 26.80);
- tl.to("#outro .url", { opacity: 1, duration: 0.5 }, 27.30);
+ tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 38.00);
+ tl.to("#outro", { opacity:1, duration:0.5 }, 38.20);
+ tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 38.40);
+ tl.to("#outro .url", { opacity:1, duration:0.5 }, 38.90);
+
+ gsap.set("#bgm", { volume: 0.2 });
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 2.10);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 5.00);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 8.30);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 11.20);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 19.70);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 22.60);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 28.25);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 31.15);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 35.00);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 37.90);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 37.85);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 40.75);
+ tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 39.90);
window.__timelines["flipbook"] = tl;
</script>
diff --git a/public/collections/graduate-collection.html b/public/collections/graduate-collection.html
new file mode 100644
index 0000000..51f01f4
--- /dev/null
+++ b/public/collections/graduate-collection.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Graduate Collection — 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; }
+
+ /* ---- collection banner ---- */
+ .banner{ position:relative; height:min(52vh,460px); 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-image:url('/public/collections/graduate-banner.jpg');
+ background-size:cover; background-position:center; 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; letter-spacing:.5px; 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; }
+
+ /* ---- flip book, directly below the banner ---- */
+ .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{ position:relative; }
+ .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; }
+</style>
+</head>
+<body>
+ <!-- COLLECTION BANNER -->
+ <header class="banner">
+ <div class="bg"></div>
+ <div class="scrim"></div>
+ <div class="inner">
+ <div class="kicker">Designer Wallcoverings · London</div>
+ <h1>Graduate Collection</h1>
+ <div class="sub">Maximalist British wallpaper — tigers, portraits, stags & moonlight.</div>
+ <div class="rule"></div>
+ </div>
+ </header>
+
+ <!-- FLIP BOOK, directly below the banner -->
+ <div class="wrap">
+ <div class="section-label">The Flip Book · 41 seconds · narrated</div>
+ <div class="film">
+ <video controls playsinline preload="metadata" poster="/public/collections/graduate-poster.jpg">
+ <source src="/reels/graduate-collection-flipbook.mp4" type="video/mp4">
+ </video>
+ <div class="note">🔊 <b>Sound on</b> — leaf through all 35 patterns, narrated in Steve Abrams' voice.</div>
+ </div>
+ </div>
+
+ <div class="cta">
+ <a href="https://www.designerwallcoverings.com/collections/vendors?q=Graduate%20Collection%20UK">Shop the Graduate Collection →</a>
+ </div>
+
+ <footer>
+ <div class="mark">Designer Wallcoverings</div>
+ <a href="https://designerwallcoverings.com">designerwallcoverings.com →</a>
+ </footer>
+</body>
+</html>
diff --git a/scripts/build-collection-flipbook.mjs b/scripts/build-collection-flipbook.mjs
index 8988411..72d1dd4 100644
--- a/scripts/build-collection-flipbook.mjs
+++ b/scripts/build-collection-flipbook.mjs
@@ -1,148 +1,191 @@
#!/usr/bin/env node
/**
- * build-collection-flipbook.mjs — turn any DW collection/vendor into a 3D
- * page-turn "flip book" HyperFrames composition, then (optionally) render MP4.
+ * build-collection-flipbook.mjs — turn any DW collection/vendor into a narrated
+ * 3D page-turn "flip book" HyperFrames composition (spread layout), then render.
+ *
+ * SPREAD: left verso = DW wordmark + a crossfading ROOM-setting of the current
+ * product + its name; right recto = the page-turn stack of pattern swatches.
+ * Chapter-ordered, slowed for readability, with cloned-voice VO + a ducked jazz bed.
*
* Reusable engine behind the /collection-flipbook skill.
*
- * Usage:
- * node scripts/build-collection-flipbook.mjs \
- * --data data/graduate-collection.json \
- * --slug graduate-collection \
- * --title "Graduate Collection" \
- * --subtitle "London · Maximalist British Wallpaper" \
- * [--ratio landscape|portrait|square] [--no-images]
+ * Data JSON: [{ title, image, room?, has_room?, chapter?, url? }, ...]
+ * Images (image + room) are downloaded + resized LOCALLY (no network in the comp).
*
- * Data JSON: [{ title, image, url?, handle? }, ...] (image = remote URL or local path)
+ * Key flags:
+ * --data <json> --slug <slug> --title "..." --subtitle "..."
+ * --ratio landscape|portrait|square --page-interval 0.95 --page-turn 0.6
+ * --cover 2.2 --hold 2.8 --outro 3.0
+ * --audio <audio.json> (see AUDIO MANIFEST below) --no-images
*
- * Everything is deterministic (HyperFrames rule: no Date.now/Math.random/network
- * inside the composition). Images are downloaded + resized LOCALLY at build time.
+ * AUDIO MANIFEST (audio.json):
+ * { "bgm": {"src":"assets/audio/jazz.wav","volume":0.2},
+ * "vo": [ {"src":"assets/audio/vo1.wav","anchor":"intro"},
+ * {"src":"assets/audio/vo2.wav","anchor":"+6"},
+ * {"src":"assets/audio/vo3.wav","anchor":"chapter:characters"},
+ * {"src":"assets/audio/vo4.wav","anchor":"chapter:stags"},
+ * {"src":"assets/audio/vo5.wav","anchor":"hold"},
+ * {"src":"assets/audio/vo6.wav","anchor":"outro"} ] }
+ * anchor := "intro" | "hold" | "outro" | "chapter:NAME" | "+N" (N pages into riffle) | <seconds>
*/
import fs from 'node:fs';
import path from 'node:path';
-import os from 'node:os';
import { execSync } from 'node:child_process';
import https from 'node:https';
-// ---------- args ----------
-const args = Object.fromEntries(process.argv.slice(2).reduce((a, cur, i, arr) => {
- if (cur.startsWith('--')) {
- const k = cur.slice(2);
- const v = (arr[i + 1] && !arr[i + 1].startsWith('--')) ? arr[i + 1] : true;
- a.push([k, v]);
+const argv = process.argv.slice(2);
+const args = {};
+for (let i = 0; i < argv.length; i++) {
+ if (argv[i].startsWith('--')) {
+ const k = argv[i].slice(2);
+ const v = (argv[i + 1] && !argv[i + 1].startsWith('--')) ? argv[++i] : true;
+ args[k] = v;
}
- return a;
-}, []));
+}
const PROJ = path.resolve(path.join(path.dirname(new URL(import.meta.url).pathname), '..'));
-const dataPath = path.resolve(args.data || `${PROJ}/data/graduate-collection.json`);
+const dataPath = path.resolve(args.data || `${PROJ}/data/graduate-ordered.json`);
const slug = args.slug || 'collection-flipbook';
const title = args.title || 'Collection';
const subtitle = args.subtitle || 'Designer Wallcoverings';
const ratio = args.ratio || 'landscape';
const doImages = !args['no-images'];
+const PAGE_INTERVAL = parseFloat(args['page-interval'] || '0.95');
+const PAGE_TURN = parseFloat(args['page-turn'] || '0.6');
+const COVER = parseFloat(args.cover || '2.2');
+const HOLD = parseFloat(args.hold || '2.8');
+const OUTRO = parseFloat(args.outro || '3.0');
+const audioCfg = args.audio ? JSON.parse(fs.readFileSync(path.resolve(args.audio), 'utf8')) : null;
const RATIOS = { landscape: [1920, 1080], portrait: [1080, 1920], square: [1080, 1080] };
const [W, H] = RATIOS[ratio] || RATIOS.landscape;
const wsDir = `${PROJ}/flipbooks/${slug}`;
const imgDir = `${wsDir}/assets/img`;
+const roomDir = `${wsDir}/assets/room`;
fs.mkdirSync(imgDir, { recursive: true });
+fs.mkdirSync(roomDir, { recursive: true });
const products = JSON.parse(fs.readFileSync(dataPath, 'utf8')).filter(p => p.image);
-if (!products.length) { console.error('No products with images in', dataPath); process.exit(1); }
-console.log(`Building flipbook "${title}" — ${products.length} pages @ ${W}x${H}`);
+const N = products.length;
+if (!N) { console.error('No products in', dataPath); process.exit(1); }
+console.log(`Flipbook "${title}" — ${N} spreads @ ${W}x${H}, interval ${PAGE_INTERVAL}s`);
-// ---------- localize + resize images ----------
+// ---------- localize + resize ----------
function download(url, dest) {
return new Promise((resolve, reject) => {
- const file = fs.createWriteStream(dest);
+ const f = fs.createWriteStream(dest);
https.get(url, { headers: { 'User-Agent': 'Mozilla/5.0 DW-flipbook' } }, (res) => {
- if (res.statusCode >= 300 && res.headers.location) {
- file.close(); fs.rmSync(dest, { force: true });
- return download(res.headers.location, dest).then(resolve, reject);
- }
- if (res.statusCode !== 200) { file.close(); return reject(new Error('HTTP ' + res.statusCode)); }
- res.pipe(file);
- file.on('finish', () => file.close(resolve));
+ if (res.statusCode >= 300 && res.headers.location) { f.close(); fs.rmSync(dest, { force: true }); return download(res.headers.location, dest).then(resolve, reject); }
+ if (res.statusCode !== 200) { f.close(); return reject(new Error('HTTP ' + res.statusCode)); }
+ res.pipe(f); f.on('finish', () => f.close(resolve));
}).on('error', reject);
});
}
-
-const PAGE_MAX = Math.round(Math.min(W, H) * 0.95); // resize cap for render speed
-let localized = 0;
-for (let i = 0; i < products.length; i++) {
+async function grab(url, dest, cap) {
+ if (!doImages) return true;
+ if (/^https?:/.test(url)) { await download(url.replace(/\?.*$/, '') + '?width=1400', dest); }
+ else if (fs.existsSync(url)) { fs.copyFileSync(url, dest); }
+ else return false;
+ try { execSync(`sips -Z ${cap} "${dest}" >/dev/null 2>&1`); } catch {}
+ return true;
+}
+const PAGE_CAP = Math.round(H * 0.95);
+for (let i = 0; i < N; i++) {
const p = products[i];
- const dest = `${imgDir}/p${i}.jpg`;
- if (doImages) {
- if (/^https?:/.test(p.image)) {
- try {
- await download(p.image.replace(/\?.*$/, '') + '?width=1200', dest);
- // resize/normalize with macOS sips ($0 local) — square-ish crop-safe max box
- try { execSync(`sips -Z ${PAGE_MAX} "${dest}" >/dev/null 2>&1`); } catch {}
- localized++;
- } catch (e) { console.warn(` ! image ${i} (${p.title}): ${e.message}`); }
- } else if (fs.existsSync(p.image)) {
- fs.copyFileSync(p.image, dest);
- try { execSync(`sips -Z ${PAGE_MAX} "${dest}" >/dev/null 2>&1`); } catch {}
- localized++;
- }
- }
- p._img = `assets/img/p${i}.jpg`;
+ try { await grab(p.image, `${imgDir}/p${i}.jpg`, PAGE_CAP); } catch (e) { console.warn(` ! swatch ${i}: ${e.message}`); }
+ const roomUrl = p.room || p.image;
+ try { await grab(roomUrl, `${roomDir}/r${i}.jpg`, PAGE_CAP); } catch (e) { console.warn(` ! room ${i}: ${e.message}`); }
+ p._img = `assets/img/p${i}.jpg`; p._room = `assets/room/r${i}.jpg`;
+ p._fallback = !(p.has_room);
+ p._name = p.title;
}
-console.log(` localized ${localized}/${products.length} images`);
+if (doImages) console.log(` localized ${N} swatches + ${N} rooms`);
// ---------- geometry ----------
-const N = products.length;
-const pageW = Math.round(H * 0.62); // leaf width
-const pageH = Math.round(H * 0.82); // leaf height
-const spineX = Math.round(W / 2); // book spine at horizontal center
+const bookW = Math.round(W * (ratio === 'portrait' ? 0.9 : 0.8));
+const pageW = Math.round(bookW / 2);
+const pageH = Math.round(H * 0.82);
+const bookLeft = Math.round((W - bookW) / 2);
+const spineX = Math.round(W / 2);
const bookTop = Math.round((H - pageH) / 2);
// ---------- timing ----------
-const INTRO = 1.7; // cover reveal
-const FLIP = 0.5; // one page turn
-const HOLD = 0.14; // read beat before next turn
-const INTERVAL = FLIP + HOLD; // per-page cadence
-const HERO_EVERY = Math.max(4, Math.round(N / 6)); // slow-down cadence
-const OUTRO = 2.2;
+const riffleStart = COVER;
+const LEAD = 0.7; // opening spread breathes before the first turn
+const flipStart = i => +(riffleStart + LEAD + i * PAGE_INTERVAL).toFixed(3); // i in 0..N-2 flips
+const holdStart = +(riffleStart + LEAD + (N - 1) * PAGE_INTERVAL).toFixed(3);
+const outroStart = +(holdStart + HOLD).toFixed(3);
+const TOTAL = +(outroStart + OUTRO).toFixed(2);
-let t = INTRO;
-const flips = products.map((p, i) => {
- const hero = (i % HERO_EVERY === 0);
- const start = t;
- const dur = FLIP;
- t += INTERVAL + (hero ? 0.4 : 0); // linger on hero pages
- return { start, dur, hero };
-});
-const flipsEnd = t;
-const TOTAL = +(flipsEnd + OUTRO).toFixed(2);
+// chapter first-page time
+const chapterStartTime = {};
+products.forEach((p, i) => { const c = p.chapter || 'all'; if (!(c in chapterStartTime)) chapterStartTime[c] = flipStart(Math.max(0, i - 1)); });
+
+function resolveAnchor(a) {
+ if (typeof a === 'number') return a;
+ if (a === 'intro') return +(riffleStart + 0.2).toFixed(2);
+ if (a === 'hold') return +(holdStart + 0.1).toFixed(2);
+ if (a === 'outro') return +(outroStart + 0.15).toFixed(2);
+ if (typeof a === 'string' && a.startsWith('+')) return flipStart(parseInt(a.slice(1), 10));
+ if (typeof a === 'string' && a.startsWith('chapter:')) return chapterStartTime[a.slice(8)] ?? riffleStart;
+ return riffleStart;
+}
-// ---------- html ----------
+// ---------- html helpers ----------
const esc = s => String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
+const rooms = products.map((p, i) => `
+ <div class="room${p._fallback ? ' fallback' : ''}" id="room${i}">
+ <img class="rimg" src="${p._room}" alt="${esc(p._name)} room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">${esc(p._name)}</div><div class="rcol">${esc(title)} · ${esc(p.chapter || '')}</div></div>
+ </div>`).join('');
+
const leaves = products.map((p, i) => `
- <div class="leaf" id="leaf${i}">
- <div class="face front">
- <img class="art" src="${p._img}" alt="${esc(p.title)}" />
- <div class="cap"><div class="pat">${esc(p.title)}</div><div class="col">${esc(title)}</div></div>
- <div class="shade"></div>
- </div>
- <div class="face back"></div>
- </div>`).join('');
+ <div class="leaf" id="leaf${i}">
+ <div class="face front"><img class="art" src="${p._img}" alt="${esc(p._name)}" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>`).join('');
+
+// flip + room-crossfade tweens
+let tweens = '';
+for (let i = 0; i <= N - 2; i++) {
+ const s = flipStart(i), mid = +(s + PAGE_TURN / 2).toFixed(3);
+ tweens += `
+ tl.to("#leaf${i}", { rotateY: -180, duration: ${PAGE_TURN}, ease: "power2.inOut" }, ${s});
+ tl.to("#leaf${i} .shade", { opacity: 0.5, duration: ${(PAGE_TURN/2).toFixed(3)}, ease:"power1.in" }, ${s});
+ tl.to("#leaf${i} .shade", { opacity: 0, duration: ${(PAGE_TURN/2).toFixed(3)}, ease:"power1.out" }, ${mid});
+ tl.set("#leaf${i}", { zIndex: ${1000 + i} }, ${mid});
+ tl.set("#leaf${i}", { opacity: 0 }, ${(s + PAGE_TURN).toFixed(3)});
+ tl.to("#room${i}", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, ${mid});
+ tl.to("#room${i+1}", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, ${mid});`;
+}
+// hero hold push-in on the final resting spread
+tweens += `
+ tl.to("#leaf${N-1} .art", { scale: 1.05, duration: ${(HOLD+0.4).toFixed(2)}, ease:"power1.out" }, ${holdStart});
+ tl.to("#room${N-1} .rimg", { scale: 1.06, duration: ${(HOLD+0.4).toFixed(2)}, ease:"power1.out" }, ${holdStart});`;
-// z-index + flip tweens
-const tweens = products.map((p, i) => {
- const f = flips[i];
- const mid = +(f.start + f.dur / 2).toFixed(3);
- return `
- tl.to("#leaf${i}", { rotateY: -180, duration: ${f.dur}, ease: "power2.inOut" }, ${f.start.toFixed(3)});
- tl.to("#leaf${i} .shade", { opacity: 0.55, duration: ${(f.dur/2).toFixed(3)}, ease:"power1.in" }, ${f.start.toFixed(3)});
- tl.to("#leaf${i} .shade", { opacity: 0, duration: ${(f.dur/2).toFixed(3)}, ease:"power1.out" }, ${mid});
- tl.set("#leaf${i}", { zIndex: ${1000 + i} }, ${mid});${f.hero ? `
- tl.to("#leaf${i+1 < N ? i+1 : i} .art", { scale: 1.04, duration: 0.5, ease:"power2.out" }, ${(f.start+f.dur).toFixed(3)});
- tl.to("#leaf${i+1 < N ? i+1 : i} .art", { scale: 1.0, duration: 0.4, ease:"power2.in" }, ${(f.start+f.dur+0.5).toFixed(3)});` : ''}`;
-}).join('');
+// audio elements + ducking
+let audioEls = '', audioTweens = '';
+if (audioCfg) {
+ if (audioCfg.bgm) {
+ const v = audioCfg.bgm.volume ?? 0.2;
+ audioEls += `\n <audio id="bgm" src="${audioCfg.bgm.src}" data-start="0" data-duration="${TOTAL}" data-track-index="20" data-volume="${v}"></audio>`;
+ audioTweens += `\n gsap.set("#bgm", { volume: ${v} });`;
+ (audioCfg.vo || []).forEach((vo) => {
+ const at = resolveAnchor(vo.anchor);
+ audioTweens += `
+ tl.to("#bgm", { volume: ${(v*0.5).toFixed(2)}, duration: 0.4 }, ${(+at-0.3).toFixed(2)});
+ tl.to("#bgm", { volume: ${v}, duration: 0.6 }, ${(+at+2.6).toFixed(2)});`;
+ });
+ audioTweens += `\n tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, ${(TOTAL-1.1).toFixed(2)});`;
+ }
+ (audioCfg.vo || []).forEach((vo, k) => {
+ const at = resolveAnchor(vo.anchor);
+ audioEls += `\n <audio id="vo${k}" src="${vo.src}" data-start="${at}" data-track-index="${21+k}" data-volume="1"></audio>`;
+ });
+}
const html = `<!doctype html>
<html lang="en" data-resolution="${ratio}">
@@ -152,55 +195,52 @@ const html = `<!doctype html>
<style>
:root { --ink:#1c1a17; --cream:#f4efe6; --paper:#fbf8f1; --gold:#b08d57; }
html,body { margin:0; padding:0; width:${W}px; height:${H}px; overflow:hidden;
- background:radial-gradient(120% 120% at 50% 0%, #2a2622 0%, #14110e 70%);
+ 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:${W}px; height:${H}px; overflow:hidden; }
- .stage { position:absolute; inset:0; perspective:2600px; perspective-origin:50% 46%; }
+ .stage { position:absolute; inset:0; perspective:3000px; perspective-origin:50% 46%; }
- /* left static page (the book's verso) */
- .verso { position:absolute; top:${bookTop}px; left:${spineX - pageW}px; width:${pageW}px; height:${pageH}px;
- background:var(--paper); border-radius:6px 2px 2px 6px;
- box-shadow: inset -28px 0 44px rgba(0,0,0,.10), 0 30px 60px rgba(0,0,0,.45);
- display:flex; align-items:center; justify-content:center; }
- .verso .spinemark { font-family:Georgia, serif; color:#cbb48f;
- writing-mode:vertical-rl; font-size:34px; letter-spacing:.28em; text-transform:uppercase; opacity:.6; }
+ /* LEFT verso: brand + room + name */
+ .verso { position:absolute; top:${bookTop}px; left:${bookLeft}px; width:${pageW}px; height:${pageH}px;
+ 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:${Math.round(pageH*0.055)}px 0 ${Math.round(pageH*0.03)}px; }
+ .wordmark .wm { font-family:Georgia, serif; font-size:${Math.round(pageW*0.072)}px; color:var(--ink); letter-spacing:.02em; line-height:1; }
+ .wordmark .wsub { margin-top:8px; font-size:${Math.round(pageW*0.024)}px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
+ .wordmark .wr { width:64px; height:2px; background:var(--gold); margin:${Math.round(pageH*0.028)}px auto 0; }
+ .roomstack { position:relative; flex:1 1 auto; margin:0 ${Math.round(pageW*0.055)}px ${Math.round(pageW*0.055)}px; 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:${Math.round(pageW*0.05)}px ${Math.round(pageW*0.055)}px; color:#fff; }
+ .rcap .rpat { font-family:Georgia, serif; font-size:${Math.round(pageW*0.062)}px; line-height:1.05; text-shadow:0 2px 14px rgba(0,0,0,.5); }
+ .rcap .rcol { margin-top:8px; font-size:${Math.round(pageW*0.026)}px; letter-spacing:.2em; text-transform:uppercase; color:#e7d8bd; }
- /* stacked flipping leaves — pinned at the spine */
+ /* RIGHT recto: page-turn stack of pattern swatches */
.leaf { position:absolute; top:${bookTop}px; left:${spineX}px; width:${pageW}px; height:${pageH}px;
- transform-origin:left center; transform-style:preserve-3d; will-change:transform;
- border-radius:2px 6px 6px 2px; }
- .leaf .face { position:absolute; inset:0; backface-visibility:hidden; overflow:hidden;
- border-radius:2px 6px 6px 2px; background:var(--paper);
- box-shadow: 20px 26px 50px rgba(0,0,0,.40), inset 22px 0 40px rgba(0,0,0,.08); }
- .leaf .front { }
- .leaf .back { transform:rotateY(180deg); background:
- linear-gradient(90deg,#efe9dc, #fbf8f1 22%);
- box-shadow: -20px 26px 50px rgba(0,0,0,.35), inset -22px 0 40px rgba(0,0,0,.08); }
- .leaf .art { position:absolute; left:0; top:0; width:100%; height:78%; object-fit:cover; }
- .leaf .cap { position:absolute; left:0; right:0; bottom:0; height:22%; padding:0 34px;
- display:flex; flex-direction:column; justify-content:center; background:var(--paper); }
- .leaf .cap .pat { font-family:Georgia, serif; font-size:${Math.round(pageW*0.062)}px;
- line-height:1.04; color:var(--ink); }
- .leaf .cap .col { margin-top:8px; font-size:${Math.round(pageW*0.028)}px; letter-spacing:.22em;
- text-transform:uppercase; color:var(--gold); }
- .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) 60%); }
+ 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:${Math.round(W*0.017)}px; letter-spacing:.44em; text-transform:uppercase; color:var(--gold); }
- .card .big { font-family:Georgia, serif; font-size:${Math.round(W*0.072)}px; line-height:1.0; margin:22px 60px; }
- .card .sub { font-size:${Math.round(W*0.019)}px; letter-spacing:.18em; text-transform:uppercase; color:#c9bfae; }
- .card .rule { width:120px; height:2px; background:var(--gold); margin:34px 0; }
- .card .url { margin-top:30px; font-size:${Math.round(W*0.017)}px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); }
+ .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:${Math.round(W*0.016)}px; letter-spacing:.44em; text-transform:uppercase; color:var(--gold); }
+ .card .big { font-family:Georgia, serif; font-size:${Math.round(W*0.07)}px; line-height:1.0; margin:22px 60px; }
+ .card .sub { font-size:${Math.round(W*0.018)}px; 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:${Math.round(W*0.016)}px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); }
</style>
</head>
<body>
- <div id="main-composition" data-composition-id="flipbook"
- data-width="${W}" data-height="${H}" data-start="0" data-duration="${TOTAL}">
+ <div id="main-composition" data-composition-id="flipbook" data-width="${W}" data-height="${H}" data-start="0" data-duration="${TOTAL}">
- <!-- cover -->
<div class="card" id="cover">
<div class="kicker">Designer Wallcoverings presents</div>
<div class="big">${esc(title)}</div>
@@ -209,45 +249,47 @@ const html = `<!doctype html>
</div>
<div class="stage" id="stage">
- <div class="verso"><div class="spinemark">${esc(title)}</div></div>
+ <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">${rooms}
+ </div>
+ </div>
${leaves}
</div>
- <!-- outro -->
<div class="card" id="outro">
<div class="kicker">Shop the collection</div>
<div class="big">${esc(title)}</div>
<div class="url">designerwallcoverings.com</div>
</div>
+${audioEls}
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
- // initial state — leaves stacked, page 0 on top of the right stack
- ${products.map((p, i) => `gsap.set("#leaf${i}", { rotateY: 0, zIndex: ${N - i} });`).join('\n ')}
+ ${products.map((p,i)=>`gsap.set("#leaf${i}", { rotateY:0, zIndex:${N-i} });`).join('\n ')}
+ ${products.map((p,i)=>`gsap.set("#room${i}", { opacity:${i===0?1:0} });`).join('\n ')}
gsap.set("#stage", { opacity: 0 });
- gsap.set("#outro", { opacity: 0 });
- gsap.set("#outro .big", { y: 36, 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 });
+ 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 in
- tl.to("#cover .kicker", { opacity: 1, duration: 0.5 }, 0.15);
- tl.to("#cover .big", { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 0.35);
- tl.to("#cover .rule,#cover .sub", { opacity: 1, duration: 0.5 }, 0.95);
- tl.to("#cover", { opacity: 0, duration: 0.5, ease: "power1.in" }, ${(INTRO-0.55).toFixed(2)});
- tl.to("#stage", { opacity: 1, duration: 0.5, ease: "power1.out" }, ${(INTRO-0.5).toFixed(2)});
+ // 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" }, ${(COVER-0.5).toFixed(2)});
+ tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, ${(COVER-0.5).toFixed(2)});
- // page turns
+ // page turns + room crossfades
${tweens}
// outro
- tl.to("#stage", { opacity: 0, duration: 0.5, ease: "power1.in" }, ${flipsEnd.toFixed(2)});
- tl.to("#outro", { opacity: 1, duration: 0.5 }, ${(flipsEnd+0.1).toFixed(2)});
- tl.to("#outro .big", { opacity: 1, y: 0, duration: 0.7, ease: "power2.out" }, ${(flipsEnd+0.3).toFixed(2)});
- tl.to("#outro .url", { opacity: 1, duration: 0.5 }, ${(flipsEnd+0.8).toFixed(2)});
+ tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, ${outroStart.toFixed(2)});
+ tl.to("#outro", { opacity:1, duration:0.5 }, ${(outroStart+0.2).toFixed(2)});
+ tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, ${(outroStart+0.4).toFixed(2)});
+ tl.to("#outro .url", { opacity:1, duration:0.5 }, ${(outroStart+0.9).toFixed(2)});
+${audioTweens}
window.__timelines["flipbook"] = tl;
</script>
@@ -256,5 +298,4 @@ const html = `<!doctype html>
</html>`;
fs.writeFileSync(`${wsDir}/index.html`, html);
-console.log(` wrote ${wsDir}/index.html (duration ${TOTAL}s, ${N} pages)`);
-console.log(`\nNext:\n cd flipbooks/${slug} && npm run check && npm run render`);
+console.log(` wrote ${wsDir}/index.html (duration ${TOTAL}s, ${N} spreads, hold@${holdStart}s outro@${outroStart}s)`);
diff --git a/server.js b/server.js
index b7e8dcd..a3b0b0a 100644
--- a/server.js
+++ b/server.js
@@ -128,6 +128,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/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');
return res.writeHead(200, { 'content-type': 'application/json' }).end(existsSync(fp) ? await readFile(fp) : '[]');
← a22d0df auto-save: 2026-07-30T09:16:33 (3 files) — data/graduate-col
·
back to Dw Marketing Reels
·
auto-save: 2026-07-30T09:46:44 (35 files) — flipbooks/gradua 248390c →