← back to Dw Marketing Reels
offload regenerable media dirs to Henry NAS (TK-10902); ignore output dirs
7db71525cf193db7e0cf0ee1b7bb675e326d9dbc · 2026-08-31 01:00:47 -0700 · Steve Abrams
Files touched
M .gitignoreD flipbooks/commercial-collection/assets/logos/carnegie.pngD flipbooks/commercial-collection/assets/logos/designtex.pngD flipbooks/commercial-collection/assets/logos/hollywood.pngD flipbooks/commercial-collection/assets/logos/knoll.pngD flipbooks/commercial-collection/assets/logos/koroseal.pngD flipbooks/commercial-collection/assets/logos/maharam.pngD flipbooks/commercial-collection/assets/logos/majilite.pngD flipbooks/commercial-collection/assets/logos/wolfgordon.pngD flipbooks/commercial-collection/audio.jsonD flipbooks/commercial-collection/index.htmlD flipbooks/commercial-collection/lines.txtD flipbooks/franquemont-london-reel/index.htmlD flipbooks/franquemont-london/audio.jsonD flipbooks/franquemont-london/index.htmlD flipbooks/franquemont-london/lines.txtD flipbooks/glitter-walls-ig/index.htmlD flipbooks/glitter-walls/__pycache__/gen-rooms.cpython-314.pycD flipbooks/glitter-walls/assets/roomgen/r0.jpgD flipbooks/glitter-walls/assets/roomgen/r1.jpgD flipbooks/glitter-walls/assets/roomgen/r10.jpgD flipbooks/glitter-walls/assets/roomgen/r11.jpgD flipbooks/glitter-walls/assets/roomgen/r12.jpgD flipbooks/glitter-walls/assets/roomgen/r13.jpgD flipbooks/glitter-walls/assets/roomgen/r14.jpgD flipbooks/glitter-walls/assets/roomgen/r15.jpgD flipbooks/glitter-walls/assets/roomgen/r16.jpgD flipbooks/glitter-walls/assets/roomgen/r17.jpgD flipbooks/glitter-walls/assets/roomgen/r18.jpgD flipbooks/glitter-walls/assets/roomgen/r19.jpgD flipbooks/glitter-walls/assets/roomgen/r2.jpgD flipbooks/glitter-walls/assets/roomgen/r20.jpgD flipbooks/glitter-walls/assets/roomgen/r21.jpgD flipbooks/glitter-walls/assets/roomgen/r22.jpgD flipbooks/glitter-walls/assets/roomgen/r23.jpgD flipbooks/glitter-walls/assets/roomgen/r3.jpgD flipbooks/glitter-walls/assets/roomgen/r4.jpgD flipbooks/glitter-walls/assets/roomgen/r5.jpgD flipbooks/glitter-walls/assets/roomgen/r6.jpgD flipbooks/glitter-walls/assets/roomgen/r7.jpgD flipbooks/glitter-walls/assets/roomgen/r8.jpgD flipbooks/glitter-walls/assets/roomgen/r9.jpgD flipbooks/glitter-walls/audio.jsonD flipbooks/glitter-walls/gen-rooms.pyD flipbooks/glitter-walls/index.htmlD flipbooks/glitter-walls/lines.txtD flipbooks/graduate-collection/STORYBOARD.mdD flipbooks/graduate-collection/audio.jsonD flipbooks/graduate-collection/hyperframes.jsonD flipbooks/graduate-collection/index.htmlD flipbooks/graduate-collection/meta.jsonD flipbooks/graduate-collection/package.jsonD flipbooks/innovations-usa/audio.jsonD flipbooks/innovations-usa/index.htmlD flipbooks/innovations-usa/lines.txtD flipbooks/majilite-metallics/__pycache__/gen-rooms.cpython-314.pycD flipbooks/majilite-metallics/assets/roomgen/r0.jpgD flipbooks/majilite-metallics/assets/roomgen/r1.jpgD flipbooks/majilite-metallics/assets/roomgen/r10.jpgD flipbooks/majilite-metallics/assets/roomgen/r11.jpgD flipbooks/majilite-metallics/assets/roomgen/r12.jpgD flipbooks/majilite-metallics/assets/roomgen/r13.jpgD flipbooks/majilite-metallics/assets/roomgen/r14.jpgD flipbooks/majilite-metallics/assets/roomgen/r15.jpgD flipbooks/majilite-metallics/assets/roomgen/r16.jpgD flipbooks/majilite-metallics/assets/roomgen/r17.jpgD flipbooks/majilite-metallics/assets/roomgen/r18.jpgD flipbooks/majilite-metallics/assets/roomgen/r19.jpgD flipbooks/majilite-metallics/assets/roomgen/r2.jpgD flipbooks/majilite-metallics/assets/roomgen/r20.jpgD flipbooks/majilite-metallics/assets/roomgen/r21.jpgD flipbooks/majilite-metallics/assets/roomgen/r22.jpgD flipbooks/majilite-metallics/assets/roomgen/r23.jpgD flipbooks/majilite-metallics/assets/roomgen/r3.jpgD flipbooks/majilite-metallics/assets/roomgen/r4.jpgD flipbooks/majilite-metallics/assets/roomgen/r5.jpgD flipbooks/majilite-metallics/assets/roomgen/r6.jpgD flipbooks/majilite-metallics/assets/roomgen/r7.jpgD flipbooks/majilite-metallics/assets/roomgen/r8.jpgD flipbooks/majilite-metallics/assets/roomgen/r9.jpgD flipbooks/majilite-metallics/audio.jsonD flipbooks/majilite-metallics/gen-rooms.pyD flipbooks/majilite-metallics/index.htmlD flipbooks/majilite-metallics/lines.txtD flipbooks/majilite-metallics/roomsrc/r0.jpgD flipbooks/majilite-metallics/roomsrc/r1.jpgD flipbooks/majilite-metallics/roomsrc/r10.jpgD flipbooks/majilite-metallics/roomsrc/r11.jpgD flipbooks/majilite-metallics/roomsrc/r12.jpgD flipbooks/majilite-metallics/roomsrc/r13.jpgD flipbooks/majilite-metallics/roomsrc/r14.jpgD flipbooks/majilite-metallics/roomsrc/r15.jpgD flipbooks/majilite-metallics/roomsrc/r16.jpgD flipbooks/majilite-metallics/roomsrc/r17.jpgD flipbooks/majilite-metallics/roomsrc/r18.jpgD flipbooks/majilite-metallics/roomsrc/r19.jpgD flipbooks/majilite-metallics/roomsrc/r2.jpgD flipbooks/majilite-metallics/roomsrc/r20.jpgD flipbooks/majilite-metallics/roomsrc/r21.jpgD flipbooks/majilite-metallics/roomsrc/r22.jpgD flipbooks/majilite-metallics/roomsrc/r23.jpgD flipbooks/majilite-metallics/roomsrc/r3.jpgD flipbooks/majilite-metallics/roomsrc/r4.jpgD flipbooks/majilite-metallics/roomsrc/r5.jpgD flipbooks/majilite-metallics/roomsrc/r6.jpgD flipbooks/majilite-metallics/roomsrc/r7.jpgD flipbooks/majilite-metallics/roomsrc/r8.jpgD flipbooks/majilite-metallics/roomsrc/r9.jpgD flipbooks/maya-romanoff-ig/index.htmlD flipbooks/maya-romanoff/__pycache__/gen-rooms.cpython-314.pycD flipbooks/maya-romanoff/assets/roomgen/r0.jpgD flipbooks/maya-romanoff/assets/roomgen/r1.jpgD flipbooks/maya-romanoff/assets/roomgen/r10.jpgD flipbooks/maya-romanoff/assets/roomgen/r11.jpgD flipbooks/maya-romanoff/assets/roomgen/r12.jpgD flipbooks/maya-romanoff/assets/roomgen/r13.jpgD flipbooks/maya-romanoff/assets/roomgen/r14.jpgD flipbooks/maya-romanoff/assets/roomgen/r15.jpgD flipbooks/maya-romanoff/assets/roomgen/r16.jpgD flipbooks/maya-romanoff/assets/roomgen/r17.jpgD flipbooks/maya-romanoff/assets/roomgen/r18.jpgD flipbooks/maya-romanoff/assets/roomgen/r19.jpgD flipbooks/maya-romanoff/assets/roomgen/r2.jpgD flipbooks/maya-romanoff/assets/roomgen/r20.jpgD flipbooks/maya-romanoff/assets/roomgen/r21.jpgD flipbooks/maya-romanoff/assets/roomgen/r22.jpgD flipbooks/maya-romanoff/assets/roomgen/r23.jpgD flipbooks/maya-romanoff/assets/roomgen/r3.jpgD flipbooks/maya-romanoff/assets/roomgen/r4.jpgD flipbooks/maya-romanoff/assets/roomgen/r5.jpgD flipbooks/maya-romanoff/assets/roomgen/r6.jpgD flipbooks/maya-romanoff/assets/roomgen/r7.jpgD flipbooks/maya-romanoff/assets/roomgen/r8.jpgD flipbooks/maya-romanoff/assets/roomgen/r9.jpgD flipbooks/maya-romanoff/audio.jsonD flipbooks/maya-romanoff/gen-rooms.pyD flipbooks/maya-romanoff/index.htmlD flipbooks/maya-romanoff/lines.txtD majilite-jewelry/majilite-attache-rose-gold/1.pngD majilite-jewelry/majilite-burnished-metal-mercury/1.pngD majilite-jewelry/majilite-charm-antique-gold/1.pngD majilite-jewelry/majilite-charm-metallic-taupe/1.pngD majilite-jewelry/majilite-eclipse-fx-metallic-taupe/1.pngD majilite-jewelry/majilite-finesse-pearl-pewter/1.pngD majilite-jewelry/majilite-finesse-pearl-platinum/1.pngD majilite-jewelry/majilite-hammered-metal-midnight/1.pngD majilite-jewelry/majilite-infinity-grey/1.pngD majilite-jewelry/majilite-metallic-paragon-slate/1.pngD majilite-jewelry/majilite-nuance-pewter/1.pngD majilite-jewelry/majilite-shimmer-pewter/1.pngD majilite-jewelry/majilite-shimmer-slate/1.pngD majilite-jewelry/majilite-stature-gold/1.pngD majilite-jewelry/majilite-stature-rose-gold/1.pngD videos/dw-new-arrivals-reveal/.hyperframes/caption-skin.htmlD videos/dw-new-arrivals-reveal/.media/preferences.jsonD videos/dw-new-arrivals-reveal/AGENTS.mdD videos/dw-new-arrivals-reveal/BRIEF.mdD videos/dw-new-arrivals-reveal/CLAUDE.mdD videos/dw-new-arrivals-reveal/SCRIPT.mdD videos/dw-new-arrivals-reveal/STORYBOARD.mdD videos/dw-new-arrivals-reveal/assets/fonts/cormorant-400.woff2D videos/dw-new-arrivals-reveal/assets/fonts/cormorant-500.woff2D videos/dw-new-arrivals-reveal/assets/fonts/cormorant-600.woff2D videos/dw-new-arrivals-reveal/assets/fonts/cormorant-italic-400.woff2D videos/dw-new-arrivals-reveal/assets/voice/01.wavD videos/dw-new-arrivals-reveal/assets/voice/02.wavD videos/dw-new-arrivals-reveal/assets/voice/03.wavD videos/dw-new-arrivals-reveal/assets/voice/04.wavD videos/dw-new-arrivals-reveal/assets/voice/05.wavD videos/dw-new-arrivals-reveal/assets/voice/06.wavD videos/dw-new-arrivals-reveal/assets/voice/07.wavD videos/dw-new-arrivals-reveal/assets/voice/08.wavD videos/dw-new-arrivals-reveal/audio_engine_meta.jsonD videos/dw-new-arrivals-reveal/audio_meta.jsonD videos/dw-new-arrivals-reveal/audio_request.jsonD videos/dw-new-arrivals-reveal/capture/assets/daintree-bluemoon-thibaut.jpgD videos/dw-new-arrivals-reveal/capture/assets/floral-chinoiserie-green.jpgD videos/dw-new-arrivals-reveal/capture/assets/floral-elegance-gray.jpgD videos/dw-new-arrivals-reveal/capture/assets/floral-fantasy-soft-pink.jpgD videos/dw-new-arrivals-reveal/capture/assets/gleniffer-black-and-grey.jpgD videos/dw-new-arrivals-reveal/capture/assets/maranta-arrowroot-pale-green.jpgD videos/dw-new-arrivals-reveal/capture/assets/serengeti-aqua-thibaut.jpgD videos/dw-new-arrivals-reveal/capture/assets/venus-black-thibaut.jpgD videos/dw-new-arrivals-reveal/capture/extracted/asset-descriptions.mdD videos/dw-new-arrivals-reveal/capture/extracted/tokens.jsonD videos/dw-new-arrivals-reveal/capture/extracted/visible-text.txtD videos/dw-new-arrivals-reveal/frame.mdD videos/dw-new-arrivals-reveal/hyperframes.jsonD videos/dw-new-arrivals-reveal/index.htmlD videos/dw-new-arrivals-reveal/meta.jsonD videos/dw-new-arrivals-reveal/package.json
Diff
commit 7db71525cf193db7e0cf0ee1b7bb675e326d9dbc
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Mon Aug 31 01:00:47 2026 -0700
offload regenerable media dirs to Henry NAS (TK-10902); ignore output dirs
---
.gitignore | 3 +
.../assets/logos/carnegie.png | Bin 18483 -> 0 bytes
.../assets/logos/designtex.png | Bin 4088 -> 0 bytes
.../assets/logos/hollywood.png | Bin 9633 -> 0 bytes
.../commercial-collection/assets/logos/knoll.png | Bin 15434 -> 0 bytes
.../assets/logos/koroseal.png | Bin 28929 -> 0 bytes
.../commercial-collection/assets/logos/maharam.png | Bin 24786 -> 0 bytes
.../assets/logos/majilite.png | Bin 9534 -> 0 bytes
.../assets/logos/wolfgordon.png | Bin 4383 -> 0 bytes
flipbooks/commercial-collection/audio.json | 48 -
flipbooks/commercial-collection/index.html | 595 -----------
flipbooks/commercial-collection/lines.txt | 10 -
flipbooks/franquemont-london-reel/index.html | 579 ----------
flipbooks/franquemont-london/audio.json | 3 -
flipbooks/franquemont-london/index.html | 579 ----------
flipbooks/franquemont-london/lines.txt | 2 -
flipbooks/glitter-walls-ig/index.html | 552 ----------
.../__pycache__/gen-rooms.cpython-314.pyc | Bin 6756 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r0.jpg | Bin 196242 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r1.jpg | Bin 249493 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r10.jpg | Bin 277994 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r11.jpg | Bin 264945 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r12.jpg | Bin 212669 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r13.jpg | Bin 188812 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r14.jpg | Bin 220536 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r15.jpg | Bin 173135 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r16.jpg | Bin 186380 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r17.jpg | Bin 208191 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r18.jpg | Bin 134371 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r19.jpg | Bin 231366 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r2.jpg | Bin 259603 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r20.jpg | Bin 197128 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r21.jpg | Bin 211004 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r22.jpg | Bin 141045 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r23.jpg | Bin 260942 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r3.jpg | Bin 258355 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r4.jpg | Bin 191567 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r5.jpg | Bin 151809 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r6.jpg | Bin 212712 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r7.jpg | Bin 252221 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r8.jpg | Bin 256262 -> 0 bytes
flipbooks/glitter-walls/assets/roomgen/r9.jpg | Bin 188726 -> 0 bytes
flipbooks/glitter-walls/audio.json | 10 -
flipbooks/glitter-walls/gen-rooms.py | 38 -
flipbooks/glitter-walls/index.html | 552 ----------
flipbooks/glitter-walls/lines.txt | 5 -
flipbooks/graduate-collection/STORYBOARD.md | 63 --
flipbooks/graduate-collection/audio.json | 11 -
flipbooks/graduate-collection/hyperframes.json | 9 -
flipbooks/graduate-collection/index.html | 1113 --------------------
flipbooks/graduate-collection/meta.json | 1 -
flipbooks/graduate-collection/package.json | 10 -
flipbooks/innovations-usa/audio.json | 7 -
flipbooks/innovations-usa/index.html | 1011 ------------------
flipbooks/innovations-usa/lines.txt | 2 -
.../__pycache__/gen-rooms.cpython-314.pyc | Bin 7032 -> 0 bytes
flipbooks/majilite-metallics/assets/roomgen/r0.jpg | Bin 188958 -> 0 bytes
flipbooks/majilite-metallics/assets/roomgen/r1.jpg | Bin 109807 -> 0 bytes
.../majilite-metallics/assets/roomgen/r10.jpg | Bin 107231 -> 0 bytes
.../majilite-metallics/assets/roomgen/r11.jpg | Bin 88359 -> 0 bytes
.../majilite-metallics/assets/roomgen/r12.jpg | Bin 82878 -> 0 bytes
.../majilite-metallics/assets/roomgen/r13.jpg | Bin 93224 -> 0 bytes
.../majilite-metallics/assets/roomgen/r14.jpg | Bin 82233 -> 0 bytes
.../majilite-metallics/assets/roomgen/r15.jpg | Bin 78922 -> 0 bytes
.../majilite-metallics/assets/roomgen/r16.jpg | Bin 97448 -> 0 bytes
.../majilite-metallics/assets/roomgen/r17.jpg | Bin 100962 -> 0 bytes
.../majilite-metallics/assets/roomgen/r18.jpg | Bin 104802 -> 0 bytes
.../majilite-metallics/assets/roomgen/r19.jpg | Bin 101233 -> 0 bytes
flipbooks/majilite-metallics/assets/roomgen/r2.jpg | Bin 96016 -> 0 bytes
.../majilite-metallics/assets/roomgen/r20.jpg | Bin 86829 -> 0 bytes
.../majilite-metallics/assets/roomgen/r21.jpg | Bin 150644 -> 0 bytes
.../majilite-metallics/assets/roomgen/r22.jpg | Bin 101642 -> 0 bytes
.../majilite-metallics/assets/roomgen/r23.jpg | Bin 121500 -> 0 bytes
flipbooks/majilite-metallics/assets/roomgen/r3.jpg | Bin 150910 -> 0 bytes
flipbooks/majilite-metallics/assets/roomgen/r4.jpg | Bin 121699 -> 0 bytes
flipbooks/majilite-metallics/assets/roomgen/r5.jpg | Bin 104005 -> 0 bytes
flipbooks/majilite-metallics/assets/roomgen/r6.jpg | Bin 119791 -> 0 bytes
flipbooks/majilite-metallics/assets/roomgen/r7.jpg | Bin 166204 -> 0 bytes
flipbooks/majilite-metallics/assets/roomgen/r8.jpg | Bin 146031 -> 0 bytes
flipbooks/majilite-metallics/assets/roomgen/r9.jpg | Bin 128854 -> 0 bytes
flipbooks/majilite-metallics/audio.json | 10 -
flipbooks/majilite-metallics/gen-rooms.py | 83 --
flipbooks/majilite-metallics/index.html | 552 ----------
flipbooks/majilite-metallics/lines.txt | 5 -
flipbooks/majilite-metallics/roomsrc/r0.jpg | Bin 364816 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r1.jpg | Bin 345594 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r10.jpg | Bin 346913 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r11.jpg | Bin 353682 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r12.jpg | Bin 294330 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r13.jpg | Bin 326205 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r14.jpg | Bin 322507 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r15.jpg | Bin 251576 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r16.jpg | Bin 392108 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r17.jpg | Bin 378835 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r18.jpg | Bin 349863 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r19.jpg | Bin 364492 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r2.jpg | Bin 297017 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r20.jpg | Bin 342350 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r21.jpg | Bin 335836 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r22.jpg | Bin 355904 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r23.jpg | Bin 490165 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r3.jpg | Bin 334986 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r4.jpg | Bin 307753 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r5.jpg | Bin 374022 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r6.jpg | Bin 383279 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r7.jpg | Bin 357756 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r8.jpg | Bin 378523 -> 0 bytes
flipbooks/majilite-metallics/roomsrc/r9.jpg | Bin 324636 -> 0 bytes
flipbooks/maya-romanoff-ig/index.html | 552 ----------
.../__pycache__/gen-rooms.cpython-314.pyc | Bin 6828 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r0.jpg | Bin 143455 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r1.jpg | Bin 136254 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r10.jpg | Bin 111161 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r11.jpg | Bin 111998 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r12.jpg | Bin 108510 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r13.jpg | Bin 166188 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r14.jpg | Bin 102195 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r15.jpg | Bin 192776 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r16.jpg | Bin 86012 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r17.jpg | Bin 129994 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r18.jpg | Bin 165778 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r19.jpg | Bin 170917 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r2.jpg | Bin 154259 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r20.jpg | Bin 194975 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r21.jpg | Bin 141031 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r22.jpg | Bin 144270 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r23.jpg | Bin 170037 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r3.jpg | Bin 140382 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r4.jpg | Bin 147920 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r5.jpg | Bin 248803 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r6.jpg | Bin 87268 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r7.jpg | Bin 103782 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r8.jpg | Bin 114876 -> 0 bytes
flipbooks/maya-romanoff/assets/roomgen/r9.jpg | Bin 81570 -> 0 bytes
flipbooks/maya-romanoff/audio.json | 10 -
flipbooks/maya-romanoff/gen-rooms.py | 49 -
flipbooks/maya-romanoff/index.html | 552 ----------
flipbooks/maya-romanoff/lines.txt | 5 -
majilite-jewelry/majilite-attache-rose-gold/1.png | Bin 2709782 -> 0 bytes
.../majilite-burnished-metal-mercury/1.png | Bin 2414345 -> 0 bytes
majilite-jewelry/majilite-charm-antique-gold/1.png | Bin 2622797 -> 0 bytes
.../majilite-charm-metallic-taupe/1.png | Bin 2592951 -> 0 bytes
.../majilite-eclipse-fx-metallic-taupe/1.png | Bin 3147164 -> 0 bytes
.../majilite-finesse-pearl-pewter/1.png | Bin 2808079 -> 0 bytes
.../majilite-finesse-pearl-platinum/1.png | Bin 2791435 -> 0 bytes
.../majilite-hammered-metal-midnight/1.png | Bin 2521870 -> 0 bytes
majilite-jewelry/majilite-infinity-grey/1.png | Bin 2526043 -> 0 bytes
.../majilite-metallic-paragon-slate/1.png | Bin 2557884 -> 0 bytes
majilite-jewelry/majilite-nuance-pewter/1.png | Bin 2732368 -> 0 bytes
majilite-jewelry/majilite-shimmer-pewter/1.png | Bin 2691014 -> 0 bytes
majilite-jewelry/majilite-shimmer-slate/1.png | Bin 2778095 -> 0 bytes
majilite-jewelry/majilite-stature-gold/1.png | Bin 2863562 -> 0 bytes
majilite-jewelry/majilite-stature-rose-gold/1.png | Bin 2863580 -> 0 bytes
.../.hyperframes/caption-skin.html | 222 ----
.../dw-new-arrivals-reveal/.media/preferences.json | 48 -
videos/dw-new-arrivals-reveal/AGENTS.md | 93 --
videos/dw-new-arrivals-reveal/BRIEF.md | 54 -
videos/dw-new-arrivals-reveal/CLAUDE.md | 93 --
videos/dw-new-arrivals-reveal/SCRIPT.md | 64 --
videos/dw-new-arrivals-reveal/STORYBOARD.md | 127 ---
.../assets/fonts/cormorant-400.woff2 | Bin 22896 -> 0 bytes
.../assets/fonts/cormorant-500.woff2 | Bin 23260 -> 0 bytes
.../assets/fonts/cormorant-600.woff2 | Bin 23384 -> 0 bytes
.../assets/fonts/cormorant-italic-400.woff2 | Bin 23660 -> 0 bytes
videos/dw-new-arrivals-reveal/assets/voice/01.wav | Bin 88108 -> 0 bytes
videos/dw-new-arrivals-reveal/assets/voice/02.wav | Bin 345132 -> 0 bytes
videos/dw-new-arrivals-reveal/assets/voice/03.wav | Bin 186412 -> 0 bytes
videos/dw-new-arrivals-reveal/assets/voice/04.wav | Bin 329772 -> 0 bytes
videos/dw-new-arrivals-reveal/assets/voice/05.wav | Bin 293932 -> 0 bytes
videos/dw-new-arrivals-reveal/assets/voice/06.wav | Bin 312364 -> 0 bytes
videos/dw-new-arrivals-reveal/assets/voice/07.wav | Bin 263212 -> 0 bytes
videos/dw-new-arrivals-reveal/assets/voice/08.wav | Bin 167980 -> 0 bytes
.../dw-new-arrivals-reveal/audio_engine_meta.json | 454 --------
videos/dw-new-arrivals-reveal/audio_meta.json | 443 --------
videos/dw-new-arrivals-reveal/audio_request.json | 44 -
.../capture/assets/daintree-bluemoon-thibaut.jpg | Bin 659919 -> 0 bytes
.../capture/assets/floral-chinoiserie-green.jpg | Bin 274803 -> 0 bytes
.../capture/assets/floral-elegance-gray.jpg | Bin 235683 -> 0 bytes
.../capture/assets/floral-fantasy-soft-pink.jpg | Bin 123281 -> 0 bytes
.../capture/assets/gleniffer-black-and-grey.jpg | Bin 694794 -> 0 bytes
.../assets/maranta-arrowroot-pale-green.jpg | Bin 525041 -> 0 bytes
.../capture/assets/serengeti-aqua-thibaut.jpg | Bin 350856 -> 0 bytes
.../capture/assets/venus-black-thibaut.jpg | Bin 506653 -> 0 bytes
.../capture/extracted/asset-descriptions.md | 23 -
.../capture/extracted/tokens.json | 6 -
.../capture/extracted/visible-text.txt | 23 -
videos/dw-new-arrivals-reveal/frame.md | 286 -----
videos/dw-new-arrivals-reveal/hyperframes.json | 12 -
videos/dw-new-arrivals-reveal/index.html | 59 --
videos/dw-new-arrivals-reveal/meta.json | 5 -
videos/dw-new-arrivals-reveal/package.json | 11 -
191 files changed, 3 insertions(+), 9085 deletions(-)
diff --git a/.gitignore b/.gitignore
index dc4ca4b..f7c151e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,3 +34,6 @@ flipbooks/*/.waveform-cache/
majilite-jewelry/
spotlight-work/
5x/
+reels/
+flipbooks/
+videos/
diff --git a/flipbooks/commercial-collection/assets/logos/carnegie.png b/flipbooks/commercial-collection/assets/logos/carnegie.png
deleted file mode 100644
index 59c064d..0000000
Binary files a/flipbooks/commercial-collection/assets/logos/carnegie.png and /dev/null differ
diff --git a/flipbooks/commercial-collection/assets/logos/designtex.png b/flipbooks/commercial-collection/assets/logos/designtex.png
deleted file mode 100644
index 6e00045..0000000
Binary files a/flipbooks/commercial-collection/assets/logos/designtex.png and /dev/null differ
diff --git a/flipbooks/commercial-collection/assets/logos/hollywood.png b/flipbooks/commercial-collection/assets/logos/hollywood.png
deleted file mode 100644
index 8873a4f..0000000
Binary files a/flipbooks/commercial-collection/assets/logos/hollywood.png and /dev/null differ
diff --git a/flipbooks/commercial-collection/assets/logos/knoll.png b/flipbooks/commercial-collection/assets/logos/knoll.png
deleted file mode 100644
index a0a8854..0000000
Binary files a/flipbooks/commercial-collection/assets/logos/knoll.png and /dev/null differ
diff --git a/flipbooks/commercial-collection/assets/logos/koroseal.png b/flipbooks/commercial-collection/assets/logos/koroseal.png
deleted file mode 100644
index 28527e7..0000000
Binary files a/flipbooks/commercial-collection/assets/logos/koroseal.png and /dev/null differ
diff --git a/flipbooks/commercial-collection/assets/logos/maharam.png b/flipbooks/commercial-collection/assets/logos/maharam.png
deleted file mode 100644
index 9a4ebb3..0000000
Binary files a/flipbooks/commercial-collection/assets/logos/maharam.png and /dev/null differ
diff --git a/flipbooks/commercial-collection/assets/logos/majilite.png b/flipbooks/commercial-collection/assets/logos/majilite.png
deleted file mode 100644
index 48119ba..0000000
Binary files a/flipbooks/commercial-collection/assets/logos/majilite.png and /dev/null differ
diff --git a/flipbooks/commercial-collection/assets/logos/wolfgordon.png b/flipbooks/commercial-collection/assets/logos/wolfgordon.png
deleted file mode 100644
index ed09642..0000000
Binary files a/flipbooks/commercial-collection/assets/logos/wolfgordon.png and /dev/null differ
diff --git a/flipbooks/commercial-collection/audio.json b/flipbooks/commercial-collection/audio.json
deleted file mode 100644
index d9d7cdc..0000000
--- a/flipbooks/commercial-collection/audio.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
- "bgm": {
- "src": "assets/audio/jazz.wav",
- "volume": 0.18
- },
- "vo": [
- {
- "src": "assets/audio/vo1.wav",
- "anchor": 0.3
- },
- {
- "src": "assets/audio/vo2.wav",
- "anchor": 5.84
- },
- {
- "src": "assets/audio/vo3.wav",
- "anchor": 10.78
- },
- {
- "src": "assets/audio/vo4.wav",
- "anchor": 15.31
- },
- {
- "src": "assets/audio/vo5.wav",
- "anchor": 18.81
- },
- {
- "src": "assets/audio/vo6.wav",
- "anchor": 21.94
- },
- {
- "src": "assets/audio/vo7.wav",
- "anchor": 26.55
- },
- {
- "src": "assets/audio/vo8.wav",
- "anchor": 30.24
- },
- {
- "src": "assets/audio/vo9.wav",
- "anchor": 34.76
- },
- {
- "src": "assets/audio/vo10.wav",
- "anchor": 38.4
- }
- ]
-}
\ No newline at end of file
diff --git a/flipbooks/commercial-collection/index.html b/flipbooks/commercial-collection/index.html
deleted file mode 100644
index 6e6306a..0000000
--- a/flipbooks/commercial-collection/index.html
+++ /dev/null
@@ -1,595 +0,0 @@
-<!doctype html>
-<html lang="en" data-resolution="landscape">
-<head>
-<meta charset="UTF-8" />
-<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-<style>
- :root { --ink:#1c1a17; --cream:#f4efe6; --paper:#fbf8f1; --gold:#b08d57; }
- html,body { margin:0; padding:0; width:1920px; height:1080px; overflow:hidden;
- background:radial-gradient(120% 120% at 50% 0%, #2a2622 0%, #14110e 72%);
- font-family:"Helvetica Neue",system-ui,sans-serif; }
- #main-composition { position:relative; width:1920px; height:1080px; overflow:hidden; }
- .stage { position:absolute; inset:0; perspective:3000px; perspective-origin:50% 46%; }
-
- /* LEFT verso: brand + room + name */
- .verso { position:absolute; top:97px; left:192px; width:768px; height:886px;
- background:var(--paper); border-radius:8px 2px 2px 8px; overflow:hidden;
- box-shadow: inset -30px 0 46px rgba(0,0,0,.12), 0 34px 66px rgba(0,0,0,.5);
- display:flex; flex-direction:column; }
- .wordmark { flex:0 0 auto; text-align:center; padding:49px 0 27px; }
- .wordmark .wm { font-family:Georgia, serif; font-size:55px; color:var(--ink); letter-spacing:.02em; line-height:1; }
- .wordmark .wsub { margin-top:8px; font-size:18px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
- .wordmark .wr { width:64px; height:2px; background:var(--gold); margin:25px auto 0; }
- .roomstack { position:relative; flex:1 1 auto; margin:0 42px 42px; border-radius:4px; overflow:hidden; background:#e9e3d7; }
- .room { position:absolute; inset:0; opacity:0; }
- .room .rimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
- .room.fallback .rimg { transform:scale(1.4); filter:blur(3px) brightness(.82) saturate(1.05); }
- .room .rtint { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
- .room.fallback .rtint { background:linear-gradient(180deg, rgba(20,16,12,.30) 0%, rgba(20,16,12,.62) 100%); }
- .rcap { position:absolute; left:0; right:0; bottom:0; padding:38px 42px; color:#fff; }
- .rcap .rpat { font-family:Georgia, serif; font-size:48px; line-height:1.05; text-shadow:0 2px 14px rgba(0,0,0,.5); }
- .rcap .rcol { margin-top:8px; font-size:20px; letter-spacing:.2em; text-transform:uppercase; color:#e7d8bd; }
- .room .rlogo { position:absolute; top:38px; left:42px;
- background:rgba(255,255,255,.95); border-radius:6px; padding:17px 25px;
- box-shadow:0 8px 22px rgba(0,0,0,.34); max-width:56%; }
- .room .rlogo img { display:block; height:46px; width:auto; max-width:100%; object-fit:contain; }
-
- /* RIGHT recto: page-turn stack of pattern swatches */
- .leaf { position:absolute; top:97px; left:960px; width:768px; height:886px;
- transform-origin:left center; transform-style:preserve-3d; will-change:transform; }
- .leaf .face { position:absolute; inset:0; backface-visibility:hidden; overflow:hidden; border-radius:2px 8px 8px 2px;
- background:var(--paper); box-shadow: 24px 28px 54px rgba(0,0,0,.42), inset 24px 0 42px rgba(0,0,0,.08); }
- .leaf .back { transform:rotateY(180deg); background:linear-gradient(90deg,#efe9dc,#fbf8f1 22%);
- box-shadow:-22px 28px 54px rgba(0,0,0,.36), inset -24px 0 42px rgba(0,0,0,.08); }
- .leaf .art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
- .leaf .shade { position:absolute; inset:0; opacity:0; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,0) 62%); }
-
- /* cover + outro cards */
- .card { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--cream); }
- .card .kicker { font-size:31px; letter-spacing:.44em; text-transform:uppercase; color:var(--gold); }
- .card .big { font-family:Georgia, serif; font-size:134px; line-height:1.0; margin:22px 60px; }
- .card .sub { font-size:35px; letter-spacing:.18em; text-transform:uppercase; color:#c9bfae; }
- .card .rule { width:120px; height:2px; background:var(--gold); margin:32px 0; }
- .card .url { margin-top:28px; font-size:31px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); }
-</style>
-</head>
-<body>
- <div id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="42.9">
-
- <div class="card" id="cover">
- <div class="kicker">Designer Wallcoverings presents</div>
- <div class="big">Commercial & Contract</div>
- <div class="rule"></div>
- <div class="sub">The Commercial Edit</div>
- </div>
-
- <div class="stage" id="stage">
- <div class="verso">
- <div class="wordmark"><div class="wm">Designer Wallcoverings</div><div class="wsub">est. lookbook</div><div class="wr"></div></div>
- <div class="roomstack">
- <div class="room fallback" id="room0">
- <img class="rimg" src="assets/room/r0.jpg" alt="Linsey, Beige room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Linsey, Beige</div><div class="rcol">Commercial & Contract · Koroseal</div></div>
- </div>
- <div class="room fallback" id="room1">
- <img class="rimg" src="assets/room/r1.jpg" alt="Renzu Pink room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Renzu Pink</div><div class="rcol">Commercial & Contract · Koroseal</div></div>
- </div>
- <div class="room fallback" id="room2">
- <img class="rimg" src="assets/room/r2.jpg" alt="Silken One, Gold room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Silken One, Gold</div><div class="rcol">Commercial & Contract · Koroseal</div></div>
- </div>
- <div class="room fallback" id="room3">
- <img class="rimg" src="assets/room/r3.jpg" alt="Corragatio Vinyl room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Corragatio Vinyl</div><div class="rcol">Commercial & Contract · Hollywood Wallcoverings</div></div>
- </div>
- <div class="room fallback" id="room4">
- <img class="rimg" src="assets/room/r4.jpg" alt="Olney Type II room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Olney Type II</div><div class="rcol">Commercial & Contract · Hollywood Wallcoverings</div></div>
- </div>
- <div class="room fallback" id="room5">
- <img class="rimg" src="assets/room/r5.jpg" alt="Rustic Glam Vinyl room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Rustic Glam Vinyl</div><div class="rcol">Commercial & Contract · Hollywood Wallcoverings</div></div>
- </div>
- <div class="room fallback" id="room6">
- <img class="rimg" src="assets/room/r6.jpg" alt="Tek-Wall Ridge room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Tek-Wall Ridge</div><div class="rcol">Commercial & Contract · Maharam</div></div>
- </div>
- <div class="room fallback" id="room7">
- <img class="rimg" src="assets/room/r7.jpg" alt="Filigree, Charcoal room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Filigree, Charcoal</div><div class="rcol">Commercial & Contract · Maharam</div></div>
- </div>
- <div class="room fallback" id="room8">
- <img class="rimg" src="assets/room/r8.jpg" alt="Vest, Dock room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Vest, Dock</div><div class="rcol">Commercial & Contract · Maharam</div></div>
- </div>
- <div class="room fallback" id="room9">
- <img class="rimg" src="assets/room/r9.jpg" alt="Firenze, Swell room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Firenze, Swell</div><div class="rcol">Commercial & Contract · Knoll</div></div>
- </div>
- <div class="room fallback" id="room10">
- <img class="rimg" src="assets/room/r10.jpg" alt="Stencil, Ginger room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Stencil, Ginger</div><div class="rcol">Commercial & Contract · Knoll</div></div>
- </div>
- <div class="room fallback" id="room11">
- <img class="rimg" src="assets/room/r11.jpg" alt="Big Floral, Bloom room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Big Floral, Bloom</div><div class="rcol">Commercial & Contract · Knoll</div></div>
- </div>
- <div class="room fallback" id="room12">
- <img class="rimg" src="assets/room/r12.jpg" alt="Xorel, Seafoam room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Xorel, Seafoam</div><div class="rcol">Commercial & Contract · Carnegie</div></div>
- </div>
- <div class="room fallback" id="room13">
- <img class="rimg" src="assets/room/r13.jpg" alt="Xorel, Bamboo room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Xorel, Bamboo</div><div class="rcol">Commercial & Contract · Carnegie</div></div>
- </div>
- <div class="room fallback" id="room14">
- <img class="rimg" src="assets/room/r14.jpg" alt="Xorel, Prism room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Xorel, Prism</div><div class="rcol">Commercial & Contract · Carnegie</div></div>
- </div>
- <div class="room fallback" id="room15">
- <img class="rimg" src="assets/room/r15.jpg" alt="Wannabe, Blue Jay room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Wannabe, Blue Jay</div><div class="rcol">Commercial & Contract · Designtex</div></div>
- </div>
- <div class="room fallback" id="room16">
- <img class="rimg" src="assets/room/r16.jpg" alt="Wannabe, Red room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Wannabe, Red</div><div class="rcol">Commercial & Contract · Designtex</div></div>
- </div>
- <div class="room fallback" id="room17">
- <img class="rimg" src="assets/room/r17.jpg" alt="Grasscloth, Sprig room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Grasscloth, Sprig</div><div class="rcol">Commercial & Contract · Designtex</div></div>
- </div>
- <div class="room fallback" id="room18">
- <img class="rimg" src="assets/room/r18.jpg" alt="Bead 11112 room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Bead 11112</div><div class="rcol">Commercial & Contract · Wolf Gordon</div></div>
- </div>
- <div class="room fallback" id="room19">
- <img class="rimg" src="assets/room/r19.jpg" alt="Dasma, Gold room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Dasma, Gold</div><div class="rcol">Commercial & Contract · Wolf Gordon</div></div>
- </div>
- <div class="room fallback" id="room20">
- <img class="rimg" src="assets/room/r20.jpg" alt="Glasgow, Umber room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Glasgow, Umber</div><div class="rcol">Commercial & Contract · Wolf Gordon</div></div>
- </div>
- <div class="room fallback" id="room21">
- <img class="rimg" src="assets/room/r21.jpg" alt="Finesse, Pearl room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Finesse, Pearl</div><div class="rcol">Commercial & Contract · Majilite</div></div>
- </div>
- <div class="room fallback" id="room22">
- <img class="rimg" src="assets/room/r22.jpg" alt="Cross-Hatch, Gold room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Cross-Hatch, Gold</div><div class="rcol">Commercial & Contract · Majilite</div></div>
- </div>
- <div class="room fallback" id="room23">
- <img class="rimg" src="assets/room/r23.jpg" alt="Radiance, Pearl room" />
- <div class="rtint"></div>
-
- <div class="rcap"><div class="rpat">Radiance, Pearl</div><div class="rcol">Commercial & Contract · Majilite</div></div>
- </div>
- </div>
- </div>
-
- <div class="leaf" id="leaf0">
- <div class="face front"><img class="art" src="assets/img/p0.jpg" alt="Linsey, Beige" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf1">
- <div class="face front"><img class="art" src="assets/img/p1.jpg" alt="Renzu Pink" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf2">
- <div class="face front"><img class="art" src="assets/img/p2.jpg" alt="Silken One, Gold" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf3">
- <div class="face front"><img class="art" src="assets/img/p3.jpg" alt="Corragatio Vinyl" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf4">
- <div class="face front"><img class="art" src="assets/img/p4.jpg" alt="Olney Type II" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf5">
- <div class="face front"><img class="art" src="assets/img/p5.jpg" alt="Rustic Glam Vinyl" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf6">
- <div class="face front"><img class="art" src="assets/img/p6.jpg" alt="Tek-Wall Ridge" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf7">
- <div class="face front"><img class="art" src="assets/img/p7.jpg" alt="Filigree, Charcoal" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf8">
- <div class="face front"><img class="art" src="assets/img/p8.jpg" alt="Vest, Dock" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf9">
- <div class="face front"><img class="art" src="assets/img/p9.jpg" alt="Firenze, Swell" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf10">
- <div class="face front"><img class="art" src="assets/img/p10.jpg" alt="Stencil, Ginger" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf11">
- <div class="face front"><img class="art" src="assets/img/p11.jpg" alt="Big Floral, Bloom" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf12">
- <div class="face front"><img class="art" src="assets/img/p12.jpg" alt="Xorel, Seafoam" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf13">
- <div class="face front"><img class="art" src="assets/img/p13.jpg" alt="Xorel, Bamboo" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf14">
- <div class="face front"><img class="art" src="assets/img/p14.jpg" alt="Xorel, Prism" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf15">
- <div class="face front"><img class="art" src="assets/img/p15.jpg" alt="Wannabe, Blue Jay" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf16">
- <div class="face front"><img class="art" src="assets/img/p16.jpg" alt="Wannabe, Red" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf17">
- <div class="face front"><img class="art" src="assets/img/p17.jpg" alt="Grasscloth, Sprig" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf18">
- <div class="face front"><img class="art" src="assets/img/p18.jpg" alt="Bead 11112" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf19">
- <div class="face front"><img class="art" src="assets/img/p19.jpg" alt="Dasma, Gold" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf20">
- <div class="face front"><img class="art" src="assets/img/p20.jpg" alt="Glasgow, Umber" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf21">
- <div class="face front"><img class="art" src="assets/img/p21.jpg" alt="Finesse, Pearl" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf22">
- <div class="face front"><img class="art" src="assets/img/p22.jpg" alt="Cross-Hatch, Gold" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf23">
- <div class="face front"><img class="art" src="assets/img/p23.jpg" alt="Radiance, Pearl" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- </div>
-
- <div class="card" id="outro">
- <div class="kicker">Shop the collection</div>
- <div class="big">Commercial & Contract</div>
- <div class="url">designerwallcoverings.com</div>
- </div>
-
- <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="42.9" data-track-index="20" data-volume="0.18"></audio>
- <audio id="vo0" src="assets/audio/vo1.wav" data-start="0.3" data-track-index="21" data-volume="1"></audio>
- <audio id="vo1" src="assets/audio/vo2.wav" data-start="5.84" data-track-index="22" data-volume="1"></audio>
- <audio id="vo2" src="assets/audio/vo3.wav" data-start="10.78" data-track-index="23" data-volume="1"></audio>
- <audio id="vo3" src="assets/audio/vo4.wav" data-start="15.31" data-track-index="24" data-volume="1"></audio>
- <audio id="vo4" src="assets/audio/vo5.wav" data-start="18.81" data-track-index="25" data-volume="1"></audio>
- <audio id="vo5" src="assets/audio/vo6.wav" data-start="21.94" data-track-index="26" data-volume="1"></audio>
- <audio id="vo6" src="assets/audio/vo7.wav" data-start="26.55" data-track-index="27" data-volume="1"></audio>
- <audio id="vo7" src="assets/audio/vo8.wav" data-start="30.24" data-track-index="28" data-volume="1"></audio>
- <audio id="vo8" src="assets/audio/vo9.wav" data-start="34.76" data-track-index="29" data-volume="1"></audio>
- <audio id="vo9" src="assets/audio/vo10.wav" data-start="38.4" data-track-index="30" data-volume="1"></audio>
-
- <script>
- window.__timelines = window.__timelines || {};
- const tl = gsap.timeline({ paused: true });
-
- gsap.set("#leaf0", { rotateY:0, zIndex:24 });
- gsap.set("#leaf1", { rotateY:0, zIndex:23 });
- gsap.set("#leaf2", { rotateY:0, zIndex:22 });
- gsap.set("#leaf3", { rotateY:0, zIndex:21 });
- gsap.set("#leaf4", { rotateY:0, zIndex:20 });
- gsap.set("#leaf5", { rotateY:0, zIndex:19 });
- gsap.set("#leaf6", { rotateY:0, zIndex:18 });
- gsap.set("#leaf7", { rotateY:0, zIndex:17 });
- gsap.set("#leaf8", { rotateY:0, zIndex:16 });
- gsap.set("#leaf9", { rotateY:0, zIndex:15 });
- gsap.set("#leaf10", { rotateY:0, zIndex:14 });
- gsap.set("#leaf11", { rotateY:0, zIndex:13 });
- gsap.set("#leaf12", { rotateY:0, zIndex:12 });
- gsap.set("#leaf13", { rotateY:0, zIndex:11 });
- gsap.set("#leaf14", { rotateY:0, zIndex:10 });
- gsap.set("#leaf15", { rotateY:0, zIndex:9 });
- gsap.set("#leaf16", { rotateY:0, zIndex:8 });
- gsap.set("#leaf17", { rotateY:0, zIndex:7 });
- gsap.set("#leaf18", { rotateY:0, zIndex:6 });
- gsap.set("#leaf19", { rotateY:0, zIndex:5 });
- gsap.set("#leaf20", { rotateY:0, zIndex:4 });
- gsap.set("#leaf21", { rotateY:0, zIndex:3 });
- gsap.set("#leaf22", { rotateY:0, zIndex:2 });
- gsap.set("#leaf23", { 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("#stage", { opacity: 0 });
- gsap.set("#outro", { opacity: 0 }); gsap.set("#outro .big", { y: 34, opacity: 0 }); gsap.set("#outro .url", { opacity: 0 });
- gsap.set("#cover .big", { y: 40, opacity: 0 }); gsap.set("#cover .kicker,#cover .sub,#cover .rule", { opacity: 0 });
-
- // cover
- tl.to("#cover .kicker", { opacity:1, duration:0.5 }, 0.2);
- tl.to("#cover .big", { opacity:1, y:0, duration:0.8, ease:"power3.out" }, 0.4);
- tl.to("#cover .rule,#cover .sub", { opacity:1, duration:0.5 }, 1.0);
- tl.to("#cover", { opacity:0, duration:0.5, ease:"power1.in" }, 5.50);
- tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, 5.50);
-
- // page turns + room crossfades
-
- tl.to("#leaf0", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 6.7);
- tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 6.7);
- tl.to("#leaf0 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 7);
- tl.set("#leaf0", { zIndex: 1000 }, 7);
- tl.set("#leaf0", { opacity: 0 }, 7.300);
- tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 7);
- tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 7);
- tl.to("#leaf1", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 8);
- tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 8);
- tl.to("#leaf1 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 8.3);
- tl.set("#leaf1", { zIndex: 1001 }, 8.3);
- tl.set("#leaf1", { opacity: 0 }, 8.600);
- tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 8.3);
- tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 8.3);
- tl.to("#leaf2", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 9.3);
- tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 9.3);
- tl.to("#leaf2 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 9.6);
- tl.set("#leaf2", { zIndex: 1002 }, 9.6);
- tl.set("#leaf2", { opacity: 0 }, 9.900);
- tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 9.6);
- tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 9.6);
- tl.to("#leaf3", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 10.6);
- tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 10.6);
- tl.to("#leaf3 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 10.9);
- tl.set("#leaf3", { zIndex: 1003 }, 10.9);
- tl.set("#leaf3", { opacity: 0 }, 11.200);
- tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 10.9);
- tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 10.9);
- tl.to("#leaf4", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 11.9);
- tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 11.9);
- tl.to("#leaf4 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 12.2);
- tl.set("#leaf4", { zIndex: 1004 }, 12.2);
- tl.set("#leaf4", { opacity: 0 }, 12.500);
- tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 12.2);
- tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 12.2);
- tl.to("#leaf5", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 13.2);
- tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 13.2);
- tl.to("#leaf5 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 13.5);
- tl.set("#leaf5", { zIndex: 1005 }, 13.5);
- tl.set("#leaf5", { opacity: 0 }, 13.800);
- tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 13.5);
- tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 13.5);
- tl.to("#leaf6", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 14.5);
- tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 14.5);
- tl.to("#leaf6 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 14.8);
- tl.set("#leaf6", { zIndex: 1006 }, 14.8);
- tl.set("#leaf6", { opacity: 0 }, 15.100);
- tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14.8);
- tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14.8);
- tl.to("#leaf7", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 15.8);
- tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 15.8);
- tl.to("#leaf7 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 16.1);
- tl.set("#leaf7", { zIndex: 1007 }, 16.1);
- tl.set("#leaf7", { opacity: 0 }, 16.400);
- tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 16.1);
- tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 16.1);
- tl.to("#leaf8", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 17.1);
- tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 17.1);
- tl.to("#leaf8 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 17.4);
- tl.set("#leaf8", { zIndex: 1008 }, 17.4);
- tl.set("#leaf8", { opacity: 0 }, 17.700);
- tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17.4);
- tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17.4);
- tl.to("#leaf9", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 18.4);
- tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 18.4);
- tl.to("#leaf9 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 18.7);
- tl.set("#leaf9", { zIndex: 1009 }, 18.7);
- tl.set("#leaf9", { opacity: 0 }, 19.000);
- tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 18.7);
- tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 18.7);
- tl.to("#leaf10", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 19.7);
- tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 19.7);
- tl.to("#leaf10 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 20);
- tl.set("#leaf10", { zIndex: 1010 }, 20);
- tl.set("#leaf10", { opacity: 0 }, 20.300);
- tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20);
- tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20);
- tl.to("#leaf11", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 21);
- tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 21);
- tl.to("#leaf11 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 21.3);
- tl.set("#leaf11", { zIndex: 1011 }, 21.3);
- tl.set("#leaf11", { opacity: 0 }, 21.600);
- tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 21.3);
- tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 21.3);
- tl.to("#leaf12", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 22.3);
- tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 22.3);
- tl.to("#leaf12 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 22.6);
- tl.set("#leaf12", { zIndex: 1012 }, 22.6);
- tl.set("#leaf12", { opacity: 0 }, 22.900);
- tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 22.6);
- tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 22.6);
- tl.to("#leaf13", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 23.6);
- tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 23.6);
- tl.to("#leaf13 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 23.9);
- tl.set("#leaf13", { zIndex: 1013 }, 23.9);
- tl.set("#leaf13", { opacity: 0 }, 24.200);
- tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23.9);
- tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23.9);
- tl.to("#leaf14", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 24.9);
- tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 24.9);
- tl.to("#leaf14 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 25.2);
- tl.set("#leaf14", { zIndex: 1014 }, 25.2);
- tl.set("#leaf14", { opacity: 0 }, 25.500);
- tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 25.2);
- tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 25.2);
- tl.to("#leaf15", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 26.2);
- tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 26.2);
- tl.to("#leaf15 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 26.5);
- tl.set("#leaf15", { zIndex: 1015 }, 26.5);
- tl.set("#leaf15", { opacity: 0 }, 26.800);
- tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 26.5);
- tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 26.5);
- tl.to("#leaf16", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 27.5);
- tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 27.5);
- tl.to("#leaf16 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 27.8);
- tl.set("#leaf16", { zIndex: 1016 }, 27.8);
- tl.set("#leaf16", { opacity: 0 }, 28.100);
- tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 27.8);
- tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 27.8);
- tl.to("#leaf17", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 28.8);
- tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 28.8);
- tl.to("#leaf17 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 29.1);
- tl.set("#leaf17", { zIndex: 1017 }, 29.1);
- tl.set("#leaf17", { opacity: 0 }, 29.400);
- tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 29.1);
- tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 29.1);
- tl.to("#leaf18", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 30.1);
- tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 30.1);
- tl.to("#leaf18 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 30.4);
- tl.set("#leaf18", { zIndex: 1018 }, 30.4);
- tl.set("#leaf18", { opacity: 0 }, 30.700);
- tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 30.4);
- tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 30.4);
- tl.to("#leaf19", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 31.4);
- tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 31.4);
- tl.to("#leaf19 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 31.7);
- tl.set("#leaf19", { zIndex: 1019 }, 31.7);
- tl.set("#leaf19", { opacity: 0 }, 32.000);
- tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 31.7);
- tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 31.7);
- tl.to("#leaf20", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 32.7);
- tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 32.7);
- tl.to("#leaf20 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 33);
- tl.set("#leaf20", { zIndex: 1020 }, 33);
- tl.set("#leaf20", { opacity: 0 }, 33.300);
- tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 33);
- tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 33);
- tl.to("#leaf21", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 34);
- tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 34);
- tl.to("#leaf21 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 34.3);
- tl.set("#leaf21", { zIndex: 1021 }, 34.3);
- tl.set("#leaf21", { opacity: 0 }, 34.600);
- tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 34.3);
- tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 34.3);
- tl.to("#leaf22", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 35.3);
- tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 35.3);
- tl.to("#leaf22 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 35.6);
- tl.set("#leaf22", { zIndex: 1022 }, 35.6);
- tl.set("#leaf22", { opacity: 0 }, 35.900);
- tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 35.6);
- tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 35.6);
- tl.to("#leaf23 .art", { scale: 1.05, duration: 2.20, ease:"power1.out" }, 36.6);
- tl.to("#room23 .rimg", { scale: 1.06, duration: 2.20, ease:"power1.out" }, 36.6);
-
- // outro
- tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 38.40);
- tl.to("#outro", { opacity:1, duration:0.5 }, 38.60);
- tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 38.80);
- tl.to("#outro .url", { opacity:1, duration:0.5 }, 39.30);
-
- gsap.set("#bgm", { volume: 0.18 });
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 0.00);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 2.90);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 5.54);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 8.44);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 10.48);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 13.38);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 15.01);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 17.91);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 18.51);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 21.41);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 21.64);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 24.54);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 26.25);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 29.15);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 29.94);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 32.84);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 34.46);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 37.36);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 38.10);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 41.00);
- tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 41.80);
-
- window.__timelines["flipbook"] = tl;
- </script>
- </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/flipbooks/commercial-collection/lines.txt b/flipbooks/commercial-collection/lines.txt
deleted file mode 100644
index feaac70..0000000
--- a/flipbooks/commercial-collection/lines.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-This is the commercial edit from Designer Wallcoverings — eight contract houses, one showroom.
-We start with Koroseal — commercial-grade Type Two vinyl, built for high-traffic walls.
-Hollywood Wallcoverings brings silver-screen glamour with contract durability.
-Maharam — design-forward textiles and walls that anchor a room.
-Knoll — modernist textile walls with real pedigree.
-Carnegie's Xorel — the high-performance textile wall, endlessly cleanable.
-Designtex — sustainable contract surfaces, quietly beautiful.
-Wolf Gordon — contract walls and wall protection that work as hard as they look.
-And Majilite — metallic faux leather, finished like fine jewelry.
-Three picks from each. Order swatches at trade pricing, from Designer Wallcoverings.
diff --git a/flipbooks/franquemont-london-reel/index.html b/flipbooks/franquemont-london-reel/index.html
deleted file mode 100644
index 770887b..0000000
--- a/flipbooks/franquemont-london-reel/index.html
+++ /dev/null
@@ -1,579 +0,0 @@
-<!doctype html>
-<html lang="en" data-resolution="portrait">
-<head>
-<meta charset="UTF-8" />
-<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-<style>
- :root { --ink:#1c1a17; --cream:#f4efe6; --paper:#fbf8f1; --gold:#b08d57; }
- html,body { margin:0; padding:0; width:1080px; height:1920px; overflow:hidden;
- background:radial-gradient(120% 120% at 50% 0%, #2a2622 0%, #14110e 72%);
- font-family:"Helvetica Neue",system-ui,sans-serif; }
- #main-composition { position:relative; width:1080px; height:1920px; overflow:hidden; }
- .stage { position:absolute; inset:0; perspective:3000px; perspective-origin:50% 46%; }
-
- /* LEFT verso: brand + room + name */
- .verso { position:absolute; top:173px; left:54px; width:486px; height:1574px;
- 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:87px 0 47px; }
- .wordmark .wm { font-family:Georgia, serif; font-size:35px; color:var(--ink); letter-spacing:.02em; line-height:1; }
- .wordmark .wsub { margin-top:8px; font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
- .wordmark .wr { width:64px; height:2px; background:var(--gold); margin:44px auto 0; }
- .roomstack { position:relative; flex:1 1 auto; margin:0 27px 27px; 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:24px 27px; color:#fff; }
- .rcap .rpat { font-family:Georgia, serif; font-size:30px; line-height:1.05; text-shadow:0 2px 14px rgba(0,0,0,.5); }
- .rcap .rcol { margin-top:8px; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:#e7d8bd; }
-
- /* RIGHT recto: page-turn stack of pattern swatches */
- .leaf { position:absolute; top:173px; left:540px; width:486px; height:1574px;
- 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:17px; letter-spacing:.44em; text-transform:uppercase; color:var(--gold); }
- .card .big { font-family:Georgia, serif; font-size:76px; line-height:1.0; margin:22px 60px; }
- .card .sub { font-size:19px; 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:17px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); }
-</style>
-</head>
-<body>
- <div id="main-composition" data-composition-id="flipbook" data-width="1080" data-height="1920" data-start="0" data-duration="62.3">
-
- <div class="card" id="cover">
- <div class="kicker">Designer Wallcoverings presents</div>
- <div class="big">Franquemont London</div>
- <div class="rule"></div>
- <div class="sub">The Collection</div>
- </div>
-
- <div class="stage" id="stage">
- <div class="verso">
- <div class="wordmark"><div class="wm">Designer Wallcoverings</div><div class="wsub">est. lookbook</div><div class="wr"></div></div>
- <div class="roomstack">
- <div class="room" id="room0">
- <img class="rimg" src="assets/room/r0.jpg" alt="Java Slate Blue room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Slate Blue</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room1">
- <img class="rimg" src="assets/room/r1.jpg" alt="Java Glowing Ember room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Glowing Ember</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room2">
- <img class="rimg" src="assets/room/r2.jpg" alt="Floral Stripe Midnight Truffle room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Floral Stripe Midnight Truffle</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room3">
- <img class="rimg" src="assets/room/r3.jpg" alt="Woolf Dusky Blue room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Woolf Dusky Blue</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room4">
- <img class="rimg" src="assets/room/r4.jpg" alt="Floral Zigzag Slate Blue room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Floral Zigzag Slate Blue</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room5">
- <img class="rimg" src="assets/room/r5.jpg" alt="Vine Blots Sunlit Amber room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Vine Blots Sunlit Amber</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room6">
- <img class="rimg" src="assets/room/r6.jpg" alt="Vine Blots Artichoke & Dusty Blue room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Vine Blots Artichoke & Dusty Blue</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room7">
- <img class="rimg" src="assets/room/r7.jpg" alt="Vine Blots Crimson & Fuchsia Blaze room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Vine Blots Crimson & Fuchsia Blaze</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room8">
- <img class="rimg" src="assets/room/r8.jpg" alt="Vine Blots Sky & Sand room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Vine Blots Sky & Sand</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room9">
- <img class="rimg" src="assets/room/r9.jpg" alt="Vine Blots Fuchsia Blaze room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Vine Blots Fuchsia Blaze</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room10">
- <img class="rimg" src="assets/room/r10.jpg" alt="Vine Blots Dusty Blue room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Vine Blots Dusty Blue</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room11">
- <img class="rimg" src="assets/room/r11.jpg" alt="Vine Blots Apple & Sand room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Vine Blots Apple & Sand</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room12">
- <img class="rimg" src="assets/room/r12.jpg" alt="Java Magenta Blush room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Magenta Blush</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room13">
- <img class="rimg" src="assets/room/r13.jpg" alt="Java Arctic room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Arctic</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room14">
- <img class="rimg" src="assets/room/r14.jpg" alt="Java Olive room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Olive</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room15">
- <img class="rimg" src="assets/room/r15.jpg" alt="Java Burnt Orange room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Burnt Orange</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room16">
- <img class="rimg" src="assets/room/r16.jpg" alt="Java Blush room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Blush</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room17">
- <img class="rimg" src="assets/room/r17.jpg" alt="Java Indigo room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Indigo</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room18">
- <img class="rimg" src="assets/room/r18.jpg" alt="Java Verdant Green room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Verdant Green</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room19">
- <img class="rimg" src="assets/room/r19.jpg" alt="Java Graphite room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Graphite</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room20">
- <img class="rimg" src="assets/room/r20.jpg" alt="Java Rust room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Rust</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room21">
- <img class="rimg" src="assets/room/r21.jpg" alt="Verster Oxblood room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Verster Oxblood</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room22">
- <img class="rimg" src="assets/room/r22.jpg" alt="Verster Hay room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Verster Hay</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room23">
- <img class="rimg" src="assets/room/r23.jpg" alt="Verster Moss room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Verster Moss</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room24">
- <img class="rimg" src="assets/room/r24.jpg" alt="Verster Carmine room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Verster Carmine</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room25">
- <img class="rimg" src="assets/room/r25.jpg" alt="Verster Rust room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Verster Rust</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- </div>
- </div>
-
- <div class="leaf" id="leaf0">
- <div class="face front"><img class="art" src="assets/img/p0.jpg" alt="Java Slate Blue" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf1">
- <div class="face front"><img class="art" src="assets/img/p1.jpg" alt="Java Glowing Ember" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf2">
- <div class="face front"><img class="art" src="assets/img/p2.jpg" alt="Floral Stripe Midnight Truffle" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf3">
- <div class="face front"><img class="art" src="assets/img/p3.jpg" alt="Woolf Dusky Blue" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf4">
- <div class="face front"><img class="art" src="assets/img/p4.jpg" alt="Floral Zigzag Slate Blue" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf5">
- <div class="face front"><img class="art" src="assets/img/p5.jpg" alt="Vine Blots Sunlit Amber" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf6">
- <div class="face front"><img class="art" src="assets/img/p6.jpg" alt="Vine Blots Artichoke & Dusty Blue" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf7">
- <div class="face front"><img class="art" src="assets/img/p7.jpg" alt="Vine Blots Crimson & Fuchsia Blaze" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf8">
- <div class="face front"><img class="art" src="assets/img/p8.jpg" alt="Vine Blots Sky & Sand" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf9">
- <div class="face front"><img class="art" src="assets/img/p9.jpg" alt="Vine Blots Fuchsia Blaze" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf10">
- <div class="face front"><img class="art" src="assets/img/p10.jpg" alt="Vine Blots Dusty Blue" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf11">
- <div class="face front"><img class="art" src="assets/img/p11.jpg" alt="Vine Blots Apple & Sand" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf12">
- <div class="face front"><img class="art" src="assets/img/p12.jpg" alt="Java Magenta Blush" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf13">
- <div class="face front"><img class="art" src="assets/img/p13.jpg" alt="Java Arctic" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf14">
- <div class="face front"><img class="art" src="assets/img/p14.jpg" alt="Java Olive" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf15">
- <div class="face front"><img class="art" src="assets/img/p15.jpg" alt="Java Burnt Orange" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf16">
- <div class="face front"><img class="art" src="assets/img/p16.jpg" alt="Java Blush" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf17">
- <div class="face front"><img class="art" src="assets/img/p17.jpg" alt="Java Indigo" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf18">
- <div class="face front"><img class="art" src="assets/img/p18.jpg" alt="Java Verdant Green" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf19">
- <div class="face front"><img class="art" src="assets/img/p19.jpg" alt="Java Graphite" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf20">
- <div class="face front"><img class="art" src="assets/img/p20.jpg" alt="Java Rust" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf21">
- <div class="face front"><img class="art" src="assets/img/p21.jpg" alt="Verster Oxblood" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf22">
- <div class="face front"><img class="art" src="assets/img/p22.jpg" alt="Verster Hay" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf23">
- <div class="face front"><img class="art" src="assets/img/p23.jpg" alt="Verster Moss" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf24">
- <div class="face front"><img class="art" src="assets/img/p24.jpg" alt="Verster Carmine" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf25">
- <div class="face front"><img class="art" src="assets/img/p25.jpg" alt="Verster Rust" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- </div>
-
- <div class="card" id="outro">
- <div class="kicker">Shop the collection</div>
- <div class="big">Franquemont London</div>
- <div class="url">designerwallcoverings.com</div>
- </div>
-
- <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="62.3" data-track-index="20" data-volume="0.34"></audio>
- <audio id="vo0" src="assets/audio/vo1.wav" data-start="3.7" data-track-index="21" data-volume="1"></audio>
- <audio id="vo1" src="assets/audio/vo2.wav" data-start="48.85" data-track-index="22" data-volume="1"></audio>
-
- <script>
- window.__timelines = window.__timelines || {};
- const tl = gsap.timeline({ paused: true });
-
- gsap.set("#leaf0", { rotateY:0, zIndex:26 });
- gsap.set("#leaf1", { rotateY:0, zIndex:25 });
- gsap.set("#leaf2", { rotateY:0, zIndex:24 });
- gsap.set("#leaf3", { rotateY:0, zIndex:23 });
- gsap.set("#leaf4", { rotateY:0, zIndex:22 });
- gsap.set("#leaf5", { rotateY:0, zIndex:21 });
- gsap.set("#leaf6", { rotateY:0, zIndex:20 });
- gsap.set("#leaf7", { rotateY:0, zIndex:19 });
- gsap.set("#leaf8", { rotateY:0, zIndex:18 });
- gsap.set("#leaf9", { rotateY:0, zIndex:17 });
- gsap.set("#leaf10", { rotateY:0, zIndex:16 });
- gsap.set("#leaf11", { rotateY:0, zIndex:15 });
- gsap.set("#leaf12", { rotateY:0, zIndex:14 });
- gsap.set("#leaf13", { rotateY:0, zIndex:13 });
- gsap.set("#leaf14", { rotateY:0, zIndex:12 });
- gsap.set("#leaf15", { rotateY:0, zIndex:11 });
- gsap.set("#leaf16", { rotateY:0, zIndex:10 });
- gsap.set("#leaf17", { rotateY:0, zIndex:9 });
- gsap.set("#leaf18", { rotateY:0, zIndex:8 });
- gsap.set("#leaf19", { rotateY:0, zIndex:7 });
- gsap.set("#leaf20", { rotateY:0, zIndex:6 });
- gsap.set("#leaf21", { rotateY:0, zIndex:5 });
- gsap.set("#leaf22", { rotateY:0, zIndex:4 });
- gsap.set("#leaf23", { rotateY:0, zIndex:3 });
- gsap.set("#leaf24", { rotateY:0, zIndex:2 });
- gsap.set("#leaf25", { 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("#stage", { opacity: 0 });
- gsap.set("#outro", { opacity: 0 }); gsap.set("#outro .big", { y: 34, opacity: 0 }); gsap.set("#outro .url", { opacity: 0 });
- gsap.set("#cover .big", { y: 40, opacity: 0 }); gsap.set("#cover .kicker,#cover .sub,#cover .rule", { opacity: 0 });
-
- // cover
- tl.to("#cover .kicker", { opacity:1, duration:0.5 }, 0.2);
- tl.to("#cover .big", { opacity:1, y:0, duration:0.8, ease:"power3.out" }, 0.4);
- tl.to("#cover .rule,#cover .sub", { opacity:1, duration:0.5 }, 1.0);
- tl.to("#cover", { opacity:0, duration:0.5, ease:"power1.in" }, 3.00);
- tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, 3.00);
-
- // page turns + room crossfades
-
- tl.to("#leaf0", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 4.2);
- tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 4.2);
- tl.to("#leaf0 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 4.7);
- tl.set("#leaf0", { zIndex: 1000 }, 4.7);
- tl.set("#leaf0", { opacity: 0 }, 5.200);
- tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 4.7);
- tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 4.7);
- tl.to("#leaf1", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 5.8);
- tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 5.8);
- tl.to("#leaf1 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 6.3);
- tl.set("#leaf1", { zIndex: 1001 }, 6.3);
- tl.set("#leaf1", { opacity: 0 }, 6.800);
- tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 6.3);
- tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 6.3);
- tl.to("#leaf2", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 7.4);
- tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 7.4);
- tl.to("#leaf2 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 7.9);
- tl.set("#leaf2", { zIndex: 1002 }, 7.9);
- tl.set("#leaf2", { opacity: 0 }, 8.400);
- tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 7.9);
- tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 7.9);
- tl.to("#leaf3", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 9);
- tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 9);
- tl.to("#leaf3 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 9.5);
- tl.set("#leaf3", { zIndex: 1003 }, 9.5);
- tl.set("#leaf3", { opacity: 0 }, 10.000);
- tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 9.5);
- tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 9.5);
- tl.to("#leaf4", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 10.6);
- tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 10.6);
- tl.to("#leaf4 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 11.1);
- tl.set("#leaf4", { zIndex: 1004 }, 11.1);
- tl.set("#leaf4", { opacity: 0 }, 11.600);
- tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 11.1);
- tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 11.1);
- tl.to("#leaf5", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 12.2);
- tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 12.2);
- tl.to("#leaf5 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 12.7);
- tl.set("#leaf5", { zIndex: 1005 }, 12.7);
- tl.set("#leaf5", { opacity: 0 }, 13.200);
- tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 12.7);
- tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 12.7);
- tl.to("#leaf6", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 13.8);
- tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 13.8);
- tl.to("#leaf6 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 14.3);
- tl.set("#leaf6", { zIndex: 1006 }, 14.3);
- tl.set("#leaf6", { opacity: 0 }, 14.800);
- tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14.3);
- tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14.3);
- tl.to("#leaf7", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 15.4);
- tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 15.4);
- tl.to("#leaf7 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 15.9);
- tl.set("#leaf7", { zIndex: 1007 }, 15.9);
- tl.set("#leaf7", { opacity: 0 }, 16.400);
- tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 15.9);
- tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 15.9);
- tl.to("#leaf8", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 17);
- tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 17);
- tl.to("#leaf8 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 17.5);
- tl.set("#leaf8", { zIndex: 1008 }, 17.5);
- tl.set("#leaf8", { opacity: 0 }, 18.000);
- tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17.5);
- tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17.5);
- tl.to("#leaf9", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 18.6);
- tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 18.6);
- tl.to("#leaf9 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 19.1);
- tl.set("#leaf9", { zIndex: 1009 }, 19.1);
- tl.set("#leaf9", { opacity: 0 }, 19.600);
- tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 19.1);
- tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 19.1);
- tl.to("#leaf10", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 20.2);
- tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 20.2);
- tl.to("#leaf10 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 20.7);
- tl.set("#leaf10", { zIndex: 1010 }, 20.7);
- tl.set("#leaf10", { opacity: 0 }, 21.200);
- tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20.7);
- tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20.7);
- tl.to("#leaf11", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 21.8);
- tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 21.8);
- tl.to("#leaf11 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 22.3);
- tl.set("#leaf11", { zIndex: 1011 }, 22.3);
- tl.set("#leaf11", { opacity: 0 }, 22.800);
- tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 22.3);
- tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 22.3);
- tl.to("#leaf12", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 23.4);
- tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 23.4);
- tl.to("#leaf12 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 23.9);
- tl.set("#leaf12", { zIndex: 1012 }, 23.9);
- tl.set("#leaf12", { opacity: 0 }, 24.400);
- tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23.9);
- tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23.9);
- tl.to("#leaf13", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 25);
- tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 25);
- tl.to("#leaf13 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 25.5);
- tl.set("#leaf13", { zIndex: 1013 }, 25.5);
- tl.set("#leaf13", { opacity: 0 }, 26.000);
- tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 25.5);
- tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 25.5);
- tl.to("#leaf14", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 26.6);
- tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 26.6);
- tl.to("#leaf14 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 27.1);
- tl.set("#leaf14", { zIndex: 1014 }, 27.1);
- tl.set("#leaf14", { opacity: 0 }, 27.600);
- tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 27.1);
- tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 27.1);
- tl.to("#leaf15", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 28.2);
- tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 28.2);
- tl.to("#leaf15 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 28.7);
- tl.set("#leaf15", { zIndex: 1015 }, 28.7);
- tl.set("#leaf15", { opacity: 0 }, 29.200);
- tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 28.7);
- tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 28.7);
- tl.to("#leaf16", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 29.8);
- tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 29.8);
- tl.to("#leaf16 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 30.3);
- tl.set("#leaf16", { zIndex: 1016 }, 30.3);
- tl.set("#leaf16", { opacity: 0 }, 30.800);
- tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 30.3);
- tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 30.3);
- tl.to("#leaf17", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 31.4);
- tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 31.4);
- tl.to("#leaf17 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 31.9);
- tl.set("#leaf17", { zIndex: 1017 }, 31.9);
- tl.set("#leaf17", { opacity: 0 }, 32.400);
- tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 31.9);
- tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 31.9);
- tl.to("#leaf18", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 33);
- tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 33);
- tl.to("#leaf18 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 33.5);
- tl.set("#leaf18", { zIndex: 1018 }, 33.5);
- tl.set("#leaf18", { opacity: 0 }, 34.000);
- tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 33.5);
- tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 33.5);
- tl.to("#leaf19", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 34.6);
- tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 34.6);
- tl.to("#leaf19 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 35.1);
- tl.set("#leaf19", { zIndex: 1019 }, 35.1);
- tl.set("#leaf19", { opacity: 0 }, 35.600);
- tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 35.1);
- tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 35.1);
- tl.to("#leaf20", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 36.2);
- tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 36.2);
- tl.to("#leaf20 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 36.7);
- tl.set("#leaf20", { zIndex: 1020 }, 36.7);
- tl.set("#leaf20", { opacity: 0 }, 37.200);
- tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 36.7);
- tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 36.7);
- tl.to("#leaf21", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 37.8);
- tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 37.8);
- tl.to("#leaf21 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 38.3);
- tl.set("#leaf21", { zIndex: 1021 }, 38.3);
- tl.set("#leaf21", { opacity: 0 }, 38.800);
- tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 38.3);
- tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 38.3);
- tl.to("#leaf22", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 39.4);
- tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 39.4);
- tl.to("#leaf22 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 39.9);
- tl.set("#leaf22", { zIndex: 1022 }, 39.9);
- tl.set("#leaf22", { opacity: 0 }, 40.400);
- tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 39.9);
- tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 39.9);
- tl.to("#leaf23", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 41);
- tl.to("#leaf23 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 41);
- tl.to("#leaf23 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 41.5);
- tl.set("#leaf23", { zIndex: 1023 }, 41.5);
- tl.set("#leaf23", { opacity: 0 }, 42.000);
- tl.to("#room23", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 41.5);
- tl.to("#room24", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 41.5);
- tl.to("#leaf24", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 42.6);
- tl.to("#leaf24 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 42.6);
- tl.to("#leaf24 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 43.1);
- tl.set("#leaf24", { zIndex: 1024 }, 43.1);
- tl.set("#leaf24", { opacity: 0 }, 43.600);
- tl.to("#room24", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 43.1);
- tl.to("#room25", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 43.1);
- tl.to("#leaf25 .art", { scale: 1.05, duration: 4.90, ease:"power1.out" }, 44.2);
- tl.to("#room25 .rimg", { scale: 1.06, duration: 4.90, ease:"power1.out" }, 44.2);
-
- // outro
- tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 48.70);
- tl.to("#outro", { opacity:1, duration:0.5 }, 48.90);
- tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 49.10);
- tl.to("#outro .url", { opacity:1, duration:0.5 }, 49.60);
-
- gsap.set("#bgm", { volume: 0.34 });
- tl.to("#bgm", { volume: 0.17, duration: 0.4 }, 3.40);
- tl.to("#bgm", { volume: 0.34, duration: 0.6 }, 6.30);
- tl.to("#bgm", { volume: 0.17, duration: 0.4 }, 48.55);
- tl.to("#bgm", { volume: 0.34, duration: 0.6 }, 51.45);
- tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 61.20);
-
- window.__timelines["flipbook"] = tl;
- </script>
- </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/flipbooks/franquemont-london/audio.json b/flipbooks/franquemont-london/audio.json
deleted file mode 100644
index 35b4886..0000000
--- a/flipbooks/franquemont-london/audio.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{ "bgm": { "src": "assets/audio/jazz.wav", "volume": 0.34 },
- "vo": [ { "src": "assets/audio/vo1.wav", "anchor": "intro" },
- { "src": "assets/audio/vo2.wav", "anchor": "outro" } ] }
diff --git a/flipbooks/franquemont-london/index.html b/flipbooks/franquemont-london/index.html
deleted file mode 100644
index 5120402..0000000
--- a/flipbooks/franquemont-london/index.html
+++ /dev/null
@@ -1,579 +0,0 @@
-<!doctype html>
-<html lang="en" data-resolution="landscape">
-<head>
-<meta charset="UTF-8" />
-<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-<style>
- :root { --ink:#1c1a17; --cream:#f4efe6; --paper:#fbf8f1; --gold:#b08d57; }
- html,body { margin:0; padding:0; width:1920px; height:1080px; overflow:hidden;
- background:radial-gradient(120% 120% at 50% 0%, #2a2622 0%, #14110e 72%);
- font-family:"Helvetica Neue",system-ui,sans-serif; }
- #main-composition { position:relative; width:1920px; height:1080px; overflow:hidden; }
- .stage { position:absolute; inset:0; perspective:3000px; perspective-origin:50% 46%; }
-
- /* LEFT verso: brand + room + name */
- .verso { position:absolute; top:97px; left:192px; width:768px; height:886px;
- background:var(--paper); border-radius:8px 2px 2px 8px; overflow:hidden;
- box-shadow: inset -30px 0 46px rgba(0,0,0,.12), 0 34px 66px rgba(0,0,0,.5);
- display:flex; flex-direction:column; }
- .wordmark { flex:0 0 auto; text-align:center; padding:49px 0 27px; }
- .wordmark .wm { font-family:Georgia, serif; font-size:55px; color:var(--ink); letter-spacing:.02em; line-height:1; }
- .wordmark .wsub { margin-top:8px; font-size:18px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
- .wordmark .wr { width:64px; height:2px; background:var(--gold); margin:25px auto 0; }
- .roomstack { position:relative; flex:1 1 auto; margin:0 42px 42px; border-radius:4px; overflow:hidden; background:#e9e3d7; }
- .room { position:absolute; inset:0; opacity:0; }
- .room .rimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
- .room.fallback .rimg { transform:scale(1.4); filter:blur(3px) brightness(.82) saturate(1.05); }
- .room .rtint { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
- .room.fallback .rtint { background:linear-gradient(180deg, rgba(20,16,12,.30) 0%, rgba(20,16,12,.62) 100%); }
- .rcap { position:absolute; left:0; right:0; bottom:0; padding:38px 42px; color:#fff; }
- .rcap .rpat { font-family:Georgia, serif; font-size:48px; line-height:1.05; text-shadow:0 2px 14px rgba(0,0,0,.5); }
- .rcap .rcol { margin-top:8px; font-size:20px; letter-spacing:.2em; text-transform:uppercase; color:#e7d8bd; }
-
- /* RIGHT recto: page-turn stack of pattern swatches */
- .leaf { position:absolute; top:97px; left:960px; width:768px; height:886px;
- transform-origin:left center; transform-style:preserve-3d; will-change:transform; }
- .leaf .face { position:absolute; inset:0; backface-visibility:hidden; overflow:hidden; border-radius:2px 8px 8px 2px;
- background:var(--paper); box-shadow: 24px 28px 54px rgba(0,0,0,.42), inset 24px 0 42px rgba(0,0,0,.08); }
- .leaf .back { transform:rotateY(180deg); background:linear-gradient(90deg,#efe9dc,#fbf8f1 22%);
- box-shadow:-22px 28px 54px rgba(0,0,0,.36), inset -24px 0 42px rgba(0,0,0,.08); }
- .leaf .art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
- .leaf .shade { position:absolute; inset:0; opacity:0; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,0) 62%); }
-
- /* cover + outro cards */
- .card { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--cream); }
- .card .kicker { font-size:31px; letter-spacing:.44em; text-transform:uppercase; color:var(--gold); }
- .card .big { font-family:Georgia, serif; font-size:134px; line-height:1.0; margin:22px 60px; }
- .card .sub { font-size:35px; letter-spacing:.18em; text-transform:uppercase; color:#c9bfae; }
- .card .rule { width:120px; height:2px; background:var(--gold); margin:32px 0; }
- .card .url { margin-top:28px; font-size:31px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); }
-</style>
-</head>
-<body>
- <div id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="62.3">
-
- <div class="card" id="cover">
- <div class="kicker">Designer Wallcoverings presents</div>
- <div class="big">Franquemont London</div>
- <div class="rule"></div>
- <div class="sub">The Collection</div>
- </div>
-
- <div class="stage" id="stage">
- <div class="verso">
- <div class="wordmark"><div class="wm">Designer Wallcoverings</div><div class="wsub">est. lookbook</div><div class="wr"></div></div>
- <div class="roomstack">
- <div class="room" id="room0">
- <img class="rimg" src="assets/room/r0.jpg" alt="Java Slate Blue room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Slate Blue</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room1">
- <img class="rimg" src="assets/room/r1.jpg" alt="Java Glowing Ember room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Glowing Ember</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room2">
- <img class="rimg" src="assets/room/r2.jpg" alt="Floral Stripe Midnight Truffle room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Floral Stripe Midnight Truffle</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room3">
- <img class="rimg" src="assets/room/r3.jpg" alt="Woolf Dusky Blue room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Woolf Dusky Blue</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room4">
- <img class="rimg" src="assets/room/r4.jpg" alt="Floral Zigzag Slate Blue room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Floral Zigzag Slate Blue</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room5">
- <img class="rimg" src="assets/room/r5.jpg" alt="Vine Blots Sunlit Amber room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Vine Blots Sunlit Amber</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room6">
- <img class="rimg" src="assets/room/r6.jpg" alt="Vine Blots Artichoke & Dusty Blue room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Vine Blots Artichoke & Dusty Blue</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room7">
- <img class="rimg" src="assets/room/r7.jpg" alt="Vine Blots Crimson & Fuchsia Blaze room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Vine Blots Crimson & Fuchsia Blaze</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room8">
- <img class="rimg" src="assets/room/r8.jpg" alt="Vine Blots Sky & Sand room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Vine Blots Sky & Sand</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room9">
- <img class="rimg" src="assets/room/r9.jpg" alt="Vine Blots Fuchsia Blaze room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Vine Blots Fuchsia Blaze</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room10">
- <img class="rimg" src="assets/room/r10.jpg" alt="Vine Blots Dusty Blue room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Vine Blots Dusty Blue</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room11">
- <img class="rimg" src="assets/room/r11.jpg" alt="Vine Blots Apple & Sand room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Vine Blots Apple & Sand</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room12">
- <img class="rimg" src="assets/room/r12.jpg" alt="Java Magenta Blush room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Magenta Blush</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room13">
- <img class="rimg" src="assets/room/r13.jpg" alt="Java Arctic room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Arctic</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room14">
- <img class="rimg" src="assets/room/r14.jpg" alt="Java Olive room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Olive</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room15">
- <img class="rimg" src="assets/room/r15.jpg" alt="Java Burnt Orange room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Burnt Orange</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room16">
- <img class="rimg" src="assets/room/r16.jpg" alt="Java Blush room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Blush</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room17">
- <img class="rimg" src="assets/room/r17.jpg" alt="Java Indigo room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Indigo</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room18">
- <img class="rimg" src="assets/room/r18.jpg" alt="Java Verdant Green room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Verdant Green</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room19">
- <img class="rimg" src="assets/room/r19.jpg" alt="Java Graphite room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Graphite</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room20">
- <img class="rimg" src="assets/room/r20.jpg" alt="Java Rust room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Java Rust</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room21">
- <img class="rimg" src="assets/room/r21.jpg" alt="Verster Oxblood room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Verster Oxblood</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room22">
- <img class="rimg" src="assets/room/r22.jpg" alt="Verster Hay room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Verster Hay</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room23">
- <img class="rimg" src="assets/room/r23.jpg" alt="Verster Moss room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Verster Moss</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room24">
- <img class="rimg" src="assets/room/r24.jpg" alt="Verster Carmine room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Verster Carmine</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- <div class="room" id="room25">
- <img class="rimg" src="assets/room/r25.jpg" alt="Verster Rust room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Verster Rust</div><div class="rcol">Franquemont London · all</div></div>
- </div>
- </div>
- </div>
-
- <div class="leaf" id="leaf0">
- <div class="face front"><img class="art" src="assets/img/p0.jpg" alt="Java Slate Blue" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf1">
- <div class="face front"><img class="art" src="assets/img/p1.jpg" alt="Java Glowing Ember" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf2">
- <div class="face front"><img class="art" src="assets/img/p2.jpg" alt="Floral Stripe Midnight Truffle" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf3">
- <div class="face front"><img class="art" src="assets/img/p3.jpg" alt="Woolf Dusky Blue" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf4">
- <div class="face front"><img class="art" src="assets/img/p4.jpg" alt="Floral Zigzag Slate Blue" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf5">
- <div class="face front"><img class="art" src="assets/img/p5.jpg" alt="Vine Blots Sunlit Amber" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf6">
- <div class="face front"><img class="art" src="assets/img/p6.jpg" alt="Vine Blots Artichoke & Dusty Blue" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf7">
- <div class="face front"><img class="art" src="assets/img/p7.jpg" alt="Vine Blots Crimson & Fuchsia Blaze" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf8">
- <div class="face front"><img class="art" src="assets/img/p8.jpg" alt="Vine Blots Sky & Sand" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf9">
- <div class="face front"><img class="art" src="assets/img/p9.jpg" alt="Vine Blots Fuchsia Blaze" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf10">
- <div class="face front"><img class="art" src="assets/img/p10.jpg" alt="Vine Blots Dusty Blue" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf11">
- <div class="face front"><img class="art" src="assets/img/p11.jpg" alt="Vine Blots Apple & Sand" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf12">
- <div class="face front"><img class="art" src="assets/img/p12.jpg" alt="Java Magenta Blush" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf13">
- <div class="face front"><img class="art" src="assets/img/p13.jpg" alt="Java Arctic" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf14">
- <div class="face front"><img class="art" src="assets/img/p14.jpg" alt="Java Olive" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf15">
- <div class="face front"><img class="art" src="assets/img/p15.jpg" alt="Java Burnt Orange" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf16">
- <div class="face front"><img class="art" src="assets/img/p16.jpg" alt="Java Blush" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf17">
- <div class="face front"><img class="art" src="assets/img/p17.jpg" alt="Java Indigo" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf18">
- <div class="face front"><img class="art" src="assets/img/p18.jpg" alt="Java Verdant Green" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf19">
- <div class="face front"><img class="art" src="assets/img/p19.jpg" alt="Java Graphite" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf20">
- <div class="face front"><img class="art" src="assets/img/p20.jpg" alt="Java Rust" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf21">
- <div class="face front"><img class="art" src="assets/img/p21.jpg" alt="Verster Oxblood" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf22">
- <div class="face front"><img class="art" src="assets/img/p22.jpg" alt="Verster Hay" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf23">
- <div class="face front"><img class="art" src="assets/img/p23.jpg" alt="Verster Moss" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf24">
- <div class="face front"><img class="art" src="assets/img/p24.jpg" alt="Verster Carmine" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf25">
- <div class="face front"><img class="art" src="assets/img/p25.jpg" alt="Verster Rust" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- </div>
-
- <div class="card" id="outro">
- <div class="kicker">Shop the collection</div>
- <div class="big">Franquemont London</div>
- <div class="url">designerwallcoverings.com</div>
- </div>
-
- <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="62.3" data-track-index="20" data-volume="0.34"></audio>
- <audio id="vo0" src="assets/audio/vo1.wav" data-start="3.7" data-track-index="21" data-volume="1"></audio>
- <audio id="vo1" src="assets/audio/vo2.wav" data-start="48.85" data-track-index="22" data-volume="1"></audio>
-
- <script>
- window.__timelines = window.__timelines || {};
- const tl = gsap.timeline({ paused: true });
-
- gsap.set("#leaf0", { rotateY:0, zIndex:26 });
- gsap.set("#leaf1", { rotateY:0, zIndex:25 });
- gsap.set("#leaf2", { rotateY:0, zIndex:24 });
- gsap.set("#leaf3", { rotateY:0, zIndex:23 });
- gsap.set("#leaf4", { rotateY:0, zIndex:22 });
- gsap.set("#leaf5", { rotateY:0, zIndex:21 });
- gsap.set("#leaf6", { rotateY:0, zIndex:20 });
- gsap.set("#leaf7", { rotateY:0, zIndex:19 });
- gsap.set("#leaf8", { rotateY:0, zIndex:18 });
- gsap.set("#leaf9", { rotateY:0, zIndex:17 });
- gsap.set("#leaf10", { rotateY:0, zIndex:16 });
- gsap.set("#leaf11", { rotateY:0, zIndex:15 });
- gsap.set("#leaf12", { rotateY:0, zIndex:14 });
- gsap.set("#leaf13", { rotateY:0, zIndex:13 });
- gsap.set("#leaf14", { rotateY:0, zIndex:12 });
- gsap.set("#leaf15", { rotateY:0, zIndex:11 });
- gsap.set("#leaf16", { rotateY:0, zIndex:10 });
- gsap.set("#leaf17", { rotateY:0, zIndex:9 });
- gsap.set("#leaf18", { rotateY:0, zIndex:8 });
- gsap.set("#leaf19", { rotateY:0, zIndex:7 });
- gsap.set("#leaf20", { rotateY:0, zIndex:6 });
- gsap.set("#leaf21", { rotateY:0, zIndex:5 });
- gsap.set("#leaf22", { rotateY:0, zIndex:4 });
- gsap.set("#leaf23", { rotateY:0, zIndex:3 });
- gsap.set("#leaf24", { rotateY:0, zIndex:2 });
- gsap.set("#leaf25", { 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("#stage", { opacity: 0 });
- gsap.set("#outro", { opacity: 0 }); gsap.set("#outro .big", { y: 34, opacity: 0 }); gsap.set("#outro .url", { opacity: 0 });
- gsap.set("#cover .big", { y: 40, opacity: 0 }); gsap.set("#cover .kicker,#cover .sub,#cover .rule", { opacity: 0 });
-
- // cover
- tl.to("#cover .kicker", { opacity:1, duration:0.5 }, 0.2);
- tl.to("#cover .big", { opacity:1, y:0, duration:0.8, ease:"power3.out" }, 0.4);
- tl.to("#cover .rule,#cover .sub", { opacity:1, duration:0.5 }, 1.0);
- tl.to("#cover", { opacity:0, duration:0.5, ease:"power1.in" }, 3.00);
- tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, 3.00);
-
- // page turns + room crossfades
-
- tl.to("#leaf0", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 4.2);
- tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 4.2);
- tl.to("#leaf0 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 4.7);
- tl.set("#leaf0", { zIndex: 1000 }, 4.7);
- tl.set("#leaf0", { opacity: 0 }, 5.200);
- tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 4.7);
- tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 4.7);
- tl.to("#leaf1", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 5.8);
- tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 5.8);
- tl.to("#leaf1 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 6.3);
- tl.set("#leaf1", { zIndex: 1001 }, 6.3);
- tl.set("#leaf1", { opacity: 0 }, 6.800);
- tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 6.3);
- tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 6.3);
- tl.to("#leaf2", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 7.4);
- tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 7.4);
- tl.to("#leaf2 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 7.9);
- tl.set("#leaf2", { zIndex: 1002 }, 7.9);
- tl.set("#leaf2", { opacity: 0 }, 8.400);
- tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 7.9);
- tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 7.9);
- tl.to("#leaf3", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 9);
- tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 9);
- tl.to("#leaf3 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 9.5);
- tl.set("#leaf3", { zIndex: 1003 }, 9.5);
- tl.set("#leaf3", { opacity: 0 }, 10.000);
- tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 9.5);
- tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 9.5);
- tl.to("#leaf4", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 10.6);
- tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 10.6);
- tl.to("#leaf4 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 11.1);
- tl.set("#leaf4", { zIndex: 1004 }, 11.1);
- tl.set("#leaf4", { opacity: 0 }, 11.600);
- tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 11.1);
- tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 11.1);
- tl.to("#leaf5", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 12.2);
- tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 12.2);
- tl.to("#leaf5 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 12.7);
- tl.set("#leaf5", { zIndex: 1005 }, 12.7);
- tl.set("#leaf5", { opacity: 0 }, 13.200);
- tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 12.7);
- tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 12.7);
- tl.to("#leaf6", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 13.8);
- tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 13.8);
- tl.to("#leaf6 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 14.3);
- tl.set("#leaf6", { zIndex: 1006 }, 14.3);
- tl.set("#leaf6", { opacity: 0 }, 14.800);
- tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14.3);
- tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14.3);
- tl.to("#leaf7", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 15.4);
- tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 15.4);
- tl.to("#leaf7 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 15.9);
- tl.set("#leaf7", { zIndex: 1007 }, 15.9);
- tl.set("#leaf7", { opacity: 0 }, 16.400);
- tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 15.9);
- tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 15.9);
- tl.to("#leaf8", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 17);
- tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 17);
- tl.to("#leaf8 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 17.5);
- tl.set("#leaf8", { zIndex: 1008 }, 17.5);
- tl.set("#leaf8", { opacity: 0 }, 18.000);
- tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17.5);
- tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17.5);
- tl.to("#leaf9", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 18.6);
- tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 18.6);
- tl.to("#leaf9 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 19.1);
- tl.set("#leaf9", { zIndex: 1009 }, 19.1);
- tl.set("#leaf9", { opacity: 0 }, 19.600);
- tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 19.1);
- tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 19.1);
- tl.to("#leaf10", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 20.2);
- tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 20.2);
- tl.to("#leaf10 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 20.7);
- tl.set("#leaf10", { zIndex: 1010 }, 20.7);
- tl.set("#leaf10", { opacity: 0 }, 21.200);
- tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20.7);
- tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20.7);
- tl.to("#leaf11", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 21.8);
- tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 21.8);
- tl.to("#leaf11 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 22.3);
- tl.set("#leaf11", { zIndex: 1011 }, 22.3);
- tl.set("#leaf11", { opacity: 0 }, 22.800);
- tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 22.3);
- tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 22.3);
- tl.to("#leaf12", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 23.4);
- tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 23.4);
- tl.to("#leaf12 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 23.9);
- tl.set("#leaf12", { zIndex: 1012 }, 23.9);
- tl.set("#leaf12", { opacity: 0 }, 24.400);
- tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23.9);
- tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23.9);
- tl.to("#leaf13", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 25);
- tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 25);
- tl.to("#leaf13 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 25.5);
- tl.set("#leaf13", { zIndex: 1013 }, 25.5);
- tl.set("#leaf13", { opacity: 0 }, 26.000);
- tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 25.5);
- tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 25.5);
- tl.to("#leaf14", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 26.6);
- tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 26.6);
- tl.to("#leaf14 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 27.1);
- tl.set("#leaf14", { zIndex: 1014 }, 27.1);
- tl.set("#leaf14", { opacity: 0 }, 27.600);
- tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 27.1);
- tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 27.1);
- tl.to("#leaf15", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 28.2);
- tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 28.2);
- tl.to("#leaf15 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 28.7);
- tl.set("#leaf15", { zIndex: 1015 }, 28.7);
- tl.set("#leaf15", { opacity: 0 }, 29.200);
- tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 28.7);
- tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 28.7);
- tl.to("#leaf16", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 29.8);
- tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 29.8);
- tl.to("#leaf16 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 30.3);
- tl.set("#leaf16", { zIndex: 1016 }, 30.3);
- tl.set("#leaf16", { opacity: 0 }, 30.800);
- tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 30.3);
- tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 30.3);
- tl.to("#leaf17", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 31.4);
- tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 31.4);
- tl.to("#leaf17 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 31.9);
- tl.set("#leaf17", { zIndex: 1017 }, 31.9);
- tl.set("#leaf17", { opacity: 0 }, 32.400);
- tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 31.9);
- tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 31.9);
- tl.to("#leaf18", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 33);
- tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 33);
- tl.to("#leaf18 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 33.5);
- tl.set("#leaf18", { zIndex: 1018 }, 33.5);
- tl.set("#leaf18", { opacity: 0 }, 34.000);
- tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 33.5);
- tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 33.5);
- tl.to("#leaf19", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 34.6);
- tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 34.6);
- tl.to("#leaf19 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 35.1);
- tl.set("#leaf19", { zIndex: 1019 }, 35.1);
- tl.set("#leaf19", { opacity: 0 }, 35.600);
- tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 35.1);
- tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 35.1);
- tl.to("#leaf20", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 36.2);
- tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 36.2);
- tl.to("#leaf20 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 36.7);
- tl.set("#leaf20", { zIndex: 1020 }, 36.7);
- tl.set("#leaf20", { opacity: 0 }, 37.200);
- tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 36.7);
- tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 36.7);
- tl.to("#leaf21", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 37.8);
- tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 37.8);
- tl.to("#leaf21 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 38.3);
- tl.set("#leaf21", { zIndex: 1021 }, 38.3);
- tl.set("#leaf21", { opacity: 0 }, 38.800);
- tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 38.3);
- tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 38.3);
- tl.to("#leaf22", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 39.4);
- tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 39.4);
- tl.to("#leaf22 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 39.9);
- tl.set("#leaf22", { zIndex: 1022 }, 39.9);
- tl.set("#leaf22", { opacity: 0 }, 40.400);
- tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 39.9);
- tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 39.9);
- tl.to("#leaf23", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 41);
- tl.to("#leaf23 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 41);
- tl.to("#leaf23 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 41.5);
- tl.set("#leaf23", { zIndex: 1023 }, 41.5);
- tl.set("#leaf23", { opacity: 0 }, 42.000);
- tl.to("#room23", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 41.5);
- tl.to("#room24", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 41.5);
- tl.to("#leaf24", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 42.6);
- tl.to("#leaf24 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 42.6);
- tl.to("#leaf24 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 43.1);
- tl.set("#leaf24", { zIndex: 1024 }, 43.1);
- tl.set("#leaf24", { opacity: 0 }, 43.600);
- tl.to("#room24", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 43.1);
- tl.to("#room25", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 43.1);
- tl.to("#leaf25 .art", { scale: 1.05, duration: 4.90, ease:"power1.out" }, 44.2);
- tl.to("#room25 .rimg", { scale: 1.06, duration: 4.90, ease:"power1.out" }, 44.2);
-
- // outro
- tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 48.70);
- tl.to("#outro", { opacity:1, duration:0.5 }, 48.90);
- tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 49.10);
- tl.to("#outro .url", { opacity:1, duration:0.5 }, 49.60);
-
- gsap.set("#bgm", { volume: 0.34 });
- tl.to("#bgm", { volume: 0.17, duration: 0.4 }, 3.40);
- tl.to("#bgm", { volume: 0.34, duration: 0.6 }, 6.30);
- tl.to("#bgm", { volume: 0.17, duration: 0.4 }, 48.55);
- tl.to("#bgm", { volume: 0.34, duration: 0.6 }, 51.45);
- tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 61.20);
-
- window.__timelines["flipbook"] = tl;
- </script>
- </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/flipbooks/franquemont-london/lines.txt b/flipbooks/franquemont-london/lines.txt
deleted file mode 100644
index d1ca8e7..0000000
--- a/flipbooks/franquemont-london/lines.txt
+++ /dev/null
@@ -1,2 +0,0 @@
-Welcome to Designer Wallcoverings. This is Franquemont London — hand-drawn pattern and painterly colour. Settle in, and leaf through the collection.
-Thank you for visiting Designer Wallcoverings. May the Franquemont London palette inspire your next interior — grounds to layer, motifs to specify, and finishes worthy of a beautifully considered room.
diff --git a/flipbooks/glitter-walls-ig/index.html b/flipbooks/glitter-walls-ig/index.html
deleted file mode 100644
index 8b3a628..0000000
--- a/flipbooks/glitter-walls-ig/index.html
+++ /dev/null
@@ -1,552 +0,0 @@
-<!doctype html>
-<html lang="en" data-resolution="portrait">
-<head>
-<meta charset="UTF-8" />
-<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-<style>
- :root { --ink:#1c1a17; --cream:#f4efe6; --paper:#fbf8f1; --gold:#b08d57; }
- html,body { margin:0; padding:0; width:1080px; height:1920px; overflow:hidden;
- background:radial-gradient(120% 120% at 50% 0%, #2a2622 0%, #14110e 72%);
- font-family:"Helvetica Neue",system-ui,sans-serif; }
- #main-composition { position:relative; width:1080px; height:1920px; overflow:hidden; }
- .stage { position:absolute; inset:0; perspective:3000px; perspective-origin:50% 46%; }
-
- /* LEFT verso: brand + room + name */
- .verso { position:absolute; top:173px; left:54px; width:486px; height:1574px;
- 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:87px 0 47px; }
- .wordmark .wm { font-family:Georgia, serif; font-size:35px; color:var(--ink); letter-spacing:.02em; line-height:1; }
- .wordmark .wsub { margin-top:8px; font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
- .wordmark .wr { width:64px; height:2px; background:var(--gold); margin:44px auto 0; }
- .roomstack { position:relative; flex:1 1 auto; margin:0 27px 27px; 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:24px 27px; color:#fff; }
- .rcap .rpat { font-family:Georgia, serif; font-size:30px; line-height:1.05; text-shadow:0 2px 14px rgba(0,0,0,.5); }
- .rcap .rcol { margin-top:8px; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:#e7d8bd; }
-
- /* RIGHT recto: page-turn stack of pattern swatches */
- .leaf { position:absolute; top:173px; left:540px; width:486px; height:1574px;
- 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:17px; letter-spacing:.44em; text-transform:uppercase; color:var(--gold); }
- .card .big { font-family:Georgia, serif; font-size:76px; line-height:1.0; margin:22px 60px; }
- .card .sub { font-size:19px; 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:17px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); }
-</style>
-</head>
-<body>
- <div id="main-composition" data-composition-id="flipbook" data-width="1080" data-height="1920" data-start="0" data-duration="38">
-
- <div class="card" id="cover">
- <div class="kicker">Designer Wallcoverings presents</div>
- <div class="big">Glitter Walls</div>
- <div class="rule"></div>
- <div class="sub">Bring the Sparkle Home</div>
- </div>
-
- <div class="stage" id="stage">
- <div class="verso">
- <div class="wordmark"><div class="wm">Designer Wallcoverings</div><div class="wsub">est. lookbook</div><div class="wr"></div></div>
- <div class="roomstack">
- <div class="room" id="room0">
- <img class="rimg" src="assets/room/r0.jpg" alt="Cubist Glitter - Cubic Gold Silver Metallic room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Cubist Glitter - Cubic Gold Silver Metallic</div><div class="rcol">Glitter Walls · golds</div></div>
- </div>
- <div class="room" id="room1">
- <img class="rimg" src="assets/room/r1.jpg" alt="Hollywood Glamour Sequin - Golden Zebra room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hollywood Glamour Sequin - Golden Zebra</div><div class="rcol">Glitter Walls · golds</div></div>
- </div>
- <div class="room" id="room2">
- <img class="rimg" src="assets/room/r2.jpg" alt="Eel Skin Sequin - Bronze Beauty room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Eel Skin Sequin - Bronze Beauty</div><div class="rcol">Glitter Walls · golds</div></div>
- </div>
- <div class="room" id="room3">
- <img class="rimg" src="assets/room/r3.jpg" alt="Hollywood Glamour Glitter - Bronze room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hollywood Glamour Glitter - Bronze</div><div class="rcol">Glitter Walls · golds</div></div>
- </div>
- <div class="room" id="room4">
- <img class="rimg" src="assets/room/r4.jpg" alt="Venezia Glass Beads - Gold room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Venezia Glass Beads - Gold</div><div class="rcol">Glitter Walls · golds</div></div>
- </div>
- <div class="room" id="room5">
- <img class="rimg" src="assets/room/r5.jpg" alt="Venezia Glass Beaded - Bronze room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Venezia Glass Beaded - Bronze</div><div class="rcol">Glitter Walls · golds</div></div>
- </div>
- <div class="room" id="room6">
- <img class="rimg" src="assets/room/r6.jpg" alt="Hollywood Glamour Sequin - Silver Multi Color room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hollywood Glamour Sequin - Silver Multi Color</div><div class="rcol">Glitter Walls · silvers</div></div>
- </div>
- <div class="room" id="room7">
- <img class="rimg" src="assets/room/r7.jpg" alt="Eel Skin Sequin - White Yarns & Silver Sequin room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Eel Skin Sequin - White Yarns & Silver Sequin</div><div class="rcol">Glitter Walls · silvers</div></div>
- </div>
- <div class="room" id="room8">
- <img class="rimg" src="assets/room/r8.jpg" alt="Hollywood Glamour Glitter - Silver room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hollywood Glamour Glitter - Silver</div><div class="rcol">Glitter Walls · silvers</div></div>
- </div>
- <div class="room" id="room9">
- <img class="rimg" src="assets/room/r9.jpg" alt="Venezia Glass Beads - Silver room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Venezia Glass Beads - Silver</div><div class="rcol">Glitter Walls · silvers</div></div>
- </div>
- <div class="room" id="room10">
- <img class="rimg" src="assets/room/r10.jpg" alt="Sexy Sequin - Silver room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sexy Sequin - Silver</div><div class="rcol">Glitter Walls · silvers</div></div>
- </div>
- <div class="room" id="room11">
- <img class="rimg" src="assets/room/r11.jpg" alt="Sequin - Silver room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sequin - Silver</div><div class="rcol">Glitter Walls · silvers</div></div>
- </div>
- <div class="room" id="room12">
- <img class="rimg" src="assets/room/r12.jpg" alt="Hollywood Glamour Sequin - Deep Black Glam room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hollywood Glamour Sequin - Deep Black Glam</div><div class="rcol">Glitter Walls · blacks</div></div>
- </div>
- <div class="room" id="room13">
- <img class="rimg" src="assets/room/r13.jpg" alt="Eel Skin Sequin - Black Magician room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Eel Skin Sequin - Black Magician</div><div class="rcol">Glitter Walls · blacks</div></div>
- </div>
- <div class="room" id="room14">
- <img class="rimg" src="assets/room/r14.jpg" alt="Hollywood Glamour Glitter - Midnight Blue room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hollywood Glamour Glitter - Midnight Blue</div><div class="rcol">Glitter Walls · blacks</div></div>
- </div>
- <div class="room" id="room15">
- <img class="rimg" src="assets/room/r15.jpg" alt="Sequin - Black room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sequin - Black</div><div class="rcol">Glitter Walls · blacks</div></div>
- </div>
- <div class="room" id="room16">
- <img class="rimg" src="assets/room/r16.jpg" alt="Hollywood Sequin - Black room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hollywood Sequin - Black</div><div class="rcol">Glitter Walls · blacks</div></div>
- </div>
- <div class="room" id="room17">
- <img class="rimg" src="assets/room/r17.jpg" alt="Sting Ray Sequin - Gold Black Scales room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sting Ray Sequin - Gold Black Scales</div><div class="rcol">Glitter Walls · blacks</div></div>
- </div>
- <div class="room" id="room18">
- <img class="rimg" src="assets/room/r18.jpg" alt="Venezia Glass Beads - Red room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Venezia Glass Beads - Red</div><div class="rcol">Glitter Walls · jewel</div></div>
- </div>
- <div class="room" id="room19">
- <img class="rimg" src="assets/room/r19.jpg" alt="Cubist Glitter - Cubic Pink Metallic room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Cubist Glitter - Cubic Pink Metallic</div><div class="rcol">Glitter Walls · jewel</div></div>
- </div>
- <div class="room" id="room20">
- <img class="rimg" src="assets/room/r20.jpg" alt="Hollywood Glamour Sequin - Blush room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hollywood Glamour Sequin - Blush</div><div class="rcol">Glitter Walls · jewel</div></div>
- </div>
- <div class="room" id="room21">
- <img class="rimg" src="assets/room/r21.jpg" alt="Eel Skin Sequin - Red Shine room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Eel Skin Sequin - Red Shine</div><div class="rcol">Glitter Walls · jewel</div></div>
- </div>
- <div class="room" id="room22">
- <img class="rimg" src="assets/room/r22.jpg" alt="Hollywood Glamour Glitter - Red room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hollywood Glamour Glitter - Red</div><div class="rcol">Glitter Walls · jewel</div></div>
- </div>
- <div class="room" id="room23">
- <img class="rimg" src="assets/room/r23.jpg" alt="Sexy Sequin - Pink room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sexy Sequin - Pink</div><div class="rcol">Glitter Walls · jewel</div></div>
- </div>
- </div>
- </div>
-
- <div class="leaf" id="leaf0">
- <div class="face front"><img class="art" src="assets/img/p0.jpg" alt="Cubist Glitter - Cubic Gold Silver Metallic" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf1">
- <div class="face front"><img class="art" src="assets/img/p1.jpg" alt="Hollywood Glamour Sequin - Golden Zebra" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf2">
- <div class="face front"><img class="art" src="assets/img/p2.jpg" alt="Eel Skin Sequin - Bronze Beauty" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf3">
- <div class="face front"><img class="art" src="assets/img/p3.jpg" alt="Hollywood Glamour Glitter - Bronze" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf4">
- <div class="face front"><img class="art" src="assets/img/p4.jpg" alt="Venezia Glass Beads - Gold" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf5">
- <div class="face front"><img class="art" src="assets/img/p5.jpg" alt="Venezia Glass Beaded - Bronze" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf6">
- <div class="face front"><img class="art" src="assets/img/p6.jpg" alt="Hollywood Glamour Sequin - Silver Multi Color" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf7">
- <div class="face front"><img class="art" src="assets/img/p7.jpg" alt="Eel Skin Sequin - White Yarns & Silver Sequin" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf8">
- <div class="face front"><img class="art" src="assets/img/p8.jpg" alt="Hollywood Glamour Glitter - Silver" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf9">
- <div class="face front"><img class="art" src="assets/img/p9.jpg" alt="Venezia Glass Beads - Silver" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf10">
- <div class="face front"><img class="art" src="assets/img/p10.jpg" alt="Sexy Sequin - Silver" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf11">
- <div class="face front"><img class="art" src="assets/img/p11.jpg" alt="Sequin - Silver" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf12">
- <div class="face front"><img class="art" src="assets/img/p12.jpg" alt="Hollywood Glamour Sequin - Deep Black Glam" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf13">
- <div class="face front"><img class="art" src="assets/img/p13.jpg" alt="Eel Skin Sequin - Black Magician" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf14">
- <div class="face front"><img class="art" src="assets/img/p14.jpg" alt="Hollywood Glamour Glitter - Midnight Blue" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf15">
- <div class="face front"><img class="art" src="assets/img/p15.jpg" alt="Sequin - Black" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf16">
- <div class="face front"><img class="art" src="assets/img/p16.jpg" alt="Hollywood Sequin - Black" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf17">
- <div class="face front"><img class="art" src="assets/img/p17.jpg" alt="Sting Ray Sequin - Gold Black Scales" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf18">
- <div class="face front"><img class="art" src="assets/img/p18.jpg" alt="Venezia Glass Beads - Red" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf19">
- <div class="face front"><img class="art" src="assets/img/p19.jpg" alt="Cubist Glitter - Cubic Pink Metallic" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf20">
- <div class="face front"><img class="art" src="assets/img/p20.jpg" alt="Hollywood Glamour Sequin - Blush" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf21">
- <div class="face front"><img class="art" src="assets/img/p21.jpg" alt="Eel Skin Sequin - Red Shine" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf22">
- <div class="face front"><img class="art" src="assets/img/p22.jpg" alt="Hollywood Glamour Glitter - Red" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf23">
- <div class="face front"><img class="art" src="assets/img/p23.jpg" alt="Sexy Sequin - Pink" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- </div>
-
- <div class="card" id="outro">
- <div class="kicker">Shop the collection</div>
- <div class="big">Glitter Walls</div>
- <div class="url">designerwallcoverings.com</div>
- </div>
-
- <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="38" data-track-index="20" data-volume="0.18"></audio>
- <audio id="vo0" src="assets/audio/vo1.wav" data-start="2.4" data-track-index="21" data-volume="1"></audio>
- <audio id="vo1" src="assets/audio/vo2.wav" data-start="8.4" data-track-index="22" data-volume="1"></audio>
- <audio id="vo2" src="assets/audio/vo3.wav" data-start="15" data-track-index="23" data-volume="1"></audio>
- <audio id="vo3" src="assets/audio/vo4.wav" data-start="21.6" data-track-index="24" data-volume="1"></audio>
- <audio id="vo4" src="assets/audio/vo5.wav" data-start="31.15" data-track-index="25" data-volume="1"></audio>
-
- <script>
- window.__timelines = window.__timelines || {};
- const tl = gsap.timeline({ paused: true });
-
- gsap.set("#leaf0", { rotateY:0, zIndex:24 });
- gsap.set("#leaf1", { rotateY:0, zIndex:23 });
- gsap.set("#leaf2", { rotateY:0, zIndex:22 });
- gsap.set("#leaf3", { rotateY:0, zIndex:21 });
- gsap.set("#leaf4", { rotateY:0, zIndex:20 });
- gsap.set("#leaf5", { rotateY:0, zIndex:19 });
- gsap.set("#leaf6", { rotateY:0, zIndex:18 });
- gsap.set("#leaf7", { rotateY:0, zIndex:17 });
- gsap.set("#leaf8", { rotateY:0, zIndex:16 });
- gsap.set("#leaf9", { rotateY:0, zIndex:15 });
- gsap.set("#leaf10", { rotateY:0, zIndex:14 });
- gsap.set("#leaf11", { rotateY:0, zIndex:13 });
- gsap.set("#leaf12", { rotateY:0, zIndex:12 });
- gsap.set("#leaf13", { rotateY:0, zIndex:11 });
- gsap.set("#leaf14", { rotateY:0, zIndex:10 });
- gsap.set("#leaf15", { rotateY:0, zIndex:9 });
- gsap.set("#leaf16", { rotateY:0, zIndex:8 });
- gsap.set("#leaf17", { rotateY:0, zIndex:7 });
- gsap.set("#leaf18", { rotateY:0, zIndex:6 });
- gsap.set("#leaf19", { rotateY:0, zIndex:5 });
- gsap.set("#leaf20", { rotateY:0, zIndex:4 });
- gsap.set("#leaf21", { rotateY:0, zIndex:3 });
- gsap.set("#leaf22", { rotateY:0, zIndex:2 });
- gsap.set("#leaf23", { 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("#stage", { opacity: 0 });
- gsap.set("#outro", { opacity: 0 }); gsap.set("#outro .big", { y: 34, opacity: 0 }); gsap.set("#outro .url", { opacity: 0 });
- gsap.set("#cover .big", { y: 40, opacity: 0 }); gsap.set("#cover .kicker,#cover .sub,#cover .rule", { opacity: 0 });
-
- // cover
- tl.to("#cover .kicker", { opacity:1, duration:0.5 }, 0.2);
- tl.to("#cover .big", { opacity:1, y:0, duration:0.8, ease:"power3.out" }, 0.4);
- tl.to("#cover .rule,#cover .sub", { opacity:1, duration:0.5 }, 1.0);
- tl.to("#cover", { opacity:0, duration:0.5, ease:"power1.in" }, 1.70);
- tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, 1.70);
-
- // page turns + room crossfades
-
- tl.to("#leaf0", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 2.9);
- tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 2.9);
- tl.to("#leaf0 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 3.2);
- tl.set("#leaf0", { zIndex: 1000 }, 3.2);
- tl.set("#leaf0", { opacity: 0 }, 3.500);
- tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 3.2);
- tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 3.2);
- tl.to("#leaf1", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 4);
- tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 4);
- tl.to("#leaf1 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 4.3);
- tl.set("#leaf1", { zIndex: 1001 }, 4.3);
- tl.set("#leaf1", { opacity: 0 }, 4.600);
- tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 4.3);
- tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 4.3);
- tl.to("#leaf2", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 5.1);
- tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 5.1);
- tl.to("#leaf2 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 5.4);
- tl.set("#leaf2", { zIndex: 1002 }, 5.4);
- tl.set("#leaf2", { opacity: 0 }, 5.700);
- tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 5.4);
- tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 5.4);
- tl.to("#leaf3", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 6.2);
- tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 6.2);
- tl.to("#leaf3 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 6.5);
- tl.set("#leaf3", { zIndex: 1003 }, 6.5);
- tl.set("#leaf3", { opacity: 0 }, 6.800);
- tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 6.5);
- tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 6.5);
- tl.to("#leaf4", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 7.3);
- tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 7.3);
- tl.to("#leaf4 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 7.6);
- tl.set("#leaf4", { zIndex: 1004 }, 7.6);
- tl.set("#leaf4", { opacity: 0 }, 7.900);
- tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 7.6);
- tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 7.6);
- tl.to("#leaf5", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 8.4);
- tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 8.4);
- tl.to("#leaf5 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 8.7);
- tl.set("#leaf5", { zIndex: 1005 }, 8.7);
- tl.set("#leaf5", { opacity: 0 }, 9.000);
- tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 8.7);
- tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 8.7);
- tl.to("#leaf6", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 9.5);
- tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 9.5);
- tl.to("#leaf6 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 9.8);
- tl.set("#leaf6", { zIndex: 1006 }, 9.8);
- tl.set("#leaf6", { opacity: 0 }, 10.100);
- tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 9.8);
- tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 9.8);
- tl.to("#leaf7", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 10.6);
- tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 10.6);
- tl.to("#leaf7 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 10.9);
- tl.set("#leaf7", { zIndex: 1007 }, 10.9);
- tl.set("#leaf7", { opacity: 0 }, 11.200);
- tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 10.9);
- tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 10.9);
- tl.to("#leaf8", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 11.7);
- tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 11.7);
- tl.to("#leaf8 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 12);
- tl.set("#leaf8", { zIndex: 1008 }, 12);
- tl.set("#leaf8", { opacity: 0 }, 12.300);
- tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 12);
- tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 12);
- tl.to("#leaf9", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 12.8);
- tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 12.8);
- tl.to("#leaf9 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 13.1);
- tl.set("#leaf9", { zIndex: 1009 }, 13.1);
- tl.set("#leaf9", { opacity: 0 }, 13.400);
- tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 13.1);
- tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 13.1);
- tl.to("#leaf10", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 13.9);
- tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 13.9);
- tl.to("#leaf10 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 14.2);
- tl.set("#leaf10", { zIndex: 1010 }, 14.2);
- tl.set("#leaf10", { opacity: 0 }, 14.500);
- tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14.2);
- tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14.2);
- tl.to("#leaf11", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 15);
- tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 15);
- tl.to("#leaf11 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 15.3);
- tl.set("#leaf11", { zIndex: 1011 }, 15.3);
- tl.set("#leaf11", { opacity: 0 }, 15.600);
- tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 15.3);
- tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 15.3);
- tl.to("#leaf12", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 16.1);
- tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 16.1);
- tl.to("#leaf12 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 16.4);
- tl.set("#leaf12", { zIndex: 1012 }, 16.4);
- tl.set("#leaf12", { opacity: 0 }, 16.700);
- tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 16.4);
- tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 16.4);
- tl.to("#leaf13", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 17.2);
- tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 17.2);
- tl.to("#leaf13 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 17.5);
- tl.set("#leaf13", { zIndex: 1013 }, 17.5);
- tl.set("#leaf13", { opacity: 0 }, 17.800);
- tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17.5);
- tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17.5);
- tl.to("#leaf14", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 18.3);
- tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 18.3);
- tl.to("#leaf14 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 18.6);
- tl.set("#leaf14", { zIndex: 1014 }, 18.6);
- tl.set("#leaf14", { opacity: 0 }, 18.900);
- tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 18.6);
- tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 18.6);
- tl.to("#leaf15", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 19.4);
- tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 19.4);
- tl.to("#leaf15 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 19.7);
- tl.set("#leaf15", { zIndex: 1015 }, 19.7);
- tl.set("#leaf15", { opacity: 0 }, 20.000);
- tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 19.7);
- tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 19.7);
- tl.to("#leaf16", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 20.5);
- tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 20.5);
- tl.to("#leaf16 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 20.8);
- tl.set("#leaf16", { zIndex: 1016 }, 20.8);
- tl.set("#leaf16", { opacity: 0 }, 21.100);
- tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20.8);
- tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20.8);
- tl.to("#leaf17", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 21.6);
- tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 21.6);
- tl.to("#leaf17 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 21.9);
- tl.set("#leaf17", { zIndex: 1017 }, 21.9);
- tl.set("#leaf17", { opacity: 0 }, 22.200);
- tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 21.9);
- tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 21.9);
- tl.to("#leaf18", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 22.7);
- tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 22.7);
- tl.to("#leaf18 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 23);
- tl.set("#leaf18", { zIndex: 1018 }, 23);
- tl.set("#leaf18", { opacity: 0 }, 23.300);
- tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23);
- tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23);
- tl.to("#leaf19", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 23.8);
- tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 23.8);
- tl.to("#leaf19 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 24.1);
- tl.set("#leaf19", { zIndex: 1019 }, 24.1);
- tl.set("#leaf19", { opacity: 0 }, 24.400);
- tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 24.1);
- tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 24.1);
- tl.to("#leaf20", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 24.9);
- tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 24.9);
- tl.to("#leaf20 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 25.2);
- tl.set("#leaf20", { zIndex: 1020 }, 25.2);
- tl.set("#leaf20", { opacity: 0 }, 25.500);
- tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 25.2);
- tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 25.2);
- tl.to("#leaf21", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 26);
- tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 26);
- tl.to("#leaf21 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 26.3);
- tl.set("#leaf21", { zIndex: 1021 }, 26.3);
- tl.set("#leaf21", { opacity: 0 }, 26.600);
- tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 26.3);
- tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 26.3);
- tl.to("#leaf22", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 27.1);
- tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 27.1);
- tl.to("#leaf22 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 27.4);
- tl.set("#leaf22", { zIndex: 1022 }, 27.4);
- tl.set("#leaf22", { opacity: 0 }, 27.700);
- tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 27.4);
- tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 27.4);
- tl.to("#leaf23 .art", { scale: 1.05, duration: 3.20, ease:"power1.out" }, 28.2);
- tl.to("#room23 .rimg", { scale: 1.06, duration: 3.20, ease:"power1.out" }, 28.2);
-
- // outro
- tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 31.00);
- tl.to("#outro", { opacity:1, duration:0.5 }, 31.20);
- tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 31.40);
- tl.to("#outro .url", { opacity:1, duration:0.5 }, 31.90);
-
- gsap.set("#bgm", { volume: 0.18 });
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 2.10);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 5.00);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 8.10);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 11.00);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 14.70);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 17.60);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 21.30);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 24.20);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 30.85);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 33.75);
- tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 36.90);
-
- window.__timelines["flipbook"] = tl;
- </script>
- </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/flipbooks/glitter-walls/__pycache__/gen-rooms.cpython-314.pyc b/flipbooks/glitter-walls/__pycache__/gen-rooms.cpython-314.pyc
deleted file mode 100644
index e7aeed5..0000000
Binary files a/flipbooks/glitter-walls/__pycache__/gen-rooms.cpython-314.pyc and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r0.jpg b/flipbooks/glitter-walls/assets/roomgen/r0.jpg
deleted file mode 100644
index c34e82a..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r0.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r1.jpg b/flipbooks/glitter-walls/assets/roomgen/r1.jpg
deleted file mode 100644
index 9c0b56d..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r1.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r10.jpg b/flipbooks/glitter-walls/assets/roomgen/r10.jpg
deleted file mode 100644
index fa813ed..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r10.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r11.jpg b/flipbooks/glitter-walls/assets/roomgen/r11.jpg
deleted file mode 100644
index 502eb6f..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r11.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r12.jpg b/flipbooks/glitter-walls/assets/roomgen/r12.jpg
deleted file mode 100644
index 707712d..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r12.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r13.jpg b/flipbooks/glitter-walls/assets/roomgen/r13.jpg
deleted file mode 100644
index 9160f7e..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r13.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r14.jpg b/flipbooks/glitter-walls/assets/roomgen/r14.jpg
deleted file mode 100644
index 9647280..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r14.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r15.jpg b/flipbooks/glitter-walls/assets/roomgen/r15.jpg
deleted file mode 100644
index 5e8c694..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r15.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r16.jpg b/flipbooks/glitter-walls/assets/roomgen/r16.jpg
deleted file mode 100644
index 6048c56..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r16.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r17.jpg b/flipbooks/glitter-walls/assets/roomgen/r17.jpg
deleted file mode 100644
index b97e4ae..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r17.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r18.jpg b/flipbooks/glitter-walls/assets/roomgen/r18.jpg
deleted file mode 100644
index 8abf78a..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r18.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r19.jpg b/flipbooks/glitter-walls/assets/roomgen/r19.jpg
deleted file mode 100644
index 3b0ff5a..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r19.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r2.jpg b/flipbooks/glitter-walls/assets/roomgen/r2.jpg
deleted file mode 100644
index 33096f4..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r2.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r20.jpg b/flipbooks/glitter-walls/assets/roomgen/r20.jpg
deleted file mode 100644
index 95dd4da..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r20.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r21.jpg b/flipbooks/glitter-walls/assets/roomgen/r21.jpg
deleted file mode 100644
index 7f3d6da..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r21.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r22.jpg b/flipbooks/glitter-walls/assets/roomgen/r22.jpg
deleted file mode 100644
index c7a813d..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r22.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r23.jpg b/flipbooks/glitter-walls/assets/roomgen/r23.jpg
deleted file mode 100644
index 744dbc0..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r23.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r3.jpg b/flipbooks/glitter-walls/assets/roomgen/r3.jpg
deleted file mode 100644
index 18483a1..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r3.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r4.jpg b/flipbooks/glitter-walls/assets/roomgen/r4.jpg
deleted file mode 100644
index e4642bc..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r4.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r5.jpg b/flipbooks/glitter-walls/assets/roomgen/r5.jpg
deleted file mode 100644
index 288d9f3..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r5.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r6.jpg b/flipbooks/glitter-walls/assets/roomgen/r6.jpg
deleted file mode 100644
index 5f83c0b..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r6.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r7.jpg b/flipbooks/glitter-walls/assets/roomgen/r7.jpg
deleted file mode 100644
index f1301b0..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r7.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r8.jpg b/flipbooks/glitter-walls/assets/roomgen/r8.jpg
deleted file mode 100644
index eb4763d..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r8.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/assets/roomgen/r9.jpg b/flipbooks/glitter-walls/assets/roomgen/r9.jpg
deleted file mode 100644
index 14c865a..0000000
Binary files a/flipbooks/glitter-walls/assets/roomgen/r9.jpg and /dev/null differ
diff --git a/flipbooks/glitter-walls/audio.json b/flipbooks/glitter-walls/audio.json
deleted file mode 100644
index de2953c..0000000
--- a/flipbooks/glitter-walls/audio.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "bgm": { "src": "assets/audio/jazz.wav", "volume": 0.18 },
- "vo": [
- { "src": "assets/audio/vo1.wav", "anchor": "intro" },
- { "src": "assets/audio/vo2.wav", "anchor": "chapter:silvers" },
- { "src": "assets/audio/vo3.wav", "anchor": "chapter:blacks" },
- { "src": "assets/audio/vo4.wav", "anchor": "chapter:jewel" },
- { "src": "assets/audio/vo5.wav", "anchor": "outro" }
- ]
-}
diff --git a/flipbooks/glitter-walls/gen-rooms.py b/flipbooks/glitter-walls/gen-rooms.py
deleted file mode 100644
index 4b59c62..0000000
--- a/flipbooks/glitter-walls/gen-rooms.py
+++ /dev/null
@@ -1,38 +0,0 @@
-#!/usr/bin/env python3
-import json, time, urllib.request, pathlib
-ROOT=pathlib.Path(__file__).resolve().parent
-DATA=ROOT.parent.parent/"data"/"glitter-walls.json"
-OUT=ROOT/"assets"/"roomgen"; OUT.mkdir(parents=True,exist_ok=True)
-VER="5bdc2c7cd642ae33611d8c33f79615f98ff02509ab8db9d8ec1cc6c36d378fba"
-TOKEN=next(l.split("=",1)[1].strip() for l in (pathlib.Path.home()/"Projects/secrets-manager/.env").read_text().splitlines() if l.startswith("REPLICATE_API_TOKEN="))
-SCENES={
- "golds":[("a glamorous powder room","the feature wall AND an upholstered velvet vanity stool"),("a chic cocktail bar lounge","the back-bar feature wall AND an upholstered banquette")],
- "silvers":[("a luxe boutique dressing room","a full feature wall AND an upholstered bench"),("a glamorous entry foyer","a shimmering feature wall AND an upholstered accent chair")],
- "blacks":[("a dramatic speakeasy cocktail bar","the feature wall AND a tufted upholstered booth"),("a glamorous night-time bedroom","the headboard wall AND an upholstered headboard")],
- "jewel":[("a playful glam powder room","the feature wall AND an upholstered vanity stool"),("a vibrant boutique lounge","a jewel-tone feature wall AND an upholstered settee")],
-}
-def prompt_for(t,room,furn):
- return (f"Photorealistic interior design photograph of {room}. Take the supplied swatch — a sparkling glitter and sequin "
- f"wallcovering called '{t}' — and apply its EXACT sparkle, color and texture to BOTH {furn}. Glamorous, "
- f"light catching every sequin, realistic reflective shimmer, editorial design-magazine quality, shallow depth of "
- f"field. No text, no logos, no watermark, no people.")
-def post(u,b): return json.load(urllib.request.urlopen(urllib.request.Request(u,data=json.dumps(b).encode(),headers={"Authorization":f"Bearer {TOKEN}","Content-Type":"application/json"}),timeout=60))
-def get(u): return json.load(urllib.request.urlopen(urllib.request.Request(u,headers={"Authorization":f"Bearer {TOKEN}"}),timeout=60))
-P=json.loads(DATA.read_text()); per={}; ok=0
-for i,p in enumerate(P):
- ch=p.get("chapter","golds"); idx=per.get(ch,0); per[ch]=idx+1
- room,furn=SCENES.get(ch,SCENES["golds"])[idx%2]; dest=OUT/f"r{i}.jpg"
- if dest.exists() and dest.stat().st_size>20000: print(f"[{i:02d}] cached"); ok+=1; continue
- try:
- pred=post("https://api.replicate.com/v1/predictions",{"version":VER,"input":{"prompt":prompt_for(p["title"],room,furn),"image_input":[p["image"]],"aspect_ratio":"4:3","output_format":"jpg"}}); u=pred["urls"]["get"]
- for _ in range(90):
- time.sleep(2); pred=get(u)
- if pred["status"] in ("succeeded","failed","canceled"): break
- if pred["status"]!="succeeded": print(f"[{i:02d}] FAIL {p['title']}: {pred.get('error') or pred['status']}"); continue
- out=pred["output"]; img=out[0] if isinstance(out,list) else out; urllib.request.urlretrieve(img,dest); ok+=1
- print(f"[{i:02d}] ok {p['title'][:30]:30s} [{ch}]")
- except Exception as e: print(f"[{i:02d}] ERR {p['title']}: {e}")
-for i,p in enumerate(P):
- d=OUT/f"r{i}.jpg"
- if d.exists() and d.stat().st_size>20000: p["room"]=str(d); p["has_room"]=True
-DATA.write_text(json.dumps(P,indent=2)); print(f"\nDONE {ok}/{len(P)}; est ${ok*0.039:.2f}")
diff --git a/flipbooks/glitter-walls/index.html b/flipbooks/glitter-walls/index.html
deleted file mode 100644
index df06446..0000000
--- a/flipbooks/glitter-walls/index.html
+++ /dev/null
@@ -1,552 +0,0 @@
-<!doctype html>
-<html lang="en" data-resolution="landscape">
-<head>
-<meta charset="UTF-8" />
-<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-<style>
- :root { --ink:#1c1a17; --cream:#f4efe6; --paper:#fbf8f1; --gold:#b08d57; }
- html,body { margin:0; padding:0; width:1920px; height:1080px; overflow:hidden;
- background:radial-gradient(120% 120% at 50% 0%, #2a2622 0%, #14110e 72%);
- font-family:"Helvetica Neue",system-ui,sans-serif; }
- #main-composition { position:relative; width:1920px; height:1080px; overflow:hidden; }
- .stage { position:absolute; inset:0; perspective:3000px; perspective-origin:50% 46%; }
-
- /* LEFT verso: brand + room + name */
- .verso { position:absolute; top:97px; left:192px; width:768px; height:886px;
- background:var(--paper); border-radius:8px 2px 2px 8px; overflow:hidden;
- box-shadow: inset -30px 0 46px rgba(0,0,0,.12), 0 34px 66px rgba(0,0,0,.5);
- display:flex; flex-direction:column; }
- .wordmark { flex:0 0 auto; text-align:center; padding:49px 0 27px; }
- .wordmark .wm { font-family:Georgia, serif; font-size:55px; color:var(--ink); letter-spacing:.02em; line-height:1; }
- .wordmark .wsub { margin-top:8px; font-size:18px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
- .wordmark .wr { width:64px; height:2px; background:var(--gold); margin:25px auto 0; }
- .roomstack { position:relative; flex:1 1 auto; margin:0 42px 42px; border-radius:4px; overflow:hidden; background:#e9e3d7; }
- .room { position:absolute; inset:0; opacity:0; }
- .room .rimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
- .room.fallback .rimg { transform:scale(1.4); filter:blur(3px) brightness(.82) saturate(1.05); }
- .room .rtint { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
- .room.fallback .rtint { background:linear-gradient(180deg, rgba(20,16,12,.30) 0%, rgba(20,16,12,.62) 100%); }
- .rcap { position:absolute; left:0; right:0; bottom:0; padding:38px 42px; color:#fff; }
- .rcap .rpat { font-family:Georgia, serif; font-size:48px; line-height:1.05; text-shadow:0 2px 14px rgba(0,0,0,.5); }
- .rcap .rcol { margin-top:8px; font-size:20px; letter-spacing:.2em; text-transform:uppercase; color:#e7d8bd; }
-
- /* RIGHT recto: page-turn stack of pattern swatches */
- .leaf { position:absolute; top:97px; left:960px; width:768px; height:886px;
- transform-origin:left center; transform-style:preserve-3d; will-change:transform; }
- .leaf .face { position:absolute; inset:0; backface-visibility:hidden; overflow:hidden; border-radius:2px 8px 8px 2px;
- background:var(--paper); box-shadow: 24px 28px 54px rgba(0,0,0,.42), inset 24px 0 42px rgba(0,0,0,.08); }
- .leaf .back { transform:rotateY(180deg); background:linear-gradient(90deg,#efe9dc,#fbf8f1 22%);
- box-shadow:-22px 28px 54px rgba(0,0,0,.36), inset -24px 0 42px rgba(0,0,0,.08); }
- .leaf .art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
- .leaf .shade { position:absolute; inset:0; opacity:0; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,0) 62%); }
-
- /* cover + outro cards */
- .card { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--cream); }
- .card .kicker { font-size:31px; letter-spacing:.44em; text-transform:uppercase; color:var(--gold); }
- .card .big { font-family:Georgia, serif; font-size:134px; line-height:1.0; margin:22px 60px; }
- .card .sub { font-size:35px; letter-spacing:.18em; text-transform:uppercase; color:#c9bfae; }
- .card .rule { width:120px; height:2px; background:var(--gold); margin:32px 0; }
- .card .url { margin-top:28px; font-size:31px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); }
-</style>
-</head>
-<body>
- <div id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="38">
-
- <div class="card" id="cover">
- <div class="kicker">Designer Wallcoverings presents</div>
- <div class="big">Glitter Walls</div>
- <div class="rule"></div>
- <div class="sub">Bring the Sparkle Home</div>
- </div>
-
- <div class="stage" id="stage">
- <div class="verso">
- <div class="wordmark"><div class="wm">Designer Wallcoverings</div><div class="wsub">est. lookbook</div><div class="wr"></div></div>
- <div class="roomstack">
- <div class="room" id="room0">
- <img class="rimg" src="assets/room/r0.jpg" alt="Cubist Glitter - Cubic Gold Silver Metallic room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Cubist Glitter - Cubic Gold Silver Metallic</div><div class="rcol">Glitter Walls · golds</div></div>
- </div>
- <div class="room" id="room1">
- <img class="rimg" src="assets/room/r1.jpg" alt="Hollywood Glamour Sequin - Golden Zebra room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hollywood Glamour Sequin - Golden Zebra</div><div class="rcol">Glitter Walls · golds</div></div>
- </div>
- <div class="room" id="room2">
- <img class="rimg" src="assets/room/r2.jpg" alt="Eel Skin Sequin - Bronze Beauty room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Eel Skin Sequin - Bronze Beauty</div><div class="rcol">Glitter Walls · golds</div></div>
- </div>
- <div class="room" id="room3">
- <img class="rimg" src="assets/room/r3.jpg" alt="Hollywood Glamour Glitter - Bronze room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hollywood Glamour Glitter - Bronze</div><div class="rcol">Glitter Walls · golds</div></div>
- </div>
- <div class="room" id="room4">
- <img class="rimg" src="assets/room/r4.jpg" alt="Venezia Glass Beads - Gold room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Venezia Glass Beads - Gold</div><div class="rcol">Glitter Walls · golds</div></div>
- </div>
- <div class="room" id="room5">
- <img class="rimg" src="assets/room/r5.jpg" alt="Venezia Glass Beaded - Bronze room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Venezia Glass Beaded - Bronze</div><div class="rcol">Glitter Walls · golds</div></div>
- </div>
- <div class="room" id="room6">
- <img class="rimg" src="assets/room/r6.jpg" alt="Hollywood Glamour Sequin - Silver Multi Color room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hollywood Glamour Sequin - Silver Multi Color</div><div class="rcol">Glitter Walls · silvers</div></div>
- </div>
- <div class="room" id="room7">
- <img class="rimg" src="assets/room/r7.jpg" alt="Eel Skin Sequin - White Yarns & Silver Sequin room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Eel Skin Sequin - White Yarns & Silver Sequin</div><div class="rcol">Glitter Walls · silvers</div></div>
- </div>
- <div class="room" id="room8">
- <img class="rimg" src="assets/room/r8.jpg" alt="Hollywood Glamour Glitter - Silver room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hollywood Glamour Glitter - Silver</div><div class="rcol">Glitter Walls · silvers</div></div>
- </div>
- <div class="room" id="room9">
- <img class="rimg" src="assets/room/r9.jpg" alt="Venezia Glass Beads - Silver room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Venezia Glass Beads - Silver</div><div class="rcol">Glitter Walls · silvers</div></div>
- </div>
- <div class="room" id="room10">
- <img class="rimg" src="assets/room/r10.jpg" alt="Sexy Sequin - Silver room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sexy Sequin - Silver</div><div class="rcol">Glitter Walls · silvers</div></div>
- </div>
- <div class="room" id="room11">
- <img class="rimg" src="assets/room/r11.jpg" alt="Sequin - Silver room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sequin - Silver</div><div class="rcol">Glitter Walls · silvers</div></div>
- </div>
- <div class="room" id="room12">
- <img class="rimg" src="assets/room/r12.jpg" alt="Hollywood Glamour Sequin - Deep Black Glam room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hollywood Glamour Sequin - Deep Black Glam</div><div class="rcol">Glitter Walls · blacks</div></div>
- </div>
- <div class="room" id="room13">
- <img class="rimg" src="assets/room/r13.jpg" alt="Eel Skin Sequin - Black Magician room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Eel Skin Sequin - Black Magician</div><div class="rcol">Glitter Walls · blacks</div></div>
- </div>
- <div class="room" id="room14">
- <img class="rimg" src="assets/room/r14.jpg" alt="Hollywood Glamour Glitter - Midnight Blue room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hollywood Glamour Glitter - Midnight Blue</div><div class="rcol">Glitter Walls · blacks</div></div>
- </div>
- <div class="room" id="room15">
- <img class="rimg" src="assets/room/r15.jpg" alt="Sequin - Black room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sequin - Black</div><div class="rcol">Glitter Walls · blacks</div></div>
- </div>
- <div class="room" id="room16">
- <img class="rimg" src="assets/room/r16.jpg" alt="Hollywood Sequin - Black room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hollywood Sequin - Black</div><div class="rcol">Glitter Walls · blacks</div></div>
- </div>
- <div class="room" id="room17">
- <img class="rimg" src="assets/room/r17.jpg" alt="Sting Ray Sequin - Gold Black Scales room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sting Ray Sequin - Gold Black Scales</div><div class="rcol">Glitter Walls · blacks</div></div>
- </div>
- <div class="room" id="room18">
- <img class="rimg" src="assets/room/r18.jpg" alt="Venezia Glass Beads - Red room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Venezia Glass Beads - Red</div><div class="rcol">Glitter Walls · jewel</div></div>
- </div>
- <div class="room" id="room19">
- <img class="rimg" src="assets/room/r19.jpg" alt="Cubist Glitter - Cubic Pink Metallic room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Cubist Glitter - Cubic Pink Metallic</div><div class="rcol">Glitter Walls · jewel</div></div>
- </div>
- <div class="room" id="room20">
- <img class="rimg" src="assets/room/r20.jpg" alt="Hollywood Glamour Sequin - Blush room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hollywood Glamour Sequin - Blush</div><div class="rcol">Glitter Walls · jewel</div></div>
- </div>
- <div class="room" id="room21">
- <img class="rimg" src="assets/room/r21.jpg" alt="Eel Skin Sequin - Red Shine room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Eel Skin Sequin - Red Shine</div><div class="rcol">Glitter Walls · jewel</div></div>
- </div>
- <div class="room" id="room22">
- <img class="rimg" src="assets/room/r22.jpg" alt="Hollywood Glamour Glitter - Red room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hollywood Glamour Glitter - Red</div><div class="rcol">Glitter Walls · jewel</div></div>
- </div>
- <div class="room" id="room23">
- <img class="rimg" src="assets/room/r23.jpg" alt="Sexy Sequin - Pink room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sexy Sequin - Pink</div><div class="rcol">Glitter Walls · jewel</div></div>
- </div>
- </div>
- </div>
-
- <div class="leaf" id="leaf0">
- <div class="face front"><img class="art" src="assets/img/p0.jpg" alt="Cubist Glitter - Cubic Gold Silver Metallic" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf1">
- <div class="face front"><img class="art" src="assets/img/p1.jpg" alt="Hollywood Glamour Sequin - Golden Zebra" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf2">
- <div class="face front"><img class="art" src="assets/img/p2.jpg" alt="Eel Skin Sequin - Bronze Beauty" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf3">
- <div class="face front"><img class="art" src="assets/img/p3.jpg" alt="Hollywood Glamour Glitter - Bronze" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf4">
- <div class="face front"><img class="art" src="assets/img/p4.jpg" alt="Venezia Glass Beads - Gold" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf5">
- <div class="face front"><img class="art" src="assets/img/p5.jpg" alt="Venezia Glass Beaded - Bronze" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf6">
- <div class="face front"><img class="art" src="assets/img/p6.jpg" alt="Hollywood Glamour Sequin - Silver Multi Color" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf7">
- <div class="face front"><img class="art" src="assets/img/p7.jpg" alt="Eel Skin Sequin - White Yarns & Silver Sequin" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf8">
- <div class="face front"><img class="art" src="assets/img/p8.jpg" alt="Hollywood Glamour Glitter - Silver" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf9">
- <div class="face front"><img class="art" src="assets/img/p9.jpg" alt="Venezia Glass Beads - Silver" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf10">
- <div class="face front"><img class="art" src="assets/img/p10.jpg" alt="Sexy Sequin - Silver" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf11">
- <div class="face front"><img class="art" src="assets/img/p11.jpg" alt="Sequin - Silver" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf12">
- <div class="face front"><img class="art" src="assets/img/p12.jpg" alt="Hollywood Glamour Sequin - Deep Black Glam" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf13">
- <div class="face front"><img class="art" src="assets/img/p13.jpg" alt="Eel Skin Sequin - Black Magician" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf14">
- <div class="face front"><img class="art" src="assets/img/p14.jpg" alt="Hollywood Glamour Glitter - Midnight Blue" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf15">
- <div class="face front"><img class="art" src="assets/img/p15.jpg" alt="Sequin - Black" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf16">
- <div class="face front"><img class="art" src="assets/img/p16.jpg" alt="Hollywood Sequin - Black" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf17">
- <div class="face front"><img class="art" src="assets/img/p17.jpg" alt="Sting Ray Sequin - Gold Black Scales" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf18">
- <div class="face front"><img class="art" src="assets/img/p18.jpg" alt="Venezia Glass Beads - Red" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf19">
- <div class="face front"><img class="art" src="assets/img/p19.jpg" alt="Cubist Glitter - Cubic Pink Metallic" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf20">
- <div class="face front"><img class="art" src="assets/img/p20.jpg" alt="Hollywood Glamour Sequin - Blush" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf21">
- <div class="face front"><img class="art" src="assets/img/p21.jpg" alt="Eel Skin Sequin - Red Shine" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf22">
- <div class="face front"><img class="art" src="assets/img/p22.jpg" alt="Hollywood Glamour Glitter - Red" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf23">
- <div class="face front"><img class="art" src="assets/img/p23.jpg" alt="Sexy Sequin - Pink" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- </div>
-
- <div class="card" id="outro">
- <div class="kicker">Shop the collection</div>
- <div class="big">Glitter Walls</div>
- <div class="url">designerwallcoverings.com</div>
- </div>
-
- <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="38" data-track-index="20" data-volume="0.18"></audio>
- <audio id="vo0" src="assets/audio/vo1.wav" data-start="2.4" data-track-index="21" data-volume="1"></audio>
- <audio id="vo1" src="assets/audio/vo2.wav" data-start="8.4" data-track-index="22" data-volume="1"></audio>
- <audio id="vo2" src="assets/audio/vo3.wav" data-start="15" data-track-index="23" data-volume="1"></audio>
- <audio id="vo3" src="assets/audio/vo4.wav" data-start="21.6" data-track-index="24" data-volume="1"></audio>
- <audio id="vo4" src="assets/audio/vo5.wav" data-start="31.15" data-track-index="25" data-volume="1"></audio>
-
- <script>
- window.__timelines = window.__timelines || {};
- const tl = gsap.timeline({ paused: true });
-
- gsap.set("#leaf0", { rotateY:0, zIndex:24 });
- gsap.set("#leaf1", { rotateY:0, zIndex:23 });
- gsap.set("#leaf2", { rotateY:0, zIndex:22 });
- gsap.set("#leaf3", { rotateY:0, zIndex:21 });
- gsap.set("#leaf4", { rotateY:0, zIndex:20 });
- gsap.set("#leaf5", { rotateY:0, zIndex:19 });
- gsap.set("#leaf6", { rotateY:0, zIndex:18 });
- gsap.set("#leaf7", { rotateY:0, zIndex:17 });
- gsap.set("#leaf8", { rotateY:0, zIndex:16 });
- gsap.set("#leaf9", { rotateY:0, zIndex:15 });
- gsap.set("#leaf10", { rotateY:0, zIndex:14 });
- gsap.set("#leaf11", { rotateY:0, zIndex:13 });
- gsap.set("#leaf12", { rotateY:0, zIndex:12 });
- gsap.set("#leaf13", { rotateY:0, zIndex:11 });
- gsap.set("#leaf14", { rotateY:0, zIndex:10 });
- gsap.set("#leaf15", { rotateY:0, zIndex:9 });
- gsap.set("#leaf16", { rotateY:0, zIndex:8 });
- gsap.set("#leaf17", { rotateY:0, zIndex:7 });
- gsap.set("#leaf18", { rotateY:0, zIndex:6 });
- gsap.set("#leaf19", { rotateY:0, zIndex:5 });
- gsap.set("#leaf20", { rotateY:0, zIndex:4 });
- gsap.set("#leaf21", { rotateY:0, zIndex:3 });
- gsap.set("#leaf22", { rotateY:0, zIndex:2 });
- gsap.set("#leaf23", { 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("#stage", { opacity: 0 });
- gsap.set("#outro", { opacity: 0 }); gsap.set("#outro .big", { y: 34, opacity: 0 }); gsap.set("#outro .url", { opacity: 0 });
- gsap.set("#cover .big", { y: 40, opacity: 0 }); gsap.set("#cover .kicker,#cover .sub,#cover .rule", { opacity: 0 });
-
- // cover
- tl.to("#cover .kicker", { opacity:1, duration:0.5 }, 0.2);
- tl.to("#cover .big", { opacity:1, y:0, duration:0.8, ease:"power3.out" }, 0.4);
- tl.to("#cover .rule,#cover .sub", { opacity:1, duration:0.5 }, 1.0);
- tl.to("#cover", { opacity:0, duration:0.5, ease:"power1.in" }, 1.70);
- tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, 1.70);
-
- // page turns + room crossfades
-
- tl.to("#leaf0", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 2.9);
- tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 2.9);
- tl.to("#leaf0 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 3.2);
- tl.set("#leaf0", { zIndex: 1000 }, 3.2);
- tl.set("#leaf0", { opacity: 0 }, 3.500);
- tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 3.2);
- tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 3.2);
- tl.to("#leaf1", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 4);
- tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 4);
- tl.to("#leaf1 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 4.3);
- tl.set("#leaf1", { zIndex: 1001 }, 4.3);
- tl.set("#leaf1", { opacity: 0 }, 4.600);
- tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 4.3);
- tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 4.3);
- tl.to("#leaf2", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 5.1);
- tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 5.1);
- tl.to("#leaf2 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 5.4);
- tl.set("#leaf2", { zIndex: 1002 }, 5.4);
- tl.set("#leaf2", { opacity: 0 }, 5.700);
- tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 5.4);
- tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 5.4);
- tl.to("#leaf3", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 6.2);
- tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 6.2);
- tl.to("#leaf3 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 6.5);
- tl.set("#leaf3", { zIndex: 1003 }, 6.5);
- tl.set("#leaf3", { opacity: 0 }, 6.800);
- tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 6.5);
- tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 6.5);
- tl.to("#leaf4", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 7.3);
- tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 7.3);
- tl.to("#leaf4 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 7.6);
- tl.set("#leaf4", { zIndex: 1004 }, 7.6);
- tl.set("#leaf4", { opacity: 0 }, 7.900);
- tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 7.6);
- tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 7.6);
- tl.to("#leaf5", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 8.4);
- tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 8.4);
- tl.to("#leaf5 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 8.7);
- tl.set("#leaf5", { zIndex: 1005 }, 8.7);
- tl.set("#leaf5", { opacity: 0 }, 9.000);
- tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 8.7);
- tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 8.7);
- tl.to("#leaf6", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 9.5);
- tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 9.5);
- tl.to("#leaf6 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 9.8);
- tl.set("#leaf6", { zIndex: 1006 }, 9.8);
- tl.set("#leaf6", { opacity: 0 }, 10.100);
- tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 9.8);
- tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 9.8);
- tl.to("#leaf7", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 10.6);
- tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 10.6);
- tl.to("#leaf7 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 10.9);
- tl.set("#leaf7", { zIndex: 1007 }, 10.9);
- tl.set("#leaf7", { opacity: 0 }, 11.200);
- tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 10.9);
- tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 10.9);
- tl.to("#leaf8", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 11.7);
- tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 11.7);
- tl.to("#leaf8 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 12);
- tl.set("#leaf8", { zIndex: 1008 }, 12);
- tl.set("#leaf8", { opacity: 0 }, 12.300);
- tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 12);
- tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 12);
- tl.to("#leaf9", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 12.8);
- tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 12.8);
- tl.to("#leaf9 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 13.1);
- tl.set("#leaf9", { zIndex: 1009 }, 13.1);
- tl.set("#leaf9", { opacity: 0 }, 13.400);
- tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 13.1);
- tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 13.1);
- tl.to("#leaf10", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 13.9);
- tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 13.9);
- tl.to("#leaf10 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 14.2);
- tl.set("#leaf10", { zIndex: 1010 }, 14.2);
- tl.set("#leaf10", { opacity: 0 }, 14.500);
- tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14.2);
- tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14.2);
- tl.to("#leaf11", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 15);
- tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 15);
- tl.to("#leaf11 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 15.3);
- tl.set("#leaf11", { zIndex: 1011 }, 15.3);
- tl.set("#leaf11", { opacity: 0 }, 15.600);
- tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 15.3);
- tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 15.3);
- tl.to("#leaf12", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 16.1);
- tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 16.1);
- tl.to("#leaf12 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 16.4);
- tl.set("#leaf12", { zIndex: 1012 }, 16.4);
- tl.set("#leaf12", { opacity: 0 }, 16.700);
- tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 16.4);
- tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 16.4);
- tl.to("#leaf13", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 17.2);
- tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 17.2);
- tl.to("#leaf13 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 17.5);
- tl.set("#leaf13", { zIndex: 1013 }, 17.5);
- tl.set("#leaf13", { opacity: 0 }, 17.800);
- tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17.5);
- tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17.5);
- tl.to("#leaf14", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 18.3);
- tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 18.3);
- tl.to("#leaf14 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 18.6);
- tl.set("#leaf14", { zIndex: 1014 }, 18.6);
- tl.set("#leaf14", { opacity: 0 }, 18.900);
- tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 18.6);
- tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 18.6);
- tl.to("#leaf15", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 19.4);
- tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 19.4);
- tl.to("#leaf15 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 19.7);
- tl.set("#leaf15", { zIndex: 1015 }, 19.7);
- tl.set("#leaf15", { opacity: 0 }, 20.000);
- tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 19.7);
- tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 19.7);
- tl.to("#leaf16", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 20.5);
- tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 20.5);
- tl.to("#leaf16 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 20.8);
- tl.set("#leaf16", { zIndex: 1016 }, 20.8);
- tl.set("#leaf16", { opacity: 0 }, 21.100);
- tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20.8);
- tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20.8);
- tl.to("#leaf17", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 21.6);
- tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 21.6);
- tl.to("#leaf17 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 21.9);
- tl.set("#leaf17", { zIndex: 1017 }, 21.9);
- tl.set("#leaf17", { opacity: 0 }, 22.200);
- tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 21.9);
- tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 21.9);
- tl.to("#leaf18", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 22.7);
- tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 22.7);
- tl.to("#leaf18 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 23);
- tl.set("#leaf18", { zIndex: 1018 }, 23);
- tl.set("#leaf18", { opacity: 0 }, 23.300);
- tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23);
- tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23);
- tl.to("#leaf19", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 23.8);
- tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 23.8);
- tl.to("#leaf19 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 24.1);
- tl.set("#leaf19", { zIndex: 1019 }, 24.1);
- tl.set("#leaf19", { opacity: 0 }, 24.400);
- tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 24.1);
- tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 24.1);
- tl.to("#leaf20", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 24.9);
- tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 24.9);
- tl.to("#leaf20 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 25.2);
- tl.set("#leaf20", { zIndex: 1020 }, 25.2);
- tl.set("#leaf20", { opacity: 0 }, 25.500);
- tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 25.2);
- tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 25.2);
- tl.to("#leaf21", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 26);
- tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 26);
- tl.to("#leaf21 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 26.3);
- tl.set("#leaf21", { zIndex: 1021 }, 26.3);
- tl.set("#leaf21", { opacity: 0 }, 26.600);
- tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 26.3);
- tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 26.3);
- tl.to("#leaf22", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 27.1);
- tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 27.1);
- tl.to("#leaf22 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 27.4);
- tl.set("#leaf22", { zIndex: 1022 }, 27.4);
- tl.set("#leaf22", { opacity: 0 }, 27.700);
- tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 27.4);
- tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 27.4);
- tl.to("#leaf23 .art", { scale: 1.05, duration: 3.20, ease:"power1.out" }, 28.2);
- tl.to("#room23 .rimg", { scale: 1.06, duration: 3.20, ease:"power1.out" }, 28.2);
-
- // outro
- tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 31.00);
- tl.to("#outro", { opacity:1, duration:0.5 }, 31.20);
- tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 31.40);
- tl.to("#outro .url", { opacity:1, duration:0.5 }, 31.90);
-
- gsap.set("#bgm", { volume: 0.18 });
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 2.10);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 5.00);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 8.10);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 11.00);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 14.70);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 17.60);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 21.30);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 24.20);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 30.85);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 33.75);
- tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 36.90);
-
- window.__timelines["flipbook"] = tl;
- </script>
- </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/flipbooks/glitter-walls/lines.txt b/flipbooks/glitter-walls/lines.txt
deleted file mode 100644
index 52c51ff..0000000
--- a/flipbooks/glitter-walls/lines.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-Glitter Walls — where a wall becomes the party. We open in gold and bronze: sequins and glass beads that turn any room into a moment.
-In silver and platinum — cool, shimmering, and unapologetically glamorous.
-In black and midnight — the drama of a sequin gown, on your wall.
-And in jewel tones — ruby, blush, and pink, for walls that love the spotlight.
-Glitter Walls, from Designer Wallcoverings. Bring the sparkle home. Explore the collection.
diff --git a/flipbooks/graduate-collection/STORYBOARD.md b/flipbooks/graduate-collection/STORYBOARD.md
deleted file mode 100644
index 75e61cc..0000000
--- a/flipbooks/graduate-collection/STORYBOARD.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-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: animated
-- 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: animated
-- 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: animated
-- 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: animated
-- 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: animated
-- 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: animated
-- 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
deleted file mode 100644
index ba7fe92..0000000
--- a/flipbooks/graduate-collection/audio.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- "bgm": { "src": "assets/audio/jazz.wav", "volume": 0.2 },
- "vo": [
- { "src": "assets/audio/vo1.wav", "anchor": "intro" },
- { "src": "assets/audio/vo2.wav", "anchor": "+3" },
- { "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/hyperframes.json b/flipbooks/graduate-collection/hyperframes.json
deleted file mode 100644
index 5fb1d6d..0000000
--- a/flipbooks/graduate-collection/hyperframes.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
- "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
- "paths": {
- "blocks": "compositions",
- "components": "compositions/components",
- "assets": "assets"
- }
-}
diff --git a/flipbooks/graduate-collection/index.html b/flipbooks/graduate-collection/index.html
deleted file mode 100644
index dc0b456..0000000
--- a/flipbooks/graduate-collection/index.html
+++ /dev/null
@@ -1,1113 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-resolution="landscape">
-<head>
-<meta charset="UTF-8">
-<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-<style>
- :root { --ink:#1c1a17; --cream:#f4efe6; --paper:#fbf8f1; --gold:#b08d57; }
- html,body { margin:0; padding:0; width:1920px; height:1080px; overflow:hidden;
- background:radial-gradient(120% 120% at 50% 0%, #2a2622 0%, #14110e 72%);
- font-family:"Helvetica Neue",system-ui,sans-serif; }
- #main-composition { position:relative; width:1920px; height:1080px; overflow:hidden; }
- .stage { position:absolute; inset:0; perspective:3000px; perspective-origin:50% 46%; }
-
- /* LEFT verso: brand + room + name */
- .verso { position:absolute; top:97px; left:192px; width:768px; height:886px;
- background:var(--paper); border-radius:8px 2px 2px 8px; overflow:hidden;
- box-shadow: inset -30px 0 46px rgba(0,0,0,.12), 0 34px 66px rgba(0,0,0,.5);
- display:flex; flex-direction:column; }
- .wordmark { flex:0 0 auto; text-align:center; padding:49px 0 27px; }
- .wordmark .wm { font-family:Georgia, serif; font-size:55px; color:var(--ink); letter-spacing:.02em; line-height:1; }
- .wordmark .wsub { margin-top:8px; font-size:18px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
- .wordmark .wr { width:64px; height:2px; background:var(--gold); margin:25px auto 0; }
- .roomstack { position:relative; flex:1 1 auto; margin:0 42px 42px; border-radius:4px; overflow:hidden; background:#e9e3d7; }
- .room { position:absolute; inset:0; opacity:0; }
- .room .rimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
- .room.fallback .rimg { transform:scale(1.4); filter:blur(3px) brightness(.82) saturate(1.05); }
- .room .rtint { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
- .room.fallback .rtint { background:linear-gradient(180deg, rgba(20,16,12,.30) 0%, rgba(20,16,12,.62) 100%); }
- .rcap { position:absolute; left:0; right:0; bottom:0; padding:38px 42px; color:#fff; }
- .rcap .rpat { font-family:Georgia, serif; font-size:48px; line-height:1.05; text-shadow:0 2px 14px rgba(0,0,0,.5); }
- .rcap .rcol { margin-top:8px; font-size:20px; letter-spacing:.2em; text-transform:uppercase; color:#e7d8bd; }
-
- /* RIGHT recto: page-turn stack of pattern swatches */
- .leaf { position:absolute; top:97px; left:960px; width:768px; height:886px;
- transform-origin:left center; transform-style:preserve-3d; will-change:transform; }
- .leaf .face { position:absolute; inset:0; backface-visibility:hidden; overflow:hidden; border-radius:2px 8px 8px 2px;
- background:var(--paper); box-shadow: 24px 28px 54px rgba(0,0,0,.42), inset 24px 0 42px rgba(0,0,0,.08); }
- .leaf .back { transform:rotateY(180deg); background:linear-gradient(90deg,#efe9dc,#fbf8f1 22%);
- box-shadow:-22px 28px 54px rgba(0,0,0,.36), inset -24px 0 42px rgba(0,0,0,.08); }
- .leaf .art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
- .leaf .shade { position:absolute; inset:0; opacity:0; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,0) 62%); }
-
- /* cover + outro cards */
- .card { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--cream); }
- .card .kicker { font-size:31px; letter-spacing:.44em; text-transform:uppercase; color:var(--gold); }
- .card .big { font-family:Georgia, serif; font-size:134px; line-height:1.0; margin:22px 60px; }
- .card .sub { font-size:35px; letter-spacing:.18em; text-transform:uppercase; color:#c9bfae; }
- .card .rule { width:120px; height:2px; background:var(--gold); margin:32px 0; }
- .card .url { margin-top:28px; font-size:31px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); }
-</style>
-</head>
-<body>
- <div data-hf-id="hf-wk5y" id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="124.2">
-
- <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 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-7bar" class="rimg" src="assets/room/r0.jpg" alt="All Over Leopard - Blue room">
- <div data-hf-id="hf-p81p" class="rtint"></div>
- <div data-hf-id="hf-az76" class="rcap"><div data-hf-id="hf-uzlw" class="rpat">All Over Leopard - Blue</div><div data-hf-id="hf-axjh" class="rcol">Graduate Collection · big cats</div></div>
- </div>
- <div data-hf-id="hf-ijsf" class="room" id="room1">
- <img data-hf-id="hf-bomb" class="rimg" src="assets/room/r1.jpg" alt="All Over Leopard Blue room">
- <div data-hf-id="hf-xt01" class="rtint"></div>
- <div data-hf-id="hf-ezxy" class="rcap"><div data-hf-id="hf-eid9" class="rpat">All Over Leopard Blue</div><div data-hf-id="hf-zrep" class="rcol">Graduate Collection · big cats</div></div>
- </div>
- <div data-hf-id="hf-7oas" class="room" id="room2">
- <img data-hf-id="hf-1cbr" class="rimg" src="assets/room/r2.jpg" alt="All Over Leopard Charcoal room">
- <div data-hf-id="hf-yzx4" class="rtint"></div>
- <div data-hf-id="hf-fe8z" class="rcap"><div data-hf-id="hf-ubia" class="rpat">All Over Leopard Charcoal</div><div data-hf-id="hf-0ybs" class="rcol">Graduate Collection · big cats</div></div>
- </div>
- <div data-hf-id="hf-8fyl" class="room" id="room3">
- <img data-hf-id="hf-t89i" class="rimg" src="assets/room/r3.jpg" alt="All Over Leopard - Aubergine room">
- <div data-hf-id="hf-ylm3" class="rtint"></div>
- <div data-hf-id="hf-fsk0" class="rcap"><div data-hf-id="hf-xe5y" class="rpat">All Over Leopard - Aubergine</div><div data-hf-id="hf-0k0r" class="rcol">Graduate Collection · big cats</div></div>
- </div>
- <div data-hf-id="hf-r7oa" class="room" id="room4">
- <img data-hf-id="hf-s25z" class="rimg" src="assets/room/r4.jpg" alt="All Over Leopard - Brown room">
- <div data-hf-id="hf-wm2y" class="rtint"></div>
- <div data-hf-id="hf-d0et" class="rcap"><div data-hf-id="hf-oxok" class="rpat">All Over Leopard - Brown</div><div data-hf-id="hf-ykhm" class="rcol">Graduate Collection · big cats</div></div>
- </div>
- <div data-hf-id="hf-arrj" class="room fallback" id="room5">
- <img data-hf-id="hf-bjlg" class="rimg" src="assets/room/r5.jpg" alt="Leopard Brown room">
- <div data-hf-id="hf-w7rx" class="rtint"></div>
- <div data-hf-id="hf-depu" class="rcap"><div data-hf-id="hf-cweq" class="rpat">Leopard Brown</div><div data-hf-id="hf-y66l" class="rcol">Graduate Collection · big cats</div></div>
- </div>
- <div data-hf-id="hf-mhwg" class="room" id="room6">
- <img data-hf-id="hf-qiyw" class="rimg" src="assets/room/r6.jpg" alt="Visitorian - Taupe room">
- <div data-hf-id="hf-xep0" class="rtint"></div>
- <div data-hf-id="hf-dt0v" 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-2vjh" class="room fallback" id="room7">
- <img data-hf-id="hf-nvf5" class="rimg" src="assets/room/r7.jpg" alt="Visitorian Navy room">
- <div data-hf-id="hf-x0dz" class="rtint"></div>
- <div data-hf-id="hf-e7bw" 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-d2uq" class="room fallback" id="room8">
- <img data-hf-id="hf-b220" class="rimg" src="assets/room/r8.jpg" alt="Visitorian Mauve room">
- <div data-hf-id="hf-1dra" class="rtint"></div>
- <div data-hf-id="hf-bf6p" 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-9zdz" class="room" id="room9">
- <img data-hf-id="hf-cizv" class="rimg" src="assets/room/r9.jpg" alt="Visitorian Blue room">
- <div data-hf-id="hf-0zg9" class="rtint"></div>
- <div data-hf-id="hf-bthq" 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-kvd1" class="room" id="room10">
- <img data-hf-id="hf-enau" class="rimg" src="assets/room/r10.jpg" alt="Jolly Boy Dog & Friends room">
- <div data-hf-id="hf-ipkj" class="rtint"></div>
- <div data-hf-id="hf-bub6" 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-k3p8" class="room" id="room11">
- <img data-hf-id="hf-sxcy" class="rimg" src="assets/room/r11.jpg" alt="Steampunk Notice Board room">
- <div data-hf-id="hf-j3vk" class="rtint"></div>
- <div data-hf-id="hf-bg05" 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-ocfv" class="room fallback" id="room12">
- <img data-hf-id="hf-jidk" class="rimg" src="assets/room/r12.jpg" alt="Portarait Gallery Taupe room">
- <div data-hf-id="hf-hwyh" class="rtint"></div>
- <div data-hf-id="hf-cmx8" 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-oth2" class="room" id="room13">
- <img data-hf-id="hf-j518" class="rimg" src="assets/room/r13.jpg" alt="Dachshund Dog room">
- <div data-hf-id="hf-ib9i" class="rtint"></div>
- <div data-hf-id="hf-c8m7" 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-zoyp" class="room" id="room14">
- <img data-hf-id="hf-p0ws" class="rimg" src="assets/room/r14.jpg" alt="Colonel Fox at the Gentleman's Club - Mustard room">
- <div data-hf-id="hf-h4cf" class="rtint"></div>
- <div data-hf-id="hf-dfja" 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-wpp4" class="room" id="room15">
- <img data-hf-id="hf-fczt" class="rimg" src="assets/room/r15.jpg" alt="Fashionista Tinted room">
- <div data-hf-id="hf-hing" class="rtint"></div>
- <div data-hf-id="hf-d189" class="rcap"><div data-hf-id="hf-gf0o" class="rpat">Fashionista Tinted</div><div data-hf-id="hf-t1fm" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-7l6r" class="room" id="room16">
- <img data-hf-id="hf-j1jm" class="rimg" src="assets/room/r16.jpg" alt="Fashionista Black & White room">
- <div data-hf-id="hf-gbqd" class="rtint"></div>
- <div data-hf-id="hf-e85c" class="rcap"><div data-hf-id="hf-krec" class="rpat">Fashionista Black & White</div><div data-hf-id="hf-4wf2" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-3n2q" class="room" id="room17">
- <img data-hf-id="hf-7ono" class="rimg" src="assets/room/r17.jpg" alt="Rabbit Rabbit Rabbit room">
- <div data-hf-id="hf-gq1e" class="rtint"></div>
- <div data-hf-id="hf-dtub" class="rcap"><div data-hf-id="hf-7my1" class="rpat">Rabbit Rabbit Rabbit</div><div data-hf-id="hf-4i41" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-tfrh" class="room" id="room18">
- <img data-hf-id="hf-epwl" class="rimg" src="assets/room/r18.jpg" alt="Showgirls Metallic Gold & Black room">
- <div data-hf-id="hf-fj4b" class="rtint"></div>
- <div data-hf-id="hf-8nuy" class="rcap"><div data-hf-id="hf-z8h3" class="rpat">Showgirls Metallic Gold & Black</div><div data-hf-id="hf-5p14" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-so3o" class="room" id="room19">
- <img data-hf-id="hf-v9br" class="rimg" src="assets/room/r19.jpg" alt="Showgirls Metallic Mustard & Cream room">
- <div data-hf-id="hf-fxfc" class="rtint"></div>
- <div data-hf-id="hf-89jx" class="rcap"><div data-hf-id="hf-8yqi" class="rpat">Showgirls Metallic Mustard & Cream</div><div data-hf-id="hf-5aq3" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-brro" class="room" id="room20">
- <img data-hf-id="hf-vawu" class="rimg" src="assets/room/r20.jpg" alt="Showgirls Metallic Pink & Black room">
- <div data-hf-id="hf-ijzs" class="rtint"></div>
- <div data-hf-id="hf-b2nd" class="rcap"><div data-hf-id="hf-v0od" class="rpat">Showgirls Metallic Pink & Black</div><div data-hf-id="hf-3b6y" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-9uoh" class="room fallback" id="room21">
- <img data-hf-id="hf-4zbc" class="rimg" src="assets/room/r21.jpg" alt="Portrait Gallery Navy room">
- <div data-hf-id="hf-i5or" class="rtint"></div>
- <div data-hf-id="hf-bgye" class="rcap"><div data-hf-id="hf-n85w" class="rpat">Portrait Gallery Navy</div><div data-hf-id="hf-2wvx" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-ghji" class="room" id="room22">
- <img data-hf-id="hf-6ecz" class="rimg" src="assets/room/r22.jpg" alt="Showgirls Metallic Bronze & Cream room">
- <div data-hf-id="hf-hrdq" class="rtint"></div>
- <div data-hf-id="hf-bv9f" class="rcap"><div data-hf-id="hf-mcsw" class="rpat">Showgirls Metallic Bronze & Cream</div><div data-hf-id="hf-43t0" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-kfnj" class="room" id="room23">
- <img data-hf-id="hf-h51m" class="rimg" src="assets/room/r23.jpg" alt="Showgirls Metallic Pink & Cream room">
- <div data-hf-id="hf-hd2p" class="rtint"></div>
- <div data-hf-id="hf-c9kg" class="rcap"><div data-hf-id="hf-e4qk" class="rpat">Showgirls Metallic Pink & Cream</div><div data-hf-id="hf-3phz" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-odrk" class="room" id="room24">
- <img data-hf-id="hf-lewg" class="rimg" src="assets/room/r24.jpg" alt="Showgirls Metallic Teal & Black room">
- <div data-hf-id="hf-gyro" class="rtint"></div>
- <div data-hf-id="hf-9hf9" class="rcap"><div data-hf-id="hf-bm5z" class="rpat">Showgirls Metallic Teal & Black</div><div data-hf-id="hf-82va" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-p5fd" class="room" id="room25">
- <img data-hf-id="hf-axou" class="rimg" src="assets/room/r25.jpg" alt="Showgirls Metallic Teal & Cream room">
- <div data-hf-id="hf-gkgn" class="rtint"></div>
- <div data-hf-id="hf-9vqa" class="rcap"><div data-hf-id="hf-wyy2" class="rpat">Showgirls Metallic Teal & Cream</div><div data-hf-id="hf-7ok9" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-vb56" class="room" id="room26">
- <img data-hf-id="hf-iyrg" class="rimg" src="assets/room/r26.jpg" alt="Showgirls Metallic Bronze & Black room">
- <div data-hf-id="hf-g65m" class="rtint"></div>
- <div data-hf-id="hf-aa1b" class="rcap"><div data-hf-id="hf-pxvd" class="rpat">Showgirls Metallic Bronze & Black</div><div data-hf-id="hf-44r9" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-z997" class="room" id="room27">
- <img data-hf-id="hf-f69z" class="rimg" src="assets/room/r27.jpg" alt="Cavalcade Of Cats Blue room">
- <div data-hf-id="hf-frul" class="rtint"></div>
- <div data-hf-id="hf-aocc" class="rcap"><div data-hf-id="hf-qcxr" class="rpat">Cavalcade Of Cats Blue</div><div data-hf-id="hf-4j2a" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-37d8" class="room" id="room28">
- <img data-hf-id="hf-fjz0" class="rimg" src="assets/room/r28.jpg" alt="Cavalcade Of Cats Mustard room">
- <div data-hf-id="hf-lqg0" class="rtint"></div>
- <div data-hf-id="hf-7w75" class="rcap"><div data-hf-id="hf-sjmn" class="rpat">Cavalcade Of Cats Mustard</div><div data-hf-id="hf-4xdb" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-3z11" class="room" id="room29">
- <img data-hf-id="hf-cxvm" class="rimg" src="assets/room/r29.jpg" alt="Cavalcade Of Cats Red room">
- <div data-hf-id="hf-lc4z" class="rtint"></div>
- <div data-hf-id="hf-8ai6" class="rcap"><div data-hf-id="hf-cksq" class="rpat">Cavalcade Of Cats Red</div><div data-hf-id="hf-5boc" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-zmtr" class="room" id="room30">
- <img data-hf-id="hf-u2ke" class="rimg" src="assets/room/r30.jpg" alt="Top Dog Cream room">
- <div data-hf-id="hf-jbnl" class="rtint"></div>
- <div data-hf-id="hf-aazk" class="rcap"><div data-hf-id="hf-b73o" class="rpat">Top Dog Cream</div><div data-hf-id="hf-5pzd" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-vopq" class="room" id="room31">
- <img data-hf-id="hf-xn3k" class="rimg" src="assets/room/r31.jpg" alt="Top Dog Grey room">
- <div data-hf-id="hf-jpym" class="rtint"></div>
- <div data-hf-id="hf-9woj" class="rcap"><div data-hf-id="hf-ts11" class="rpat">Top Dog Grey</div><div data-hf-id="hf-64ae" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-rqlp" class="room" id="room32">
- <img data-hf-id="hf-q23y" class="rimg" src="assets/room/r32.jpg" alt="At The Art Gallery Burgundy room">
- <div data-hf-id="hf-k49n" class="rtint"></div>
- <div data-hf-id="hf-9idi" class="rcap"><div data-hf-id="hf-83hy" class="rpat">At The Art Gallery Burgundy</div><div data-hf-id="hf-6ilf" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-orc4" class="room" id="room33">
- <img data-hf-id="hf-gzd0" class="rimg" src="assets/room/r33.jpg" alt="At The Art Gallery Charcoal room">
- <div data-hf-id="hf-kiko" class="rtint"></div>
- <div data-hf-id="hf-942h" class="rcap"><div data-hf-id="hf-kc3b" class="rpat">At The Art Gallery Charcoal</div><div data-hf-id="hf-6wwg" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-c8tn" class="room" id="room34">
- <img data-hf-id="hf-lm0k" class="rimg" src="assets/room/r34.jpg" alt="At The Art Gallery Teal room">
- <div data-hf-id="hf-hqfh" class="rtint"></div>
- <div data-hf-id="hf-8prg" class="rcap"><div data-hf-id="hf-b6ga" class="rpat">At The Art Gallery Teal</div><div data-hf-id="hf-0yb1" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-8apm" class="room" id="room35">
- <img data-hf-id="hf-0t9p" class="rimg" src="assets/room/r35.jpg" alt="Top Dog room">
- <div data-hf-id="hf-i4qi" class="rtint"></div>
- <div data-hf-id="hf-8bgf" class="rcap"><div data-hf-id="hf-ewym" class="rpat">Top Dog</div><div data-hf-id="hf-1cm2" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-4cll" class="room" id="room36">
- <img data-hf-id="hf-9d9p" class="rimg" src="assets/room/r36.jpg" alt="The Soire Rose room">
- <div data-hf-id="hf-ij1j" class="rtint"></div>
- <div data-hf-id="hf-7x5e" class="rcap"><div data-hf-id="hf-fpxj" class="rpat">The Soire Rose</div><div data-hf-id="hf-maa4" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-n0zg" class="room fallback" id="room37">
- <img data-hf-id="hf-qjxx" class="rimg" src="assets/room/r37.jpg" alt="The Soire Blue room">
- <div data-hf-id="hf-ixck" class="rtint"></div>
- <div data-hf-id="hf-7iud" class="rcap"><div data-hf-id="hf-azx8" class="rpat">The Soire Blue</div><div data-hf-id="hf-lvz3" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-j2vf" class="room fallback" id="room38">
- <img data-hf-id="hf-4om9" class="rimg" src="assets/room/r38.jpg" alt="The Soire Peach room">
- <div data-hf-id="hf-mi3t" class="rtint"></div>
- <div data-hf-id="hf-74jc" class="rcap"><div data-hf-id="hf-hshl" class="rpat">The Soire Peach</div><div data-hf-id="hf-lho2" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-f4re" class="room fallback" id="room39">
- <img data-hf-id="hf-uisu" class="rimg" src="assets/room/r39.jpg" alt="The Soire Plaster room">
- <div data-hf-id="hf-mweu" class="rtint"></div>
- <div data-hf-id="hf-6q8b" class="rcap"><div data-hf-id="hf-qrrr" class="rpat">The Soire Plaster</div><div data-hf-id="hf-l3d1" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-y8fe" class="room fallback" id="room40">
- <img data-hf-id="hf-k4r4" class="rimg" src="assets/room/r40.jpg" alt="The Soire Taupe room">
- <div data-hf-id="hf-23da" class="rtint"></div>
- <div data-hf-id="hf-um0v" class="rcap"><div data-hf-id="hf-h2vp" class="rpat">The Soire Taupe</div><div data-hf-id="hf-nvi8" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-26jf" class="room fallback" id="room41">
- <img data-hf-id="hf-kbbg" class="rimg" src="assets/room/r41.jpg" alt="The Soire Mustard room">
- <div data-hf-id="hf-1p29" class="rtint"></div>
- <div data-hf-id="hf-v0bw" class="rcap"><div data-hf-id="hf-iimu" class="rpat">The Soire Mustard</div><div data-hf-id="hf-nh77" class="rcol">Graduate Collection · characters</div></div>
- </div>
- <div data-hf-id="hf-ohms" class="room" id="room42">
- <img data-hf-id="hf-krer" class="rimg" src="assets/room/r42.jpg" alt="Stag Grande - Plum room">
- <div data-hf-id="hf-2vzc" class="rtint"></div>
- <div data-hf-id="hf-ttet" 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-p9al" class="room" id="room43">
- <img data-hf-id="hf-uhz5" class="rimg" src="assets/room/r43.jpg" alt="Stag Grande Teal room">
- <div data-hf-id="hf-2hob" class="rtint"></div>
- <div data-hf-id="hf-u7pu" 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-810a" class="room" id="room44">
- <img data-hf-id="hf-s4yx" class="rimg" src="assets/room/r44.jpg" alt="Stag Grande Grey room">
- <div data-hf-id="hf-0i56" class="rtint"></div>
- <div data-hf-id="hf-w78z" 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-bz4b" class="room" id="room45">
- <img data-hf-id="hf-dkmf" class="rimg" src="assets/room/r45.jpg" alt="Small Stag Teal room">
- <div data-hf-id="hf-03u5" class="rtint"></div>
- <div data-hf-id="hf-wlk0" 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-3b8g" class="room" id="room46">
- <img data-hf-id="hf-ug0d" class="rimg" src="assets/room/r46.jpg" alt="Dipped In Moonlight Charcoal room">
- <div data-hf-id="hf-1ar8" class="rtint"></div>
- <div data-hf-id="hf-vemx" 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-42w9" class="room" id="room47">
- <img data-hf-id="hf-clsh" class="rimg" src="assets/room/r47.jpg" alt="Dipped In Moonlight Cream room">
- <div data-hf-id="hf-0wg7" class="rtint"></div>
- <div data-hf-id="hf-vsxy" 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-muly" class="room" id="room48">
- <img data-hf-id="hf-r6qw" class="rimg" src="assets/room/r48.jpg" alt="Dipped In Moonlight Teal room">
- <div data-hf-id="hf-59ti" class="rtint"></div>
- <div data-hf-id="hf-rfkn" 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 data-hf-id="hf-qspz" class="room" id="room49">
- <img data-hf-id="hf-2q6n" class="rimg" src="assets/room/r49.jpg" alt="Small Stag Plum room">
- <div data-hf-id="hf-4vih" class="rtint"></div>
- <div data-hf-id="hf-rtvo" class="rcap"><div data-hf-id="hf-bnif" class="rpat">Small Stag Plum</div><div data-hf-id="hf-fzgc" class="rcol">Graduate Collection · stags</div></div>
- </div>
- <div data-hf-id="hf-d0hl" class="room" id="room50">
- <img data-hf-id="hf-av1a" class="rimg" src="assets/room/r50.jpg" alt="Small Stag Grey room">
- <div data-hf-id="hf-2v13" class="rtint"></div>
- <div data-hf-id="hf-tud2" class="rcap"><div data-hf-id="hf-1xzu" class="rpat">Small Stag Grey</div><div data-hf-id="hf-d7b5" class="rcol">Graduate Collection · stags</div></div>
- </div>
- <div data-hf-id="hf-h9uk" class="room fallback" id="room51">
- <img data-hf-id="hf-lxwb" class="rimg" src="assets/room/r51.jpg" alt="Stag room">
- <div data-hf-id="hf-39c4" class="rtint"></div>
- <div data-hf-id="hf-tg21" class="rcap"><div data-hf-id="hf-6gwq" class="rpat">Stag</div><div data-hf-id="hf-dlm6" class="rcol">Graduate Collection · stags</div></div>
- </div>
- <div data-hf-id="hf-n4bf" class="room" id="room52">
- <img data-hf-id="hf-jpwg" class="rimg" src="assets/room/r52.jpg" alt="Vestige Pistachio room">
- <div data-hf-id="hf-22f1" class="rtint"></div>
- <div data-hf-id="hf-umz4" class="rcap"><div data-hf-id="hf-gv12" class="rpat">Vestige Pistachio</div><div data-hf-id="hf-rv82" class="rcol">Graduate Collection · stags</div></div>
- </div>
- <div data-hf-id="hf-j67e" class="room" id="room53">
- <img data-hf-id="hf-1zjf" class="rimg" src="assets/room/r53.jpg" alt="Vestige Mustard room">
- <div data-hf-id="hf-2gq2" class="rtint"></div>
- <div data-hf-id="hf-u8o3" class="rcap"><div data-hf-id="hf-yt60" class="rpat">Vestige Mustard</div><div data-hf-id="hf-rgx1" class="rcol">Graduate Collection · stags</div></div>
- </div>
- <div data-hf-id="hf-0ehp" class="room" id="room54">
- <img data-hf-id="hf-ubin" class="rimg" src="assets/room/r54.jpg" alt="Vestige Grey room">
- <div data-hf-id="hf-4g97" class="rtint"></div>
- <div data-hf-id="hf-s94y" class="rcap"><div data-hf-id="hf-n5bd" class="rpat">Vestige Grey</div><div data-hf-id="hf-snu4" class="rcol">Graduate Collection · stags</div></div>
- </div>
- </div>
- </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-gvrs" class="art" src="assets/img/p0.jpg" alt="All Over Leopard - Blue"><div data-hf-id="hf-q0n7" class="shade"></div></div>
- <div data-hf-id="hf-yq90" class="face back"></div>
- </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-lhtu" class="art" src="assets/img/p1.jpg" alt="All Over Leopard Blue"><div data-hf-id="hf-iber" class="shade"></div></div>
- <div data-hf-id="hf-6pzw" class="face back"></div>
- </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-jj5k" class="art" src="assets/img/p2.jpg" alt="All Over Leopard Charcoal"><div data-hf-id="hf-hx3q" class="shade"></div></div>
- <div data-hf-id="hf-5j2t" class="face back"></div>
- </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-z1rt" class="art" src="assets/img/p3.jpg" alt="All Over Leopard - Aubergine"><div data-hf-id="hf-hisp" class="shade"></div></div>
- <div data-hf-id="hf-5xdu" class="face back"></div>
- </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-5cus" class="art" src="assets/img/p4.jpg" alt="All Over Leopard - Brown"><div data-hf-id="hf-h4ho" class="shade"></div></div>
- <div data-hf-id="hf-7wwz" class="face back"></div>
- </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-rs1f" class="art" src="assets/img/p5.jpg" alt="Leopard Brown"><div data-hf-id="hf-gq6n" class="shade"></div></div>
- <div data-hf-id="hf-8b80" class="face back"></div>
- </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-fvup" class="art" src="assets/img/p6.jpg" alt="Visitorian - Taupe"><div data-hf-id="hf-gbvm" class="shade"></div></div>
- <div data-hf-id="hf-74ax" class="face back"></div>
- </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-kug0" class="art" src="assets/img/p7.jpg" alt="Visitorian Navy"><div data-hf-id="hf-fxkl" class="shade"></div></div>
- <div data-hf-id="hf-7ily" class="face back"></div>
- </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-3ea9" class="art" src="assets/img/p8.jpg" alt="Visitorian Mauve"><div data-hf-id="hf-fj9k" class="shade"></div></div>
- <div data-hf-id="hf-358n" class="face back"></div>
- </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-plbe" class="art" src="assets/img/p9.jpg" alt="Visitorian Blue"><div data-hf-id="hf-f4yj" class="shade"></div></div>
- <div data-hf-id="hf-3jjo" class="face back"></div>
- </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-fm4z" class="art" src="assets/img/p10.jpg" alt="Jolly Boy Dog & Friends"><div data-hf-id="hf-j9c9" class="shade"></div></div>
- <div data-hf-id="hf-624k" class="face back"></div>
- </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-kwbl" class="art" src="assets/img/p11.jpg" alt="Steampunk Notice Board"><div data-hf-id="hf-jnna" class="shade"></div></div>
- <div data-hf-id="hf-5ntj" class="face back"></div>
- </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-cq71" class="art" src="assets/img/p12.jpg" alt="Portarait Gallery Taupe"><div data-hf-id="hf-k1yb" class="shade"></div></div>
- <div data-hf-id="hf-59ii" class="face back"></div>
- </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-fvcn" class="art" src="assets/img/p13.jpg" alt="Dachshund Dog"><div data-hf-id="hf-kg9c" class="shade"></div></div>
- <div data-hf-id="hf-4v7h" class="face back"></div>
- </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-jgy9" class="art" src="assets/img/p14.jpg" alt="Colonel Fox at the Gentleman's Club - Mustard"><div data-hf-id="hf-ho45" class="shade"></div></div>
- <div data-hf-id="hf-7nco" class="face back"></div>
- </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-jf9g" class="art" src="assets/img/p15.jpg" alt="Fashionista Tinted"><div data-hf-id="hf-i2f6" class="shade"></div></div>
- <div data-hf-id="hf-791n" class="face back"></div>
- </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-9pxr" class="art" src="assets/img/p16.jpg" alt="Fashionista Black & White"><div data-hf-id="hf-igq7" class="shade"></div></div>
- <div data-hf-id="hf-6uqm" class="face back"></div>
- </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-vpfb" class="art" src="assets/img/p17.jpg" alt="Rabbit Rabbit Rabbit"><div data-hf-id="hf-iv18" class="shade"></div></div>
- <div data-hf-id="hf-6gfl" class="face back"></div>
- </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-98pe" class="art" src="assets/img/p18.jpg" alt="Showgirls Metallic Gold & Black"><div data-hf-id="hf-g2w1" class="shade"></div></div>
- <div data-hf-id="hf-98ks" class="face back"></div>
- </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-utfe" class="art" src="assets/img/p19.jpg" alt="Showgirls Metallic Mustard & Cream"><div data-hf-id="hf-gh72" class="shade"></div></div>
- <div data-hf-id="hf-8u9r" class="face back"></div>
- </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-8mpt" class="art" src="assets/img/p20.jpg" alt="Showgirls Metallic Pink & Black"><div data-hf-id="hf-k102" class="shade"></div></div>
- <div data-hf-id="hf-25q7" class="face back"></div>
- </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-hdph" class="art" src="assets/img/p21.jpg" alt="Portrait Gallery Navy"><div data-hf-id="hf-jmp1" class="shade"></div></div>
- <div data-hf-id="hf-2k18" class="face back"></div>
- </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-675a" class="art" src="assets/img/p22.jpg" alt="Showgirls Metallic Bronze & Cream"><div data-hf-id="hf-ktm4" class="shade"></div></div>
- <div data-hf-id="hf-1d45" class="face back"></div>
- </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-e24f" class="art" src="assets/img/p23.jpg" alt="Showgirls Metallic Pink & Cream"><div data-hf-id="hf-kfb3" class="shade"></div></div>
- <div data-hf-id="hf-1rf6" class="face back"></div>
- </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-uh8b" class="art" src="assets/img/p24.jpg" alt="Showgirls Metallic Teal & Black"><div data-hf-id="hf-lm86" class="shade"></div></div>
- <div data-hf-id="hf-3qyb" class="face back"></div>
- </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-59mj" class="art" src="assets/img/p25.jpg" alt="Showgirls Metallic Teal & Cream"><div data-hf-id="hf-l7x5" class="shade"></div></div>
- <div data-hf-id="hf-459c" class="face back"></div>
- </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-ivij" class="art" src="assets/img/p26.jpg" alt="Showgirls Metallic Bronze & Black"><div data-hf-id="hf-meu8" class="shade"></div></div>
- <div data-hf-id="hf-2yc9" class="face back"></div>
- </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-azb8" class="art" src="assets/img/p27.jpg" alt="Cavalcade Of Cats Blue"><div data-hf-id="hf-m0j7" class="shade"></div></div>
- <div data-hf-id="hf-3cna" class="face back"></div>
- </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-22vz" class="art" src="assets/img/p28.jpg" alt="Cavalcade Of Cats Mustard"><div data-hf-id="hf-guju" class="shade"></div></div>
- <div data-hf-id="hf-yz9z" class="face back"></div>
- </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-5rvz" class="art" src="assets/img/p29.jpg" alt="Cavalcade Of Cats Red"><div data-hf-id="hf-gg8t" class="shade"></div></div>
- <div data-hf-id="hf-zdl0" class="face back"></div>
- </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-09gn" class="art" src="assets/img/p30.jpg" alt="Top Dog Cream"><div data-hf-id="hf-ksnv" class="shade"></div></div>
- <div data-hf-id="hf-1e2e" class="face back"></div>
- </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-we3b" class="art" src="assets/img/p31.jpg" alt="Top Dog Grey"><div data-hf-id="hf-l6yw" class="shade"></div></div>
- <div data-hf-id="hf-0zrd" class="face back"></div>
- </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-tbwf" class="art" src="assets/img/p32.jpg" alt="At The Art Gallery Burgundy"><div data-hf-id="hf-k01t" class="shade"></div></div>
- <div data-hf-id="hf-26og" class="face back"></div>
- </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-3jd3" class="art" src="assets/img/p33.jpg" alt="At The Art Gallery Charcoal"><div data-hf-id="hf-kecu" class="shade"></div></div>
- <div data-hf-id="hf-1sdf" class="face back"></div>
- </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-jro5" class="art" src="assets/img/p34.jpg" alt="At The Art Gallery Teal"><div data-hf-id="hf-j7fr" class="shade"></div></div>
- <div data-hf-id="hf-zsua" class="face back"></div>
- </div>
- <div data-hf-id="hf-j1vu" class="leaf" id="leaf35">
- <div data-hf-id="hf-nslv" class="face front"><img data-hf-id="hf-l338" class="art" src="assets/img/p35.jpg" alt="Top Dog"><div data-hf-id="hf-jlqs" class="shade"></div></div>
- <div data-hf-id="hf-zej9" class="face back"></div>
- </div>
- <div data-hf-id="hf-f3rt" class="leaf" id="leaf36">
- <div data-hf-id="hf-neau" class="face front"><img data-hf-id="hf-tjg6" class="art" src="assets/img/p36.jpg" alt="The Soire Rose"><div data-hf-id="hf-ietp" class="shade"></div></div>
- <div data-hf-id="hf-0lgc" class="face back"></div>
- </div>
- <div data-hf-id="hf-ec40" class="leaf" id="leaf37">
- <div data-hf-id="hf-mzzt" class="face front"><img data-hf-id="hf-yfzo" class="art" src="assets/img/p37.jpg" alt="The Soire Blue"><div data-hf-id="hf-it4q" class="shade"></div></div>
- <div data-hf-id="hf-075b" class="face back"></div>
- </div>
- <div data-hf-id="hf-1tlj" class="leaf" id="leaf38">
- <div data-hf-id="hf-jf8k" class="face front"><img data-hf-id="hf-2wdi" class="art" src="assets/img/p38.jpg" alt="The Soire Peach"><div data-hf-id="hf-nz43" class="shade"></div></div>
- <div data-hf-id="hf-y7m6" class="face back"></div>
- </div>
- <div data-hf-id="hf-vnvq" class="leaf" id="leaf39">
- <div data-hf-id="hf-j0xj" class="face front"><img data-hf-id="hf-7wn9" class="art" src="assets/img/p39.jpg" alt="The Soire Plaster"><div data-hf-id="hf-odf4" class="shade"></div></div>
- <div data-hf-id="hf-xtb5" class="face back"></div>
- </div>
- <div data-hf-id="hf-3yku" class="leaf" id="leaf40">
- <div data-hf-id="hf-lu0z" class="face front"><img data-hf-id="hf-ulz7" class="art" src="assets/img/p40.jpg" alt="The Soire Taupe"><div data-hf-id="hf-lkbo" class="shade"></div></div>
- <div data-hf-id="hf-imcp" class="face back"></div>
- </div>
- <div data-hf-id="hf-7wov" class="leaf" id="leaf41">
- <div data-hf-id="hf-m8c0" class="face front"><img data-hf-id="hf-6h2l" class="art" src="assets/img/p41.jpg" alt="The Soire Mustard"><div data-hf-id="hf-l60n" class="shade"></div></div>
- <div data-hf-id="hf-j0nq" class="face back"></div>
- </div>
- <div data-hf-id="hf-z8t0" class="leaf" id="leaf42">
- <div data-hf-id="hf-l1ex" class="face front"><img data-hf-id="hf-rlw2" class="art" src="assets/img/p42.jpg" alt="Stag Grande - Plum"><div data-hf-id="hf-krpm" class="shade"></div></div>
- <div data-hf-id="hf-jeyr" class="face back"></div>
- </div>
- <div data-hf-id="hf-00gt" class="leaf" id="leaf43">
- <div data-hf-id="hf-lfpy" class="face front"><img data-hf-id="hf-v20u" class="art" src="assets/img/p43.jpg" alt="Stag Grande Teal"><div data-hf-id="hf-kdel" class="shade"></div></div>
- <div data-hf-id="hf-jt9s" class="face back"></div>
- </div>
- <div data-hf-id="hf-is6i" class="leaf" id="leaf44">
- <div data-hf-id="hf-k8sv" class="face front"><img data-hf-id="hf-v2oo" class="art" src="assets/img/p44.jpg" alt="Stag Grande Grey"><div data-hf-id="hf-n5js" class="shade"></div></div>
- <div data-hf-id="hf-h14l" class="face back"></div>
- </div>
- <div data-hf-id="hf-mqaj" class="leaf" id="leaf45">
- <div data-hf-id="hf-kn3w" class="face front"><img data-hf-id="hf-ro2g" class="art" src="assets/img/p45.jpg" alt="Small Stag Teal"><div data-hf-id="hf-mr8r" class="shade"></div></div>
- <div data-hf-id="hf-hffm" class="face back"></div>
- </div>
- <div data-hf-id="hf-busw" class="leaf" id="leaf46">
- <div data-hf-id="hf-jg6t" class="face front"><img data-hf-id="hf-hw2c" class="art" src="assets/img/p46.jpg" alt="Dipped In Moonlight Charcoal"><div data-hf-id="hf-mcxq" class="shade"></div></div>
- <div data-hf-id="hf-htqn" class="face back"></div>
- </div>
- <div data-hf-id="hf-cmgp" class="leaf" id="leaf47">
- <div data-hf-id="hf-juhu" class="face front"><img data-hf-id="hf-fzla" class="art" src="assets/img/p47.jpg" alt="Dipped In Moonlight Cream"><div data-hf-id="hf-lymp" class="shade"></div></div>
- <div data-hf-id="hf-i81o" class="face back"></div>
- </div>
- <div data-hf-id="hf-ve6e" class="leaf" id="leaf48">
- <div data-hf-id="hf-inkr" class="face front"><img data-hf-id="hf-2xhn" class="art" src="assets/img/p48.jpg" alt="Dipped In Moonlight Teal"><div data-hf-id="hf-oqrw" class="shade"></div></div>
- <div data-hf-id="hf-ffwh" class="face back"></div>
- </div>
- <div data-hf-id="hf-zcaf" class="leaf" id="leaf49">
- <div data-hf-id="hf-j1vs" class="face front"><img data-hf-id="hf-n1m8" class="art" src="assets/img/p49.jpg" alt="Small Stag Plum"><div data-hf-id="hf-ocgv" class="shade"></div></div>
- <div data-hf-id="hf-fu7i" class="face back"></div>
- </div>
- <div data-hf-id="hf-rtmx" class="leaf" id="leaf50">
- <div data-hf-id="hf-8cka" class="face front"><img data-hf-id="hf-cj7f" class="art" src="assets/img/p50.jpg" alt="Small Stag Grey"><div data-hf-id="hf-7grx" class="shade"></div></div>
- <div data-hf-id="hf-huow" class="face back"></div>
- </div>
- <div data-hf-id="hf-r1z4" class="leaf" id="leaf51">
- <div data-hf-id="hf-7y99" class="face front"><img data-hf-id="hf-1s5a" class="art" src="assets/img/p51.jpg" alt="Stag"><div data-hf-id="hf-7v2y" class="shade"></div></div>
- <div data-hf-id="hf-hgdv" class="face back"></div>
- </div>
- <div data-hf-id="hf-zpuz" class="leaf" id="leaf52">
- <div data-hf-id="hf-956c" class="face front"><img data-hf-id="hf-935h" class="art" src="assets/img/p52.jpg" alt="Vestige Pistachio"><div data-hf-id="hf-89dz" class="shade"></div></div>
- <div data-hf-id="hf-h22u" class="face back"></div>
- </div>
- <div data-hf-id="hf-vrqy" class="leaf" id="leaf53">
- <div data-hf-id="hf-8qvb" class="face front"><img data-hf-id="hf-2fg6" class="art" src="assets/img/p53.jpg" alt="Vestige Mustard"><div data-hf-id="hf-8np0" class="shade"></div></div>
- <div data-hf-id="hf-gnrt" class="face back"></div>
- </div>
- <div data-hf-id="hf-f7n1" class="leaf" id="leaf54">
- <div data-hf-id="hf-9xse" class="face front"><img data-hf-id="hf-7t5o" class="art" src="assets/img/p54.jpg" alt="Vestige Grey"><div data-hf-id="hf-9201" class="shade"></div></div>
- <div data-hf-id="hf-g9gs" class="face back"></div>
- </div>
- </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-v2d4" id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="124.2" data-track-index="20" data-volume="0.2"></audio>
- <audio data-hf-id="hf-xixs" id="vo0" src="assets/audio/vo1.wav" data-start="2.7" data-track-index="21" data-volume="1"></audio>
- <audio data-hf-id="hf-3ebq" id="vo1" src="assets/audio/vo2.wav" data-start="9.5" data-track-index="22" data-volume="1"></audio>
- <audio data-hf-id="hf-5jpk" id="vo2" src="assets/audio/vo3.wav" data-start="13.7" data-track-index="23" data-volume="1"></audio>
- <audio data-hf-id="hf-02x6" id="vo3" src="assets/audio/vo4.wav" data-start="89.3" data-track-index="24" data-volume="1"></audio>
- <audio data-hf-id="hf-fkh2" id="vo4" src="assets/audio/vo5.wav" data-start="116.7" data-track-index="25" data-volume="1"></audio>
- <audio data-hf-id="hf-paol" id="vo5" src="assets/audio/vo6.wav" data-start="120.55" data-track-index="26" data-volume="1"></audio>
-
- <script>
- window.__timelines = window.__timelines || {};
- const tl = gsap.timeline({ paused: true });
-
- gsap.set("#leaf0", { rotateY:0, zIndex:55 });
- gsap.set("#leaf1", { rotateY:0, zIndex:54 });
- gsap.set("#leaf2", { rotateY:0, zIndex:53 });
- gsap.set("#leaf3", { rotateY:0, zIndex:52 });
- gsap.set("#leaf4", { rotateY:0, zIndex:51 });
- gsap.set("#leaf5", { rotateY:0, zIndex:50 });
- gsap.set("#leaf6", { rotateY:0, zIndex:49 });
- gsap.set("#leaf7", { rotateY:0, zIndex:48 });
- gsap.set("#leaf8", { rotateY:0, zIndex:47 });
- gsap.set("#leaf9", { rotateY:0, zIndex:46 });
- gsap.set("#leaf10", { rotateY:0, zIndex:45 });
- gsap.set("#leaf11", { rotateY:0, zIndex:44 });
- gsap.set("#leaf12", { rotateY:0, zIndex:43 });
- gsap.set("#leaf13", { rotateY:0, zIndex:42 });
- gsap.set("#leaf14", { rotateY:0, zIndex:41 });
- gsap.set("#leaf15", { rotateY:0, zIndex:40 });
- gsap.set("#leaf16", { rotateY:0, zIndex:39 });
- gsap.set("#leaf17", { rotateY:0, zIndex:38 });
- gsap.set("#leaf18", { rotateY:0, zIndex:37 });
- gsap.set("#leaf19", { rotateY:0, zIndex:36 });
- gsap.set("#leaf20", { rotateY:0, zIndex:35 });
- gsap.set("#leaf21", { rotateY:0, zIndex:34 });
- gsap.set("#leaf22", { rotateY:0, zIndex:33 });
- gsap.set("#leaf23", { rotateY:0, zIndex:32 });
- gsap.set("#leaf24", { rotateY:0, zIndex:31 });
- gsap.set("#leaf25", { rotateY:0, zIndex:30 });
- gsap.set("#leaf26", { rotateY:0, zIndex:29 });
- gsap.set("#leaf27", { rotateY:0, zIndex:28 });
- gsap.set("#leaf28", { rotateY:0, zIndex:27 });
- gsap.set("#leaf29", { rotateY:0, zIndex:26 });
- gsap.set("#leaf30", { rotateY:0, zIndex:25 });
- gsap.set("#leaf31", { rotateY:0, zIndex:24 });
- gsap.set("#leaf32", { rotateY:0, zIndex:23 });
- gsap.set("#leaf33", { rotateY:0, zIndex:22 });
- gsap.set("#leaf34", { rotateY:0, zIndex:21 });
- gsap.set("#leaf35", { rotateY:0, zIndex:20 });
- gsap.set("#leaf36", { rotateY:0, zIndex:19 });
- gsap.set("#leaf37", { rotateY:0, zIndex:18 });
- gsap.set("#leaf38", { rotateY:0, zIndex:17 });
- gsap.set("#leaf39", { rotateY:0, zIndex:16 });
- gsap.set("#leaf40", { rotateY:0, zIndex:15 });
- gsap.set("#leaf41", { rotateY:0, zIndex:14 });
- gsap.set("#leaf42", { rotateY:0, zIndex:13 });
- gsap.set("#leaf43", { rotateY:0, zIndex:12 });
- gsap.set("#leaf44", { rotateY:0, zIndex:11 });
- gsap.set("#leaf45", { rotateY:0, zIndex:10 });
- gsap.set("#leaf46", { rotateY:0, zIndex:9 });
- gsap.set("#leaf47", { rotateY:0, zIndex:8 });
- gsap.set("#leaf48", { rotateY:0, zIndex:7 });
- gsap.set("#leaf49", { rotateY:0, zIndex:6 });
- gsap.set("#leaf50", { rotateY:0, zIndex:5 });
- gsap.set("#leaf51", { rotateY:0, zIndex:4 });
- gsap.set("#leaf52", { rotateY:0, zIndex:3 });
- gsap.set("#leaf53", { rotateY:0, zIndex:2 });
- gsap.set("#leaf54", { rotateY:0, zIndex:1 });
- gsap.set("#room0", { opacity:1 });
- gsap.set("#room1", { opacity:0 });
- gsap.set("#room2", { opacity:0 });
- gsap.set("#room3", { opacity:0 });
- gsap.set("#room4", { opacity:0 });
- gsap.set("#room5", { opacity:0 });
- gsap.set("#room6", { opacity:0 });
- gsap.set("#room7", { opacity:0 });
- gsap.set("#room8", { opacity:0 });
- gsap.set("#room9", { opacity:0 });
- gsap.set("#room10", { opacity:0 });
- gsap.set("#room11", { opacity:0 });
- gsap.set("#room12", { opacity:0 });
- gsap.set("#room13", { opacity:0 });
- gsap.set("#room14", { opacity:0 });
- gsap.set("#room15", { opacity:0 });
- gsap.set("#room16", { opacity:0 });
- gsap.set("#room17", { opacity:0 });
- gsap.set("#room18", { opacity:0 });
- gsap.set("#room19", { opacity:0 });
- gsap.set("#room20", { opacity:0 });
- gsap.set("#room21", { opacity:0 });
- gsap.set("#room22", { opacity:0 });
- gsap.set("#room23", { opacity:0 });
- gsap.set("#room24", { opacity:0 });
- gsap.set("#room25", { opacity:0 });
- gsap.set("#room26", { opacity:0 });
- gsap.set("#room27", { opacity:0 });
- gsap.set("#room28", { opacity:0 });
- gsap.set("#room29", { opacity:0 });
- gsap.set("#room30", { opacity:0 });
- gsap.set("#room31", { opacity:0 });
- gsap.set("#room32", { opacity:0 });
- gsap.set("#room33", { opacity:0 });
- gsap.set("#room34", { opacity:0 });
- gsap.set("#room35", { opacity:0 });
- gsap.set("#room36", { opacity:0 });
- gsap.set("#room37", { opacity:0 });
- gsap.set("#room38", { opacity:0 });
- gsap.set("#room39", { opacity:0 });
- gsap.set("#room40", { opacity:0 });
- gsap.set("#room41", { opacity:0 });
- gsap.set("#room42", { opacity:0 });
- gsap.set("#room43", { opacity:0 });
- gsap.set("#room44", { opacity:0 });
- gsap.set("#room45", { opacity:0 });
- gsap.set("#room46", { opacity:0 });
- gsap.set("#room47", { opacity:0 });
- gsap.set("#room48", { opacity:0 });
- gsap.set("#room49", { opacity:0 });
- gsap.set("#room50", { opacity:0 });
- gsap.set("#room51", { opacity:0 });
- gsap.set("#room52", { opacity:0 });
- gsap.set("#room53", { opacity:0 });
- gsap.set("#room54", { opacity:0 });
- gsap.set("#stage", { opacity: 0 });
- gsap.set("#outro", { opacity: 0 }); gsap.set("#outro .big", { y: 34, opacity: 0 }); gsap.set("#outro .url", { opacity: 0 });
- gsap.set("#cover .big", { y: 40, opacity: 0 }); gsap.set("#cover .kicker,#cover .sub,#cover .rule", { opacity: 0 });
-
- // cover
- tl.to("#cover .kicker", { opacity:1, duration:0.5 }, 0.2);
- tl.to("#cover .big", { opacity:1, y:0, duration:0.8, ease:"power3.out" }, 0.4);
- tl.to("#cover .rule,#cover .sub", { opacity:1, duration:0.5 }, 1.0);
- tl.to("#cover", { opacity:0, duration:0.5, ease:"power1.in" }, 2.00);
- tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, 2.00);
-
- // page turns + room crossfades
-
- tl.to("#leaf0", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 3.2);
- tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 3.2);
- tl.to("#leaf0 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 3.875);
- tl.set("#leaf0", { zIndex: 1000 }, 3.875);
- tl.set("#leaf0", { opacity: 0 }, 4.550);
- tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 3.875);
- tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 3.875);
- tl.to("#leaf1", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 5.3);
- tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 5.3);
- tl.to("#leaf1 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 5.975);
- tl.set("#leaf1", { zIndex: 1001 }, 5.975);
- tl.set("#leaf1", { opacity: 0 }, 6.650);
- tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 5.975);
- tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 5.975);
- tl.to("#leaf2", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 7.4);
- tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 7.4);
- tl.to("#leaf2 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 8.075);
- tl.set("#leaf2", { zIndex: 1002 }, 8.075);
- tl.set("#leaf2", { opacity: 0 }, 8.750);
- tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 8.075);
- tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 8.075);
- tl.to("#leaf3", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 9.5);
- tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 9.5);
- tl.to("#leaf3 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 10.175);
- tl.set("#leaf3", { zIndex: 1003 }, 10.175);
- tl.set("#leaf3", { opacity: 0 }, 10.850);
- tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 10.175);
- tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 10.175);
- tl.to("#leaf4", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 11.6);
- tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 11.6);
- tl.to("#leaf4 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 12.275);
- tl.set("#leaf4", { zIndex: 1004 }, 12.275);
- tl.set("#leaf4", { opacity: 0 }, 12.950);
- tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 12.275);
- tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 12.275);
- tl.to("#leaf5", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 13.7);
- tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 13.7);
- tl.to("#leaf5 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 14.375);
- tl.set("#leaf5", { zIndex: 1005 }, 14.375);
- tl.set("#leaf5", { opacity: 0 }, 15.050);
- tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14.375);
- tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14.375);
- tl.to("#leaf6", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 15.8);
- tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 15.8);
- tl.to("#leaf6 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 16.475);
- tl.set("#leaf6", { zIndex: 1006 }, 16.475);
- tl.set("#leaf6", { opacity: 0 }, 17.150);
- tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 16.475);
- tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 16.475);
- tl.to("#leaf7", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 17.9);
- tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 17.9);
- tl.to("#leaf7 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 18.575);
- tl.set("#leaf7", { zIndex: 1007 }, 18.575);
- tl.set("#leaf7", { opacity: 0 }, 19.250);
- tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 18.575);
- tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 18.575);
- tl.to("#leaf8", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 20);
- tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 20);
- tl.to("#leaf8 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 20.675);
- tl.set("#leaf8", { zIndex: 1008 }, 20.675);
- tl.set("#leaf8", { opacity: 0 }, 21.350);
- tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20.675);
- tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20.675);
- tl.to("#leaf9", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 22.1);
- tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 22.1);
- tl.to("#leaf9 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 22.775);
- tl.set("#leaf9", { zIndex: 1009 }, 22.775);
- tl.set("#leaf9", { opacity: 0 }, 23.450);
- tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 22.775);
- tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 22.775);
- tl.to("#leaf10", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 24.2);
- tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 24.2);
- tl.to("#leaf10 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 24.875);
- tl.set("#leaf10", { zIndex: 1010 }, 24.875);
- tl.set("#leaf10", { opacity: 0 }, 25.550);
- tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 24.875);
- tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 24.875);
- tl.to("#leaf11", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 26.3);
- tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 26.3);
- tl.to("#leaf11 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 26.975);
- tl.set("#leaf11", { zIndex: 1011 }, 26.975);
- tl.set("#leaf11", { opacity: 0 }, 27.650);
- tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 26.975);
- tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 26.975);
- tl.to("#leaf12", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 28.4);
- tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 28.4);
- tl.to("#leaf12 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 29.075);
- tl.set("#leaf12", { zIndex: 1012 }, 29.075);
- tl.set("#leaf12", { opacity: 0 }, 29.750);
- tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 29.075);
- tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 29.075);
- tl.to("#leaf13", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 30.5);
- tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 30.5);
- tl.to("#leaf13 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 31.175);
- tl.set("#leaf13", { zIndex: 1013 }, 31.175);
- tl.set("#leaf13", { opacity: 0 }, 31.850);
- tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 31.175);
- tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 31.175);
- tl.to("#leaf14", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 32.6);
- tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 32.6);
- tl.to("#leaf14 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 33.275);
- tl.set("#leaf14", { zIndex: 1014 }, 33.275);
- tl.set("#leaf14", { opacity: 0 }, 33.950);
- tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 33.275);
- tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 33.275);
- tl.to("#leaf15", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 34.7);
- tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 34.7);
- tl.to("#leaf15 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 35.375);
- tl.set("#leaf15", { zIndex: 1015 }, 35.375);
- tl.set("#leaf15", { opacity: 0 }, 36.050);
- tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 35.375);
- tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 35.375);
- tl.to("#leaf16", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 36.8);
- tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 36.8);
- tl.to("#leaf16 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 37.475);
- tl.set("#leaf16", { zIndex: 1016 }, 37.475);
- tl.set("#leaf16", { opacity: 0 }, 38.150);
- tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 37.475);
- tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 37.475);
- tl.to("#leaf17", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 38.9);
- tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 38.9);
- tl.to("#leaf17 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 39.575);
- tl.set("#leaf17", { zIndex: 1017 }, 39.575);
- tl.set("#leaf17", { opacity: 0 }, 40.250);
- tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 39.575);
- tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 39.575);
- tl.to("#leaf18", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 41);
- tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 41);
- tl.to("#leaf18 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 41.675);
- tl.set("#leaf18", { zIndex: 1018 }, 41.675);
- tl.set("#leaf18", { opacity: 0 }, 42.350);
- tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 41.675);
- tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 41.675);
- tl.to("#leaf19", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 43.1);
- tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 43.1);
- tl.to("#leaf19 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 43.775);
- tl.set("#leaf19", { zIndex: 1019 }, 43.775);
- tl.set("#leaf19", { opacity: 0 }, 44.450);
- tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 43.775);
- tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 43.775);
- tl.to("#leaf20", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 45.2);
- tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 45.2);
- tl.to("#leaf20 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 45.875);
- tl.set("#leaf20", { zIndex: 1020 }, 45.875);
- tl.set("#leaf20", { opacity: 0 }, 46.550);
- tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 45.875);
- tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 45.875);
- tl.to("#leaf21", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 47.3);
- tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 47.3);
- tl.to("#leaf21 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 47.975);
- tl.set("#leaf21", { zIndex: 1021 }, 47.975);
- tl.set("#leaf21", { opacity: 0 }, 48.650);
- tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 47.975);
- tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 47.975);
- tl.to("#leaf22", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 49.4);
- tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 49.4);
- tl.to("#leaf22 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 50.075);
- tl.set("#leaf22", { zIndex: 1022 }, 50.075);
- tl.set("#leaf22", { opacity: 0 }, 50.750);
- tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 50.075);
- tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 50.075);
- tl.to("#leaf23", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 51.5);
- tl.to("#leaf23 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 51.5);
- tl.to("#leaf23 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 52.175);
- tl.set("#leaf23", { zIndex: 1023 }, 52.175);
- tl.set("#leaf23", { opacity: 0 }, 52.850);
- tl.to("#room23", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 52.175);
- tl.to("#room24", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 52.175);
- tl.to("#leaf24", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 53.6);
- tl.to("#leaf24 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 53.6);
- tl.to("#leaf24 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 54.275);
- tl.set("#leaf24", { zIndex: 1024 }, 54.275);
- tl.set("#leaf24", { opacity: 0 }, 54.950);
- tl.to("#room24", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 54.275);
- tl.to("#room25", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 54.275);
- tl.to("#leaf25", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 55.7);
- tl.to("#leaf25 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 55.7);
- tl.to("#leaf25 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 56.375);
- tl.set("#leaf25", { zIndex: 1025 }, 56.375);
- tl.set("#leaf25", { opacity: 0 }, 57.050);
- tl.to("#room25", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 56.375);
- tl.to("#room26", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 56.375);
- tl.to("#leaf26", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 57.8);
- tl.to("#leaf26 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 57.8);
- tl.to("#leaf26 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 58.475);
- tl.set("#leaf26", { zIndex: 1026 }, 58.475);
- tl.set("#leaf26", { opacity: 0 }, 59.150);
- tl.to("#room26", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 58.475);
- tl.to("#room27", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 58.475);
- tl.to("#leaf27", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 59.9);
- tl.to("#leaf27 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 59.9);
- tl.to("#leaf27 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 60.575);
- tl.set("#leaf27", { zIndex: 1027 }, 60.575);
- tl.set("#leaf27", { opacity: 0 }, 61.250);
- tl.to("#room27", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 60.575);
- tl.to("#room28", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 60.575);
- tl.to("#leaf28", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 62);
- tl.to("#leaf28 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 62);
- tl.to("#leaf28 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 62.675);
- tl.set("#leaf28", { zIndex: 1028 }, 62.675);
- tl.set("#leaf28", { opacity: 0 }, 63.350);
- tl.to("#room28", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 62.675);
- tl.to("#room29", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 62.675);
- tl.to("#leaf29", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 64.1);
- tl.to("#leaf29 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 64.1);
- tl.to("#leaf29 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 64.775);
- tl.set("#leaf29", { zIndex: 1029 }, 64.775);
- tl.set("#leaf29", { opacity: 0 }, 65.450);
- tl.to("#room29", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 64.775);
- tl.to("#room30", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 64.775);
- tl.to("#leaf30", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 66.2);
- tl.to("#leaf30 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 66.2);
- tl.to("#leaf30 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 66.875);
- tl.set("#leaf30", { zIndex: 1030 }, 66.875);
- tl.set("#leaf30", { opacity: 0 }, 67.550);
- tl.to("#room30", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 66.875);
- tl.to("#room31", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 66.875);
- tl.to("#leaf31", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 68.3);
- tl.to("#leaf31 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 68.3);
- tl.to("#leaf31 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 68.975);
- tl.set("#leaf31", { zIndex: 1031 }, 68.975);
- tl.set("#leaf31", { opacity: 0 }, 69.650);
- tl.to("#room31", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 68.975);
- tl.to("#room32", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 68.975);
- tl.to("#leaf32", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 70.4);
- tl.to("#leaf32 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 70.4);
- tl.to("#leaf32 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 71.075);
- tl.set("#leaf32", { zIndex: 1032 }, 71.075);
- tl.set("#leaf32", { opacity: 0 }, 71.750);
- tl.to("#room32", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 71.075);
- tl.to("#room33", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 71.075);
- tl.to("#leaf33", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 72.5);
- tl.to("#leaf33 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 72.5);
- tl.to("#leaf33 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 73.175);
- tl.set("#leaf33", { zIndex: 1033 }, 73.175);
- tl.set("#leaf33", { opacity: 0 }, 73.850);
- tl.to("#room33", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 73.175);
- tl.to("#room34", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 73.175);
- tl.to("#leaf34", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 74.6);
- tl.to("#leaf34 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 74.6);
- tl.to("#leaf34 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 75.275);
- tl.set("#leaf34", { zIndex: 1034 }, 75.275);
- tl.set("#leaf34", { opacity: 0 }, 75.950);
- tl.to("#room34", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 75.275);
- tl.to("#room35", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 75.275);
- tl.to("#leaf35", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 76.7);
- tl.to("#leaf35 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 76.7);
- tl.to("#leaf35 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 77.375);
- tl.set("#leaf35", { zIndex: 1035 }, 77.375);
- tl.set("#leaf35", { opacity: 0 }, 78.050);
- tl.to("#room35", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 77.375);
- tl.to("#room36", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 77.375);
- tl.to("#leaf36", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 78.8);
- tl.to("#leaf36 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 78.8);
- tl.to("#leaf36 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 79.475);
- tl.set("#leaf36", { zIndex: 1036 }, 79.475);
- tl.set("#leaf36", { opacity: 0 }, 80.150);
- tl.to("#room36", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 79.475);
- tl.to("#room37", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 79.475);
- tl.to("#leaf37", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 80.9);
- tl.to("#leaf37 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 80.9);
- tl.to("#leaf37 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 81.575);
- tl.set("#leaf37", { zIndex: 1037 }, 81.575);
- tl.set("#leaf37", { opacity: 0 }, 82.250);
- tl.to("#room37", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 81.575);
- tl.to("#room38", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 81.575);
- tl.to("#leaf38", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 83);
- tl.to("#leaf38 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 83);
- tl.to("#leaf38 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 83.675);
- tl.set("#leaf38", { zIndex: 1038 }, 83.675);
- tl.set("#leaf38", { opacity: 0 }, 84.350);
- tl.to("#room38", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 83.675);
- tl.to("#room39", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 83.675);
- tl.to("#leaf39", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 85.1);
- tl.to("#leaf39 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 85.1);
- tl.to("#leaf39 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 85.775);
- tl.set("#leaf39", { zIndex: 1039 }, 85.775);
- tl.set("#leaf39", { opacity: 0 }, 86.450);
- tl.to("#room39", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 85.775);
- tl.to("#room40", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 85.775);
- tl.to("#leaf40", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 87.2);
- tl.to("#leaf40 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 87.2);
- tl.to("#leaf40 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 87.875);
- tl.set("#leaf40", { zIndex: 1040 }, 87.875);
- tl.set("#leaf40", { opacity: 0 }, 88.550);
- tl.to("#room40", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 87.875);
- tl.to("#room41", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 87.875);
- tl.to("#leaf41", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 89.3);
- tl.to("#leaf41 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 89.3);
- tl.to("#leaf41 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 89.975);
- tl.set("#leaf41", { zIndex: 1041 }, 89.975);
- tl.set("#leaf41", { opacity: 0 }, 90.650);
- tl.to("#room41", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 89.975);
- tl.to("#room42", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 89.975);
- tl.to("#leaf42", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 91.4);
- tl.to("#leaf42 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 91.4);
- tl.to("#leaf42 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 92.075);
- tl.set("#leaf42", { zIndex: 1042 }, 92.075);
- tl.set("#leaf42", { opacity: 0 }, 92.750);
- tl.to("#room42", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 92.075);
- tl.to("#room43", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 92.075);
- tl.to("#leaf43", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 93.5);
- tl.to("#leaf43 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 93.5);
- tl.to("#leaf43 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 94.175);
- tl.set("#leaf43", { zIndex: 1043 }, 94.175);
- tl.set("#leaf43", { opacity: 0 }, 94.850);
- tl.to("#room43", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 94.175);
- tl.to("#room44", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 94.175);
- tl.to("#leaf44", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 95.6);
- tl.to("#leaf44 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 95.6);
- tl.to("#leaf44 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 96.275);
- tl.set("#leaf44", { zIndex: 1044 }, 96.275);
- tl.set("#leaf44", { opacity: 0 }, 96.950);
- tl.to("#room44", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 96.275);
- tl.to("#room45", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 96.275);
- tl.to("#leaf45", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 97.7);
- tl.to("#leaf45 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 97.7);
- tl.to("#leaf45 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 98.375);
- tl.set("#leaf45", { zIndex: 1045 }, 98.375);
- tl.set("#leaf45", { opacity: 0 }, 99.050);
- tl.to("#room45", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 98.375);
- tl.to("#room46", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 98.375);
- tl.to("#leaf46", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 99.8);
- tl.to("#leaf46 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 99.8);
- tl.to("#leaf46 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 100.475);
- tl.set("#leaf46", { zIndex: 1046 }, 100.475);
- tl.set("#leaf46", { opacity: 0 }, 101.150);
- tl.to("#room46", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 100.475);
- tl.to("#room47", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 100.475);
- tl.to("#leaf47", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 101.9);
- tl.to("#leaf47 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 101.9);
- tl.to("#leaf47 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 102.575);
- tl.set("#leaf47", { zIndex: 1047 }, 102.575);
- tl.set("#leaf47", { opacity: 0 }, 103.250);
- tl.to("#room47", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 102.575);
- tl.to("#room48", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 102.575);
- tl.to("#leaf48", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 104);
- tl.to("#leaf48 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 104);
- tl.to("#leaf48 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 104.675);
- tl.set("#leaf48", { zIndex: 1048 }, 104.675);
- tl.set("#leaf48", { opacity: 0 }, 105.350);
- tl.to("#room48", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 104.675);
- tl.to("#room49", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 104.675);
- tl.to("#leaf49", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 106.1);
- tl.to("#leaf49 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 106.1);
- tl.to("#leaf49 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 106.775);
- tl.set("#leaf49", { zIndex: 1049 }, 106.775);
- tl.set("#leaf49", { opacity: 0 }, 107.450);
- tl.to("#room49", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 106.775);
- tl.to("#room50", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 106.775);
- tl.to("#leaf50", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 108.2);
- tl.to("#leaf50 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 108.2);
- tl.to("#leaf50 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 108.875);
- tl.set("#leaf50", { zIndex: 1050 }, 108.875);
- tl.set("#leaf50", { opacity: 0 }, 109.550);
- tl.to("#room50", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 108.875);
- tl.to("#room51", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 108.875);
- tl.to("#leaf51", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 110.3);
- tl.to("#leaf51 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 110.3);
- tl.to("#leaf51 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 110.975);
- tl.set("#leaf51", { zIndex: 1051 }, 110.975);
- tl.set("#leaf51", { opacity: 0 }, 111.650);
- tl.to("#room51", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 110.975);
- tl.to("#room52", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 110.975);
- tl.to("#leaf52", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 112.4);
- tl.to("#leaf52 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 112.4);
- tl.to("#leaf52 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 113.075);
- tl.set("#leaf52", { zIndex: 1052 }, 113.075);
- tl.set("#leaf52", { opacity: 0 }, 113.750);
- tl.to("#room52", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 113.075);
- tl.to("#room53", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 113.075);
- tl.to("#leaf53", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 114.5);
- tl.to("#leaf53 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 114.5);
- tl.to("#leaf53 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 115.175);
- tl.set("#leaf53", { zIndex: 1053 }, 115.175);
- tl.set("#leaf53", { opacity: 0 }, 115.850);
- tl.to("#room53", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 115.175);
- tl.to("#room54", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 115.175);
- tl.to("#leaf54 .art", { scale: 1.05, duration: 4.20, ease:"power1.out" }, 116.6);
- tl.to("#room54 .rimg", { scale: 1.06, duration: 4.20, ease:"power1.out" }, 116.6);
-
- // outro
- tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 120.40);
- tl.to("#outro", { opacity:1, duration:0.5 }, 120.60);
- tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 120.80);
- tl.to("#outro .url", { opacity:1, duration:0.5 }, 121.30);
-
- gsap.set("#bgm", { volume: 0.2 });
- tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 2.40);
- tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 5.30);
- tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 9.20);
- tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 12.10);
- tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 13.40);
- tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 16.30);
- tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 89.00);
- tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 91.90);
- tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 116.40);
- tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 119.30);
- tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 120.25);
- tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 123.15);
- tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 123.10);
-
- window.__timelines["flipbook"] = tl;
- </script>
- </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/flipbooks/graduate-collection/meta.json b/flipbooks/graduate-collection/meta.json
deleted file mode 100644
index 8e313dc..0000000
--- a/flipbooks/graduate-collection/meta.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"flipbook-graduate-collection","name":"Graduate Collection Flipbook"}
diff --git a/flipbooks/graduate-collection/package.json b/flipbooks/graduate-collection/package.json
deleted file mode 100644
index c98981d..0000000
--- a/flipbooks/graduate-collection/package.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "name": "flipbook-graduate-collection",
- "private": true,
- "type": "module",
- "scripts": {
- "dev": "npx --yes hyperframes@0.7.84 preview",
- "check": "npx --yes hyperframes@0.7.84 check",
- "render": "npx --yes hyperframes@0.7.84 render"
- }
-}
diff --git a/flipbooks/innovations-usa/audio.json b/flipbooks/innovations-usa/audio.json
deleted file mode 100644
index 137a445..0000000
--- a/flipbooks/innovations-usa/audio.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "bgm": { "src": "assets/audio/jazz.wav", "volume": 0.34 },
- "vo": [
- { "src": "assets/audio/vo1.wav", "anchor": "intro" },
- { "src": "assets/audio/vo2.wav", "anchor": "outro" }
- ]
-}
diff --git a/flipbooks/innovations-usa/index.html b/flipbooks/innovations-usa/index.html
deleted file mode 100644
index c882360..0000000
--- a/flipbooks/innovations-usa/index.html
+++ /dev/null
@@ -1,1011 +0,0 @@
-<!doctype html>
-<html lang="en" data-resolution="landscape">
-<head>
-<meta charset="UTF-8" />
-<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-<style>
- :root { --ink:#1c1a17; --cream:#f4efe6; --paper:#fbf8f1; --gold:#b08d57; }
- html,body { margin:0; padding:0; width:1920px; height:1080px; overflow:hidden;
- background:radial-gradient(120% 120% at 50% 0%, #2a2622 0%, #14110e 72%);
- font-family:"Helvetica Neue",system-ui,sans-serif; }
- #main-composition { position:relative; width:1920px; height:1080px; overflow:hidden; }
- .stage { position:absolute; inset:0; perspective:3000px; perspective-origin:50% 46%; }
-
- /* LEFT verso: brand + room + name */
- .verso { position:absolute; top:97px; left:192px; width:768px; height:886px;
- background:var(--paper); border-radius:8px 2px 2px 8px; overflow:hidden;
- box-shadow: inset -30px 0 46px rgba(0,0,0,.12), 0 34px 66px rgba(0,0,0,.5);
- display:flex; flex-direction:column; }
- .wordmark { flex:0 0 auto; text-align:center; padding:49px 0 27px; }
- .wordmark .wm { font-family:Georgia, serif; font-size:55px; color:var(--ink); letter-spacing:.02em; line-height:1; }
- .wordmark .wsub { margin-top:8px; font-size:18px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
- .wordmark .wr { width:64px; height:2px; background:var(--gold); margin:25px auto 0; }
- .roomstack { position:relative; flex:1 1 auto; margin:0 42px 42px; border-radius:4px; overflow:hidden; background:#e9e3d7; }
- .room { position:absolute; inset:0; opacity:0; }
- .room .rimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
- .room.fallback .rimg { transform:scale(1.4); filter:blur(3px) brightness(.82) saturate(1.05); }
- .room .rtint { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
- .room.fallback .rtint { background:linear-gradient(180deg, rgba(20,16,12,.30) 0%, rgba(20,16,12,.62) 100%); }
- .rcap { position:absolute; left:0; right:0; bottom:0; padding:38px 42px; color:#fff; }
- .rcap .rpat { font-family:Georgia, serif; font-size:48px; line-height:1.05; text-shadow:0 2px 14px rgba(0,0,0,.5); }
- .rcap .rcol { margin-top:8px; font-size:20px; letter-spacing:.2em; text-transform:uppercase; color:#e7d8bd; }
-
- /* RIGHT recto: page-turn stack of pattern swatches */
- .leaf { position:absolute; top:97px; left:960px; width:768px; height:886px;
- transform-origin:left center; transform-style:preserve-3d; will-change:transform; }
- .leaf .face { position:absolute; inset:0; backface-visibility:hidden; overflow:hidden; border-radius:2px 8px 8px 2px;
- background:var(--paper); box-shadow: 24px 28px 54px rgba(0,0,0,.42), inset 24px 0 42px rgba(0,0,0,.08); }
- .leaf .back { transform:rotateY(180deg); background:linear-gradient(90deg,#efe9dc,#fbf8f1 22%);
- box-shadow:-22px 28px 54px rgba(0,0,0,.36), inset -24px 0 42px rgba(0,0,0,.08); }
- .leaf .art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
- .leaf .shade { position:absolute; inset:0; opacity:0; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,0) 62%); }
-
- /* cover + outro cards */
- .card { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--cream); }
- .card .kicker { font-size:31px; letter-spacing:.44em; text-transform:uppercase; color:var(--gold); }
- .card .big { font-family:Georgia, serif; font-size:134px; line-height:1.0; margin:22px 60px; }
- .card .sub { font-size:35px; letter-spacing:.18em; text-transform:uppercase; color:#c9bfae; }
- .card .rule { width:120px; height:2px; background:var(--gold); margin:32px 0; }
- .card .url { margin-top:28px; font-size:31px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); }
-</style>
-</head>
-<body>
- <div id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="102">
-
- <div class="card" id="cover">
- <div class="kicker">Designer Wallcoverings presents</div>
- <div class="big">Innovations USA</div>
- <div class="rule"></div>
- <div class="sub">50 Newest Arrivals</div>
- </div>
-
- <div class="stage" id="stage">
- <div class="verso">
- <div class="wordmark"><div class="wm">Designer Wallcoverings</div><div class="wsub">est. lookbook</div><div class="wr"></div></div>
- <div class="roomstack">
- <div class="room fallback" id="room0">
- <img class="rimg" src="assets/room/r0.jpg" alt="Huntress room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Huntress</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room1">
- <img class="rimg" src="assets/room/r1.jpg" alt="Damier 4 room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Damier 4</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room2">
- <img class="rimg" src="assets/room/r2.jpg" alt="Damier 3 room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Damier 3</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room3">
- <img class="rimg" src="assets/room/r3.jpg" alt="Damier 2 room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Damier 2</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room4">
- <img class="rimg" src="assets/room/r4.jpg" alt="Damier 1 room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Damier 1</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room5">
- <img class="rimg" src="assets/room/r5.jpg" alt="Damier room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Damier</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room6">
- <img class="rimg" src="assets/room/r6.jpg" alt="Agate 1 room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Agate 1</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room7">
- <img class="rimg" src="assets/room/r7.jpg" alt="Abstract Suede room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Abstract Suede</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room8">
- <img class="rimg" src="assets/room/r8.jpg" alt="Agate room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Agate</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room9">
- <img class="rimg" src="assets/room/r9.jpg" alt="Sumatra room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sumatra</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room10">
- <img class="rimg" src="assets/room/r10.jpg" alt="Sumatra room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sumatra</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room11">
- <img class="rimg" src="assets/room/r11.jpg" alt="Sumatra room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sumatra</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room12">
- <img class="rimg" src="assets/room/r12.jpg" alt="Sumatra room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sumatra</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room13">
- <img class="rimg" src="assets/room/r13.jpg" alt="Sumatra room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sumatra</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room14">
- <img class="rimg" src="assets/room/r14.jpg" alt="Sumatra room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sumatra</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room15">
- <img class="rimg" src="assets/room/r15.jpg" alt="Sumatra room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sumatra</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room16">
- <img class="rimg" src="assets/room/r16.jpg" alt="Splice room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Splice</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room17">
- <img class="rimg" src="assets/room/r17.jpg" alt="Splice room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Splice</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room18">
- <img class="rimg" src="assets/room/r18.jpg" alt="Sombra room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sombra</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room19">
- <img class="rimg" src="assets/room/r19.jpg" alt="Sombra room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sombra</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room20">
- <img class="rimg" src="assets/room/r20.jpg" alt="Sombra room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sombra</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room21">
- <img class="rimg" src="assets/room/r21.jpg" alt="Sombra room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sombra</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room22">
- <img class="rimg" src="assets/room/r22.jpg" alt="Sombra room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sombra</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room23">
- <img class="rimg" src="assets/room/r23.jpg" alt="Sombra room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sombra</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room24">
- <img class="rimg" src="assets/room/r24.jpg" alt="Sanctuary room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Sanctuary</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room25">
- <img class="rimg" src="assets/room/r25.jpg" alt="Rangoon Silk room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Rangoon Silk</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room26">
- <img class="rimg" src="assets/room/r26.jpg" alt="Rangoon Silk room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Rangoon Silk</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room27">
- <img class="rimg" src="assets/room/r27.jpg" alt="Rangoon Silk room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Rangoon Silk</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room28">
- <img class="rimg" src="assets/room/r28.jpg" alt="Rangoon Silk room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Rangoon Silk</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room29">
- <img class="rimg" src="assets/room/r29.jpg" alt="Origami room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room30">
- <img class="rimg" src="assets/room/r30.jpg" alt="Origami room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room" id="room31">
- <img class="rimg" src="assets/room/r31.jpg" alt="Origami room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room32">
- <img class="rimg" src="assets/room/r32.jpg" alt="Origami room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room33">
- <img class="rimg" src="assets/room/r33.jpg" alt="Origami room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room34">
- <img class="rimg" src="assets/room/r34.jpg" alt="Origami room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room35">
- <img class="rimg" src="assets/room/r35.jpg" alt="Origami room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room36">
- <img class="rimg" src="assets/room/r36.jpg" alt="Origami room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room37">
- <img class="rimg" src="assets/room/r37.jpg" alt="Origami room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room38">
- <img class="rimg" src="assets/room/r38.jpg" alt="Origami room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room39">
- <img class="rimg" src="assets/room/r39.jpg" alt="Origami room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room40">
- <img class="rimg" src="assets/room/r40.jpg" alt="Origami room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room41">
- <img class="rimg" src="assets/room/r41.jpg" alt="Origami room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room42">
- <img class="rimg" src="assets/room/r42.jpg" alt="Origami room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Origami</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room43">
- <img class="rimg" src="assets/room/r43.jpg" alt="Nautilus room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Nautilus</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room44">
- <img class="rimg" src="assets/room/r44.jpg" alt="Nautilus room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Nautilus</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room45">
- <img class="rimg" src="assets/room/r45.jpg" alt="Nautilus room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Nautilus</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room46">
- <img class="rimg" src="assets/room/r46.jpg" alt="Nautilus room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Nautilus</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room47">
- <img class="rimg" src="assets/room/r47.jpg" alt="Nautilus room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Nautilus</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room48">
- <img class="rimg" src="assets/room/r48.jpg" alt="Nautilus room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Nautilus</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- <div class="room fallback" id="room49">
- <img class="rimg" src="assets/room/r49.jpg" alt="Nautilus room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Nautilus</div><div class="rcol">Innovations USA · all</div></div>
- </div>
- </div>
- </div>
-
- <div class="leaf" id="leaf0">
- <div class="face front"><img class="art" src="assets/img/p0.jpg" alt="Huntress" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf1">
- <div class="face front"><img class="art" src="assets/img/p1.jpg" alt="Damier 4" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf2">
- <div class="face front"><img class="art" src="assets/img/p2.jpg" alt="Damier 3" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf3">
- <div class="face front"><img class="art" src="assets/img/p3.jpg" alt="Damier 2" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf4">
- <div class="face front"><img class="art" src="assets/img/p4.jpg" alt="Damier 1" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf5">
- <div class="face front"><img class="art" src="assets/img/p5.jpg" alt="Damier" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf6">
- <div class="face front"><img class="art" src="assets/img/p6.jpg" alt="Agate 1" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf7">
- <div class="face front"><img class="art" src="assets/img/p7.jpg" alt="Abstract Suede" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf8">
- <div class="face front"><img class="art" src="assets/img/p8.jpg" alt="Agate" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf9">
- <div class="face front"><img class="art" src="assets/img/p9.jpg" alt="Sumatra" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf10">
- <div class="face front"><img class="art" src="assets/img/p10.jpg" alt="Sumatra" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf11">
- <div class="face front"><img class="art" src="assets/img/p11.jpg" alt="Sumatra" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf12">
- <div class="face front"><img class="art" src="assets/img/p12.jpg" alt="Sumatra" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf13">
- <div class="face front"><img class="art" src="assets/img/p13.jpg" alt="Sumatra" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf14">
- <div class="face front"><img class="art" src="assets/img/p14.jpg" alt="Sumatra" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf15">
- <div class="face front"><img class="art" src="assets/img/p15.jpg" alt="Sumatra" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf16">
- <div class="face front"><img class="art" src="assets/img/p16.jpg" alt="Splice" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf17">
- <div class="face front"><img class="art" src="assets/img/p17.jpg" alt="Splice" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf18">
- <div class="face front"><img class="art" src="assets/img/p18.jpg" alt="Sombra" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf19">
- <div class="face front"><img class="art" src="assets/img/p19.jpg" alt="Sombra" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf20">
- <div class="face front"><img class="art" src="assets/img/p20.jpg" alt="Sombra" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf21">
- <div class="face front"><img class="art" src="assets/img/p21.jpg" alt="Sombra" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf22">
- <div class="face front"><img class="art" src="assets/img/p22.jpg" alt="Sombra" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf23">
- <div class="face front"><img class="art" src="assets/img/p23.jpg" alt="Sombra" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf24">
- <div class="face front"><img class="art" src="assets/img/p24.jpg" alt="Sanctuary" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf25">
- <div class="face front"><img class="art" src="assets/img/p25.jpg" alt="Rangoon Silk" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf26">
- <div class="face front"><img class="art" src="assets/img/p26.jpg" alt="Rangoon Silk" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf27">
- <div class="face front"><img class="art" src="assets/img/p27.jpg" alt="Rangoon Silk" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf28">
- <div class="face front"><img class="art" src="assets/img/p28.jpg" alt="Rangoon Silk" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf29">
- <div class="face front"><img class="art" src="assets/img/p29.jpg" alt="Origami" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf30">
- <div class="face front"><img class="art" src="assets/img/p30.jpg" alt="Origami" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf31">
- <div class="face front"><img class="art" src="assets/img/p31.jpg" alt="Origami" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf32">
- <div class="face front"><img class="art" src="assets/img/p32.jpg" alt="Origami" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf33">
- <div class="face front"><img class="art" src="assets/img/p33.jpg" alt="Origami" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf34">
- <div class="face front"><img class="art" src="assets/img/p34.jpg" alt="Origami" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf35">
- <div class="face front"><img class="art" src="assets/img/p35.jpg" alt="Origami" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf36">
- <div class="face front"><img class="art" src="assets/img/p36.jpg" alt="Origami" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf37">
- <div class="face front"><img class="art" src="assets/img/p37.jpg" alt="Origami" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf38">
- <div class="face front"><img class="art" src="assets/img/p38.jpg" alt="Origami" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf39">
- <div class="face front"><img class="art" src="assets/img/p39.jpg" alt="Origami" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf40">
- <div class="face front"><img class="art" src="assets/img/p40.jpg" alt="Origami" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf41">
- <div class="face front"><img class="art" src="assets/img/p41.jpg" alt="Origami" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf42">
- <div class="face front"><img class="art" src="assets/img/p42.jpg" alt="Origami" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf43">
- <div class="face front"><img class="art" src="assets/img/p43.jpg" alt="Nautilus" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf44">
- <div class="face front"><img class="art" src="assets/img/p44.jpg" alt="Nautilus" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf45">
- <div class="face front"><img class="art" src="assets/img/p45.jpg" alt="Nautilus" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf46">
- <div class="face front"><img class="art" src="assets/img/p46.jpg" alt="Nautilus" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf47">
- <div class="face front"><img class="art" src="assets/img/p47.jpg" alt="Nautilus" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf48">
- <div class="face front"><img class="art" src="assets/img/p48.jpg" alt="Nautilus" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf49">
- <div class="face front"><img class="art" src="assets/img/p49.jpg" alt="Nautilus" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- </div>
-
- <div class="card" id="outro">
- <div class="kicker">Shop the collection</div>
- <div class="big">Innovations USA</div>
- <div class="url">designerwallcoverings.com</div>
- </div>
-
- <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="102" data-track-index="20" data-volume="0.34"></audio>
- <audio id="vo0" src="assets/audio/vo1.wav" data-start="3.7" data-track-index="21" data-volume="1"></audio>
- <audio id="vo1" src="assets/audio/vo2.wav" data-start="87.25" data-track-index="22" data-volume="1"></audio>
-
- <script>
- window.__timelines = window.__timelines || {};
- const tl = gsap.timeline({ paused: true });
-
- gsap.set("#leaf0", { rotateY:0, zIndex:50 });
- gsap.set("#leaf1", { rotateY:0, zIndex:49 });
- gsap.set("#leaf2", { rotateY:0, zIndex:48 });
- gsap.set("#leaf3", { rotateY:0, zIndex:47 });
- gsap.set("#leaf4", { rotateY:0, zIndex:46 });
- gsap.set("#leaf5", { rotateY:0, zIndex:45 });
- gsap.set("#leaf6", { rotateY:0, zIndex:44 });
- gsap.set("#leaf7", { rotateY:0, zIndex:43 });
- gsap.set("#leaf8", { rotateY:0, zIndex:42 });
- gsap.set("#leaf9", { rotateY:0, zIndex:41 });
- gsap.set("#leaf10", { rotateY:0, zIndex:40 });
- gsap.set("#leaf11", { rotateY:0, zIndex:39 });
- gsap.set("#leaf12", { rotateY:0, zIndex:38 });
- gsap.set("#leaf13", { rotateY:0, zIndex:37 });
- gsap.set("#leaf14", { rotateY:0, zIndex:36 });
- gsap.set("#leaf15", { rotateY:0, zIndex:35 });
- gsap.set("#leaf16", { rotateY:0, zIndex:34 });
- gsap.set("#leaf17", { rotateY:0, zIndex:33 });
- gsap.set("#leaf18", { rotateY:0, zIndex:32 });
- gsap.set("#leaf19", { rotateY:0, zIndex:31 });
- gsap.set("#leaf20", { rotateY:0, zIndex:30 });
- gsap.set("#leaf21", { rotateY:0, zIndex:29 });
- gsap.set("#leaf22", { rotateY:0, zIndex:28 });
- gsap.set("#leaf23", { rotateY:0, zIndex:27 });
- gsap.set("#leaf24", { rotateY:0, zIndex:26 });
- gsap.set("#leaf25", { rotateY:0, zIndex:25 });
- gsap.set("#leaf26", { rotateY:0, zIndex:24 });
- gsap.set("#leaf27", { rotateY:0, zIndex:23 });
- gsap.set("#leaf28", { rotateY:0, zIndex:22 });
- gsap.set("#leaf29", { rotateY:0, zIndex:21 });
- gsap.set("#leaf30", { rotateY:0, zIndex:20 });
- gsap.set("#leaf31", { rotateY:0, zIndex:19 });
- gsap.set("#leaf32", { rotateY:0, zIndex:18 });
- gsap.set("#leaf33", { rotateY:0, zIndex:17 });
- gsap.set("#leaf34", { rotateY:0, zIndex:16 });
- gsap.set("#leaf35", { rotateY:0, zIndex:15 });
- gsap.set("#leaf36", { rotateY:0, zIndex:14 });
- gsap.set("#leaf37", { rotateY:0, zIndex:13 });
- gsap.set("#leaf38", { rotateY:0, zIndex:12 });
- gsap.set("#leaf39", { rotateY:0, zIndex:11 });
- gsap.set("#leaf40", { rotateY:0, zIndex:10 });
- gsap.set("#leaf41", { rotateY:0, zIndex:9 });
- gsap.set("#leaf42", { rotateY:0, zIndex:8 });
- gsap.set("#leaf43", { rotateY:0, zIndex:7 });
- gsap.set("#leaf44", { rotateY:0, zIndex:6 });
- gsap.set("#leaf45", { rotateY:0, zIndex:5 });
- gsap.set("#leaf46", { rotateY:0, zIndex:4 });
- gsap.set("#leaf47", { rotateY:0, zIndex:3 });
- gsap.set("#leaf48", { rotateY:0, zIndex:2 });
- gsap.set("#leaf49", { rotateY:0, zIndex:1 });
- gsap.set("#room0", { opacity:1 });
- gsap.set("#room1", { opacity:0 });
- gsap.set("#room2", { opacity:0 });
- gsap.set("#room3", { opacity:0 });
- gsap.set("#room4", { opacity:0 });
- gsap.set("#room5", { opacity:0 });
- gsap.set("#room6", { opacity:0 });
- gsap.set("#room7", { opacity:0 });
- gsap.set("#room8", { opacity:0 });
- gsap.set("#room9", { opacity:0 });
- gsap.set("#room10", { opacity:0 });
- gsap.set("#room11", { opacity:0 });
- gsap.set("#room12", { opacity:0 });
- gsap.set("#room13", { opacity:0 });
- gsap.set("#room14", { opacity:0 });
- gsap.set("#room15", { opacity:0 });
- gsap.set("#room16", { opacity:0 });
- gsap.set("#room17", { opacity:0 });
- gsap.set("#room18", { opacity:0 });
- gsap.set("#room19", { opacity:0 });
- gsap.set("#room20", { opacity:0 });
- gsap.set("#room21", { opacity:0 });
- gsap.set("#room22", { opacity:0 });
- gsap.set("#room23", { opacity:0 });
- gsap.set("#room24", { opacity:0 });
- gsap.set("#room25", { opacity:0 });
- gsap.set("#room26", { opacity:0 });
- gsap.set("#room27", { opacity:0 });
- gsap.set("#room28", { opacity:0 });
- gsap.set("#room29", { opacity:0 });
- gsap.set("#room30", { opacity:0 });
- gsap.set("#room31", { opacity:0 });
- gsap.set("#room32", { opacity:0 });
- gsap.set("#room33", { opacity:0 });
- gsap.set("#room34", { opacity:0 });
- gsap.set("#room35", { opacity:0 });
- gsap.set("#room36", { opacity:0 });
- gsap.set("#room37", { opacity:0 });
- gsap.set("#room38", { opacity:0 });
- gsap.set("#room39", { opacity:0 });
- gsap.set("#room40", { opacity:0 });
- gsap.set("#room41", { opacity:0 });
- gsap.set("#room42", { opacity:0 });
- gsap.set("#room43", { opacity:0 });
- gsap.set("#room44", { opacity:0 });
- gsap.set("#room45", { opacity:0 });
- gsap.set("#room46", { opacity:0 });
- gsap.set("#room47", { opacity:0 });
- gsap.set("#room48", { opacity:0 });
- gsap.set("#room49", { opacity:0 });
- gsap.set("#stage", { opacity: 0 });
- gsap.set("#outro", { opacity: 0 }); gsap.set("#outro .big", { y: 34, opacity: 0 }); gsap.set("#outro .url", { opacity: 0 });
- gsap.set("#cover .big", { y: 40, opacity: 0 }); gsap.set("#cover .kicker,#cover .sub,#cover .rule", { opacity: 0 });
-
- // cover
- tl.to("#cover .kicker", { opacity:1, duration:0.5 }, 0.2);
- tl.to("#cover .big", { opacity:1, y:0, duration:0.8, ease:"power3.out" }, 0.4);
- tl.to("#cover .rule,#cover .sub", { opacity:1, duration:0.5 }, 1.0);
- tl.to("#cover", { opacity:0, duration:0.5, ease:"power1.in" }, 3.00);
- tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, 3.00);
-
- // page turns + room crossfades
-
- tl.to("#leaf0", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 4.2);
- tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 4.2);
- tl.to("#leaf0 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 4.7);
- tl.set("#leaf0", { zIndex: 1000 }, 4.7);
- tl.set("#leaf0", { opacity: 0 }, 5.200);
- tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 4.7);
- tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 4.7);
- tl.to("#leaf1", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 5.8);
- tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 5.8);
- tl.to("#leaf1 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 6.3);
- tl.set("#leaf1", { zIndex: 1001 }, 6.3);
- tl.set("#leaf1", { opacity: 0 }, 6.800);
- tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 6.3);
- tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 6.3);
- tl.to("#leaf2", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 7.4);
- tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 7.4);
- tl.to("#leaf2 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 7.9);
- tl.set("#leaf2", { zIndex: 1002 }, 7.9);
- tl.set("#leaf2", { opacity: 0 }, 8.400);
- tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 7.9);
- tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 7.9);
- tl.to("#leaf3", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 9);
- tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 9);
- tl.to("#leaf3 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 9.5);
- tl.set("#leaf3", { zIndex: 1003 }, 9.5);
- tl.set("#leaf3", { opacity: 0 }, 10.000);
- tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 9.5);
- tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 9.5);
- tl.to("#leaf4", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 10.6);
- tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 10.6);
- tl.to("#leaf4 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 11.1);
- tl.set("#leaf4", { zIndex: 1004 }, 11.1);
- tl.set("#leaf4", { opacity: 0 }, 11.600);
- tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 11.1);
- tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 11.1);
- tl.to("#leaf5", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 12.2);
- tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 12.2);
- tl.to("#leaf5 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 12.7);
- tl.set("#leaf5", { zIndex: 1005 }, 12.7);
- tl.set("#leaf5", { opacity: 0 }, 13.200);
- tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 12.7);
- tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 12.7);
- tl.to("#leaf6", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 13.8);
- tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 13.8);
- tl.to("#leaf6 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 14.3);
- tl.set("#leaf6", { zIndex: 1006 }, 14.3);
- tl.set("#leaf6", { opacity: 0 }, 14.800);
- tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14.3);
- tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14.3);
- tl.to("#leaf7", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 15.4);
- tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 15.4);
- tl.to("#leaf7 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 15.9);
- tl.set("#leaf7", { zIndex: 1007 }, 15.9);
- tl.set("#leaf7", { opacity: 0 }, 16.400);
- tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 15.9);
- tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 15.9);
- tl.to("#leaf8", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 17);
- tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 17);
- tl.to("#leaf8 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 17.5);
- tl.set("#leaf8", { zIndex: 1008 }, 17.5);
- tl.set("#leaf8", { opacity: 0 }, 18.000);
- tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17.5);
- tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17.5);
- tl.to("#leaf9", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 18.6);
- tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 18.6);
- tl.to("#leaf9 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 19.1);
- tl.set("#leaf9", { zIndex: 1009 }, 19.1);
- tl.set("#leaf9", { opacity: 0 }, 19.600);
- tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 19.1);
- tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 19.1);
- tl.to("#leaf10", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 20.2);
- tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 20.2);
- tl.to("#leaf10 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 20.7);
- tl.set("#leaf10", { zIndex: 1010 }, 20.7);
- tl.set("#leaf10", { opacity: 0 }, 21.200);
- tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20.7);
- tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20.7);
- tl.to("#leaf11", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 21.8);
- tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 21.8);
- tl.to("#leaf11 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 22.3);
- tl.set("#leaf11", { zIndex: 1011 }, 22.3);
- tl.set("#leaf11", { opacity: 0 }, 22.800);
- tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 22.3);
- tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 22.3);
- tl.to("#leaf12", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 23.4);
- tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 23.4);
- tl.to("#leaf12 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 23.9);
- tl.set("#leaf12", { zIndex: 1012 }, 23.9);
- tl.set("#leaf12", { opacity: 0 }, 24.400);
- tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23.9);
- tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23.9);
- tl.to("#leaf13", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 25);
- tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 25);
- tl.to("#leaf13 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 25.5);
- tl.set("#leaf13", { zIndex: 1013 }, 25.5);
- tl.set("#leaf13", { opacity: 0 }, 26.000);
- tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 25.5);
- tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 25.5);
- tl.to("#leaf14", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 26.6);
- tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 26.6);
- tl.to("#leaf14 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 27.1);
- tl.set("#leaf14", { zIndex: 1014 }, 27.1);
- tl.set("#leaf14", { opacity: 0 }, 27.600);
- tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 27.1);
- tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 27.1);
- tl.to("#leaf15", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 28.2);
- tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 28.2);
- tl.to("#leaf15 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 28.7);
- tl.set("#leaf15", { zIndex: 1015 }, 28.7);
- tl.set("#leaf15", { opacity: 0 }, 29.200);
- tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 28.7);
- tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 28.7);
- tl.to("#leaf16", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 29.8);
- tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 29.8);
- tl.to("#leaf16 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 30.3);
- tl.set("#leaf16", { zIndex: 1016 }, 30.3);
- tl.set("#leaf16", { opacity: 0 }, 30.800);
- tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 30.3);
- tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 30.3);
- tl.to("#leaf17", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 31.4);
- tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 31.4);
- tl.to("#leaf17 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 31.9);
- tl.set("#leaf17", { zIndex: 1017 }, 31.9);
- tl.set("#leaf17", { opacity: 0 }, 32.400);
- tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 31.9);
- tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 31.9);
- tl.to("#leaf18", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 33);
- tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 33);
- tl.to("#leaf18 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 33.5);
- tl.set("#leaf18", { zIndex: 1018 }, 33.5);
- tl.set("#leaf18", { opacity: 0 }, 34.000);
- tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 33.5);
- tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 33.5);
- tl.to("#leaf19", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 34.6);
- tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 34.6);
- tl.to("#leaf19 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 35.1);
- tl.set("#leaf19", { zIndex: 1019 }, 35.1);
- tl.set("#leaf19", { opacity: 0 }, 35.600);
- tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 35.1);
- tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 35.1);
- tl.to("#leaf20", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 36.2);
- tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 36.2);
- tl.to("#leaf20 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 36.7);
- tl.set("#leaf20", { zIndex: 1020 }, 36.7);
- tl.set("#leaf20", { opacity: 0 }, 37.200);
- tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 36.7);
- tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 36.7);
- tl.to("#leaf21", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 37.8);
- tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 37.8);
- tl.to("#leaf21 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 38.3);
- tl.set("#leaf21", { zIndex: 1021 }, 38.3);
- tl.set("#leaf21", { opacity: 0 }, 38.800);
- tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 38.3);
- tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 38.3);
- tl.to("#leaf22", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 39.4);
- tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 39.4);
- tl.to("#leaf22 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 39.9);
- tl.set("#leaf22", { zIndex: 1022 }, 39.9);
- tl.set("#leaf22", { opacity: 0 }, 40.400);
- tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 39.9);
- tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 39.9);
- tl.to("#leaf23", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 41);
- tl.to("#leaf23 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 41);
- tl.to("#leaf23 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 41.5);
- tl.set("#leaf23", { zIndex: 1023 }, 41.5);
- tl.set("#leaf23", { opacity: 0 }, 42.000);
- tl.to("#room23", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 41.5);
- tl.to("#room24", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 41.5);
- tl.to("#leaf24", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 42.6);
- tl.to("#leaf24 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 42.6);
- tl.to("#leaf24 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 43.1);
- tl.set("#leaf24", { zIndex: 1024 }, 43.1);
- tl.set("#leaf24", { opacity: 0 }, 43.600);
- tl.to("#room24", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 43.1);
- tl.to("#room25", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 43.1);
- tl.to("#leaf25", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 44.2);
- tl.to("#leaf25 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 44.2);
- tl.to("#leaf25 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 44.7);
- tl.set("#leaf25", { zIndex: 1025 }, 44.7);
- tl.set("#leaf25", { opacity: 0 }, 45.200);
- tl.to("#room25", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 44.7);
- tl.to("#room26", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 44.7);
- tl.to("#leaf26", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 45.8);
- tl.to("#leaf26 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 45.8);
- tl.to("#leaf26 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 46.3);
- tl.set("#leaf26", { zIndex: 1026 }, 46.3);
- tl.set("#leaf26", { opacity: 0 }, 46.800);
- tl.to("#room26", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 46.3);
- tl.to("#room27", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 46.3);
- tl.to("#leaf27", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 47.4);
- tl.to("#leaf27 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 47.4);
- tl.to("#leaf27 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 47.9);
- tl.set("#leaf27", { zIndex: 1027 }, 47.9);
- tl.set("#leaf27", { opacity: 0 }, 48.400);
- tl.to("#room27", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 47.9);
- tl.to("#room28", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 47.9);
- tl.to("#leaf28", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 49);
- tl.to("#leaf28 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 49);
- tl.to("#leaf28 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 49.5);
- tl.set("#leaf28", { zIndex: 1028 }, 49.5);
- tl.set("#leaf28", { opacity: 0 }, 50.000);
- tl.to("#room28", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 49.5);
- tl.to("#room29", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 49.5);
- tl.to("#leaf29", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 50.6);
- tl.to("#leaf29 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 50.6);
- tl.to("#leaf29 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 51.1);
- tl.set("#leaf29", { zIndex: 1029 }, 51.1);
- tl.set("#leaf29", { opacity: 0 }, 51.600);
- tl.to("#room29", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 51.1);
- tl.to("#room30", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 51.1);
- tl.to("#leaf30", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 52.2);
- tl.to("#leaf30 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 52.2);
- tl.to("#leaf30 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 52.7);
- tl.set("#leaf30", { zIndex: 1030 }, 52.7);
- tl.set("#leaf30", { opacity: 0 }, 53.200);
- tl.to("#room30", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 52.7);
- tl.to("#room31", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 52.7);
- tl.to("#leaf31", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 53.8);
- tl.to("#leaf31 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 53.8);
- tl.to("#leaf31 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 54.3);
- tl.set("#leaf31", { zIndex: 1031 }, 54.3);
- tl.set("#leaf31", { opacity: 0 }, 54.800);
- tl.to("#room31", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 54.3);
- tl.to("#room32", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 54.3);
- tl.to("#leaf32", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 55.4);
- tl.to("#leaf32 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 55.4);
- tl.to("#leaf32 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 55.9);
- tl.set("#leaf32", { zIndex: 1032 }, 55.9);
- tl.set("#leaf32", { opacity: 0 }, 56.400);
- tl.to("#room32", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 55.9);
- tl.to("#room33", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 55.9);
- tl.to("#leaf33", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 57);
- tl.to("#leaf33 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 57);
- tl.to("#leaf33 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 57.5);
- tl.set("#leaf33", { zIndex: 1033 }, 57.5);
- tl.set("#leaf33", { opacity: 0 }, 58.000);
- tl.to("#room33", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 57.5);
- tl.to("#room34", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 57.5);
- tl.to("#leaf34", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 58.6);
- tl.to("#leaf34 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 58.6);
- tl.to("#leaf34 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 59.1);
- tl.set("#leaf34", { zIndex: 1034 }, 59.1);
- tl.set("#leaf34", { opacity: 0 }, 59.600);
- tl.to("#room34", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 59.1);
- tl.to("#room35", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 59.1);
- tl.to("#leaf35", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 60.2);
- tl.to("#leaf35 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 60.2);
- tl.to("#leaf35 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 60.7);
- tl.set("#leaf35", { zIndex: 1035 }, 60.7);
- tl.set("#leaf35", { opacity: 0 }, 61.200);
- tl.to("#room35", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 60.7);
- tl.to("#room36", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 60.7);
- tl.to("#leaf36", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 61.8);
- tl.to("#leaf36 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 61.8);
- tl.to("#leaf36 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 62.3);
- tl.set("#leaf36", { zIndex: 1036 }, 62.3);
- tl.set("#leaf36", { opacity: 0 }, 62.800);
- tl.to("#room36", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 62.3);
- tl.to("#room37", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 62.3);
- tl.to("#leaf37", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 63.4);
- tl.to("#leaf37 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 63.4);
- tl.to("#leaf37 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 63.9);
- tl.set("#leaf37", { zIndex: 1037 }, 63.9);
- tl.set("#leaf37", { opacity: 0 }, 64.400);
- tl.to("#room37", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 63.9);
- tl.to("#room38", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 63.9);
- tl.to("#leaf38", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 65);
- tl.to("#leaf38 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 65);
- tl.to("#leaf38 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 65.5);
- tl.set("#leaf38", { zIndex: 1038 }, 65.5);
- tl.set("#leaf38", { opacity: 0 }, 66.000);
- tl.to("#room38", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 65.5);
- tl.to("#room39", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 65.5);
- tl.to("#leaf39", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 66.6);
- tl.to("#leaf39 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 66.6);
- tl.to("#leaf39 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 67.1);
- tl.set("#leaf39", { zIndex: 1039 }, 67.1);
- tl.set("#leaf39", { opacity: 0 }, 67.600);
- tl.to("#room39", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 67.1);
- tl.to("#room40", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 67.1);
- tl.to("#leaf40", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 68.2);
- tl.to("#leaf40 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 68.2);
- tl.to("#leaf40 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 68.7);
- tl.set("#leaf40", { zIndex: 1040 }, 68.7);
- tl.set("#leaf40", { opacity: 0 }, 69.200);
- tl.to("#room40", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 68.7);
- tl.to("#room41", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 68.7);
- tl.to("#leaf41", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 69.8);
- tl.to("#leaf41 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 69.8);
- tl.to("#leaf41 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 70.3);
- tl.set("#leaf41", { zIndex: 1041 }, 70.3);
- tl.set("#leaf41", { opacity: 0 }, 70.800);
- tl.to("#room41", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 70.3);
- tl.to("#room42", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 70.3);
- tl.to("#leaf42", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 71.4);
- tl.to("#leaf42 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 71.4);
- tl.to("#leaf42 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 71.9);
- tl.set("#leaf42", { zIndex: 1042 }, 71.9);
- tl.set("#leaf42", { opacity: 0 }, 72.400);
- tl.to("#room42", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 71.9);
- tl.to("#room43", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 71.9);
- tl.to("#leaf43", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 73);
- tl.to("#leaf43 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 73);
- tl.to("#leaf43 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 73.5);
- tl.set("#leaf43", { zIndex: 1043 }, 73.5);
- tl.set("#leaf43", { opacity: 0 }, 74.000);
- tl.to("#room43", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 73.5);
- tl.to("#room44", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 73.5);
- tl.to("#leaf44", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 74.6);
- tl.to("#leaf44 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 74.6);
- tl.to("#leaf44 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 75.1);
- tl.set("#leaf44", { zIndex: 1044 }, 75.1);
- tl.set("#leaf44", { opacity: 0 }, 75.600);
- tl.to("#room44", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 75.1);
- tl.to("#room45", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 75.1);
- tl.to("#leaf45", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 76.2);
- tl.to("#leaf45 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 76.2);
- tl.to("#leaf45 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 76.7);
- tl.set("#leaf45", { zIndex: 1045 }, 76.7);
- tl.set("#leaf45", { opacity: 0 }, 77.200);
- tl.to("#room45", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 76.7);
- tl.to("#room46", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 76.7);
- tl.to("#leaf46", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 77.8);
- tl.to("#leaf46 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 77.8);
- tl.to("#leaf46 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 78.3);
- tl.set("#leaf46", { zIndex: 1046 }, 78.3);
- tl.set("#leaf46", { opacity: 0 }, 78.800);
- tl.to("#room46", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 78.3);
- tl.to("#room47", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 78.3);
- tl.to("#leaf47", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 79.4);
- tl.to("#leaf47 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 79.4);
- tl.to("#leaf47 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 79.9);
- tl.set("#leaf47", { zIndex: 1047 }, 79.9);
- tl.set("#leaf47", { opacity: 0 }, 80.400);
- tl.to("#room47", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 79.9);
- tl.to("#room48", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 79.9);
- tl.to("#leaf48", { rotateY: -180, duration: 1, ease: "power2.inOut" }, 81);
- tl.to("#leaf48 .shade", { opacity: 0.5, duration: 0.500, ease:"power1.in" }, 81);
- tl.to("#leaf48 .shade", { opacity: 0, duration: 0.500, ease:"power1.out" }, 81.5);
- tl.set("#leaf48", { zIndex: 1048 }, 81.5);
- tl.set("#leaf48", { opacity: 0 }, 82.000);
- tl.to("#room48", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 81.5);
- tl.to("#room49", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 81.5);
- tl.to("#leaf49 .art", { scale: 1.05, duration: 4.90, ease:"power1.out" }, 82.6);
- tl.to("#room49 .rimg", { scale: 1.06, duration: 4.90, ease:"power1.out" }, 82.6);
-
- // outro
- tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 87.10);
- tl.to("#outro", { opacity:1, duration:0.5 }, 87.30);
- tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 87.50);
- tl.to("#outro .url", { opacity:1, duration:0.5 }, 88.00);
-
- gsap.set("#bgm", { volume: 0.34 });
- tl.to("#bgm", { volume: 0.17, duration: 0.4 }, 3.40);
- tl.to("#bgm", { volume: 0.34, duration: 0.6 }, 6.30);
- tl.to("#bgm", { volume: 0.17, duration: 0.4 }, 86.95);
- tl.to("#bgm", { volume: 0.34, duration: 0.6 }, 89.85);
- tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 100.90);
-
- window.__timelines["flipbook"] = tl;
- </script>
- </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/flipbooks/innovations-usa/lines.txt b/flipbooks/innovations-usa/lines.txt
deleted file mode 100644
index 98c8b7c..0000000
--- a/flipbooks/innovations-usa/lines.txt
+++ /dev/null
@@ -1,2 +0,0 @@
-Welcome to Designer Wallcoverings. This is Innovations USA — fifty of our newest arrivals. Settle in, and leaf through the collection.
-Thank you for visiting Designer Wallcoverings. May the Innovations palette inspire your next interior — grounds to layer, textures to specify, and finishes worthy of a beautifully considered room.
diff --git a/flipbooks/majilite-metallics/__pycache__/gen-rooms.cpython-314.pyc b/flipbooks/majilite-metallics/__pycache__/gen-rooms.cpython-314.pyc
deleted file mode 100644
index 1ad4e91..0000000
Binary files a/flipbooks/majilite-metallics/__pycache__/gen-rooms.cpython-314.pyc and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r0.jpg b/flipbooks/majilite-metallics/assets/roomgen/r0.jpg
deleted file mode 100644
index ed42cb2..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r0.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r1.jpg b/flipbooks/majilite-metallics/assets/roomgen/r1.jpg
deleted file mode 100644
index 7b7e243..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r1.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r10.jpg b/flipbooks/majilite-metallics/assets/roomgen/r10.jpg
deleted file mode 100644
index e291e59..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r10.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r11.jpg b/flipbooks/majilite-metallics/assets/roomgen/r11.jpg
deleted file mode 100644
index 91ef442..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r11.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r12.jpg b/flipbooks/majilite-metallics/assets/roomgen/r12.jpg
deleted file mode 100644
index 0508fa2..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r12.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r13.jpg b/flipbooks/majilite-metallics/assets/roomgen/r13.jpg
deleted file mode 100644
index 1afec18..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r13.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r14.jpg b/flipbooks/majilite-metallics/assets/roomgen/r14.jpg
deleted file mode 100644
index bd9733a..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r14.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r15.jpg b/flipbooks/majilite-metallics/assets/roomgen/r15.jpg
deleted file mode 100644
index 93d3cf0..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r15.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r16.jpg b/flipbooks/majilite-metallics/assets/roomgen/r16.jpg
deleted file mode 100644
index ce67f61..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r16.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r17.jpg b/flipbooks/majilite-metallics/assets/roomgen/r17.jpg
deleted file mode 100644
index 9efb747..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r17.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r18.jpg b/flipbooks/majilite-metallics/assets/roomgen/r18.jpg
deleted file mode 100644
index f8f4a2c..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r18.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r19.jpg b/flipbooks/majilite-metallics/assets/roomgen/r19.jpg
deleted file mode 100644
index f6c5125..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r19.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r2.jpg b/flipbooks/majilite-metallics/assets/roomgen/r2.jpg
deleted file mode 100644
index 4a717fd..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r2.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r20.jpg b/flipbooks/majilite-metallics/assets/roomgen/r20.jpg
deleted file mode 100644
index 7add31e..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r20.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r21.jpg b/flipbooks/majilite-metallics/assets/roomgen/r21.jpg
deleted file mode 100644
index 1ed0e96..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r21.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r22.jpg b/flipbooks/majilite-metallics/assets/roomgen/r22.jpg
deleted file mode 100644
index 085adb0..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r22.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r23.jpg b/flipbooks/majilite-metallics/assets/roomgen/r23.jpg
deleted file mode 100644
index 6071cb5..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r23.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r3.jpg b/flipbooks/majilite-metallics/assets/roomgen/r3.jpg
deleted file mode 100644
index e141145..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r3.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r4.jpg b/flipbooks/majilite-metallics/assets/roomgen/r4.jpg
deleted file mode 100644
index b798563..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r4.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r5.jpg b/flipbooks/majilite-metallics/assets/roomgen/r5.jpg
deleted file mode 100644
index 810c8e5..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r5.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r6.jpg b/flipbooks/majilite-metallics/assets/roomgen/r6.jpg
deleted file mode 100644
index d15b0f4..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r6.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r7.jpg b/flipbooks/majilite-metallics/assets/roomgen/r7.jpg
deleted file mode 100644
index b966b53..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r7.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r8.jpg b/flipbooks/majilite-metallics/assets/roomgen/r8.jpg
deleted file mode 100644
index 07da5da..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r8.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/assets/roomgen/r9.jpg b/flipbooks/majilite-metallics/assets/roomgen/r9.jpg
deleted file mode 100644
index 3b223b2..0000000
Binary files a/flipbooks/majilite-metallics/assets/roomgen/r9.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/audio.json b/flipbooks/majilite-metallics/audio.json
deleted file mode 100644
index 9394b1f..0000000
--- a/flipbooks/majilite-metallics/audio.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "bgm": { "src": "assets/audio/jazz.wav", "volume": 0.18 },
- "vo": [
- { "src": "assets/audio/vo1.wav", "anchor": "intro" },
- { "src": "assets/audio/vo2.wav", "anchor": "chapter:silvers" },
- { "src": "assets/audio/vo3.wav", "anchor": "chapter:pearls" },
- { "src": "assets/audio/vo4.wav", "anchor": "chapter:smoke" },
- { "src": "assets/audio/vo5.wav", "anchor": "outro" }
- ]
-}
diff --git a/flipbooks/majilite-metallics/gen-rooms.py b/flipbooks/majilite-metallics/gen-rooms.py
deleted file mode 100644
index a6d8386..0000000
--- a/flipbooks/majilite-metallics/gen-rooms.py
+++ /dev/null
@@ -1,83 +0,0 @@
-#!/usr/bin/env python3
-# Generate walls+furniture commercial renders for each Majilite metallic via Replicate nano-banana.
-import json, os, time, urllib.request, urllib.error, pathlib, re
-
-ROOT = pathlib.Path(__file__).resolve().parent
-DATA = ROOT.parent.parent / "data" / "majilite-metallics.json"
-OUT = ROOT / "assets" / "roomgen"
-OUT.mkdir(parents=True, exist_ok=True)
-VERSION = "5bdc2c7cd642ae33611d8c33f79615f98ff02509ab8db9d8ec1cc6c36d378fba"
-
-def token():
- for line in (pathlib.Path.home()/ "Projects/secrets-manager/.env").read_text().splitlines():
- if line.startswith("REPLICATE_API_TOKEN="):
- return line.split("=",1)[1].strip()
- raise SystemExit("no replicate token")
-TOKEN = token()
-
-# room + furniture scene by chapter (two variants cycled per chapter for variety)
-SCENES = {
- "golds": [("an upscale hotel lobby","a pair of upholstered lounge chairs AND the reception feature wall behind them"),
- ("a high-end restaurant dining room","a curved tufted banquette booth AND the full wall behind it")],
- "silvers": [("an executive conference boardroom","the upholstered high-back boardroom chairs AND a full-height accent wall panel"),
- ("a modern corporate office lounge","an upholstered sofa AND the feature wall behind it")],
- "pearls": [("a premium retail showroom","an upholstered display bench AND a feature wall"),
- ("a bright, calm healthcare waiting room","the upholstered waiting chairs AND a wall panel")],
- "smoke": [("a moody fine-dining restaurant","a deep tufted banquette booth AND the dark wall behind it"),
- ("a low-lit executive boardroom","the upholstered high-back chairs AND an accent wall")],
-}
-
-def prompt_for(title, room, furniture):
- return (f"Photorealistic interior design photograph of {room}. Take the supplied swatch — a metallic "
- f"faux-leather contract material called '{title}' — and apply its EXACT color, metallic sheen and "
- f"texture to BOTH {furniture}. Contract-grade upholstery and wallcovering finish, realistic "
- f"architectural lighting with soft reflections on the metallic surface, editorial design-magazine "
- f"quality, shallow depth of field. No text, no logos, no watermark, no people.")
-
-def post(url, body):
- req = urllib.request.Request(url, data=json.dumps(body).encode(),
- headers={"Authorization": f"Bearer {TOKEN}", "Content-Type":"application/json"})
- return json.load(urllib.request.urlopen(req, timeout=60))
-
-def get(url):
- req = urllib.request.Request(url, headers={"Authorization": f"Bearer {TOKEN}"})
- return json.load(urllib.request.urlopen(req, timeout=60))
-
-products = json.loads(DATA.read_text())
-per_chapter = {}
-ok = 0
-for i, p in enumerate(products):
- ch = p.get("chapter","golds")
- idx = per_chapter.get(ch,0); per_chapter[ch]=idx+1
- room, furniture = SCENES.get(ch, SCENES["golds"])[idx % 2]
- prm = prompt_for(p["title"], room, furniture)
- swatch = p["image"]
- dest = OUT / f"r{i}.jpg"
- if dest.exists() and dest.stat().st_size > 20000:
- print(f"[{i:02d}] cached {p['title']}"); ok+=1; continue
- try:
- pred = post("https://api.replicate.com/v1/predictions",
- {"version": VERSION, "input": {"prompt": prm, "image_input":[swatch],
- "aspect_ratio":"4:3", "output_format":"jpg"}})
- purl = pred["urls"]["get"]
- for _ in range(90):
- time.sleep(2)
- pred = get(purl)
- if pred["status"] in ("succeeded","failed","canceled"): break
- if pred["status"] != "succeeded":
- print(f"[{i:02d}] FAIL {p['title']}: {pred.get('error') or pred['status']}"); continue
- out = pred["output"]
- img_url = out[0] if isinstance(out,list) else out
- urllib.request.urlretrieve(img_url, dest)
- ok += 1
- print(f"[{i:02d}] ok {p['title']:28s} [{ch}/{room[:24]}]")
- except Exception as e:
- print(f"[{i:02d}] ERR {p['title']}: {e}")
-
-# stamp local room paths + has_room into the data JSON
-for i, p in enumerate(products):
- dest = OUT / f"r{i}.jpg"
- if dest.exists() and dest.stat().st_size > 20000:
- p["room"] = str(dest); p["has_room"] = True
-DATA.write_text(json.dumps(products, indent=2))
-print(f"\nDONE {ok}/{len(products)} rooms; est cost ${ok*0.039:.2f} (nano-banana @ ~$0.039/img)")
diff --git a/flipbooks/majilite-metallics/index.html b/flipbooks/majilite-metallics/index.html
deleted file mode 100644
index 9a49d25..0000000
--- a/flipbooks/majilite-metallics/index.html
+++ /dev/null
@@ -1,552 +0,0 @@
-<!doctype html>
-<html lang="en" data-resolution="landscape">
-<head>
-<meta charset="UTF-8" />
-<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-<style>
- :root { --ink:#1c1a17; --cream:#f4efe6; --paper:#fbf8f1; --gold:#b08d57; }
- html,body { margin:0; padding:0; width:1920px; height:1080px; overflow:hidden;
- background:radial-gradient(120% 120% at 50% 0%, #2a2622 0%, #14110e 72%);
- font-family:"Helvetica Neue",system-ui,sans-serif; }
- #main-composition { position:relative; width:1920px; height:1080px; overflow:hidden; }
- .stage { position:absolute; inset:0; perspective:3000px; perspective-origin:50% 46%; }
-
- /* LEFT verso: brand + room + name */
- .verso { position:absolute; top:97px; left:192px; width:768px; height:886px;
- background:var(--paper); border-radius:8px 2px 2px 8px; overflow:hidden;
- box-shadow: inset -30px 0 46px rgba(0,0,0,.12), 0 34px 66px rgba(0,0,0,.5);
- display:flex; flex-direction:column; }
- .wordmark { flex:0 0 auto; text-align:center; padding:49px 0 27px; }
- .wordmark .wm { font-family:Georgia, serif; font-size:55px; color:var(--ink); letter-spacing:.02em; line-height:1; }
- .wordmark .wsub { margin-top:8px; font-size:18px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
- .wordmark .wr { width:64px; height:2px; background:var(--gold); margin:25px auto 0; }
- .roomstack { position:relative; flex:1 1 auto; margin:0 42px 42px; border-radius:4px; overflow:hidden; background:#e9e3d7; }
- .room { position:absolute; inset:0; opacity:0; }
- .room .rimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
- .room.fallback .rimg { transform:scale(1.4); filter:blur(3px) brightness(.82) saturate(1.05); }
- .room .rtint { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
- .room.fallback .rtint { background:linear-gradient(180deg, rgba(20,16,12,.30) 0%, rgba(20,16,12,.62) 100%); }
- .rcap { position:absolute; left:0; right:0; bottom:0; padding:38px 42px; color:#fff; }
- .rcap .rpat { font-family:Georgia, serif; font-size:48px; line-height:1.05; text-shadow:0 2px 14px rgba(0,0,0,.5); }
- .rcap .rcol { margin-top:8px; font-size:20px; letter-spacing:.2em; text-transform:uppercase; color:#e7d8bd; }
-
- /* RIGHT recto: page-turn stack of pattern swatches */
- .leaf { position:absolute; top:97px; left:960px; width:768px; height:886px;
- transform-origin:left center; transform-style:preserve-3d; will-change:transform; }
- .leaf .face { position:absolute; inset:0; backface-visibility:hidden; overflow:hidden; border-radius:2px 8px 8px 2px;
- background:var(--paper); box-shadow: 24px 28px 54px rgba(0,0,0,.42), inset 24px 0 42px rgba(0,0,0,.08); }
- .leaf .back { transform:rotateY(180deg); background:linear-gradient(90deg,#efe9dc,#fbf8f1 22%);
- box-shadow:-22px 28px 54px rgba(0,0,0,.36), inset -24px 0 42px rgba(0,0,0,.08); }
- .leaf .art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
- .leaf .shade { position:absolute; inset:0; opacity:0; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,0) 62%); }
-
- /* cover + outro cards */
- .card { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--cream); }
- .card .kicker { font-size:31px; letter-spacing:.44em; text-transform:uppercase; color:var(--gold); }
- .card .big { font-family:Georgia, serif; font-size:134px; line-height:1.0; margin:22px 60px; }
- .card .sub { font-size:35px; letter-spacing:.18em; text-transform:uppercase; color:#c9bfae; }
- .card .rule { width:120px; height:2px; background:var(--gold); margin:32px 0; }
- .card .url { margin-top:28px; font-size:31px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); }
-</style>
-</head>
-<body>
- <div id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="38">
-
- <div class="card" id="cover">
- <div class="kicker">Designer Wallcoverings presents</div>
- <div class="big">Majilite Metallics</div>
- <div class="rule"></div>
- <div class="sub">A Colorway Story in Four Metals</div>
- </div>
-
- <div class="stage" id="stage">
- <div class="verso">
- <div class="wordmark"><div class="wm">Designer Wallcoverings</div><div class="wsub">est. lookbook</div><div class="wr"></div></div>
- <div class="roomstack">
- <div class="room" id="room0">
- <img class="rimg" src="assets/room/r0.jpg" alt="Stature Rose Gold room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Stature Rose Gold</div><div class="rcol">Majilite Metallics · golds</div></div>
- </div>
- <div class="room" id="room1">
- <img class="rimg" src="assets/room/r1.jpg" alt="Attache Rose Gold room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Attache Rose Gold</div><div class="rcol">Majilite Metallics · golds</div></div>
- </div>
- <div class="room" id="room2">
- <img class="rimg" src="assets/room/r2.jpg" alt="Hive Antique Gold room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hive Antique Gold</div><div class="rcol">Majilite Metallics · golds</div></div>
- </div>
- <div class="room" id="room3">
- <img class="rimg" src="assets/room/r3.jpg" alt="Nuance Gold Leaf room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Nuance Gold Leaf</div><div class="rcol">Majilite Metallics · golds</div></div>
- </div>
- <div class="room" id="room4">
- <img class="rimg" src="assets/room/r4.jpg" alt="Brushed Finesse Champagne room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Brushed Finesse Champagne</div><div class="rcol">Majilite Metallics · golds</div></div>
- </div>
- <div class="room" id="room5">
- <img class="rimg" src="assets/room/r5.jpg" alt="Apollo Chardonnay room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Apollo Chardonnay</div><div class="rcol">Majilite Metallics · golds</div></div>
- </div>
- <div class="room" id="room6">
- <img class="rimg" src="assets/room/r6.jpg" alt="Apollo Silver Icon room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Apollo Silver Icon</div><div class="rcol">Majilite Metallics · silvers</div></div>
- </div>
- <div class="room" id="room7">
- <img class="rimg" src="assets/room/r7.jpg" alt="Metallic Paragon Silver room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Metallic Paragon Silver</div><div class="rcol">Majilite Metallics · silvers</div></div>
- </div>
- <div class="room" id="room8">
- <img class="rimg" src="assets/room/r8.jpg" alt="Brushed Finesse Stainless Steel room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Brushed Finesse Stainless Steel</div><div class="rcol">Majilite Metallics · silvers</div></div>
- </div>
- <div class="room" id="room9">
- <img class="rimg" src="assets/room/r9.jpg" alt="Nuance Platinum room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Nuance Platinum</div><div class="rcol">Majilite Metallics · silvers</div></div>
- </div>
- <div class="room" id="room10">
- <img class="rimg" src="assets/room/r10.jpg" alt="Charm II Platinum room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Charm II Platinum</div><div class="rcol">Majilite Metallics · silvers</div></div>
- </div>
- <div class="room" id="room11">
- <img class="rimg" src="assets/room/r11.jpg" alt="Reflection Aluminum room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Reflection Aluminum</div><div class="rcol">Majilite Metallics · silvers</div></div>
- </div>
- <div class="room" id="room12">
- <img class="rimg" src="assets/room/r12.jpg" alt="Legacy Pearl Gelato room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Legacy Pearl Gelato</div><div class="rcol">Majilite Metallics · pearls</div></div>
- </div>
- <div class="room" id="room13">
- <img class="rimg" src="assets/room/r13.jpg" alt="Celestial Pearl Gelato room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Celestial Pearl Gelato</div><div class="rcol">Majilite Metallics · pearls</div></div>
- </div>
- <div class="room" id="room14">
- <img class="rimg" src="assets/room/r14.jpg" alt="Deco White Pearl room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Deco White Pearl</div><div class="rcol">Majilite Metallics · pearls</div></div>
- </div>
- <div class="room" id="room15">
- <img class="rimg" src="assets/room/r15.jpg" alt="Shimmer Polar White room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Shimmer Polar White</div><div class="rcol">Majilite Metallics · pearls</div></div>
- </div>
- <div class="room" id="room16">
- <img class="rimg" src="assets/room/r16.jpg" alt="Radiance Pearl White room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Radiance Pearl White</div><div class="rcol">Majilite Metallics · pearls</div></div>
- </div>
- <div class="room" id="room17">
- <img class="rimg" src="assets/room/r17.jpg" alt="Charm Featherbed room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Charm Featherbed</div><div class="rcol">Majilite Metallics · pearls</div></div>
- </div>
- <div class="room" id="room18">
- <img class="rimg" src="assets/room/r18.jpg" alt="Finesse Mercury room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Finesse Mercury</div><div class="rcol">Majilite Metallics · smoke</div></div>
- </div>
- <div class="room" id="room19">
- <img class="rimg" src="assets/room/r19.jpg" alt="Burnished Metal Mercury room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Burnished Metal Mercury</div><div class="rcol">Majilite Metallics · smoke</div></div>
- </div>
- <div class="room" id="room20">
- <img class="rimg" src="assets/room/r20.jpg" alt="Eclipse FX Carbon room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Eclipse FX Carbon</div><div class="rcol">Majilite Metallics · smoke</div></div>
- </div>
- <div class="room" id="room21">
- <img class="rimg" src="assets/room/r21.jpg" alt="Shimmer Charcoal room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Shimmer Charcoal</div><div class="rcol">Majilite Metallics · smoke</div></div>
- </div>
- <div class="room" id="room22">
- <img class="rimg" src="assets/room/r22.jpg" alt="Metallic Paragon Slate room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Metallic Paragon Slate</div><div class="rcol">Majilite Metallics · smoke</div></div>
- </div>
- <div class="room" id="room23">
- <img class="rimg" src="assets/room/r23.jpg" alt="Hammered Metal Midnight room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Hammered Metal Midnight</div><div class="rcol">Majilite Metallics · smoke</div></div>
- </div>
- </div>
- </div>
-
- <div class="leaf" id="leaf0">
- <div class="face front"><img class="art" src="assets/img/p0.jpg" alt="Stature Rose Gold" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf1">
- <div class="face front"><img class="art" src="assets/img/p1.jpg" alt="Attache Rose Gold" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf2">
- <div class="face front"><img class="art" src="assets/img/p2.jpg" alt="Hive Antique Gold" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf3">
- <div class="face front"><img class="art" src="assets/img/p3.jpg" alt="Nuance Gold Leaf" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf4">
- <div class="face front"><img class="art" src="assets/img/p4.jpg" alt="Brushed Finesse Champagne" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf5">
- <div class="face front"><img class="art" src="assets/img/p5.jpg" alt="Apollo Chardonnay" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf6">
- <div class="face front"><img class="art" src="assets/img/p6.jpg" alt="Apollo Silver Icon" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf7">
- <div class="face front"><img class="art" src="assets/img/p7.jpg" alt="Metallic Paragon Silver" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf8">
- <div class="face front"><img class="art" src="assets/img/p8.jpg" alt="Brushed Finesse Stainless Steel" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf9">
- <div class="face front"><img class="art" src="assets/img/p9.jpg" alt="Nuance Platinum" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf10">
- <div class="face front"><img class="art" src="assets/img/p10.jpg" alt="Charm II Platinum" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf11">
- <div class="face front"><img class="art" src="assets/img/p11.jpg" alt="Reflection Aluminum" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf12">
- <div class="face front"><img class="art" src="assets/img/p12.jpg" alt="Legacy Pearl Gelato" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf13">
- <div class="face front"><img class="art" src="assets/img/p13.jpg" alt="Celestial Pearl Gelato" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf14">
- <div class="face front"><img class="art" src="assets/img/p14.jpg" alt="Deco White Pearl" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf15">
- <div class="face front"><img class="art" src="assets/img/p15.jpg" alt="Shimmer Polar White" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf16">
- <div class="face front"><img class="art" src="assets/img/p16.jpg" alt="Radiance Pearl White" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf17">
- <div class="face front"><img class="art" src="assets/img/p17.jpg" alt="Charm Featherbed" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf18">
- <div class="face front"><img class="art" src="assets/img/p18.jpg" alt="Finesse Mercury" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf19">
- <div class="face front"><img class="art" src="assets/img/p19.jpg" alt="Burnished Metal Mercury" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf20">
- <div class="face front"><img class="art" src="assets/img/p20.jpg" alt="Eclipse FX Carbon" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf21">
- <div class="face front"><img class="art" src="assets/img/p21.jpg" alt="Shimmer Charcoal" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf22">
- <div class="face front"><img class="art" src="assets/img/p22.jpg" alt="Metallic Paragon Slate" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf23">
- <div class="face front"><img class="art" src="assets/img/p23.jpg" alt="Hammered Metal Midnight" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- </div>
-
- <div class="card" id="outro">
- <div class="kicker">Shop the collection</div>
- <div class="big">Majilite Metallics</div>
- <div class="url">designerwallcoverings.com</div>
- </div>
-
- <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="38" data-track-index="20" data-volume="0.18"></audio>
- <audio id="vo0" src="assets/audio/vo1.wav" data-start="2.4" data-track-index="21" data-volume="1"></audio>
- <audio id="vo1" src="assets/audio/vo2.wav" data-start="8.4" data-track-index="22" data-volume="1"></audio>
- <audio id="vo2" src="assets/audio/vo3.wav" data-start="15" data-track-index="23" data-volume="1"></audio>
- <audio id="vo3" src="assets/audio/vo4.wav" data-start="21.6" data-track-index="24" data-volume="1"></audio>
- <audio id="vo4" src="assets/audio/vo5.wav" data-start="31.15" data-track-index="25" data-volume="1"></audio>
-
- <script>
- window.__timelines = window.__timelines || {};
- const tl = gsap.timeline({ paused: true });
-
- gsap.set("#leaf0", { rotateY:0, zIndex:24 });
- gsap.set("#leaf1", { rotateY:0, zIndex:23 });
- gsap.set("#leaf2", { rotateY:0, zIndex:22 });
- gsap.set("#leaf3", { rotateY:0, zIndex:21 });
- gsap.set("#leaf4", { rotateY:0, zIndex:20 });
- gsap.set("#leaf5", { rotateY:0, zIndex:19 });
- gsap.set("#leaf6", { rotateY:0, zIndex:18 });
- gsap.set("#leaf7", { rotateY:0, zIndex:17 });
- gsap.set("#leaf8", { rotateY:0, zIndex:16 });
- gsap.set("#leaf9", { rotateY:0, zIndex:15 });
- gsap.set("#leaf10", { rotateY:0, zIndex:14 });
- gsap.set("#leaf11", { rotateY:0, zIndex:13 });
- gsap.set("#leaf12", { rotateY:0, zIndex:12 });
- gsap.set("#leaf13", { rotateY:0, zIndex:11 });
- gsap.set("#leaf14", { rotateY:0, zIndex:10 });
- gsap.set("#leaf15", { rotateY:0, zIndex:9 });
- gsap.set("#leaf16", { rotateY:0, zIndex:8 });
- gsap.set("#leaf17", { rotateY:0, zIndex:7 });
- gsap.set("#leaf18", { rotateY:0, zIndex:6 });
- gsap.set("#leaf19", { rotateY:0, zIndex:5 });
- gsap.set("#leaf20", { rotateY:0, zIndex:4 });
- gsap.set("#leaf21", { rotateY:0, zIndex:3 });
- gsap.set("#leaf22", { rotateY:0, zIndex:2 });
- gsap.set("#leaf23", { 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("#stage", { opacity: 0 });
- gsap.set("#outro", { opacity: 0 }); gsap.set("#outro .big", { y: 34, opacity: 0 }); gsap.set("#outro .url", { opacity: 0 });
- gsap.set("#cover .big", { y: 40, opacity: 0 }); gsap.set("#cover .kicker,#cover .sub,#cover .rule", { opacity: 0 });
-
- // cover
- tl.to("#cover .kicker", { opacity:1, duration:0.5 }, 0.2);
- tl.to("#cover .big", { opacity:1, y:0, duration:0.8, ease:"power3.out" }, 0.4);
- tl.to("#cover .rule,#cover .sub", { opacity:1, duration:0.5 }, 1.0);
- tl.to("#cover", { opacity:0, duration:0.5, ease:"power1.in" }, 1.70);
- tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, 1.70);
-
- // page turns + room crossfades
-
- tl.to("#leaf0", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 2.9);
- tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 2.9);
- tl.to("#leaf0 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 3.2);
- tl.set("#leaf0", { zIndex: 1000 }, 3.2);
- tl.set("#leaf0", { opacity: 0 }, 3.500);
- tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 3.2);
- tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 3.2);
- tl.to("#leaf1", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 4);
- tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 4);
- tl.to("#leaf1 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 4.3);
- tl.set("#leaf1", { zIndex: 1001 }, 4.3);
- tl.set("#leaf1", { opacity: 0 }, 4.600);
- tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 4.3);
- tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 4.3);
- tl.to("#leaf2", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 5.1);
- tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 5.1);
- tl.to("#leaf2 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 5.4);
- tl.set("#leaf2", { zIndex: 1002 }, 5.4);
- tl.set("#leaf2", { opacity: 0 }, 5.700);
- tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 5.4);
- tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 5.4);
- tl.to("#leaf3", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 6.2);
- tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 6.2);
- tl.to("#leaf3 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 6.5);
- tl.set("#leaf3", { zIndex: 1003 }, 6.5);
- tl.set("#leaf3", { opacity: 0 }, 6.800);
- tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 6.5);
- tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 6.5);
- tl.to("#leaf4", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 7.3);
- tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 7.3);
- tl.to("#leaf4 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 7.6);
- tl.set("#leaf4", { zIndex: 1004 }, 7.6);
- tl.set("#leaf4", { opacity: 0 }, 7.900);
- tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 7.6);
- tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 7.6);
- tl.to("#leaf5", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 8.4);
- tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 8.4);
- tl.to("#leaf5 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 8.7);
- tl.set("#leaf5", { zIndex: 1005 }, 8.7);
- tl.set("#leaf5", { opacity: 0 }, 9.000);
- tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 8.7);
- tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 8.7);
- tl.to("#leaf6", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 9.5);
- tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 9.5);
- tl.to("#leaf6 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 9.8);
- tl.set("#leaf6", { zIndex: 1006 }, 9.8);
- tl.set("#leaf6", { opacity: 0 }, 10.100);
- tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 9.8);
- tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 9.8);
- tl.to("#leaf7", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 10.6);
- tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 10.6);
- tl.to("#leaf7 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 10.9);
- tl.set("#leaf7", { zIndex: 1007 }, 10.9);
- tl.set("#leaf7", { opacity: 0 }, 11.200);
- tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 10.9);
- tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 10.9);
- tl.to("#leaf8", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 11.7);
- tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 11.7);
- tl.to("#leaf8 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 12);
- tl.set("#leaf8", { zIndex: 1008 }, 12);
- tl.set("#leaf8", { opacity: 0 }, 12.300);
- tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 12);
- tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 12);
- tl.to("#leaf9", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 12.8);
- tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 12.8);
- tl.to("#leaf9 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 13.1);
- tl.set("#leaf9", { zIndex: 1009 }, 13.1);
- tl.set("#leaf9", { opacity: 0 }, 13.400);
- tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 13.1);
- tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 13.1);
- tl.to("#leaf10", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 13.9);
- tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 13.9);
- tl.to("#leaf10 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 14.2);
- tl.set("#leaf10", { zIndex: 1010 }, 14.2);
- tl.set("#leaf10", { opacity: 0 }, 14.500);
- tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14.2);
- tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14.2);
- tl.to("#leaf11", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 15);
- tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 15);
- tl.to("#leaf11 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 15.3);
- tl.set("#leaf11", { zIndex: 1011 }, 15.3);
- tl.set("#leaf11", { opacity: 0 }, 15.600);
- tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 15.3);
- tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 15.3);
- tl.to("#leaf12", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 16.1);
- tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 16.1);
- tl.to("#leaf12 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 16.4);
- tl.set("#leaf12", { zIndex: 1012 }, 16.4);
- tl.set("#leaf12", { opacity: 0 }, 16.700);
- tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 16.4);
- tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 16.4);
- tl.to("#leaf13", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 17.2);
- tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 17.2);
- tl.to("#leaf13 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 17.5);
- tl.set("#leaf13", { zIndex: 1013 }, 17.5);
- tl.set("#leaf13", { opacity: 0 }, 17.800);
- tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17.5);
- tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17.5);
- tl.to("#leaf14", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 18.3);
- tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 18.3);
- tl.to("#leaf14 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 18.6);
- tl.set("#leaf14", { zIndex: 1014 }, 18.6);
- tl.set("#leaf14", { opacity: 0 }, 18.900);
- tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 18.6);
- tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 18.6);
- tl.to("#leaf15", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 19.4);
- tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 19.4);
- tl.to("#leaf15 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 19.7);
- tl.set("#leaf15", { zIndex: 1015 }, 19.7);
- tl.set("#leaf15", { opacity: 0 }, 20.000);
- tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 19.7);
- tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 19.7);
- tl.to("#leaf16", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 20.5);
- tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 20.5);
- tl.to("#leaf16 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 20.8);
- tl.set("#leaf16", { zIndex: 1016 }, 20.8);
- tl.set("#leaf16", { opacity: 0 }, 21.100);
- tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20.8);
- tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20.8);
- tl.to("#leaf17", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 21.6);
- tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 21.6);
- tl.to("#leaf17 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 21.9);
- tl.set("#leaf17", { zIndex: 1017 }, 21.9);
- tl.set("#leaf17", { opacity: 0 }, 22.200);
- tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 21.9);
- tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 21.9);
- tl.to("#leaf18", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 22.7);
- tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 22.7);
- tl.to("#leaf18 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 23);
- tl.set("#leaf18", { zIndex: 1018 }, 23);
- tl.set("#leaf18", { opacity: 0 }, 23.300);
- tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23);
- tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23);
- tl.to("#leaf19", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 23.8);
- tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 23.8);
- tl.to("#leaf19 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 24.1);
- tl.set("#leaf19", { zIndex: 1019 }, 24.1);
- tl.set("#leaf19", { opacity: 0 }, 24.400);
- tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 24.1);
- tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 24.1);
- tl.to("#leaf20", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 24.9);
- tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 24.9);
- tl.to("#leaf20 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 25.2);
- tl.set("#leaf20", { zIndex: 1020 }, 25.2);
- tl.set("#leaf20", { opacity: 0 }, 25.500);
- tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 25.2);
- tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 25.2);
- tl.to("#leaf21", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 26);
- tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 26);
- tl.to("#leaf21 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 26.3);
- tl.set("#leaf21", { zIndex: 1021 }, 26.3);
- tl.set("#leaf21", { opacity: 0 }, 26.600);
- tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 26.3);
- tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 26.3);
- tl.to("#leaf22", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 27.1);
- tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 27.1);
- tl.to("#leaf22 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 27.4);
- tl.set("#leaf22", { zIndex: 1022 }, 27.4);
- tl.set("#leaf22", { opacity: 0 }, 27.700);
- tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 27.4);
- tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 27.4);
- tl.to("#leaf23 .art", { scale: 1.05, duration: 3.20, ease:"power1.out" }, 28.2);
- tl.to("#room23 .rimg", { scale: 1.06, duration: 3.20, ease:"power1.out" }, 28.2);
-
- // outro
- tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 31.00);
- tl.to("#outro", { opacity:1, duration:0.5 }, 31.20);
- tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 31.40);
- tl.to("#outro .url", { opacity:1, duration:0.5 }, 31.90);
-
- gsap.set("#bgm", { volume: 0.18 });
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 2.10);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 5.00);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 8.10);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 11.00);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 14.70);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 17.60);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 21.30);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 24.20);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 30.85);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 33.75);
- tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 36.90);
-
- window.__timelines["flipbook"] = tl;
- </script>
- </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/flipbooks/majilite-metallics/lines.txt b/flipbooks/majilite-metallics/lines.txt
deleted file mode 100644
index b867539..0000000
--- a/flipbooks/majilite-metallics/lines.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-Majilite Metallics — metallic faux-leather wallcoverings, finished like fine jewelry. We begin in gold: rose gold, antique gold, and champagne.
-Then, silver and platinum — cool, brushed, and reflective. The quiet luxury of polished metal.
-Pearl and opaline: soft, luminous surfaces that catch the light without ever shouting.
-And finally, smoke and gunmetal — mercury, carbon, and midnight, with real depth and drama.
-Majilite Metallics, from Designer Wallcoverings. Every colorway a durable, cleanable faux leather. Explore the full collection.
diff --git a/flipbooks/majilite-metallics/roomsrc/r0.jpg b/flipbooks/majilite-metallics/roomsrc/r0.jpg
deleted file mode 100644
index e03b686..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r0.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r1.jpg b/flipbooks/majilite-metallics/roomsrc/r1.jpg
deleted file mode 100644
index 1a0ff50..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r1.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r10.jpg b/flipbooks/majilite-metallics/roomsrc/r10.jpg
deleted file mode 100644
index 78e23b0..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r10.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r11.jpg b/flipbooks/majilite-metallics/roomsrc/r11.jpg
deleted file mode 100644
index cc53e2b..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r11.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r12.jpg b/flipbooks/majilite-metallics/roomsrc/r12.jpg
deleted file mode 100644
index e632857..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r12.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r13.jpg b/flipbooks/majilite-metallics/roomsrc/r13.jpg
deleted file mode 100644
index 50cb8ff..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r13.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r14.jpg b/flipbooks/majilite-metallics/roomsrc/r14.jpg
deleted file mode 100644
index 6cbd8b6..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r14.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r15.jpg b/flipbooks/majilite-metallics/roomsrc/r15.jpg
deleted file mode 100644
index 1cc1614..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r15.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r16.jpg b/flipbooks/majilite-metallics/roomsrc/r16.jpg
deleted file mode 100644
index 2210159..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r16.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r17.jpg b/flipbooks/majilite-metallics/roomsrc/r17.jpg
deleted file mode 100644
index eb479bc..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r17.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r18.jpg b/flipbooks/majilite-metallics/roomsrc/r18.jpg
deleted file mode 100644
index b6a7cb1..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r18.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r19.jpg b/flipbooks/majilite-metallics/roomsrc/r19.jpg
deleted file mode 100644
index 7b1e6df..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r19.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r2.jpg b/flipbooks/majilite-metallics/roomsrc/r2.jpg
deleted file mode 100644
index d63037b..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r2.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r20.jpg b/flipbooks/majilite-metallics/roomsrc/r20.jpg
deleted file mode 100644
index 53da5c3..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r20.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r21.jpg b/flipbooks/majilite-metallics/roomsrc/r21.jpg
deleted file mode 100644
index 431ab45..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r21.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r22.jpg b/flipbooks/majilite-metallics/roomsrc/r22.jpg
deleted file mode 100644
index c407b17..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r22.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r23.jpg b/flipbooks/majilite-metallics/roomsrc/r23.jpg
deleted file mode 100644
index 17d0a0d..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r23.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r3.jpg b/flipbooks/majilite-metallics/roomsrc/r3.jpg
deleted file mode 100644
index 4da8b3d..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r3.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r4.jpg b/flipbooks/majilite-metallics/roomsrc/r4.jpg
deleted file mode 100644
index 69e56d0..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r4.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r5.jpg b/flipbooks/majilite-metallics/roomsrc/r5.jpg
deleted file mode 100644
index ee84542..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r5.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r6.jpg b/flipbooks/majilite-metallics/roomsrc/r6.jpg
deleted file mode 100644
index 41d07d6..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r6.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r7.jpg b/flipbooks/majilite-metallics/roomsrc/r7.jpg
deleted file mode 100644
index 09f9a12..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r7.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r8.jpg b/flipbooks/majilite-metallics/roomsrc/r8.jpg
deleted file mode 100644
index c55c2e4..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r8.jpg and /dev/null differ
diff --git a/flipbooks/majilite-metallics/roomsrc/r9.jpg b/flipbooks/majilite-metallics/roomsrc/r9.jpg
deleted file mode 100644
index 57058f0..0000000
Binary files a/flipbooks/majilite-metallics/roomsrc/r9.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff-ig/index.html b/flipbooks/maya-romanoff-ig/index.html
deleted file mode 100644
index bd58e9e..0000000
--- a/flipbooks/maya-romanoff-ig/index.html
+++ /dev/null
@@ -1,552 +0,0 @@
-<!doctype html>
-<html lang="en" data-resolution="portrait">
-<head>
-<meta charset="UTF-8" />
-<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-<style>
- :root { --ink:#1c1a17; --cream:#f4efe6; --paper:#fbf8f1; --gold:#b08d57; }
- html,body { margin:0; padding:0; width:1080px; height:1920px; overflow:hidden;
- background:radial-gradient(120% 120% at 50% 0%, #2a2622 0%, #14110e 72%);
- font-family:"Helvetica Neue",system-ui,sans-serif; }
- #main-composition { position:relative; width:1080px; height:1920px; overflow:hidden; }
- .stage { position:absolute; inset:0; perspective:3000px; perspective-origin:50% 46%; }
-
- /* LEFT verso: brand + room + name */
- .verso { position:absolute; top:173px; left:54px; width:486px; height:1574px;
- 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:87px 0 47px; }
- .wordmark .wm { font-family:Georgia, serif; font-size:35px; color:var(--ink); letter-spacing:.02em; line-height:1; }
- .wordmark .wsub { margin-top:8px; font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
- .wordmark .wr { width:64px; height:2px; background:var(--gold); margin:44px auto 0; }
- .roomstack { position:relative; flex:1 1 auto; margin:0 27px 27px; 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:24px 27px; color:#fff; }
- .rcap .rpat { font-family:Georgia, serif; font-size:30px; line-height:1.05; text-shadow:0 2px 14px rgba(0,0,0,.5); }
- .rcap .rcol { margin-top:8px; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:#e7d8bd; }
-
- /* RIGHT recto: page-turn stack of pattern swatches */
- .leaf { position:absolute; top:173px; left:540px; width:486px; height:1574px;
- 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:17px; letter-spacing:.44em; text-transform:uppercase; color:var(--gold); }
- .card .big { font-family:Georgia, serif; font-size:76px; line-height:1.0; margin:22px 60px; }
- .card .sub { font-size:19px; 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:17px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); }
-</style>
-</head>
-<body>
- <div id="main-composition" data-composition-id="flipbook" data-width="1080" data-height="1920" data-start="0" data-duration="40.3">
-
- <div class="card" id="cover">
- <div class="kicker">Designer Wallcoverings presents</div>
- <div class="big">Maya Romanoff</div>
- <div class="rule"></div>
- <div class="sub">A Study in Materials</div>
- </div>
-
- <div class="stage" id="stage">
- <div class="verso">
- <div class="wordmark"><div class="wm">Designer Wallcoverings</div><div class="wsub">est. lookbook</div><div class="wr"></div></div>
- <div class="roomstack">
- <div class="room" id="room0">
- <img class="rimg" src="assets/room/r0.jpg" alt="Beadazzled Geode - Pearlie room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Beadazzled Geode - Pearlie</div><div class="rcol">Maya Romanoff · beadwork</div></div>
- </div>
- <div class="room" id="room1">
- <img class="rimg" src="assets/room/r1.jpg" alt="Beadazzled Leaf - Green Leaf room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Beadazzled Leaf - Green Leaf</div><div class="rcol">Maya Romanoff · beadwork</div></div>
- </div>
- <div class="room" id="room2">
- <img class="rimg" src="assets/room/r2.jpg" alt="Beadazzled Sparkle Geode - Blue Glacier room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Beadazzled Sparkle Geode - Blue Glacier</div><div class="rcol">Maya Romanoff · beadwork</div></div>
- </div>
- <div class="room" id="room3">
- <img class="rimg" src="assets/room/r3.jpg" alt="Beadazzled Bianca - White room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Beadazzled Bianca - White</div><div class="rcol">Maya Romanoff · beadwork</div></div>
- </div>
- <div class="room" id="room4">
- <img class="rimg" src="assets/room/r4.jpg" alt="Beadazzled Metallic Taupe - Beige room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Beadazzled Metallic Taupe - Beige</div><div class="rcol">Maya Romanoff · beadwork</div></div>
- </div>
- <div class="room" id="room5">
- <img class="rimg" src="assets/room/r5.jpg" alt="Beadazzled Scotch 'N Soda - White room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Beadazzled Scotch 'N Soda - White</div><div class="rcol">Maya Romanoff · beadwork</div></div>
- </div>
- <div class="room" id="room6">
- <img class="rimg" src="assets/room/r6.jpg" alt="Ajiro Chevron Driftwood - Beige room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Ajiro Chevron Driftwood - Beige</div><div class="rcol">Maya Romanoff · marquetry</div></div>
- </div>
- <div class="room" id="room7">
- <img class="rimg" src="assets/room/r7.jpg" alt="Ajiro Coffers - Silver Birch Luster room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Ajiro Coffers - Silver Birch Luster</div><div class="rcol">Maya Romanoff · marquetry</div></div>
- </div>
- <div class="room" id="room8">
- <img class="rimg" src="assets/room/r8.jpg" alt="Ajiro Houndstooth Ebony Luster - Dark Gray room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Ajiro Houndstooth Ebony Luster - Dark Gray</div><div class="rcol">Maya Romanoff · marquetry</div></div>
- </div>
- <div class="room" id="room9">
- <img class="rimg" src="assets/room/r9.jpg" alt="Ajiro Sunburst Teak - Beige room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Ajiro Sunburst Teak - Beige</div><div class="rcol">Maya Romanoff · marquetry</div></div>
- </div>
- <div class="room" id="room10">
- <img class="rimg" src="assets/room/r10.jpg" alt="Ajiro Fanfare Chestnut - Medium Brown room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Ajiro Fanfare Chestnut - Medium Brown</div><div class="rcol">Maya Romanoff · marquetry</div></div>
- </div>
- <div class="room" id="room11">
- <img class="rimg" src="assets/room/r11.jpg" alt="Ajiro Vineyard Maple - Pale Beige room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Ajiro Vineyard Maple - Pale Beige</div><div class="rcol">Maya Romanoff · marquetry</div></div>
- </div>
- <div class="room" id="room12">
- <img class="rimg" src="assets/room/r12.jpg" alt="Grand Scale Ajiro Chevron - Silver Birch Luster room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Grand Scale Ajiro Chevron - Silver Birch Luster</div><div class="rcol">Maya Romanoff · metallic</div></div>
- </div>
- <div class="room" id="room13">
- <img class="rimg" src="assets/room/r13.jpg" alt="Bravado - Gunmetal room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Bravado - Gunmetal</div><div class="rcol">Maya Romanoff · metallic</div></div>
- </div>
- <div class="room" id="room14">
- <img class="rimg" src="assets/room/r14.jpg" alt="Conduit - Forged Frost room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Conduit - Forged Frost</div><div class="rcol">Maya Romanoff · metallic</div></div>
- </div>
- <div class="room" id="room15">
- <img class="rimg" src="assets/room/r15.jpg" alt="Beadazzled Pearlie - Off-White room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Beadazzled Pearlie - Off-White</div><div class="rcol">Maya Romanoff · metallic</div></div>
- </div>
- <div class="room" id="room16">
- <img class="rimg" src="assets/room/r16.jpg" alt="Ajiro Plank - Silver Birch Luster room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Ajiro Plank - Silver Birch Luster</div><div class="rcol">Maya Romanoff · metallic</div></div>
- </div>
- <div class="room" id="room17">
- <img class="rimg" src="assets/room/r17.jpg" alt="Ajiro Sunburst Polished Silver Birch Luster - Silver room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Ajiro Sunburst Polished Silver Birch Luster - Silver</div><div class="rcol">Maya Romanoff · metallic</div></div>
- </div>
- <div class="room" id="room18">
- <img class="rimg" src="assets/room/r18.jpg" alt="Braided Hemp Resilience - Beige room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Braided Hemp Resilience - Beige</div><div class="rcol">Maya Romanoff · texture</div></div>
- </div>
- <div class="room" id="room19">
- <img class="rimg" src="assets/room/r19.jpg" alt="Braided Hemp Stability - Black room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Braided Hemp Stability - Black</div><div class="rcol">Maya Romanoff · texture</div></div>
- </div>
- <div class="room" id="room20">
- <img class="rimg" src="assets/room/r20.jpg" alt="Braided Hemp Determination - Terracotta room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Braided Hemp Determination - Terracotta</div><div class="rcol">Maya Romanoff · texture</div></div>
- </div>
- <div class="room" id="room21">
- <img class="rimg" src="assets/room/r21.jpg" alt="Blanket Yarn & Stitch - Heathered Grey / Grey room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Blanket Yarn & Stitch - Heathered Grey / Grey</div><div class="rcol">Maya Romanoff · texture</div></div>
- </div>
- <div class="room" id="room22">
- <img class="rimg" src="assets/room/r22.jpg" alt="Blanket Zig Zag by David Rockwell - Heathered Grey / Dove room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Blanket Zig Zag by David Rockwell - Heathered Grey / Dove</div><div class="rcol">Maya Romanoff · texture</div></div>
- </div>
- <div class="room" id="room23">
- <img class="rimg" src="assets/room/r23.jpg" alt="Braided Hemp Tranquility - Charcoal Gray room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Braided Hemp Tranquility - Charcoal Gray</div><div class="rcol">Maya Romanoff · texture</div></div>
- </div>
- </div>
- </div>
-
- <div class="leaf" id="leaf0">
- <div class="face front"><img class="art" src="assets/img/p0.jpg" alt="Beadazzled Geode - Pearlie" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf1">
- <div class="face front"><img class="art" src="assets/img/p1.jpg" alt="Beadazzled Leaf - Green Leaf" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf2">
- <div class="face front"><img class="art" src="assets/img/p2.jpg" alt="Beadazzled Sparkle Geode - Blue Glacier" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf3">
- <div class="face front"><img class="art" src="assets/img/p3.jpg" alt="Beadazzled Bianca - White" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf4">
- <div class="face front"><img class="art" src="assets/img/p4.jpg" alt="Beadazzled Metallic Taupe - Beige" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf5">
- <div class="face front"><img class="art" src="assets/img/p5.jpg" alt="Beadazzled Scotch 'N Soda - White" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf6">
- <div class="face front"><img class="art" src="assets/img/p6.jpg" alt="Ajiro Chevron Driftwood - Beige" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf7">
- <div class="face front"><img class="art" src="assets/img/p7.jpg" alt="Ajiro Coffers - Silver Birch Luster" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf8">
- <div class="face front"><img class="art" src="assets/img/p8.jpg" alt="Ajiro Houndstooth Ebony Luster - Dark Gray" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf9">
- <div class="face front"><img class="art" src="assets/img/p9.jpg" alt="Ajiro Sunburst Teak - Beige" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf10">
- <div class="face front"><img class="art" src="assets/img/p10.jpg" alt="Ajiro Fanfare Chestnut - Medium Brown" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf11">
- <div class="face front"><img class="art" src="assets/img/p11.jpg" alt="Ajiro Vineyard Maple - Pale Beige" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf12">
- <div class="face front"><img class="art" src="assets/img/p12.jpg" alt="Grand Scale Ajiro Chevron - Silver Birch Luster" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf13">
- <div class="face front"><img class="art" src="assets/img/p13.jpg" alt="Bravado - Gunmetal" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf14">
- <div class="face front"><img class="art" src="assets/img/p14.jpg" alt="Conduit - Forged Frost" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf15">
- <div class="face front"><img class="art" src="assets/img/p15.jpg" alt="Beadazzled Pearlie - Off-White" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf16">
- <div class="face front"><img class="art" src="assets/img/p16.jpg" alt="Ajiro Plank - Silver Birch Luster" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf17">
- <div class="face front"><img class="art" src="assets/img/p17.jpg" alt="Ajiro Sunburst Polished Silver Birch Luster - Silver" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf18">
- <div class="face front"><img class="art" src="assets/img/p18.jpg" alt="Braided Hemp Resilience - Beige" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf19">
- <div class="face front"><img class="art" src="assets/img/p19.jpg" alt="Braided Hemp Stability - Black" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf20">
- <div class="face front"><img class="art" src="assets/img/p20.jpg" alt="Braided Hemp Determination - Terracotta" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf21">
- <div class="face front"><img class="art" src="assets/img/p21.jpg" alt="Blanket Yarn & Stitch - Heathered Grey / Grey" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf22">
- <div class="face front"><img class="art" src="assets/img/p22.jpg" alt="Blanket Zig Zag by David Rockwell - Heathered Grey / Dove" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf23">
- <div class="face front"><img class="art" src="assets/img/p23.jpg" alt="Braided Hemp Tranquility - Charcoal Gray" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- </div>
-
- <div class="card" id="outro">
- <div class="kicker">Shop the collection</div>
- <div class="big">Maya Romanoff</div>
- <div class="url">designerwallcoverings.com</div>
- </div>
-
- <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="40.3" data-track-index="20" data-volume="0.18"></audio>
- <audio id="vo0" src="assets/audio/vo1.wav" data-start="2.4" data-track-index="21" data-volume="1"></audio>
- <audio id="vo1" src="assets/audio/vo2.wav" data-start="8.9" data-track-index="22" data-volume="1"></audio>
- <audio id="vo2" src="assets/audio/vo3.wav" data-start="16.1" data-track-index="23" data-volume="1"></audio>
- <audio id="vo3" src="assets/audio/vo4.wav" data-start="23.3" data-track-index="24" data-volume="1"></audio>
- <audio id="vo4" src="assets/audio/vo5.wav" data-start="33.45" data-track-index="25" data-volume="1"></audio>
-
- <script>
- window.__timelines = window.__timelines || {};
- const tl = gsap.timeline({ paused: true });
-
- gsap.set("#leaf0", { rotateY:0, zIndex:24 });
- gsap.set("#leaf1", { rotateY:0, zIndex:23 });
- gsap.set("#leaf2", { rotateY:0, zIndex:22 });
- gsap.set("#leaf3", { rotateY:0, zIndex:21 });
- gsap.set("#leaf4", { rotateY:0, zIndex:20 });
- gsap.set("#leaf5", { rotateY:0, zIndex:19 });
- gsap.set("#leaf6", { rotateY:0, zIndex:18 });
- gsap.set("#leaf7", { rotateY:0, zIndex:17 });
- gsap.set("#leaf8", { rotateY:0, zIndex:16 });
- gsap.set("#leaf9", { rotateY:0, zIndex:15 });
- gsap.set("#leaf10", { rotateY:0, zIndex:14 });
- gsap.set("#leaf11", { rotateY:0, zIndex:13 });
- gsap.set("#leaf12", { rotateY:0, zIndex:12 });
- gsap.set("#leaf13", { rotateY:0, zIndex:11 });
- gsap.set("#leaf14", { rotateY:0, zIndex:10 });
- gsap.set("#leaf15", { rotateY:0, zIndex:9 });
- gsap.set("#leaf16", { rotateY:0, zIndex:8 });
- gsap.set("#leaf17", { rotateY:0, zIndex:7 });
- gsap.set("#leaf18", { rotateY:0, zIndex:6 });
- gsap.set("#leaf19", { rotateY:0, zIndex:5 });
- gsap.set("#leaf20", { rotateY:0, zIndex:4 });
- gsap.set("#leaf21", { rotateY:0, zIndex:3 });
- gsap.set("#leaf22", { rotateY:0, zIndex:2 });
- gsap.set("#leaf23", { 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("#stage", { opacity: 0 });
- gsap.set("#outro", { opacity: 0 }); gsap.set("#outro .big", { y: 34, opacity: 0 }); gsap.set("#outro .url", { opacity: 0 });
- gsap.set("#cover .big", { y: 40, opacity: 0 }); gsap.set("#cover .kicker,#cover .sub,#cover .rule", { opacity: 0 });
-
- // cover
- tl.to("#cover .kicker", { opacity:1, duration:0.5 }, 0.2);
- tl.to("#cover .big", { opacity:1, y:0, duration:0.8, ease:"power3.out" }, 0.4);
- tl.to("#cover .rule,#cover .sub", { opacity:1, duration:0.5 }, 1.0);
- tl.to("#cover", { opacity:0, duration:0.5, ease:"power1.in" }, 1.70);
- tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, 1.70);
-
- // page turns + room crossfades
-
- tl.to("#leaf0", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 2.9);
- tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 2.9);
- tl.to("#leaf0 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 3.2);
- tl.set("#leaf0", { zIndex: 1000 }, 3.2);
- tl.set("#leaf0", { opacity: 0 }, 3.500);
- tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 3.2);
- tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 3.2);
- tl.to("#leaf1", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 4.1);
- tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 4.1);
- tl.to("#leaf1 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 4.4);
- tl.set("#leaf1", { zIndex: 1001 }, 4.4);
- tl.set("#leaf1", { opacity: 0 }, 4.700);
- tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 4.4);
- tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 4.4);
- tl.to("#leaf2", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 5.3);
- tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 5.3);
- tl.to("#leaf2 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 5.6);
- tl.set("#leaf2", { zIndex: 1002 }, 5.6);
- tl.set("#leaf2", { opacity: 0 }, 5.900);
- tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 5.6);
- tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 5.6);
- tl.to("#leaf3", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 6.5);
- tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 6.5);
- tl.to("#leaf3 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 6.8);
- tl.set("#leaf3", { zIndex: 1003 }, 6.8);
- tl.set("#leaf3", { opacity: 0 }, 7.100);
- tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 6.8);
- tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 6.8);
- tl.to("#leaf4", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 7.7);
- tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 7.7);
- tl.to("#leaf4 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 8);
- tl.set("#leaf4", { zIndex: 1004 }, 8);
- tl.set("#leaf4", { opacity: 0 }, 8.300);
- tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 8);
- tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 8);
- tl.to("#leaf5", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 8.9);
- tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 8.9);
- tl.to("#leaf5 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 9.2);
- tl.set("#leaf5", { zIndex: 1005 }, 9.2);
- tl.set("#leaf5", { opacity: 0 }, 9.500);
- tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 9.2);
- tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 9.2);
- tl.to("#leaf6", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 10.1);
- tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 10.1);
- tl.to("#leaf6 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 10.4);
- tl.set("#leaf6", { zIndex: 1006 }, 10.4);
- tl.set("#leaf6", { opacity: 0 }, 10.700);
- tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 10.4);
- tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 10.4);
- tl.to("#leaf7", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 11.3);
- tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 11.3);
- tl.to("#leaf7 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 11.6);
- tl.set("#leaf7", { zIndex: 1007 }, 11.6);
- tl.set("#leaf7", { opacity: 0 }, 11.900);
- tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 11.6);
- tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 11.6);
- tl.to("#leaf8", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 12.5);
- tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 12.5);
- tl.to("#leaf8 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 12.8);
- tl.set("#leaf8", { zIndex: 1008 }, 12.8);
- tl.set("#leaf8", { opacity: 0 }, 13.100);
- tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 12.8);
- tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 12.8);
- tl.to("#leaf9", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 13.7);
- tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 13.7);
- tl.to("#leaf9 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 14);
- tl.set("#leaf9", { zIndex: 1009 }, 14);
- tl.set("#leaf9", { opacity: 0 }, 14.300);
- tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14);
- tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14);
- tl.to("#leaf10", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 14.9);
- tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 14.9);
- tl.to("#leaf10 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 15.2);
- tl.set("#leaf10", { zIndex: 1010 }, 15.2);
- tl.set("#leaf10", { opacity: 0 }, 15.500);
- tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 15.2);
- tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 15.2);
- tl.to("#leaf11", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 16.1);
- tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 16.1);
- tl.to("#leaf11 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 16.4);
- tl.set("#leaf11", { zIndex: 1011 }, 16.4);
- tl.set("#leaf11", { opacity: 0 }, 16.700);
- tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 16.4);
- tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 16.4);
- tl.to("#leaf12", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 17.3);
- tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 17.3);
- tl.to("#leaf12 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 17.6);
- tl.set("#leaf12", { zIndex: 1012 }, 17.6);
- tl.set("#leaf12", { opacity: 0 }, 17.900);
- tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17.6);
- tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17.6);
- tl.to("#leaf13", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 18.5);
- tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 18.5);
- tl.to("#leaf13 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 18.8);
- tl.set("#leaf13", { zIndex: 1013 }, 18.8);
- tl.set("#leaf13", { opacity: 0 }, 19.100);
- tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 18.8);
- tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 18.8);
- tl.to("#leaf14", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 19.7);
- tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 19.7);
- tl.to("#leaf14 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 20);
- tl.set("#leaf14", { zIndex: 1014 }, 20);
- tl.set("#leaf14", { opacity: 0 }, 20.300);
- tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20);
- tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20);
- tl.to("#leaf15", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 20.9);
- tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 20.9);
- tl.to("#leaf15 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 21.2);
- tl.set("#leaf15", { zIndex: 1015 }, 21.2);
- tl.set("#leaf15", { opacity: 0 }, 21.500);
- tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 21.2);
- tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 21.2);
- tl.to("#leaf16", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 22.1);
- tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 22.1);
- tl.to("#leaf16 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 22.4);
- tl.set("#leaf16", { zIndex: 1016 }, 22.4);
- tl.set("#leaf16", { opacity: 0 }, 22.700);
- tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 22.4);
- tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 22.4);
- tl.to("#leaf17", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 23.3);
- tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 23.3);
- tl.to("#leaf17 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 23.6);
- tl.set("#leaf17", { zIndex: 1017 }, 23.6);
- tl.set("#leaf17", { opacity: 0 }, 23.900);
- tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23.6);
- tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23.6);
- tl.to("#leaf18", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 24.5);
- tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 24.5);
- tl.to("#leaf18 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 24.8);
- tl.set("#leaf18", { zIndex: 1018 }, 24.8);
- tl.set("#leaf18", { opacity: 0 }, 25.100);
- tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 24.8);
- tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 24.8);
- tl.to("#leaf19", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 25.7);
- tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 25.7);
- tl.to("#leaf19 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 26);
- tl.set("#leaf19", { zIndex: 1019 }, 26);
- tl.set("#leaf19", { opacity: 0 }, 26.300);
- tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 26);
- tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 26);
- tl.to("#leaf20", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 26.9);
- tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 26.9);
- tl.to("#leaf20 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 27.2);
- tl.set("#leaf20", { zIndex: 1020 }, 27.2);
- tl.set("#leaf20", { opacity: 0 }, 27.500);
- tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 27.2);
- tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 27.2);
- tl.to("#leaf21", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 28.1);
- tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 28.1);
- tl.to("#leaf21 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 28.4);
- tl.set("#leaf21", { zIndex: 1021 }, 28.4);
- tl.set("#leaf21", { opacity: 0 }, 28.700);
- tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 28.4);
- tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 28.4);
- tl.to("#leaf22", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 29.3);
- tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 29.3);
- tl.to("#leaf22 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 29.6);
- tl.set("#leaf22", { zIndex: 1022 }, 29.6);
- tl.set("#leaf22", { opacity: 0 }, 29.900);
- tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 29.6);
- tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 29.6);
- tl.to("#leaf23 .art", { scale: 1.05, duration: 3.20, ease:"power1.out" }, 30.5);
- tl.to("#room23 .rimg", { scale: 1.06, duration: 3.20, ease:"power1.out" }, 30.5);
-
- // outro
- tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 33.30);
- tl.to("#outro", { opacity:1, duration:0.5 }, 33.50);
- tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 33.70);
- tl.to("#outro .url", { opacity:1, duration:0.5 }, 34.20);
-
- gsap.set("#bgm", { volume: 0.18 });
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 2.10);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 5.00);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 8.60);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 11.50);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 15.80);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 18.70);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 23.00);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 25.90);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 33.15);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 36.05);
- tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 39.20);
-
- window.__timelines["flipbook"] = tl;
- </script>
- </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/flipbooks/maya-romanoff/__pycache__/gen-rooms.cpython-314.pyc b/flipbooks/maya-romanoff/__pycache__/gen-rooms.cpython-314.pyc
deleted file mode 100644
index 493bd3b..0000000
Binary files a/flipbooks/maya-romanoff/__pycache__/gen-rooms.cpython-314.pyc and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r0.jpg b/flipbooks/maya-romanoff/assets/roomgen/r0.jpg
deleted file mode 100644
index 3cd07c0..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r0.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r1.jpg b/flipbooks/maya-romanoff/assets/roomgen/r1.jpg
deleted file mode 100644
index 6f30ad3..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r1.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r10.jpg b/flipbooks/maya-romanoff/assets/roomgen/r10.jpg
deleted file mode 100644
index d58f4ed..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r10.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r11.jpg b/flipbooks/maya-romanoff/assets/roomgen/r11.jpg
deleted file mode 100644
index 166aed6..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r11.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r12.jpg b/flipbooks/maya-romanoff/assets/roomgen/r12.jpg
deleted file mode 100644
index aa7ef9a..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r12.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r13.jpg b/flipbooks/maya-romanoff/assets/roomgen/r13.jpg
deleted file mode 100644
index 5efa6f7..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r13.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r14.jpg b/flipbooks/maya-romanoff/assets/roomgen/r14.jpg
deleted file mode 100644
index 1a70b1d..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r14.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r15.jpg b/flipbooks/maya-romanoff/assets/roomgen/r15.jpg
deleted file mode 100644
index 7afc275..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r15.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r16.jpg b/flipbooks/maya-romanoff/assets/roomgen/r16.jpg
deleted file mode 100644
index 29845a1..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r16.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r17.jpg b/flipbooks/maya-romanoff/assets/roomgen/r17.jpg
deleted file mode 100644
index 9a1e30f..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r17.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r18.jpg b/flipbooks/maya-romanoff/assets/roomgen/r18.jpg
deleted file mode 100644
index 7b3ba9b..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r18.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r19.jpg b/flipbooks/maya-romanoff/assets/roomgen/r19.jpg
deleted file mode 100644
index 72f2196..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r19.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r2.jpg b/flipbooks/maya-romanoff/assets/roomgen/r2.jpg
deleted file mode 100644
index ebd27f4..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r2.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r20.jpg b/flipbooks/maya-romanoff/assets/roomgen/r20.jpg
deleted file mode 100644
index 0aad00a..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r20.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r21.jpg b/flipbooks/maya-romanoff/assets/roomgen/r21.jpg
deleted file mode 100644
index 67844f6..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r21.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r22.jpg b/flipbooks/maya-romanoff/assets/roomgen/r22.jpg
deleted file mode 100644
index 2ecc7f9..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r22.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r23.jpg b/flipbooks/maya-romanoff/assets/roomgen/r23.jpg
deleted file mode 100644
index 8f70036..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r23.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r3.jpg b/flipbooks/maya-romanoff/assets/roomgen/r3.jpg
deleted file mode 100644
index 20be314..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r3.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r4.jpg b/flipbooks/maya-romanoff/assets/roomgen/r4.jpg
deleted file mode 100644
index 738d2bf..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r4.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r5.jpg b/flipbooks/maya-romanoff/assets/roomgen/r5.jpg
deleted file mode 100644
index 2ceaeeb..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r5.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r6.jpg b/flipbooks/maya-romanoff/assets/roomgen/r6.jpg
deleted file mode 100644
index f49a6e4..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r6.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r7.jpg b/flipbooks/maya-romanoff/assets/roomgen/r7.jpg
deleted file mode 100644
index 79e96b1..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r7.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r8.jpg b/flipbooks/maya-romanoff/assets/roomgen/r8.jpg
deleted file mode 100644
index 186b5e0..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r8.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/assets/roomgen/r9.jpg b/flipbooks/maya-romanoff/assets/roomgen/r9.jpg
deleted file mode 100644
index bdc5970..0000000
Binary files a/flipbooks/maya-romanoff/assets/roomgen/r9.jpg and /dev/null differ
diff --git a/flipbooks/maya-romanoff/audio.json b/flipbooks/maya-romanoff/audio.json
deleted file mode 100644
index 11edcbc..0000000
--- a/flipbooks/maya-romanoff/audio.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "bgm": { "src": "assets/audio/jazz.wav", "volume": 0.18 },
- "vo": [
- { "src": "assets/audio/vo1.wav", "anchor": "intro" },
- { "src": "assets/audio/vo2.wav", "anchor": "chapter:marquetry" },
- { "src": "assets/audio/vo3.wav", "anchor": "chapter:metallic" },
- { "src": "assets/audio/vo4.wav", "anchor": "chapter:texture" },
- { "src": "assets/audio/vo5.wav", "anchor": "outro" }
- ]
-}
diff --git a/flipbooks/maya-romanoff/gen-rooms.py b/flipbooks/maya-romanoff/gen-rooms.py
deleted file mode 100644
index 2d3046b..0000000
--- a/flipbooks/maya-romanoff/gen-rooms.py
+++ /dev/null
@@ -1,49 +0,0 @@
-#!/usr/bin/env python3
-import json, time, urllib.request, pathlib
-ROOT = pathlib.Path(__file__).resolve().parent
-DATA = ROOT.parent.parent / "data" / "maya-romanoff.json"
-OUT = ROOT / "assets" / "roomgen"; OUT.mkdir(parents=True, exist_ok=True)
-VERSION = "5bdc2c7cd642ae33611d8c33f79615f98ff02509ab8db9d8ec1cc6c36d378fba"
-TOKEN = next(l.split("=",1)[1].strip() for l in (pathlib.Path.home()/"Projects/secrets-manager/.env").read_text().splitlines() if l.startswith("REPLICATE_API_TOKEN="))
-SCENES = {
- "beadwork": [("a glamorous residential bedroom","an upholstered headboard AND the feature wall behind the bed"),
- ("a boutique dressing room","an upholstered bench AND a full feature wall")],
- "marquetry": [("a refined study with warm lighting","a wood-veneer feature wall AND the front of a matching low console cabinet"),
- ("an elegant dining room","a wood-veneer accent wall AND the face of a sideboard credenza")],
- "metallic": [("a sophisticated living room at dusk","a shimmering feature wall AND the front panels of a console credenza"),
- ("a luxe hotel suite lounge","a metallic feature wall AND an upholstered accent chair")],
- "texture": [("a cozy, light-filled sitting room","an upholstered sofa AND the woven-texture wall behind it"),
- ("a warm bedroom nook","an upholstered bench AND a natural-fiber feature wall")],
-}
-def prompt_for(t, room, furn):
- return (f"Photorealistic interior design photograph of {room}. Take the supplied swatch — a luxury artisan "
- f"Maya Romanoff wallcovering material called '{t}' — and apply its EXACT texture, color and finish to "
- f"BOTH {furn}. Museum-quality craftsmanship, realistic materials, soft architectural lighting, editorial "
- f"design-magazine quality, shallow depth of field. No text, no logos, no watermark, no people.")
-def post(u,b):
- return json.load(urllib.request.urlopen(urllib.request.Request(u,data=json.dumps(b).encode(),headers={"Authorization":f"Bearer {TOKEN}","Content-Type":"application/json"}),timeout=60))
-def get(u):
- return json.load(urllib.request.urlopen(urllib.request.Request(u,headers={"Authorization":f"Bearer {TOKEN}"}),timeout=60))
-products = json.loads(DATA.read_text()); per={}; ok=0
-for i,p in enumerate(products):
- ch=p.get("chapter","beadwork"); idx=per.get(ch,0); per[ch]=idx+1
- room,furn=SCENES.get(ch,SCENES["beadwork"])[idx%2]
- dest=OUT/f"r{i}.jpg"
- if dest.exists() and dest.stat().st_size>20000: print(f"[{i:02d}] cached"); ok+=1; continue
- try:
- pred=post("https://api.replicate.com/v1/predictions",{"version":VERSION,"input":{"prompt":prompt_for(p["title"],room,furn),"image_input":[p["image"]],"aspect_ratio":"4:3","output_format":"jpg"}})
- u=pred["urls"]["get"]
- for _ in range(90):
- time.sleep(2); pred=get(u)
- if pred["status"] in ("succeeded","failed","canceled"): break
- if pred["status"]!="succeeded": print(f"[{i:02d}] FAIL {p['title']}: {pred.get('error') or pred['status']}"); continue
- out=pred["output"]; img=out[0] if isinstance(out,list) else out
- urllib.request.urlretrieve(img,dest); ok+=1
- print(f"[{i:02d}] ok {p['title'][:32]:32s} [{ch}]")
- except Exception as e:
- print(f"[{i:02d}] ERR {p['title']}: {e}")
-for i,p in enumerate(products):
- d=OUT/f"r{i}.jpg"
- if d.exists() and d.stat().st_size>20000: p["room"]=str(d); p["has_room"]=True
-DATA.write_text(json.dumps(products,indent=2))
-print(f"\nDONE {ok}/{len(products)}; est ${ok*0.039:.2f}")
diff --git a/flipbooks/maya-romanoff/index.html b/flipbooks/maya-romanoff/index.html
deleted file mode 100644
index 6305c1e..0000000
--- a/flipbooks/maya-romanoff/index.html
+++ /dev/null
@@ -1,552 +0,0 @@
-<!doctype html>
-<html lang="en" data-resolution="landscape">
-<head>
-<meta charset="UTF-8" />
-<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-<style>
- :root { --ink:#1c1a17; --cream:#f4efe6; --paper:#fbf8f1; --gold:#b08d57; }
- html,body { margin:0; padding:0; width:1920px; height:1080px; overflow:hidden;
- background:radial-gradient(120% 120% at 50% 0%, #2a2622 0%, #14110e 72%);
- font-family:"Helvetica Neue",system-ui,sans-serif; }
- #main-composition { position:relative; width:1920px; height:1080px; overflow:hidden; }
- .stage { position:absolute; inset:0; perspective:3000px; perspective-origin:50% 46%; }
-
- /* LEFT verso: brand + room + name */
- .verso { position:absolute; top:97px; left:192px; width:768px; height:886px;
- background:var(--paper); border-radius:8px 2px 2px 8px; overflow:hidden;
- box-shadow: inset -30px 0 46px rgba(0,0,0,.12), 0 34px 66px rgba(0,0,0,.5);
- display:flex; flex-direction:column; }
- .wordmark { flex:0 0 auto; text-align:center; padding:49px 0 27px; }
- .wordmark .wm { font-family:Georgia, serif; font-size:55px; color:var(--ink); letter-spacing:.02em; line-height:1; }
- .wordmark .wsub { margin-top:8px; font-size:18px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
- .wordmark .wr { width:64px; height:2px; background:var(--gold); margin:25px auto 0; }
- .roomstack { position:relative; flex:1 1 auto; margin:0 42px 42px; border-radius:4px; overflow:hidden; background:#e9e3d7; }
- .room { position:absolute; inset:0; opacity:0; }
- .room .rimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
- .room.fallback .rimg { transform:scale(1.4); filter:blur(3px) brightness(.82) saturate(1.05); }
- .room .rtint { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
- .room.fallback .rtint { background:linear-gradient(180deg, rgba(20,16,12,.30) 0%, rgba(20,16,12,.62) 100%); }
- .rcap { position:absolute; left:0; right:0; bottom:0; padding:38px 42px; color:#fff; }
- .rcap .rpat { font-family:Georgia, serif; font-size:48px; line-height:1.05; text-shadow:0 2px 14px rgba(0,0,0,.5); }
- .rcap .rcol { margin-top:8px; font-size:20px; letter-spacing:.2em; text-transform:uppercase; color:#e7d8bd; }
-
- /* RIGHT recto: page-turn stack of pattern swatches */
- .leaf { position:absolute; top:97px; left:960px; width:768px; height:886px;
- transform-origin:left center; transform-style:preserve-3d; will-change:transform; }
- .leaf .face { position:absolute; inset:0; backface-visibility:hidden; overflow:hidden; border-radius:2px 8px 8px 2px;
- background:var(--paper); box-shadow: 24px 28px 54px rgba(0,0,0,.42), inset 24px 0 42px rgba(0,0,0,.08); }
- .leaf .back { transform:rotateY(180deg); background:linear-gradient(90deg,#efe9dc,#fbf8f1 22%);
- box-shadow:-22px 28px 54px rgba(0,0,0,.36), inset -24px 0 42px rgba(0,0,0,.08); }
- .leaf .art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
- .leaf .shade { position:absolute; inset:0; opacity:0; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,0) 62%); }
-
- /* cover + outro cards */
- .card { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--cream); }
- .card .kicker { font-size:31px; letter-spacing:.44em; text-transform:uppercase; color:var(--gold); }
- .card .big { font-family:Georgia, serif; font-size:134px; line-height:1.0; margin:22px 60px; }
- .card .sub { font-size:35px; letter-spacing:.18em; text-transform:uppercase; color:#c9bfae; }
- .card .rule { width:120px; height:2px; background:var(--gold); margin:32px 0; }
- .card .url { margin-top:28px; font-size:31px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); }
-</style>
-</head>
-<body>
- <div id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="40.3">
-
- <div class="card" id="cover">
- <div class="kicker">Designer Wallcoverings presents</div>
- <div class="big">Maya Romanoff</div>
- <div class="rule"></div>
- <div class="sub">A Study in Materials</div>
- </div>
-
- <div class="stage" id="stage">
- <div class="verso">
- <div class="wordmark"><div class="wm">Designer Wallcoverings</div><div class="wsub">est. lookbook</div><div class="wr"></div></div>
- <div class="roomstack">
- <div class="room" id="room0">
- <img class="rimg" src="assets/room/r0.jpg" alt="Beadazzled Geode - Pearlie room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Beadazzled Geode - Pearlie</div><div class="rcol">Maya Romanoff · beadwork</div></div>
- </div>
- <div class="room" id="room1">
- <img class="rimg" src="assets/room/r1.jpg" alt="Beadazzled Leaf - Green Leaf room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Beadazzled Leaf - Green Leaf</div><div class="rcol">Maya Romanoff · beadwork</div></div>
- </div>
- <div class="room" id="room2">
- <img class="rimg" src="assets/room/r2.jpg" alt="Beadazzled Sparkle Geode - Blue Glacier room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Beadazzled Sparkle Geode - Blue Glacier</div><div class="rcol">Maya Romanoff · beadwork</div></div>
- </div>
- <div class="room" id="room3">
- <img class="rimg" src="assets/room/r3.jpg" alt="Beadazzled Bianca - White room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Beadazzled Bianca - White</div><div class="rcol">Maya Romanoff · beadwork</div></div>
- </div>
- <div class="room" id="room4">
- <img class="rimg" src="assets/room/r4.jpg" alt="Beadazzled Metallic Taupe - Beige room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Beadazzled Metallic Taupe - Beige</div><div class="rcol">Maya Romanoff · beadwork</div></div>
- </div>
- <div class="room" id="room5">
- <img class="rimg" src="assets/room/r5.jpg" alt="Beadazzled Scotch 'N Soda - White room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Beadazzled Scotch 'N Soda - White</div><div class="rcol">Maya Romanoff · beadwork</div></div>
- </div>
- <div class="room" id="room6">
- <img class="rimg" src="assets/room/r6.jpg" alt="Ajiro Chevron Driftwood - Beige room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Ajiro Chevron Driftwood - Beige</div><div class="rcol">Maya Romanoff · marquetry</div></div>
- </div>
- <div class="room" id="room7">
- <img class="rimg" src="assets/room/r7.jpg" alt="Ajiro Coffers - Silver Birch Luster room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Ajiro Coffers - Silver Birch Luster</div><div class="rcol">Maya Romanoff · marquetry</div></div>
- </div>
- <div class="room" id="room8">
- <img class="rimg" src="assets/room/r8.jpg" alt="Ajiro Houndstooth Ebony Luster - Dark Gray room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Ajiro Houndstooth Ebony Luster - Dark Gray</div><div class="rcol">Maya Romanoff · marquetry</div></div>
- </div>
- <div class="room" id="room9">
- <img class="rimg" src="assets/room/r9.jpg" alt="Ajiro Sunburst Teak - Beige room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Ajiro Sunburst Teak - Beige</div><div class="rcol">Maya Romanoff · marquetry</div></div>
- </div>
- <div class="room" id="room10">
- <img class="rimg" src="assets/room/r10.jpg" alt="Ajiro Fanfare Chestnut - Medium Brown room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Ajiro Fanfare Chestnut - Medium Brown</div><div class="rcol">Maya Romanoff · marquetry</div></div>
- </div>
- <div class="room" id="room11">
- <img class="rimg" src="assets/room/r11.jpg" alt="Ajiro Vineyard Maple - Pale Beige room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Ajiro Vineyard Maple - Pale Beige</div><div class="rcol">Maya Romanoff · marquetry</div></div>
- </div>
- <div class="room" id="room12">
- <img class="rimg" src="assets/room/r12.jpg" alt="Grand Scale Ajiro Chevron - Silver Birch Luster room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Grand Scale Ajiro Chevron - Silver Birch Luster</div><div class="rcol">Maya Romanoff · metallic</div></div>
- </div>
- <div class="room" id="room13">
- <img class="rimg" src="assets/room/r13.jpg" alt="Bravado - Gunmetal room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Bravado - Gunmetal</div><div class="rcol">Maya Romanoff · metallic</div></div>
- </div>
- <div class="room" id="room14">
- <img class="rimg" src="assets/room/r14.jpg" alt="Conduit - Forged Frost room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Conduit - Forged Frost</div><div class="rcol">Maya Romanoff · metallic</div></div>
- </div>
- <div class="room" id="room15">
- <img class="rimg" src="assets/room/r15.jpg" alt="Beadazzled Pearlie - Off-White room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Beadazzled Pearlie - Off-White</div><div class="rcol">Maya Romanoff · metallic</div></div>
- </div>
- <div class="room" id="room16">
- <img class="rimg" src="assets/room/r16.jpg" alt="Ajiro Plank - Silver Birch Luster room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Ajiro Plank - Silver Birch Luster</div><div class="rcol">Maya Romanoff · metallic</div></div>
- </div>
- <div class="room" id="room17">
- <img class="rimg" src="assets/room/r17.jpg" alt="Ajiro Sunburst Polished Silver Birch Luster - Silver room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Ajiro Sunburst Polished Silver Birch Luster - Silver</div><div class="rcol">Maya Romanoff · metallic</div></div>
- </div>
- <div class="room" id="room18">
- <img class="rimg" src="assets/room/r18.jpg" alt="Braided Hemp Resilience - Beige room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Braided Hemp Resilience - Beige</div><div class="rcol">Maya Romanoff · texture</div></div>
- </div>
- <div class="room" id="room19">
- <img class="rimg" src="assets/room/r19.jpg" alt="Braided Hemp Stability - Black room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Braided Hemp Stability - Black</div><div class="rcol">Maya Romanoff · texture</div></div>
- </div>
- <div class="room" id="room20">
- <img class="rimg" src="assets/room/r20.jpg" alt="Braided Hemp Determination - Terracotta room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Braided Hemp Determination - Terracotta</div><div class="rcol">Maya Romanoff · texture</div></div>
- </div>
- <div class="room" id="room21">
- <img class="rimg" src="assets/room/r21.jpg" alt="Blanket Yarn & Stitch - Heathered Grey / Grey room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Blanket Yarn & Stitch - Heathered Grey / Grey</div><div class="rcol">Maya Romanoff · texture</div></div>
- </div>
- <div class="room" id="room22">
- <img class="rimg" src="assets/room/r22.jpg" alt="Blanket Zig Zag by David Rockwell - Heathered Grey / Dove room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Blanket Zig Zag by David Rockwell - Heathered Grey / Dove</div><div class="rcol">Maya Romanoff · texture</div></div>
- </div>
- <div class="room" id="room23">
- <img class="rimg" src="assets/room/r23.jpg" alt="Braided Hemp Tranquility - Charcoal Gray room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Braided Hemp Tranquility - Charcoal Gray</div><div class="rcol">Maya Romanoff · texture</div></div>
- </div>
- </div>
- </div>
-
- <div class="leaf" id="leaf0">
- <div class="face front"><img class="art" src="assets/img/p0.jpg" alt="Beadazzled Geode - Pearlie" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf1">
- <div class="face front"><img class="art" src="assets/img/p1.jpg" alt="Beadazzled Leaf - Green Leaf" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf2">
- <div class="face front"><img class="art" src="assets/img/p2.jpg" alt="Beadazzled Sparkle Geode - Blue Glacier" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf3">
- <div class="face front"><img class="art" src="assets/img/p3.jpg" alt="Beadazzled Bianca - White" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf4">
- <div class="face front"><img class="art" src="assets/img/p4.jpg" alt="Beadazzled Metallic Taupe - Beige" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf5">
- <div class="face front"><img class="art" src="assets/img/p5.jpg" alt="Beadazzled Scotch 'N Soda - White" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf6">
- <div class="face front"><img class="art" src="assets/img/p6.jpg" alt="Ajiro Chevron Driftwood - Beige" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf7">
- <div class="face front"><img class="art" src="assets/img/p7.jpg" alt="Ajiro Coffers - Silver Birch Luster" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf8">
- <div class="face front"><img class="art" src="assets/img/p8.jpg" alt="Ajiro Houndstooth Ebony Luster - Dark Gray" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf9">
- <div class="face front"><img class="art" src="assets/img/p9.jpg" alt="Ajiro Sunburst Teak - Beige" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf10">
- <div class="face front"><img class="art" src="assets/img/p10.jpg" alt="Ajiro Fanfare Chestnut - Medium Brown" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf11">
- <div class="face front"><img class="art" src="assets/img/p11.jpg" alt="Ajiro Vineyard Maple - Pale Beige" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf12">
- <div class="face front"><img class="art" src="assets/img/p12.jpg" alt="Grand Scale Ajiro Chevron - Silver Birch Luster" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf13">
- <div class="face front"><img class="art" src="assets/img/p13.jpg" alt="Bravado - Gunmetal" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf14">
- <div class="face front"><img class="art" src="assets/img/p14.jpg" alt="Conduit - Forged Frost" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf15">
- <div class="face front"><img class="art" src="assets/img/p15.jpg" alt="Beadazzled Pearlie - Off-White" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf16">
- <div class="face front"><img class="art" src="assets/img/p16.jpg" alt="Ajiro Plank - Silver Birch Luster" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf17">
- <div class="face front"><img class="art" src="assets/img/p17.jpg" alt="Ajiro Sunburst Polished Silver Birch Luster - Silver" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf18">
- <div class="face front"><img class="art" src="assets/img/p18.jpg" alt="Braided Hemp Resilience - Beige" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf19">
- <div class="face front"><img class="art" src="assets/img/p19.jpg" alt="Braided Hemp Stability - Black" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf20">
- <div class="face front"><img class="art" src="assets/img/p20.jpg" alt="Braided Hemp Determination - Terracotta" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf21">
- <div class="face front"><img class="art" src="assets/img/p21.jpg" alt="Blanket Yarn & Stitch - Heathered Grey / Grey" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf22">
- <div class="face front"><img class="art" src="assets/img/p22.jpg" alt="Blanket Zig Zag by David Rockwell - Heathered Grey / Dove" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- <div class="leaf" id="leaf23">
- <div class="face front"><img class="art" src="assets/img/p23.jpg" alt="Braided Hemp Tranquility - Charcoal Gray" /><div class="shade"></div></div>
- <div class="face back"></div>
- </div>
- </div>
-
- <div class="card" id="outro">
- <div class="kicker">Shop the collection</div>
- <div class="big">Maya Romanoff</div>
- <div class="url">designerwallcoverings.com</div>
- </div>
-
- <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="40.3" data-track-index="20" data-volume="0.18"></audio>
- <audio id="vo0" src="assets/audio/vo1.wav" data-start="2.4" data-track-index="21" data-volume="1"></audio>
- <audio id="vo1" src="assets/audio/vo2.wav" data-start="8.9" data-track-index="22" data-volume="1"></audio>
- <audio id="vo2" src="assets/audio/vo3.wav" data-start="16.1" data-track-index="23" data-volume="1"></audio>
- <audio id="vo3" src="assets/audio/vo4.wav" data-start="23.3" data-track-index="24" data-volume="1"></audio>
- <audio id="vo4" src="assets/audio/vo5.wav" data-start="33.45" data-track-index="25" data-volume="1"></audio>
-
- <script>
- window.__timelines = window.__timelines || {};
- const tl = gsap.timeline({ paused: true });
-
- gsap.set("#leaf0", { rotateY:0, zIndex:24 });
- gsap.set("#leaf1", { rotateY:0, zIndex:23 });
- gsap.set("#leaf2", { rotateY:0, zIndex:22 });
- gsap.set("#leaf3", { rotateY:0, zIndex:21 });
- gsap.set("#leaf4", { rotateY:0, zIndex:20 });
- gsap.set("#leaf5", { rotateY:0, zIndex:19 });
- gsap.set("#leaf6", { rotateY:0, zIndex:18 });
- gsap.set("#leaf7", { rotateY:0, zIndex:17 });
- gsap.set("#leaf8", { rotateY:0, zIndex:16 });
- gsap.set("#leaf9", { rotateY:0, zIndex:15 });
- gsap.set("#leaf10", { rotateY:0, zIndex:14 });
- gsap.set("#leaf11", { rotateY:0, zIndex:13 });
- gsap.set("#leaf12", { rotateY:0, zIndex:12 });
- gsap.set("#leaf13", { rotateY:0, zIndex:11 });
- gsap.set("#leaf14", { rotateY:0, zIndex:10 });
- gsap.set("#leaf15", { rotateY:0, zIndex:9 });
- gsap.set("#leaf16", { rotateY:0, zIndex:8 });
- gsap.set("#leaf17", { rotateY:0, zIndex:7 });
- gsap.set("#leaf18", { rotateY:0, zIndex:6 });
- gsap.set("#leaf19", { rotateY:0, zIndex:5 });
- gsap.set("#leaf20", { rotateY:0, zIndex:4 });
- gsap.set("#leaf21", { rotateY:0, zIndex:3 });
- gsap.set("#leaf22", { rotateY:0, zIndex:2 });
- gsap.set("#leaf23", { 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("#stage", { opacity: 0 });
- gsap.set("#outro", { opacity: 0 }); gsap.set("#outro .big", { y: 34, opacity: 0 }); gsap.set("#outro .url", { opacity: 0 });
- gsap.set("#cover .big", { y: 40, opacity: 0 }); gsap.set("#cover .kicker,#cover .sub,#cover .rule", { opacity: 0 });
-
- // cover
- tl.to("#cover .kicker", { opacity:1, duration:0.5 }, 0.2);
- tl.to("#cover .big", { opacity:1, y:0, duration:0.8, ease:"power3.out" }, 0.4);
- tl.to("#cover .rule,#cover .sub", { opacity:1, duration:0.5 }, 1.0);
- tl.to("#cover", { opacity:0, duration:0.5, ease:"power1.in" }, 1.70);
- tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, 1.70);
-
- // page turns + room crossfades
-
- tl.to("#leaf0", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 2.9);
- tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 2.9);
- tl.to("#leaf0 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 3.2);
- tl.set("#leaf0", { zIndex: 1000 }, 3.2);
- tl.set("#leaf0", { opacity: 0 }, 3.500);
- tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 3.2);
- tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 3.2);
- tl.to("#leaf1", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 4.1);
- tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 4.1);
- tl.to("#leaf1 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 4.4);
- tl.set("#leaf1", { zIndex: 1001 }, 4.4);
- tl.set("#leaf1", { opacity: 0 }, 4.700);
- tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 4.4);
- tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 4.4);
- tl.to("#leaf2", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 5.3);
- tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 5.3);
- tl.to("#leaf2 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 5.6);
- tl.set("#leaf2", { zIndex: 1002 }, 5.6);
- tl.set("#leaf2", { opacity: 0 }, 5.900);
- tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 5.6);
- tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 5.6);
- tl.to("#leaf3", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 6.5);
- tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 6.5);
- tl.to("#leaf3 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 6.8);
- tl.set("#leaf3", { zIndex: 1003 }, 6.8);
- tl.set("#leaf3", { opacity: 0 }, 7.100);
- tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 6.8);
- tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 6.8);
- tl.to("#leaf4", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 7.7);
- tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 7.7);
- tl.to("#leaf4 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 8);
- tl.set("#leaf4", { zIndex: 1004 }, 8);
- tl.set("#leaf4", { opacity: 0 }, 8.300);
- tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 8);
- tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 8);
- tl.to("#leaf5", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 8.9);
- tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 8.9);
- tl.to("#leaf5 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 9.2);
- tl.set("#leaf5", { zIndex: 1005 }, 9.2);
- tl.set("#leaf5", { opacity: 0 }, 9.500);
- tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 9.2);
- tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 9.2);
- tl.to("#leaf6", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 10.1);
- tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 10.1);
- tl.to("#leaf6 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 10.4);
- tl.set("#leaf6", { zIndex: 1006 }, 10.4);
- tl.set("#leaf6", { opacity: 0 }, 10.700);
- tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 10.4);
- tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 10.4);
- tl.to("#leaf7", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 11.3);
- tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 11.3);
- tl.to("#leaf7 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 11.6);
- tl.set("#leaf7", { zIndex: 1007 }, 11.6);
- tl.set("#leaf7", { opacity: 0 }, 11.900);
- tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 11.6);
- tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 11.6);
- tl.to("#leaf8", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 12.5);
- tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 12.5);
- tl.to("#leaf8 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 12.8);
- tl.set("#leaf8", { zIndex: 1008 }, 12.8);
- tl.set("#leaf8", { opacity: 0 }, 13.100);
- tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 12.8);
- tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 12.8);
- tl.to("#leaf9", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 13.7);
- tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 13.7);
- tl.to("#leaf9 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 14);
- tl.set("#leaf9", { zIndex: 1009 }, 14);
- tl.set("#leaf9", { opacity: 0 }, 14.300);
- tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14);
- tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14);
- tl.to("#leaf10", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 14.9);
- tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 14.9);
- tl.to("#leaf10 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 15.2);
- tl.set("#leaf10", { zIndex: 1010 }, 15.2);
- tl.set("#leaf10", { opacity: 0 }, 15.500);
- tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 15.2);
- tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 15.2);
- tl.to("#leaf11", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 16.1);
- tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 16.1);
- tl.to("#leaf11 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 16.4);
- tl.set("#leaf11", { zIndex: 1011 }, 16.4);
- tl.set("#leaf11", { opacity: 0 }, 16.700);
- tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 16.4);
- tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 16.4);
- tl.to("#leaf12", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 17.3);
- tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 17.3);
- tl.to("#leaf12 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 17.6);
- tl.set("#leaf12", { zIndex: 1012 }, 17.6);
- tl.set("#leaf12", { opacity: 0 }, 17.900);
- tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17.6);
- tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17.6);
- tl.to("#leaf13", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 18.5);
- tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 18.5);
- tl.to("#leaf13 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 18.8);
- tl.set("#leaf13", { zIndex: 1013 }, 18.8);
- tl.set("#leaf13", { opacity: 0 }, 19.100);
- tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 18.8);
- tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 18.8);
- tl.to("#leaf14", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 19.7);
- tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 19.7);
- tl.to("#leaf14 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 20);
- tl.set("#leaf14", { zIndex: 1014 }, 20);
- tl.set("#leaf14", { opacity: 0 }, 20.300);
- tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20);
- tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20);
- tl.to("#leaf15", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 20.9);
- tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 20.9);
- tl.to("#leaf15 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 21.2);
- tl.set("#leaf15", { zIndex: 1015 }, 21.2);
- tl.set("#leaf15", { opacity: 0 }, 21.500);
- tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 21.2);
- tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 21.2);
- tl.to("#leaf16", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 22.1);
- tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 22.1);
- tl.to("#leaf16 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 22.4);
- tl.set("#leaf16", { zIndex: 1016 }, 22.4);
- tl.set("#leaf16", { opacity: 0 }, 22.700);
- tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 22.4);
- tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 22.4);
- tl.to("#leaf17", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 23.3);
- tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 23.3);
- tl.to("#leaf17 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 23.6);
- tl.set("#leaf17", { zIndex: 1017 }, 23.6);
- tl.set("#leaf17", { opacity: 0 }, 23.900);
- tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23.6);
- tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23.6);
- tl.to("#leaf18", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 24.5);
- tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 24.5);
- tl.to("#leaf18 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 24.8);
- tl.set("#leaf18", { zIndex: 1018 }, 24.8);
- tl.set("#leaf18", { opacity: 0 }, 25.100);
- tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 24.8);
- tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 24.8);
- tl.to("#leaf19", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 25.7);
- tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 25.7);
- tl.to("#leaf19 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 26);
- tl.set("#leaf19", { zIndex: 1019 }, 26);
- tl.set("#leaf19", { opacity: 0 }, 26.300);
- tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 26);
- tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 26);
- tl.to("#leaf20", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 26.9);
- tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 26.9);
- tl.to("#leaf20 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 27.2);
- tl.set("#leaf20", { zIndex: 1020 }, 27.2);
- tl.set("#leaf20", { opacity: 0 }, 27.500);
- tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 27.2);
- tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 27.2);
- tl.to("#leaf21", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 28.1);
- tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 28.1);
- tl.to("#leaf21 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 28.4);
- tl.set("#leaf21", { zIndex: 1021 }, 28.4);
- tl.set("#leaf21", { opacity: 0 }, 28.700);
- tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 28.4);
- tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 28.4);
- tl.to("#leaf22", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 29.3);
- tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 29.3);
- tl.to("#leaf22 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 29.6);
- tl.set("#leaf22", { zIndex: 1022 }, 29.6);
- tl.set("#leaf22", { opacity: 0 }, 29.900);
- tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 29.6);
- tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 29.6);
- tl.to("#leaf23 .art", { scale: 1.05, duration: 3.20, ease:"power1.out" }, 30.5);
- tl.to("#room23 .rimg", { scale: 1.06, duration: 3.20, ease:"power1.out" }, 30.5);
-
- // outro
- tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 33.30);
- tl.to("#outro", { opacity:1, duration:0.5 }, 33.50);
- tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 33.70);
- tl.to("#outro .url", { opacity:1, duration:0.5 }, 34.20);
-
- gsap.set("#bgm", { volume: 0.18 });
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 2.10);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 5.00);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 8.60);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 11.50);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 15.80);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 18.70);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 23.00);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 25.90);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 33.15);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 36.05);
- tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 39.20);
-
- window.__timelines["flipbook"] = tl;
- </script>
- </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/flipbooks/maya-romanoff/lines.txt b/flipbooks/maya-romanoff/lines.txt
deleted file mode 100644
index 1f6d574..0000000
--- a/flipbooks/maya-romanoff/lines.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-Maya Romanoff — the artisan house that turns raw material into luxury wallcovering. We begin with Beadazzled: thousands of glass beads, hand-applied, catching the light.
-Then Ajiro — real wood veneer, cut and inlaid like marquetry, in chevrons, sunbursts, and coffers.
-In metallic luster — silver birch, gunmetal, and polished silver that shift with the light of the room.
-And in natural fiber — braided hemp and hand-stitched yarn, woven for warmth and depth.
-Maya Romanoff, from Designer Wallcoverings. Handmade materials, made to live on your walls. Explore the collection.
diff --git a/majilite-jewelry/majilite-attache-rose-gold/1.png b/majilite-jewelry/majilite-attache-rose-gold/1.png
deleted file mode 100644
index 96902a7..0000000
Binary files a/majilite-jewelry/majilite-attache-rose-gold/1.png and /dev/null differ
diff --git a/majilite-jewelry/majilite-burnished-metal-mercury/1.png b/majilite-jewelry/majilite-burnished-metal-mercury/1.png
deleted file mode 100644
index c86a230..0000000
Binary files a/majilite-jewelry/majilite-burnished-metal-mercury/1.png and /dev/null differ
diff --git a/majilite-jewelry/majilite-charm-antique-gold/1.png b/majilite-jewelry/majilite-charm-antique-gold/1.png
deleted file mode 100644
index 59511f3..0000000
Binary files a/majilite-jewelry/majilite-charm-antique-gold/1.png and /dev/null differ
diff --git a/majilite-jewelry/majilite-charm-metallic-taupe/1.png b/majilite-jewelry/majilite-charm-metallic-taupe/1.png
deleted file mode 100644
index ad7f505..0000000
Binary files a/majilite-jewelry/majilite-charm-metallic-taupe/1.png and /dev/null differ
diff --git a/majilite-jewelry/majilite-eclipse-fx-metallic-taupe/1.png b/majilite-jewelry/majilite-eclipse-fx-metallic-taupe/1.png
deleted file mode 100644
index a0a68b9..0000000
Binary files a/majilite-jewelry/majilite-eclipse-fx-metallic-taupe/1.png and /dev/null differ
diff --git a/majilite-jewelry/majilite-finesse-pearl-pewter/1.png b/majilite-jewelry/majilite-finesse-pearl-pewter/1.png
deleted file mode 100644
index 1446b8f..0000000
Binary files a/majilite-jewelry/majilite-finesse-pearl-pewter/1.png and /dev/null differ
diff --git a/majilite-jewelry/majilite-finesse-pearl-platinum/1.png b/majilite-jewelry/majilite-finesse-pearl-platinum/1.png
deleted file mode 100644
index ea4a74e..0000000
Binary files a/majilite-jewelry/majilite-finesse-pearl-platinum/1.png and /dev/null differ
diff --git a/majilite-jewelry/majilite-hammered-metal-midnight/1.png b/majilite-jewelry/majilite-hammered-metal-midnight/1.png
deleted file mode 100644
index 538b754..0000000
Binary files a/majilite-jewelry/majilite-hammered-metal-midnight/1.png and /dev/null differ
diff --git a/majilite-jewelry/majilite-infinity-grey/1.png b/majilite-jewelry/majilite-infinity-grey/1.png
deleted file mode 100644
index a1246a4..0000000
Binary files a/majilite-jewelry/majilite-infinity-grey/1.png and /dev/null differ
diff --git a/majilite-jewelry/majilite-metallic-paragon-slate/1.png b/majilite-jewelry/majilite-metallic-paragon-slate/1.png
deleted file mode 100644
index 3e09f10..0000000
Binary files a/majilite-jewelry/majilite-metallic-paragon-slate/1.png and /dev/null differ
diff --git a/majilite-jewelry/majilite-nuance-pewter/1.png b/majilite-jewelry/majilite-nuance-pewter/1.png
deleted file mode 100644
index f49c357..0000000
Binary files a/majilite-jewelry/majilite-nuance-pewter/1.png and /dev/null differ
diff --git a/majilite-jewelry/majilite-shimmer-pewter/1.png b/majilite-jewelry/majilite-shimmer-pewter/1.png
deleted file mode 100644
index c21c1df..0000000
Binary files a/majilite-jewelry/majilite-shimmer-pewter/1.png and /dev/null differ
diff --git a/majilite-jewelry/majilite-shimmer-slate/1.png b/majilite-jewelry/majilite-shimmer-slate/1.png
deleted file mode 100644
index 7d4a90a..0000000
Binary files a/majilite-jewelry/majilite-shimmer-slate/1.png and /dev/null differ
diff --git a/majilite-jewelry/majilite-stature-gold/1.png b/majilite-jewelry/majilite-stature-gold/1.png
deleted file mode 100644
index e57a463..0000000
Binary files a/majilite-jewelry/majilite-stature-gold/1.png and /dev/null differ
diff --git a/majilite-jewelry/majilite-stature-rose-gold/1.png b/majilite-jewelry/majilite-stature-rose-gold/1.png
deleted file mode 100644
index a5ac673..0000000
Binary files a/majilite-jewelry/majilite-stature-rose-gold/1.png and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/.hyperframes/caption-skin.html b/videos/dw-new-arrivals-reveal/.hyperframes/caption-skin.html
deleted file mode 100644
index 135fa97..0000000
--- a/videos/dw-new-arrivals-reveal/.hyperframes/caption-skin.html
+++ /dev/null
@@ -1,222 +0,0 @@
-<!--
- Cartesian — caption skin (preset-local source).
-
- This is the preset's own lower-third karaoke caption look. product-launch-video's
- Step 2 copies it into the project as caption-skin.html; captions.mjs then fills the
- three reserved holes, wraps the fragment in a <template>, and writes
- compositions/captions.html:
- · the empty GROUPS array → the engine's scene-aware word groups
- · the 0 duration + 0 width/height → real total + canvas size
- · the empty data-brand-tokens style → :root tokens derived from the project's frame.md
-
- Token contract — reference ONLY this fixed vocab (captions.mjs injects it from
- frame.md, so the Step-2 brand overlay flows through; each var has a cartesian literal
- fallback for standalone preview):
- --cap-ink · --cap-canvas · --cap-accent · --cap-accent-2 · --font-display ·
- --font-body · --cap-band-top · --cap-band-height
- Hooks (do not rename): .caption-group / .caption-word + states .is-active / .is-spoken,
- root data-composition-id="captions", timeline at window.__timelines["captions"].
- State changes use gsap.set({className}) (applied on the engine's frame-by-frame seek);
- never tl.call() callbacks (seek does not fire them → wrong state on render).
-
- Visual: a museum-catalog lower-third — a warm-stone card on a single 1px taupe
- hairline border (cartesian's universal structural device), SHARP corners, ZERO
- shadow, ZERO fill beyond the stone canvas. Playfair Display 400, sentence case, ink
- glyphs. Upcoming words sit in faint ink; the current word is marked QUIETLY — a faint
- stone wash with a 1px taupe hairline underline (restraint, not a loud block); spoken
- words settle to solid ink, the wash and underline cleared.
--->
-<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-
-<!-- captions.mjs injects the project's :root tokens here -->
-<style data-brand-tokens></style>
-
-<style>
- #captions-root {
- position: absolute;
- inset: 0;
- pointer-events: none;
- }
- .caption-layer {
- position: absolute;
- inset: 0;
- z-index: 20;
- pointer-events: none;
- }
- /* the keep-out band, from captionBand(H) — frame content stays above it */
- .caption-stage {
- position: absolute;
- left: 0;
- right: 0;
- top: var(--cap-band-top, 900px);
- height: var(--cap-band-height, 180px);
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .caption-group {
- /* every group is absolutely stacked over the SAME band — exactly one shown at a
- time via opacity. Must be absolute: in-flow groups would lay out side-by-side. */
- position: absolute;
- inset: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- opacity: 0;
- }
-
- /* THE stone card — single 1px taupe hairline border (cartesian's universal
- structural device), SHARP corners, ZERO shadow, ZERO fill beyond the stone canvas */
- .caption-pill {
- max-width: 78%;
- padding: 20px 44px 24px;
- background: var(--cap-canvas, #ede8e0);
- border: 1px solid var(--cap-accent-2, #b8b0a4);
- border-radius: 0;
- }
- .caption-line {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- gap: 0.1em 0.34em;
- font-family: var(--font-display, "Playfair Display"), Georgia, serif;
- font-weight: 400;
- font-size: clamp(40px, 4.4vw, 58px);
- line-height: 1.16;
- letter-spacing: -0.01em;
- }
-
- /* upcoming — faint ink, no mark */
- .caption-word {
- display: inline-block;
- padding: 0 0.06em;
- border-bottom: 1px solid transparent;
- color: color-mix(in srgb, var(--cap-ink, #1a1a1a) 42%, var(--cap-canvas, #ede8e0));
- }
- /* current word — a QUIET marker: a faint warm-stone wash behind solid ink, plus a
- 1px taupe hairline underline (restraint, not a loud block; SHARP, NO shadow) */
- .caption-word.is-active {
- color: var(--cap-ink, #1a1a1a);
- background: color-mix(in srgb, var(--cap-accent, #8a8178) 18%, var(--cap-canvas, #ede8e0));
- border-bottom: 1px solid var(--cap-accent, #8a8178);
- }
- /* already spoken — solid ink, wash + underline cleared */
- .caption-word.is-spoken {
- color: var(--cap-ink, #1a1a1a);
- background: transparent;
- border-bottom: 1px solid transparent;
- }
-
- /* optional per-word accents (dormant until a word-classer tags them) */
- /* brand / key term — Playfair Display italic, cartesian's only display inflection */
- .caption-word.cap-brand {
- font-style: italic;
- }
- /* numerals / data — the body sans voice, slightly recessed */
- .caption-word.cap-num {
- font-family: var(--font-body, "Inter"), ui-sans-serif, sans-serif;
- color: color-mix(in srgb, var(--cap-ink, #1a1a1a) 72%, var(--cap-canvas, #ede8e0));
- }
- /* emphasis — a 1px taupe hairline underline (no second color; stone-and-ink only) */
- .caption-word.cap-cta {
- text-decoration: underline;
- text-decoration-thickness: 1px;
- text-decoration-color: var(--cap-accent, #8a8178);
- text-underline-offset: 0.12em;
- }
-
- @media (max-aspect-ratio: 9/16) {
- .caption-pill {
- max-width: 92%;
- }
- .caption-line {
- font-size: clamp(34px, 5.4vw, 48px);
- }
- }
-</style>
-
-<div
- id="captions-root"
- data-composition-id="captions"
- data-timeline-locked
- data-start="0"
- data-duration="0"
- data-fps="30"
- data-width="0"
- data-height="0"
->
- <div class="caption-layer" aria-hidden="true">
- <div id="caption-stage" class="caption-stage"></div>
- </div>
-</div>
-
-<script>
- // captions.mjs injects the engine's scene-aware groups + real duration here.
- var GROUPS = [];
- var DURATION = 0;
-
- (function () {
- var stage = document.getElementById("caption-stage");
-
- // build DOM: one .caption-group per group, .caption-word per word
- GROUPS.forEach(function (group, g) {
- var groupEl = document.createElement("div");
- groupEl.className = "caption-group";
- groupEl.id = "caption-group-" + g;
- var pill = document.createElement("div");
- pill.className = "caption-pill";
- var line = document.createElement("div");
- line.className = "caption-line";
- (group.words || []).forEach(function (w, i) {
- var span = document.createElement("span");
- span.className = "caption-word";
- span.id = "caption-word-" + g + "-" + i;
- span.textContent = String(w.text);
- line.appendChild(span);
- });
- pill.appendChild(line);
- groupEl.appendChild(pill);
- stage.appendChild(groupEl);
- });
-
- window.__timelines = window.__timelines || {};
- var tl = gsap.timeline({ paused: true });
-
- GROUPS.forEach(function (group, g) {
- var groupEl = document.getElementById("caption-group-" + g);
- var words = group.words || [];
- var next = GROUPS[g + 1];
- var isLast = g === GROUPS.length - 1;
- var start = Math.max(0, Number(group.start));
- var end = isLast ? DURATION : Math.min(Number(next.start), Number(group.end) + 0.3);
- if (end <= start) end = start + 0.01;
-
- // group on/off — exactly one group visible at a time
- tl.set(groupEl, { opacity: 1 }, start);
- tl.set(groupEl, { opacity: 0 }, end);
-
- // 3-state karaoke via className SETS — seek-safe (gsap.set applies on the
- // engine's frame-by-frame seek; .call callbacks would NOT fire).
- words.forEach(function (w, i) {
- var el = document.getElementById("caption-word-" + g + "-" + i);
- var at = Math.max(start, Number(w.start));
- tl.set(el, { className: "caption-word" }, start); // upcoming (also resets on reverse-seek)
- tl.set(el, { className: "caption-word is-active" }, at); // current
- tl.fromTo(el, { scale: 0.985 }, { scale: 1, duration: 0.2, ease: "power1.out" }, at);
- if (i + 1 < words.length) {
- var nextAt = Math.max(start, Number(words[i + 1].start));
- tl.set(el, { className: "caption-word is-spoken" }, nextAt); // demote when next activates
- }
- });
- if (words.length) {
- var lastEl = document.getElementById("caption-word-" + g + "-" + (words.length - 1));
- var lastSpoken = Math.min(end, Number(words[words.length - 1].end) + 0.1);
- tl.set(lastEl, { className: "caption-word is-spoken" }, lastSpoken);
- }
- });
-
- // full-span anchor so the sub-comp timeline spans the whole video
- tl.to({}, { duration: DURATION }, 0);
- window.__timelines["captions"] = tl;
- })();
-</script>
diff --git a/videos/dw-new-arrivals-reveal/.media/preferences.json b/videos/dw-new-arrivals-reveal/.media/preferences.json
deleted file mode 100644
index 34e7511..0000000
--- a/videos/dw-new-arrivals-reveal/.media/preferences.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
- "version": 1,
- "preferences": {
- "destination": {
- "value": "instagram-reels",
- "confirmed_in": [
- "dw-new-arrivals-reveal"
- ],
- "updated_at": "2026-07-17T14:51:58.459Z"
- },
- "aspect": {
- "value": "1080x1920",
- "confirmed_in": [
- "dw-new-arrivals-reveal"
- ],
- "updated_at": "2026-07-17T14:51:58.500Z"
- },
- "language": {
- "value": "en",
- "confirmed_in": [
- "dw-new-arrivals-reveal"
- ],
- "updated_at": "2026-07-17T14:51:58.538Z"
- },
- "flow": {
- "value": "automation",
- "confirmed_in": [
- "dw-new-arrivals-reveal"
- ],
- "updated_at": "2026-07-17T14:51:58.574Z"
- },
- "storyboard": {
- "value": "no",
- "confirmed_in": [
- "dw-new-arrivals-reveal"
- ],
- "updated_at": "2026-07-17T14:51:58.612Z"
- },
- "style_preset.product-launch-video": {
- "value": "cartesian",
- "confirmed_in": [
- "dw-new-arrivals-reveal"
- ],
- "updated_at": "2026-07-17T14:51:58.651Z"
- }
- },
- "sightings": {}
-}
diff --git a/videos/dw-new-arrivals-reveal/AGENTS.md b/videos/dw-new-arrivals-reveal/AGENTS.md
deleted file mode 100644
index a63562c..0000000
--- a/videos/dw-new-arrivals-reveal/AGENTS.md
+++ /dev/null
@@ -1,93 +0,0 @@
-# HyperFrames Composition Project
-
-## Skills — USE THESE FIRST
-
-**Always invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that are NOT in generic web docs. Skipping them produces broken compositions.
-
-**Doing anything with HyperFrames?** Start at `/hyperframes` — it tells you what HyperFrames can do and which skill or workflow handles your intent (make a video, TTS / BGM, prep footage, author / animate, render, install blocks), confirms your brief up front (the intent layer), and routes every "make me a…" request (a video, a deck, a composition port) to the right workflow. Read it first, especially when there's no project context to orient you. The workflows it routes to:
-
-- `/product-launch-video` — any **website** URL or brief / script → a product launch / SaaS / promo video, or a site tour / showcase featuring the site's own captured visuals.
-- `/faceless-explainer` — arbitrary text (topic / article / notes), **no URL, no website capture** → 60-90s faceless explainer.
-- `/embedded-captions` — an existing talking-head video (MP4) → the same footage with captions / subtitles added (rail + embed, or pure-cinematic embed); the footage itself is untouched.
-- `/talking-head-recut` — an existing talking-head / interview / podcast video (MP4) → the same footage **packaged with designed graphic overlays** (kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, pip) synced to the transcript; the clip plays unchanged underneath. (Plain captions/subtitles → `/embedded-captions`.)
-- `/pr-to-video` — a GitHub PR (URL / `owner/repo#N` / "this PR") → 30-90s code-change explainer (changelog / feature reveal / fix / refactor).
-- `/motion-graphics` — a short (typically under 10s) design-led **motion graphic**, motion-is-the-message, no narration: kinetic type, a stat / number count-up, a chart, a logo sting, a lower-third / overlay, or an animated tweet / headline / captured-page highlight; rendered to MP4 or a transparent overlay. Longer / narrated / custom → `/general-video`.
-- `/music-to-video` — a **music track** (audio file, or video to pull audio from) → beat-synced video (lyric / slideshow / kinetic promo). Music drives pacing; user-supplied images / videos are cut onto the same beat grid.
-- `/slideshow` — a **presentation / pitch deck / interactive deck** — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode. Output is a navigable deck, not a rendered video.
-- `/general-video` — fallback for any other video (title card, longer brand / sizzle reel, multi-scene montage, static loop, custom composition) and the home of **companion mode** — co-create with the full HyperFrames toolbox; the original hyperframes authoring flow, any length.
-
-**Porting an existing composition?** `/remotion-to-hyperframes` translates a Remotion (React) composition into HyperFrames HTML — a source migration, separate from the creation workflows above.
-
-The domain skills (`/hyperframes-core`, `/hyperframes-animation`, `/hyperframes-keyframes`, `/hyperframes-creative`, `/hyperframes-cli`, `/media-use`, `/hyperframes-registry`, `/figma`) and the full capability map live inside `/hyperframes` — it is the single source of truth for which skill handles which intent.
-
-> **Tailwind v4 projects** (`hyperframes init --tailwind`): see `/hyperframes-core` → `references/tailwind.md`.
-
-> **Skill missing or stale?** Run `npx hyperframes skills update <name>` to install/refresh
-> the specific skill you need (the `/hyperframes` router does this automatically before
-> entering a workflow), or bare `npx hyperframes skills update` to refresh the core set plus
-> everything already installed — neither pulls the full set. Restart the agent session so
-> newly installed skills load.
-
-## Commands
-
-```bash
-npm run dev # start the preview server (long-running — keep it alive in background)
-npm run check # lint + runtime + layout + motion + contrast (one command)
-npm run render # render to MP4
-npm run publish # publish and get a shareable link
-npx hyperframes lint --verbose # include info-level findings
-npx hyperframes lint --json # machine-readable output for CI
-npx hyperframes docs <topic> # reference docs in terminal
-```
-
-> **`npm run dev` is a long-running server, not a one-shot command.** It blocks until stopped.
-> In Claude Code, always run it with `run_in_background: true`. Never run it as a foreground
-> command — it will time out and the server will die, breaking the browser preview.
-
-> **Pinned CLI version.** These scripts pin an exact `hyperframes@X.Y.Z` so this project re-renders identically over time. Weeks later that pin lags fixes shipped since. To move up: `npx hyperframes@latest upgrade --project . --check` (shows the delta), then `npx hyperframes@latest upgrade --project .` to rewrite the pins. Always unpinned — the pinned script re-runs the old version against itself.
-
-## Documentation
-
-**For quick reference**, use the local CLI docs command (no network required):
-
-```bash
-npx hyperframes docs <topic>
-```
-
-Topics: `data-attributes`, `gsap`, `compositions`, `rendering`, `examples`, `troubleshooting`
-
-**For full documentation**, discover pages via the machine-readable index — do NOT guess URLs:
-
-```
-https://hyperframes.heygen.com/llms.txt
-```
-
-## Project Structure
-
-- `index.html` — main composition (root timeline)
-- `compositions/` — sub-compositions referenced via `data-composition-src`
-- `meta.json` — project metadata (id, name)
-- `transcript.json` — whisper word-level transcript (if generated)
-
-## Linting — ALWAYS RUN AFTER CHANGES
-
-After creating or editing any `.html` composition, **always** run the full check before considering the task complete:
-
-```bash
-npm run check
-```
-
-Fix all errors before presenting the result. Warnings should be reviewed before rendering.
-
-## Key Rules
-
-1. Every timed element needs `data-start`, `data-duration`, and `data-track-index`
-2. Elements with timing **MUST** have `class="clip"` — the framework uses this for visibility control
-3. Timelines must be paused and registered on `window.__timelines`:
- ```js
- window.__timelines = window.__timelines || {};
- window.__timelines["composition-id"] = gsap.timeline({ paused: true });
- ```
-4. Videos use `muted` with a separate `<audio>` element for the audio track
-5. Sub-compositions use `data-composition-src="compositions/file.html"` to reference other HTML files
-6. Only deterministic logic — no `Date.now()`, no `Math.random()`, no network fetches
diff --git a/videos/dw-new-arrivals-reveal/BRIEF.md b/videos/dw-new-arrivals-reveal/BRIEF.md
deleted file mode 100644
index a6bc549..0000000
--- a/videos/dw-new-arrivals-reveal/BRIEF.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-workflow: product-launch-video
-flow: automation
-storyboard: no
-message: "New-season wallcovering arrivals have landed — shop the reveal"
-destination: instagram-reels
-aspect: 1080x1920
-language: en
-audience: interior designers, trade professionals, and design-forward retail shoppers
-length: 45-55s
-angle: new-arrivals collection reveal
-style_preset: cartesian
----
-
-## Intent
-
-A quiet-luxury "New Arrivals — Collection Reveal" promo Reel for Designer
-Wallcoverings. Editorial, to-the-trade credible, unhurried — the feel of a
-design house unveiling its new season rather than a sale. Serif display type,
-cream/ink/soft-accent palette. Structure is a collection reveal: a hook, a hero
-statement pattern, a cascade of the new patterns, and a close on the CTA.
-
-The source is Designer Wallcoverings' live New Arrivals collection (24 current
-new-arrival products). The video features the strongest, most visually-varied of
-these real, published patterns as its assets. These are existing live products —
-no settlement gate required.
-
-## Assets
-
-- capture/assets/floral-fantasy-soft-pink.jpg — Rebel Walls "Floral Fantasy", Soft Pink mural (pink/gray/black romantic florals) — the hero statement pattern. (1200x800)
-- capture/assets/venus-black-thibaut.jpg — Thibaut "Venus", Black — graphic ink-on-cream botanical, high-contrast. (1200x1200)
-- capture/assets/floral-elegance-gray.jpg — Rebel Walls "Floral Elegance", Gray — soft editorial floral. (1200x1376)
-- capture/assets/floral-chinoiserie-green.jpg — Rebel Walls "Floral Chinoiserie", Green — lush chinoiserie scenic. (1200x1432)
-- capture/assets/maranta-arrowroot-pale-green.jpg — Thibaut "Maranta Arrowroot", Pale Green — grasscloth-feel botanical.
-- capture/assets/daintree-bluemoon-thibaut.jpg — Thibaut "Daintree", Bluemoon — layered leaf motif, cool blue.
-- capture/assets/serengeti-aqua-thibaut.jpg — Thibaut "Serengeti", Aqua — animal-print texture, aqua.
-- capture/assets/gleniffer-black-and-grey.jpg — Thibaut "Gleniffer", Black and Grey — refined damask, monochrome.
-
-## Customizations
-
-- 9:16 Instagram Reels, 1080x1920.
-- Collection-reveal beat structure: hook → hero → feature cascade of patterns → CTA.
-- Closing CTA: "Shop New Arrivals at designerwallcoverings.com".
-
-## Notes
-
-- Brand voice: luxury, editorial, trade-credible. Designer Wallcoverings is both
- to-the-trade and retail.
-- HARD RULE: never use the word "Wallpaper" anywhere (copy, captions, alt text,
- narration). Always "Wallcovering" / "Wallcoverings".
-- Light cream accents: keep caption + wordmark contrast WCAG-safe (ink on cream,
- never light-on-light).
-- Local audio only ($0): Kokoro TTS (default Marcia voice — omit --voice) +
- MusicGen BGM via the tts-venv python.
diff --git a/videos/dw-new-arrivals-reveal/CLAUDE.md b/videos/dw-new-arrivals-reveal/CLAUDE.md
deleted file mode 100644
index a63562c..0000000
--- a/videos/dw-new-arrivals-reveal/CLAUDE.md
+++ /dev/null
@@ -1,93 +0,0 @@
-# HyperFrames Composition Project
-
-## Skills — USE THESE FIRST
-
-**Always invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that are NOT in generic web docs. Skipping them produces broken compositions.
-
-**Doing anything with HyperFrames?** Start at `/hyperframes` — it tells you what HyperFrames can do and which skill or workflow handles your intent (make a video, TTS / BGM, prep footage, author / animate, render, install blocks), confirms your brief up front (the intent layer), and routes every "make me a…" request (a video, a deck, a composition port) to the right workflow. Read it first, especially when there's no project context to orient you. The workflows it routes to:
-
-- `/product-launch-video` — any **website** URL or brief / script → a product launch / SaaS / promo video, or a site tour / showcase featuring the site's own captured visuals.
-- `/faceless-explainer` — arbitrary text (topic / article / notes), **no URL, no website capture** → 60-90s faceless explainer.
-- `/embedded-captions` — an existing talking-head video (MP4) → the same footage with captions / subtitles added (rail + embed, or pure-cinematic embed); the footage itself is untouched.
-- `/talking-head-recut` — an existing talking-head / interview / podcast video (MP4) → the same footage **packaged with designed graphic overlays** (kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, pip) synced to the transcript; the clip plays unchanged underneath. (Plain captions/subtitles → `/embedded-captions`.)
-- `/pr-to-video` — a GitHub PR (URL / `owner/repo#N` / "this PR") → 30-90s code-change explainer (changelog / feature reveal / fix / refactor).
-- `/motion-graphics` — a short (typically under 10s) design-led **motion graphic**, motion-is-the-message, no narration: kinetic type, a stat / number count-up, a chart, a logo sting, a lower-third / overlay, or an animated tweet / headline / captured-page highlight; rendered to MP4 or a transparent overlay. Longer / narrated / custom → `/general-video`.
-- `/music-to-video` — a **music track** (audio file, or video to pull audio from) → beat-synced video (lyric / slideshow / kinetic promo). Music drives pacing; user-supplied images / videos are cut onto the same beat grid.
-- `/slideshow` — a **presentation / pitch deck / interactive deck** — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode. Output is a navigable deck, not a rendered video.
-- `/general-video` — fallback for any other video (title card, longer brand / sizzle reel, multi-scene montage, static loop, custom composition) and the home of **companion mode** — co-create with the full HyperFrames toolbox; the original hyperframes authoring flow, any length.
-
-**Porting an existing composition?** `/remotion-to-hyperframes` translates a Remotion (React) composition into HyperFrames HTML — a source migration, separate from the creation workflows above.
-
-The domain skills (`/hyperframes-core`, `/hyperframes-animation`, `/hyperframes-keyframes`, `/hyperframes-creative`, `/hyperframes-cli`, `/media-use`, `/hyperframes-registry`, `/figma`) and the full capability map live inside `/hyperframes` — it is the single source of truth for which skill handles which intent.
-
-> **Tailwind v4 projects** (`hyperframes init --tailwind`): see `/hyperframes-core` → `references/tailwind.md`.
-
-> **Skill missing or stale?** Run `npx hyperframes skills update <name>` to install/refresh
-> the specific skill you need (the `/hyperframes` router does this automatically before
-> entering a workflow), or bare `npx hyperframes skills update` to refresh the core set plus
-> everything already installed — neither pulls the full set. Restart the agent session so
-> newly installed skills load.
-
-## Commands
-
-```bash
-npm run dev # start the preview server (long-running — keep it alive in background)
-npm run check # lint + runtime + layout + motion + contrast (one command)
-npm run render # render to MP4
-npm run publish # publish and get a shareable link
-npx hyperframes lint --verbose # include info-level findings
-npx hyperframes lint --json # machine-readable output for CI
-npx hyperframes docs <topic> # reference docs in terminal
-```
-
-> **`npm run dev` is a long-running server, not a one-shot command.** It blocks until stopped.
-> In Claude Code, always run it with `run_in_background: true`. Never run it as a foreground
-> command — it will time out and the server will die, breaking the browser preview.
-
-> **Pinned CLI version.** These scripts pin an exact `hyperframes@X.Y.Z` so this project re-renders identically over time. Weeks later that pin lags fixes shipped since. To move up: `npx hyperframes@latest upgrade --project . --check` (shows the delta), then `npx hyperframes@latest upgrade --project .` to rewrite the pins. Always unpinned — the pinned script re-runs the old version against itself.
-
-## Documentation
-
-**For quick reference**, use the local CLI docs command (no network required):
-
-```bash
-npx hyperframes docs <topic>
-```
-
-Topics: `data-attributes`, `gsap`, `compositions`, `rendering`, `examples`, `troubleshooting`
-
-**For full documentation**, discover pages via the machine-readable index — do NOT guess URLs:
-
-```
-https://hyperframes.heygen.com/llms.txt
-```
-
-## Project Structure
-
-- `index.html` — main composition (root timeline)
-- `compositions/` — sub-compositions referenced via `data-composition-src`
-- `meta.json` — project metadata (id, name)
-- `transcript.json` — whisper word-level transcript (if generated)
-
-## Linting — ALWAYS RUN AFTER CHANGES
-
-After creating or editing any `.html` composition, **always** run the full check before considering the task complete:
-
-```bash
-npm run check
-```
-
-Fix all errors before presenting the result. Warnings should be reviewed before rendering.
-
-## Key Rules
-
-1. Every timed element needs `data-start`, `data-duration`, and `data-track-index`
-2. Elements with timing **MUST** have `class="clip"` — the framework uses this for visibility control
-3. Timelines must be paused and registered on `window.__timelines`:
- ```js
- window.__timelines = window.__timelines || {};
- window.__timelines["composition-id"] = gsap.timeline({ paused: true });
- ```
-4. Videos use `muted` with a separate `<audio>` element for the audio track
-5. Sub-compositions use `data-composition-src="compositions/file.html"` to reference other HTML files
-6. Only deterministic logic — no `Date.now()`, no `Math.random()`, no network fetches
diff --git a/videos/dw-new-arrivals-reveal/SCRIPT.md b/videos/dw-new-arrivals-reveal/SCRIPT.md
deleted file mode 100644
index 4caaaa1..0000000
--- a/videos/dw-new-arrivals-reveal/SCRIPT.md
+++ /dev/null
@@ -1,64 +0,0 @@
-# SCRIPT — dw-new-arrivals-reveal
-
-**Voice:** Marcia (Kokoro, local — default; --voice omitted)
-**Voice settings:** default
-**Voice direction:** Warm, poised, editorial. Unhurried luxury — a design house
-unveiling its new season, never a hard sell. Even, quiet confidence.
-
----
-
-## Line 1 — Hook (Frame 1)
-
-**Time:** 0.0 – 4.0s
-**Delivery:** Settle in; land the promise gently.
-
- The new season has arrived.
-
-## Line 2 — Hero reveal (Frame 2)
-
-**Time:** 4.0 – 11.0s
-**Delivery:** Present the flagship with a little reverence.
-
- Leading the collection: Floral Fantasy from Rebel Walls — a full-wall mural in soft pink, gray, and black.
-
-## Line 3 — Venus (Frame 3)
-
-**Time:** 11.0 – 16.0s
-**Delivery:** Crisp, confident.
-
- Venus, in graphic black — a bold botanical from Thibaut.
-
-## Line 4 — Florals (Frame 4)
-
-**Time:** 16.0 – 21.0s
-**Delivery:** Flowing, painterly.
-
- Floral Chinoiserie in green, and Floral Elegance in gray — painterly murals from Rebel Walls.
-
-## Line 5 — Botanicals (Frame 5)
-
-**Time:** 21.0 – 26.0s
-**Delivery:** Calmer, cooler.
-
- Maranta Arrowroot in pale green, and Daintree in bluemoon — layered botanicals from Thibaut.
-
-## Line 6 — Texture (Frame 6)
-
-**Time:** 26.0 – 31.0s
-**Delivery:** Assured, tie the pair together.
-
- Serengeti in aqua, and the refined Gleniffer damask — texture and structure, both new from Thibaut.
-
-## Line 7 — Range (Frame 7)
-
-**Time:** 31.0 – 35.0s
-**Delivery:** Warm, summarizing.
-
- Murals, grasscloths, and statement patterns — the season's newest, all in one place.
-
-## Line 8 — CTA (Frame 8)
-
-**Time:** 35.0 – 40.0s
-**Delivery:** Clear, inviting; land the domain cleanly.
-
- Shop new arrivals at designer wallcoverings dot com.
diff --git a/videos/dw-new-arrivals-reveal/STORYBOARD.md b/videos/dw-new-arrivals-reveal/STORYBOARD.md
deleted file mode 100644
index aef07eb..0000000
--- a/videos/dw-new-arrivals-reveal/STORYBOARD.md
+++ /dev/null
@@ -1,127 +0,0 @@
----
-format: 1080x1920
-message: "New-season wallcovering arrivals have landed — shop the reveal"
-arc: Hook → Hero reveal → Feature cascade → CTA
-audience: interior designers, trade professionals, and design-forward retail shoppers
-mode: autonomous
-music: elegant
----
-
-## Frame 1 — Hook
-
-- scene: Cormorant display title fades up on stone paper; a compass ring drifts in
-- duration: 4s
-- poster: 3s
-- transition_in: cut
-- status: outline
-- voiceover: "The new season has arrived."
-- asset_candidates: none (typographic cover)
-- src: compositions/frames/01-hook.html
-
-Open cold on the promise, purely typographic. Taupe label eyebrow "NEW ARRIVALS", a
-two-line Cormorant display headline in ink ("The new season / has arrived"), one faint
-compass ring behind. Quiet, editorial, unhurried — a design house opening its doors, not
-a sale. Sets the whole tone.
-
-## Frame 2 — Hero reveal
-
-- scene: Full-bleed Floral Fantasy mural rises behind a thin ink caption plate
-- duration: 7s
-- poster: 4s
-- transition_in: crossfade
-- status: outline
-- voiceover: "Leading the collection: Floral Fantasy from Rebel Walls — a full-wall mural in soft pink, gray, and black."
-- asset_candidates: capture/assets/floral-fantasy-soft-pink.jpg
-- src: compositions/frames/02-hero.html
-
-The statement piece. The pink/gray/black romantic floral mural fills the frame with a
-slow Ken-Burns push. A hairline-framed caption block, lower third, ink-on-cream:
-"Floral Fantasy · Rebel Walls". This is the flagship visual — give it room to breathe.
-
-## Frame 3 — Cascade: Venus
-
-- scene: Venus swatch settles into a hairline-framed portrait card, label beside it
-- duration: 5s
-- poster: 3s
-- transition_in: wipe
-- status: outline
-- voiceover: "Venus, in graphic black — a bold botanical from Thibaut."
-- asset_candidates: capture/assets/venus-black-thibaut.jpg
-- src: compositions/frames/03-venus.html
-
-Begin the feature cascade. Off-center portrait image on the right in a 1px taupe frame,
-Cormorant pattern name + taupe attribution on the left. High-contrast ink-on-cream keeps
-the eye moving.
-
-## Frame 4 — Cascade: Chinoiserie & Elegance
-
-- scene: Two floral panels slide in stacked, each with a hairline label
-- duration: 5s
-- poster: 3s
-- transition_in: crossfade
-- status: outline
-- voiceover: "Floral Chinoiserie in green, and Floral Elegance in gray — painterly murals from Rebel Walls."
-- asset_candidates: capture/assets/floral-chinoiserie-green.jpg, capture/assets/floral-elegance-gray.jpg
-- src: compositions/frames/04-florals.html
-
-Two-up beat to build pace. Two mural panels stacked or side-by-side, each in a taupe
-hairline frame with a small Cormorant caption. Lush green chinoiserie against soft gray
-floral — variety of mood in one breath.
-
-## Frame 5 — Cascade: Botanicals
-
-- scene: Maranta and Daintree swatches enter with staggered timing
-- duration: 5s
-- poster: 3s
-- transition_in: wipe
-- status: outline
-- voiceover: "Maranta Arrowroot in pale green, and Daintree in bluemoon — layered botanicals from Thibaut."
-- asset_candidates: capture/assets/maranta-arrowroot-pale-green.jpg, capture/assets/daintree-bluemoon-thibaut.jpg
-- src: compositions/frames/05-botanicals.html
-
-The tonal, textural beat. Two calmer swatches — grasscloth-feel arrowroot and cool
-bluemoon leaf motif — each hairline-framed with a Cormorant name. Cool, quiet greens and
-blues after the drama.
-
-## Frame 6 — Cascade: Serengeti & Gleniffer
-
-- scene: Serengeti and Gleniffer settle in; a taupe rule ties the pair
-- duration: 5s
-- poster: 3s
-- transition_in: crossfade
-- status: outline
-- voiceover: "Serengeti in aqua, and the refined Gleniffer damask — texture and structure, both new from Thibaut."
-- asset_candidates: capture/assets/serengeti-aqua-thibaut.jpg, capture/assets/gleniffer-black-and-grey.jpg
-- src: compositions/frames/06-texture.html
-
-Close the cascade on contrast: aqua animal-print texture against a black-and-grey damask.
-Two hairline-framed swatches with Cormorant names, a single taupe rule beneath tying them.
-
-## Frame 7 — Range line
-
-- scene: A short taupe rule; a Cormorant line naming the season's breadth
-- duration: 4s
-- poster: 3s
-- transition_in: crossfade
-- status: outline
-- voiceover: "Murals, grasscloths, and statement patterns — the season's newest, all in one place."
-- asset_candidates: none (typographic bridge)
-- src: compositions/frames/07-range.html
-
-A quiet typographic breath before the CTA. One centered Cormorant line over a taupe rule,
-restating the range. No imagery — let the patterns just shown do the memory work.
-
-## Frame 8 — CTA
-
-- scene: Centered Cormorant sign-off inside the largest compass ring; one ink accent line; the URL
-- duration: 5s
-- poster: 3s
-- transition_in: crossfade
-- status: outline
-- voiceover: "Shop new arrivals at designerwallcoverings.com."
-- asset_candidates: none (typographic closer)
-- src: compositions/frames/08-cta.html
-
-The closing plate. Centered Cormorant "Shop New Arrivals" inside the largest compass ring,
-a short ink horizontal-accent beneath, then the URL "designerwallcoverings.com" in tracked
-taupe. The one clear next step.
diff --git a/videos/dw-new-arrivals-reveal/assets/fonts/cormorant-400.woff2 b/videos/dw-new-arrivals-reveal/assets/fonts/cormorant-400.woff2
deleted file mode 100644
index 9be8870..0000000
Binary files a/videos/dw-new-arrivals-reveal/assets/fonts/cormorant-400.woff2 and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/assets/fonts/cormorant-500.woff2 b/videos/dw-new-arrivals-reveal/assets/fonts/cormorant-500.woff2
deleted file mode 100644
index 12aa705..0000000
Binary files a/videos/dw-new-arrivals-reveal/assets/fonts/cormorant-500.woff2 and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/assets/fonts/cormorant-600.woff2 b/videos/dw-new-arrivals-reveal/assets/fonts/cormorant-600.woff2
deleted file mode 100644
index 88ec261..0000000
Binary files a/videos/dw-new-arrivals-reveal/assets/fonts/cormorant-600.woff2 and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/assets/fonts/cormorant-italic-400.woff2 b/videos/dw-new-arrivals-reveal/assets/fonts/cormorant-italic-400.woff2
deleted file mode 100644
index 68922f7..0000000
Binary files a/videos/dw-new-arrivals-reveal/assets/fonts/cormorant-italic-400.woff2 and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/assets/voice/01.wav b/videos/dw-new-arrivals-reveal/assets/voice/01.wav
deleted file mode 100644
index 4aaf62e..0000000
Binary files a/videos/dw-new-arrivals-reveal/assets/voice/01.wav and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/assets/voice/02.wav b/videos/dw-new-arrivals-reveal/assets/voice/02.wav
deleted file mode 100644
index d7c8b39..0000000
Binary files a/videos/dw-new-arrivals-reveal/assets/voice/02.wav and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/assets/voice/03.wav b/videos/dw-new-arrivals-reveal/assets/voice/03.wav
deleted file mode 100644
index 6dd5816..0000000
Binary files a/videos/dw-new-arrivals-reveal/assets/voice/03.wav and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/assets/voice/04.wav b/videos/dw-new-arrivals-reveal/assets/voice/04.wav
deleted file mode 100644
index b085eec..0000000
Binary files a/videos/dw-new-arrivals-reveal/assets/voice/04.wav and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/assets/voice/05.wav b/videos/dw-new-arrivals-reveal/assets/voice/05.wav
deleted file mode 100644
index 6f1e3da..0000000
Binary files a/videos/dw-new-arrivals-reveal/assets/voice/05.wav and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/assets/voice/06.wav b/videos/dw-new-arrivals-reveal/assets/voice/06.wav
deleted file mode 100644
index 70f0611..0000000
Binary files a/videos/dw-new-arrivals-reveal/assets/voice/06.wav and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/assets/voice/07.wav b/videos/dw-new-arrivals-reveal/assets/voice/07.wav
deleted file mode 100644
index 9b7d4b0..0000000
Binary files a/videos/dw-new-arrivals-reveal/assets/voice/07.wav and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/assets/voice/08.wav b/videos/dw-new-arrivals-reveal/assets/voice/08.wav
deleted file mode 100644
index 0271be9..0000000
Binary files a/videos/dw-new-arrivals-reveal/assets/voice/08.wav and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/audio_engine_meta.json b/videos/dw-new-arrivals-reveal/audio_engine_meta.json
deleted file mode 100644
index 6a146de..0000000
--- a/videos/dw-new-arrivals-reveal/audio_engine_meta.json
+++ /dev/null
@@ -1,454 +0,0 @@
-{
- "tts_provider": "kokoro",
- "voice_id": "am_michael",
- "bgm": null,
- "bgm_pending": false,
- "bgm_provider": null,
- "bgm_pid": null,
- "bgm_log": null,
- "bgm_mode": null,
- "bgm_target_duration_s": null,
- "bgm_seed_duration_s": null,
- "bgm_loop_count": null,
- "voices": [
- {
- "id": "01",
- "path": "assets/voice/01.wav",
- "duration_s": 1.835,
- "words": []
- },
- {
- "id": "02",
- "path": "assets/voice/02.wav",
- "duration_s": 7.189,
- "words": [
- {
- "id": "w0",
- "text": "leading",
- "start": 0.08,
- "end": 0.41
- },
- {
- "id": "w1",
- "text": "the",
- "start": 0.47,
- "end": 0.63
- },
- {
- "id": "w2",
- "text": "collection,",
- "start": 0.63,
- "end": 1.42
- },
- {
- "id": "w3",
- "text": "Floral",
- "start": 1.51,
- "end": 1.78
- },
- {
- "id": "w4",
- "text": "Fantasy",
- "start": 1.93,
- "end": 2.39
- },
- {
- "id": "w5",
- "text": "from",
- "start": 2.48,
- "end": 2.78
- },
- {
- "id": "w6",
- "text": "Rebel",
- "start": 2.78,
- "end": 3.25
- },
- {
- "id": "w7",
- "text": "Walls,",
- "start": 3.25,
- "end": 3.8
- },
- {
- "id": "w8",
- "text": "a",
- "start": 3.87,
- "end": 3.92
- },
- {
- "id": "w9",
- "text": "full-wall",
- "start": 3.92,
- "end": 4.56
- },
- {
- "id": "w10",
- "text": "mural",
- "start": 4.56,
- "end": 5.02
- },
- {
- "id": "w11",
- "text": "in",
- "start": 5.04,
- "end": 5.2
- },
- {
- "id": "w12",
- "text": "soft",
- "start": 5.2,
- "end": 5.49
- },
- {
- "id": "w13",
- "text": "pink,",
- "start": 5.59,
- "end": 5.97
- },
- {
- "id": "w14",
- "text": "gray,",
- "start": 6.18,
- "end": 6.48
- },
- {
- "id": "w15",
- "text": "and",
- "start": 6.48,
- "end": 6.75
- },
- {
- "id": "w16",
- "text": "black.",
- "start": 6.75,
- "end": 7.18
- }
- ]
- },
- {
- "id": "03",
- "path": "assets/voice/03.wav",
- "duration_s": 3.883,
- "words": []
- },
- {
- "id": "04",
- "path": "assets/voice/04.wav",
- "duration_s": 6.869,
- "words": []
- },
- {
- "id": "05",
- "path": "assets/voice/05.wav",
- "duration_s": 6.123,
- "words": [
- {
- "id": "w0",
- "text": "Maranta",
- "start": 0.04,
- "end": 0.46
- },
- {
- "id": "w1",
- "text": "Arrowroot",
- "start": 0.46,
- "end": 1.37
- },
- {
- "id": "w2",
- "text": "in",
- "start": 1.43,
- "end": 1.62
- },
- {
- "id": "w3",
- "text": "Pale",
- "start": 1.62,
- "end": 2.04
- },
- {
- "id": "w4",
- "text": "Green,",
- "start": 2.04,
- "end": 2.64
- },
- {
- "id": "w5",
- "text": "and",
- "start": 2.67,
- "end": 2.88
- },
- {
- "id": "w6",
- "text": "Daintree",
- "start": 2.88,
- "end": 3.5
- },
- {
- "id": "w7",
- "text": "in",
- "start": 3.5,
- "end": 3.66
- },
- {
- "id": "w8",
- "text": "Blue",
- "start": 3.66,
- "end": 3.91
- },
- {
- "id": "w9",
- "text": "Moon,",
- "start": 3.98,
- "end": 4.42
- },
- {
- "id": "w10",
- "text": "layered",
- "start": 4.42,
- "end": 4.78
- },
- {
- "id": "w11",
- "text": "botanicals",
- "start": 4.78,
- "end": 5.32
- },
- {
- "id": "w12",
- "text": "from",
- "start": 5.32,
- "end": 5.5
- },
- {
- "id": "w13",
- "text": "Thibbout.",
- "start": 5.5,
- "end": 5.91
- }
- ]
- },
- {
- "id": "06",
- "path": "assets/voice/06.wav",
- "duration_s": 6.507,
- "words": [
- {
- "id": "w0",
- "text": "Serengeti",
- "start": 0.07,
- "end": 0.83
- },
- {
- "id": "w1",
- "text": "and",
- "start": 0.91,
- "end": 1.21
- },
- {
- "id": "w2",
- "text": "Aqua,",
- "start": 1.21,
- "end": 1.75
- },
- {
- "id": "w3",
- "text": "and",
- "start": 1.75,
- "end": 1.92
- },
- {
- "id": "w4",
- "text": "the",
- "start": 1.92,
- "end": 1.99
- },
- {
- "id": "w5",
- "text": "refined",
- "start": 2.13,
- "end": 2.52
- },
- {
- "id": "w6",
- "text": "Glenifer",
- "start": 2.52,
- "end": 3.16
- },
- {
- "id": "w7",
- "text": "damask",
- "start": 3.16,
- "end": 3.59
- },
- {
- "id": "w8",
- "text": "texture",
- "start": 3.7,
- "end": 4.16
- },
- {
- "id": "w9",
- "text": "and",
- "start": 4.16,
- "end": 4.31
- },
- {
- "id": "w10",
- "text": "structure,",
- "start": 4.38,
- "end": 5.13
- },
- {
- "id": "w11",
- "text": "both",
- "start": 5.23,
- "end": 5.42
- },
- {
- "id": "w12",
- "text": "new",
- "start": 5.53,
- "end": 5.63
- },
- {
- "id": "w13",
- "text": "from",
- "start": 5.63,
- "end": 5.92
- },
- {
- "id": "w14",
- "text": "Thibbout.",
- "start": 5.99,
- "end": 6.42
- }
- ]
- },
- {
- "id": "07",
- "path": "assets/voice/07.wav",
- "duration_s": 5.483,
- "words": [
- {
- "id": "w0",
- "text": "murals,",
- "start": 0.06,
- "end": 0.52
- },
- {
- "id": "w1",
- "text": "grass",
- "start": 0.52,
- "end": 0.87
- },
- {
- "id": "w2",
- "text": "cloths",
- "start": 0.87,
- "end": 1.24
- },
- {
- "id": "w3",
- "text": "and",
- "start": 1.31,
- "end": 1.47
- },
- {
- "id": "w4",
- "text": "statement",
- "start": 1.47,
- "end": 2.09
- },
- {
- "id": "w5",
- "text": "patterns,",
- "start": 2.09,
- "end": 2.76
- },
- {
- "id": "w6",
- "text": "the",
- "start": 2.82,
- "end": 2.88
- },
- {
- "id": "w7",
- "text": "season's",
- "start": 2.88,
- "end": 3.67
- },
- {
- "id": "w8",
- "text": "newest,",
- "start": 3.67,
- "end": 4.4
- },
- {
- "id": "w9",
- "text": "all",
- "start": 4.4,
- "end": 4.58
- },
- {
- "id": "w10",
- "text": "in",
- "start": 4.58,
- "end": 4.71
- },
- {
- "id": "w11",
- "text": "one",
- "start": 4.71,
- "end": 4.92
- },
- {
- "id": "w12",
- "text": "place.",
- "start": 4.92,
- "end": 5.44
- }
- ]
- },
- {
- "id": "08",
- "path": "assets/voice/08.wav",
- "duration_s": 3.499,
- "words": [
- {
- "id": "w0",
- "text": "Shop",
- "start": 0.07,
- "end": 0.3
- },
- {
- "id": "w1",
- "text": "new",
- "start": 0.41,
- "end": 0.54
- },
- {
- "id": "w2",
- "text": "arrivals",
- "start": 0.54,
- "end": 1.15
- },
- {
- "id": "w3",
- "text": "at",
- "start": 1.15,
- "end": 1.31
- },
- {
- "id": "w4",
- "text": "designerwallcoverings.com",
- "start": 1.31,
- "end": 3.26
- }
- ]
- }
- ],
- "sfx": [],
- "total_duration_s": 41.388
-}
\ No newline at end of file
diff --git a/videos/dw-new-arrivals-reveal/audio_meta.json b/videos/dw-new-arrivals-reveal/audio_meta.json
deleted file mode 100644
index 04b8414..0000000
--- a/videos/dw-new-arrivals-reveal/audio_meta.json
+++ /dev/null
@@ -1,443 +0,0 @@
-{
- "bgm": null,
- "voices": [
- {
- "frame": 1,
- "path": "assets/voice/01.wav",
- "duration_s": 1.835,
- "words": []
- },
- {
- "frame": 2,
- "path": "assets/voice/02.wav",
- "duration_s": 7.189,
- "words": [
- {
- "id": "w0",
- "text": "leading",
- "start": 0.08,
- "end": 0.41
- },
- {
- "id": "w1",
- "text": "the",
- "start": 0.47,
- "end": 0.63
- },
- {
- "id": "w2",
- "text": "collection,",
- "start": 0.63,
- "end": 1.42
- },
- {
- "id": "w3",
- "text": "Floral",
- "start": 1.51,
- "end": 1.78
- },
- {
- "id": "w4",
- "text": "Fantasy",
- "start": 1.93,
- "end": 2.39
- },
- {
- "id": "w5",
- "text": "from",
- "start": 2.48,
- "end": 2.78
- },
- {
- "id": "w6",
- "text": "Rebel",
- "start": 2.78,
- "end": 3.25
- },
- {
- "id": "w7",
- "text": "Walls,",
- "start": 3.25,
- "end": 3.8
- },
- {
- "id": "w8",
- "text": "a",
- "start": 3.87,
- "end": 3.92
- },
- {
- "id": "w9",
- "text": "full-wall",
- "start": 3.92,
- "end": 4.56
- },
- {
- "id": "w10",
- "text": "mural",
- "start": 4.56,
- "end": 5.02
- },
- {
- "id": "w11",
- "text": "in",
- "start": 5.04,
- "end": 5.2
- },
- {
- "id": "w12",
- "text": "soft",
- "start": 5.2,
- "end": 5.49
- },
- {
- "id": "w13",
- "text": "pink,",
- "start": 5.59,
- "end": 5.97
- },
- {
- "id": "w14",
- "text": "gray,",
- "start": 6.18,
- "end": 6.48
- },
- {
- "id": "w15",
- "text": "and",
- "start": 6.48,
- "end": 6.75
- },
- {
- "id": "w16",
- "text": "black.",
- "start": 6.75,
- "end": 7.18
- }
- ]
- },
- {
- "frame": 3,
- "path": "assets/voice/03.wav",
- "duration_s": 3.883,
- "words": []
- },
- {
- "frame": 4,
- "path": "assets/voice/04.wav",
- "duration_s": 6.869,
- "words": []
- },
- {
- "frame": 5,
- "path": "assets/voice/05.wav",
- "duration_s": 6.123,
- "words": [
- {
- "id": "w0",
- "text": "Maranta",
- "start": 0.04,
- "end": 0.46
- },
- {
- "id": "w1",
- "text": "Arrowroot",
- "start": 0.46,
- "end": 1.37
- },
- {
- "id": "w2",
- "text": "in",
- "start": 1.43,
- "end": 1.62
- },
- {
- "id": "w3",
- "text": "Pale",
- "start": 1.62,
- "end": 2.04
- },
- {
- "id": "w4",
- "text": "Green,",
- "start": 2.04,
- "end": 2.64
- },
- {
- "id": "w5",
- "text": "and",
- "start": 2.67,
- "end": 2.88
- },
- {
- "id": "w6",
- "text": "Daintree",
- "start": 2.88,
- "end": 3.5
- },
- {
- "id": "w7",
- "text": "in",
- "start": 3.5,
- "end": 3.66
- },
- {
- "id": "w8",
- "text": "Blue",
- "start": 3.66,
- "end": 3.91
- },
- {
- "id": "w9",
- "text": "Moon,",
- "start": 3.98,
- "end": 4.42
- },
- {
- "id": "w10",
- "text": "layered",
- "start": 4.42,
- "end": 4.78
- },
- {
- "id": "w11",
- "text": "botanicals",
- "start": 4.78,
- "end": 5.32
- },
- {
- "id": "w12",
- "text": "from",
- "start": 5.32,
- "end": 5.5
- },
- {
- "id": "w13",
- "text": "Thibbout.",
- "start": 5.5,
- "end": 5.91
- }
- ]
- },
- {
- "frame": 6,
- "path": "assets/voice/06.wav",
- "duration_s": 6.507,
- "words": [
- {
- "id": "w0",
- "text": "Serengeti",
- "start": 0.07,
- "end": 0.83
- },
- {
- "id": "w1",
- "text": "and",
- "start": 0.91,
- "end": 1.21
- },
- {
- "id": "w2",
- "text": "Aqua,",
- "start": 1.21,
- "end": 1.75
- },
- {
- "id": "w3",
- "text": "and",
- "start": 1.75,
- "end": 1.92
- },
- {
- "id": "w4",
- "text": "the",
- "start": 1.92,
- "end": 1.99
- },
- {
- "id": "w5",
- "text": "refined",
- "start": 2.13,
- "end": 2.52
- },
- {
- "id": "w6",
- "text": "Glenifer",
- "start": 2.52,
- "end": 3.16
- },
- {
- "id": "w7",
- "text": "damask",
- "start": 3.16,
- "end": 3.59
- },
- {
- "id": "w8",
- "text": "texture",
- "start": 3.7,
- "end": 4.16
- },
- {
- "id": "w9",
- "text": "and",
- "start": 4.16,
- "end": 4.31
- },
- {
- "id": "w10",
- "text": "structure,",
- "start": 4.38,
- "end": 5.13
- },
- {
- "id": "w11",
- "text": "both",
- "start": 5.23,
- "end": 5.42
- },
- {
- "id": "w12",
- "text": "new",
- "start": 5.53,
- "end": 5.63
- },
- {
- "id": "w13",
- "text": "from",
- "start": 5.63,
- "end": 5.92
- },
- {
- "id": "w14",
- "text": "Thibbout.",
- "start": 5.99,
- "end": 6.42
- }
- ]
- },
- {
- "frame": 7,
- "path": "assets/voice/07.wav",
- "duration_s": 5.483,
- "words": [
- {
- "id": "w0",
- "text": "murals,",
- "start": 0.06,
- "end": 0.52
- },
- {
- "id": "w1",
- "text": "grass",
- "start": 0.52,
- "end": 0.87
- },
- {
- "id": "w2",
- "text": "cloths",
- "start": 0.87,
- "end": 1.24
- },
- {
- "id": "w3",
- "text": "and",
- "start": 1.31,
- "end": 1.47
- },
- {
- "id": "w4",
- "text": "statement",
- "start": 1.47,
- "end": 2.09
- },
- {
- "id": "w5",
- "text": "patterns,",
- "start": 2.09,
- "end": 2.76
- },
- {
- "id": "w6",
- "text": "the",
- "start": 2.82,
- "end": 2.88
- },
- {
- "id": "w7",
- "text": "season's",
- "start": 2.88,
- "end": 3.67
- },
- {
- "id": "w8",
- "text": "newest,",
- "start": 3.67,
- "end": 4.4
- },
- {
- "id": "w9",
- "text": "all",
- "start": 4.4,
- "end": 4.58
- },
- {
- "id": "w10",
- "text": "in",
- "start": 4.58,
- "end": 4.71
- },
- {
- "id": "w11",
- "text": "one",
- "start": 4.71,
- "end": 4.92
- },
- {
- "id": "w12",
- "text": "place.",
- "start": 4.92,
- "end": 5.44
- }
- ]
- },
- {
- "frame": 8,
- "path": "assets/voice/08.wav",
- "duration_s": 3.499,
- "words": [
- {
- "id": "w0",
- "text": "Shop",
- "start": 0.07,
- "end": 0.3
- },
- {
- "id": "w1",
- "text": "new",
- "start": 0.41,
- "end": 0.54
- },
- {
- "id": "w2",
- "text": "arrivals",
- "start": 0.54,
- "end": 1.15
- },
- {
- "id": "w3",
- "text": "at",
- "start": 1.15,
- "end": 1.31
- },
- {
- "id": "w4",
- "text": "designerwallcoverings.com",
- "start": 1.31,
- "end": 3.26
- }
- ]
- }
- ],
- "sfx": []
-}
\ No newline at end of file
diff --git a/videos/dw-new-arrivals-reveal/audio_request.json b/videos/dw-new-arrivals-reveal/audio_request.json
deleted file mode 100644
index ebd1c93..0000000
--- a/videos/dw-new-arrivals-reveal/audio_request.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
- "provider": "kokoro",
- "speed": 1,
- "lines": [
- {
- "id": "01",
- "text": "The new season has arrived."
- },
- {
- "id": "02",
- "text": "Leading the collection: Floral Fantasy from Rebel Walls — a full-wall mural in soft pink, gray, and black."
- },
- {
- "id": "03",
- "text": "Venus, in graphic black — a bold botanical from Thibaut."
- },
- {
- "id": "04",
- "text": "Floral Chinoiserie in green, and Floral Elegance in gray — painterly murals from Rebel Walls."
- },
- {
- "id": "05",
- "text": "Maranta Arrowroot in pale green, and Daintree in bluemoon — layered botanicals from Thibaut."
- },
- {
- "id": "06",
- "text": "Serengeti in aqua, and the refined Gleniffer damask — texture and structure, both new from Thibaut."
- },
- {
- "id": "07",
- "text": "Murals, grasscloths, and statement patterns — the season's newest, all in one place."
- },
- {
- "id": "08",
- "text": "Shop new arrivals at designer wallcoverings dot com."
- }
- ],
- "bgm": {
- "mode": "retrieve",
- "query": "elegant",
- "blob": "New-season wallcovering arrivals have landed — shop the reveal",
- "arc": "Hook → Hero reveal → Feature cascade → CTA"
- }
-}
\ No newline at end of file
diff --git a/videos/dw-new-arrivals-reveal/capture/assets/daintree-bluemoon-thibaut.jpg b/videos/dw-new-arrivals-reveal/capture/assets/daintree-bluemoon-thibaut.jpg
deleted file mode 100644
index 653714e..0000000
Binary files a/videos/dw-new-arrivals-reveal/capture/assets/daintree-bluemoon-thibaut.jpg and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/capture/assets/floral-chinoiserie-green.jpg b/videos/dw-new-arrivals-reveal/capture/assets/floral-chinoiserie-green.jpg
deleted file mode 100644
index afb2556..0000000
Binary files a/videos/dw-new-arrivals-reveal/capture/assets/floral-chinoiserie-green.jpg and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/capture/assets/floral-elegance-gray.jpg b/videos/dw-new-arrivals-reveal/capture/assets/floral-elegance-gray.jpg
deleted file mode 100644
index da55ba0..0000000
Binary files a/videos/dw-new-arrivals-reveal/capture/assets/floral-elegance-gray.jpg and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/capture/assets/floral-fantasy-soft-pink.jpg b/videos/dw-new-arrivals-reveal/capture/assets/floral-fantasy-soft-pink.jpg
deleted file mode 100644
index 9af88f2..0000000
Binary files a/videos/dw-new-arrivals-reveal/capture/assets/floral-fantasy-soft-pink.jpg and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/capture/assets/gleniffer-black-and-grey.jpg b/videos/dw-new-arrivals-reveal/capture/assets/gleniffer-black-and-grey.jpg
deleted file mode 100644
index cb2d5ac..0000000
Binary files a/videos/dw-new-arrivals-reveal/capture/assets/gleniffer-black-and-grey.jpg and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/capture/assets/maranta-arrowroot-pale-green.jpg b/videos/dw-new-arrivals-reveal/capture/assets/maranta-arrowroot-pale-green.jpg
deleted file mode 100644
index 33285a2..0000000
Binary files a/videos/dw-new-arrivals-reveal/capture/assets/maranta-arrowroot-pale-green.jpg and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/capture/assets/serengeti-aqua-thibaut.jpg b/videos/dw-new-arrivals-reveal/capture/assets/serengeti-aqua-thibaut.jpg
deleted file mode 100644
index 4e060cd..0000000
Binary files a/videos/dw-new-arrivals-reveal/capture/assets/serengeti-aqua-thibaut.jpg and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/capture/assets/venus-black-thibaut.jpg b/videos/dw-new-arrivals-reveal/capture/assets/venus-black-thibaut.jpg
deleted file mode 100644
index 945752c..0000000
Binary files a/videos/dw-new-arrivals-reveal/capture/assets/venus-black-thibaut.jpg and /dev/null differ
diff --git a/videos/dw-new-arrivals-reveal/capture/extracted/asset-descriptions.md b/videos/dw-new-arrivals-reveal/capture/extracted/asset-descriptions.md
deleted file mode 100644
index 5deb512..0000000
--- a/videos/dw-new-arrivals-reveal/capture/extracted/asset-descriptions.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Asset inventory — Designer Wallcoverings New Arrivals
-
-Eight new-arrival product images were downloaded locally to `capture/assets/`
-from the DW New Arrivals collection (no-capture path — provided source, not
-crawled). All are true JPEG, verified with `file`. Selected for visual variety
-and impact.
-
-| File | Pattern / Vendor | Look | Dominant color | Dims | Role |
-|---|---|---|---|---|---|
-| `capture/assets/floral-fantasy-soft-pink.jpg` | Floral Fantasy / Rebel Walls | Full-wall romantic floral mural, blowsy blooms | Soft pink, gray, black | 1200x800 | **Hero** — statement pattern |
-| `capture/assets/venus-black-thibaut.jpg` | Venus / Thibaut | Graphic ink botanical, bold silhouettes | Black on cream | 1200x1200 | Cascade — high-contrast beat |
-| `capture/assets/floral-elegance-gray.jpg` | Floral Elegance / Rebel Walls | Soft editorial floral, painterly | Gray, blush | 1200x1376 | Cascade |
-| `capture/assets/floral-chinoiserie-green.jpg` | Floral Chinoiserie / Rebel Walls | Lush chinoiserie scenic, birds-and-branches | Green | 1200x1432 | Cascade |
-| `capture/assets/maranta-arrowroot-pale-green.jpg` | Maranta Arrowroot / Thibaut | Grasscloth-feel botanical, arrowroot leaves | Pale green | 1200x1200 | Cascade |
-| `capture/assets/daintree-bluemoon-thibaut.jpg` | Daintree / Thibaut | Layered leaf motif, tropical foliage | Cool blue (bluemoon) | 1200x1200 | Cascade |
-| `capture/assets/serengeti-aqua-thibaut.jpg` | Serengeti / Thibaut | Animal-print texture, tonal spots | Aqua | 1200x1200 | Cascade |
-| `capture/assets/gleniffer-black-and-grey.jpg` | Gleniffer / Thibaut | Refined damask, symmetrical | Black and grey | 1200x1200 | Cascade / close |
-
-Notes:
-- The three Rebel Walls files are room-setting interiors (mural on a styled wall);
- the five Thibaut files are flat pattern swatches.
-- No brand logo asset captured; the DW wordmark is rendered as type from the
- cartesian preset's display font.
diff --git a/videos/dw-new-arrivals-reveal/capture/extracted/tokens.json b/videos/dw-new-arrivals-reveal/capture/extracted/tokens.json
deleted file mode 100644
index 02491af..0000000
--- a/videos/dw-new-arrivals-reveal/capture/extracted/tokens.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "title": "New Arrivals — Designer Wallcoverings",
- "description": "New-season wallcovering arrivals from Designer Wallcoverings: a collection reveal of the season's newest patterns from Rebel Walls and Thibaut.",
- "colors": ["#1c1a17", "#f4efe6", "#b98a7a", "#7c8c6f", "#2f3d4a"],
- "fonts": ["Cormorant Garamond", "Inter"]
-}
diff --git a/videos/dw-new-arrivals-reveal/capture/extracted/visible-text.txt b/videos/dw-new-arrivals-reveal/capture/extracted/visible-text.txt
deleted file mode 100644
index 457a9eb..0000000
--- a/videos/dw-new-arrivals-reveal/capture/extracted/visible-text.txt
+++ /dev/null
@@ -1,23 +0,0 @@
-Designer Wallcoverings — New Arrivals — Collection Reveal
-
-The new season has landed. Designer Wallcoverings has just added its newest
-wallcovering arrivals — statement murals and refined patterns from the houses of
-Rebel Walls and Thibaut.
-
-Hero: Floral Fantasy, Soft Pink (Rebel Walls) — romantic pink, gray and black
-florals rendered as a full-wall mural.
-
-The new arrivals:
-- Floral Fantasy — Rebel Walls — soft pink, gray, black romantic florals ($191)
-- Venus, Black — Thibaut — graphic ink-on-cream botanical
-- Floral Elegance, Gray — Rebel Walls — soft editorial floral ($191)
-- Floral Chinoiserie, Green — Rebel Walls — lush chinoiserie scenic ($191)
-- Maranta Arrowroot, Pale Green — Thibaut — grasscloth-feel botanical
-- Daintree, Bluemoon — Thibaut — layered leaf motif in cool blue
-- Serengeti, Aqua — Thibaut — animal-print texture in aqua
-- Gleniffer, Black and Grey — Thibaut — refined monochrome damask
-
-Closing call to action: Shop New Arrivals at designerwallcoverings.com
-
-Brand voice: luxury, editorial, to-the-trade and retail. Never the word
-"Wallpaper" — always "Wallcovering" / "Wallcoverings".
diff --git a/videos/dw-new-arrivals-reveal/frame.md b/videos/dw-new-arrivals-reveal/frame.md
deleted file mode 100644
index 0cf596d..0000000
--- a/videos/dw-new-arrivals-reveal/frame.md
+++ /dev/null
@@ -1,286 +0,0 @@
----
-version: alpha
-name: Cartesian — Frame (video / frame layer)
-description: >
- Video-first companion to Cartesian's design.md. The unit is the frame (1920×1080). Atoms are
- identical and sacred — the five-tone warm-stone palette, Cormorant Garamond 400 + Cormorant Garamond, the
- universal 1px taupe hairline as the only structural device, compass-drafted geometric rings,
- and zero shadow / zero fill. Composition, frame scale, and aspect-ratio behavior are rewritten
- for the frame. Restraint is the rule; motion is out of scope.
-unit: the frame — 1920×1080 primary; 9:16 and 1:1 documented
-principle: atoms are sacred · composition is free · numbers come from the script
-
-colors:
- bg-primary: "#f4efe6"
- bg-secondary: "#E5D4CE"
- text-primary: "#1c1a17"
- text-secondary: "#5A5A5A"
- accent: "#7c8c6f"
- line: "#b98a7a"
- white-overlay: "rgba(255,255,255,0.3)"
-
-typography:
- # — reading ramp (Cormorant Garamond) —
- body: { fontFamily: "Cormorant Garamond", cqw: 1.0, weight: 400, lineHeight: 1.6, color: "text-secondary" }
- body-sm: { fontFamily: "Cormorant Garamond", cqw: 0.85, weight: 400, lineHeight: 1.6 }
- subtitle: { fontFamily: "Cormorant Garamond", cqw: 1.3, weight: 400, lineHeight: 1.5 }
- label: { fontFamily: "Cormorant Garamond", px: 14, weight: 500, tracking: "3px", upper: true, color: "accent" }
- attribution: { fontFamily: "Cormorant Garamond", px: 15, weight: 400, tracking: "2px", upper: true, color: "accent" }
- micro: { fontFamily: "Cormorant Garamond", px: 12, weight: 400, tracking: "2px", upper: true, color: "accent" }
- # — display / hero ramp (Cormorant Garamond 400, sentence case) —
- h3: { fontFamily: "Cormorant Garamond", cqw: 1.8, weight: 400, lineHeight: 1.1 }
- timeline-headline:{ fontFamily: "Cormorant Garamond", cqw: 1.9, weight: 400, lineHeight: 1.1 }
- card-headline:{ fontFamily: "Cormorant Garamond", cqw: 2.0, weight: 400, lineHeight: 1.15 }
- stat-figure: { fontFamily: "Cormorant Garamond", cqw: 3.0, weight: 400, lineHeight: 1.0 }
- quote-mark: { fontFamily: "Cormorant Garamond", cqw: 9.0, weight: 400, lineHeight: 0.5, color: "line" }
- h2: { fontFamily: "Cormorant Garamond", cqw: 4.0, weight: 400, lineHeight: 1.1 }
- h1: { fontFamily: "Cormorant Garamond", cqw: 6.2, weight: 400, lineHeight: 1.06 }
- display: { fontFamily: "Cormorant Garamond", cqw: 8.0, weight: 400, lineHeight: 1.04 }
-
-spacing:
- pad-x: "7cqw"
- pad-y: "5cqw"
- gap-xl: "6cqw"
- gap-lg: "5cqw"
-
-components:
- hairline:
- rule: "0.07cqw solid {colors.line}"
- description: "The universal structural device — every separator (agenda rule, timeline connector, card border, stats top) is this 1px taupe line. No thick borders exist."
- card:
- backgroundColor: "{colors.white-overlay}"
- border: "0.07cqw solid {colors.line}"
- rounded: "0"
- shadow: "none"
- description: "Faint white-overlay fill (canvas bleeds through) is what makes a card distinct from a bare region."
- card-icon:
- border: "0.07cqw solid {colors.line}"
- rounded: "50%"
- size: "40px circle"
- textColor: "{colors.accent}"
- typography: "Playfair numeral/letter"
- description: "Ringed circle mark."
- agenda-row:
- borderBottom: "0.07cqw solid {colors.line}"
- typography: "{typography.h3} (numeral {colors.accent}, label {colors.text-primary})"
- description: "Numeral left, label right over a taupe rule."
- timeline:
- borderTop: "0.07cqw solid {colors.line}"
- typography: "{typography.timeline-headline} + {typography.body-sm}"
- description: "A single taupe top rule across items — no nodes, no dots."
- stats-cluster:
- borderTop: "0.07cqw solid {colors.line}"
- typography: "{typography.stat-figure} + uppercase {colors.accent} labels"
- description: "Inline modest stat figures (no hero numeral)."
- geo-ring:
- border: "1px solid {colors.line} (inner dashed ::before ~70–80%)"
- rounded: "50%"
- size: "10–50cqw"
- opacity: "0.2–0.5"
- description: "Compass-construction rings behind content. 1–2 per frame, never more."
- horizontal-accent:
- backgroundColor: "{colors.text-primary}"
- size: "~18cqw × 1px"
- description: "The system's only INK-BLACK rule — a strong terminal accent on cover/closing, sparingly."
- vertical-line:
- backgroundColor: "{colors.line}"
- size: "1px × full height, ~5cqw from edge"
- opacity: "0.3–0.4"
- description: "Drafting-paper alignment guide. Optional."
- image-placeholder:
- backgroundColor: "{colors.bg-secondary}"
- mark: "crossed +30°/−30° 1px taupe diagonals (an X)"
- typography: "small uppercase {typography.micro}"
- description: "The signature image-not-wired mark."
- team-photo:
- backgroundColor: "{colors.bg-secondary}"
- border: "0.07cqw solid {colors.line}"
- rounded: "50%"
- typography: "Playfair initial in {colors.accent}"
- description: "Circular portrait frame."
----
-
-# Cartesian — Frame (video / frame layer)
-
-## Brand adaptation (READ FIRST — the frontmatter is the source of truth)
-
-This is the **cartesian** preset remixed onto the captured brand. The YAML frontmatter above (colors · typography · components) is **normative and already correct — use it verbatim.** The prose below is the ORIGINAL preset's intent; read it THROUGH the frontmatter:
-
-- **Fonts** — already set to **Cormorant Garamond** (display) / **Inter** (body); ignore any preset font name lingering in prose.
-- **Colors** — use the frontmatter hex; preset color NAMES in prose (e.g. "cobalt", "cream") mean the remapped brand values.
-
-
-## Overview
-
-Cartesian at frame scale is a **quiet museum-catalog editorial system** — restraint through 1px
-lines. Every structural separator is a single 1px taupe hairline; there are no thick borders, no
-fills (save the faint white-overlay card), no shadows, no rounded rectangles. Hierarchy comes from
-**type contrast and negative space**, and atmosphere from **compass-drafted geometric rings**
-drifting behind content.
-
-The voice is a literary pairing: **Cormorant Garamond** at weight 400 (the thin-stroke didone, never
-bold, always sentence case) carries every headline, numeral, and quote mark in ink; **Cormorant Garamond**
-carries body in warm gray and labels in uppercase taupe with 2–3px tracking. The palette is five
-warm stones plus ink — no populist accent color exists. The correct density is **sparse and
-breathing**: one clear idea, well-framed, on stone paper.
-
-**Key characteristics at frame scale:**
-
-- **1px taupe hairline** as the universal structural device — every separator is this one line.
-- **Cormorant Garamond 400** (ink, sentence case) for display; **Cormorant Garamond** body (gray) + labels (taupe, tracked).
-- **Five warm stones + ink** — no red/blue/green; the only "color" is type contrast.
-- **Compass-drafted geometric rings** (solid + dashed, 20–50% opacity) behind content for mood.
-- **Flat** — zero shadow, zero rounded rectangle (circles only); the lone ink line is the `horizontal-accent`.
-- **Sparse and breathing** — generous negative space; crowding reads as broken.
-
-## The Frame
-
-### Frame Craft Bar
-
-Three eyeball tests gate every frame before any structural check:
-
-- **Squint** — one Playfair element dominates at **3–6× its nearest neighbor**; the serif/sans + size contrast carries hierarchy, not weight.
-- **Silence** — declarative frames read **55–60% empty**; Cartesian has **no dense frame** — even the agenda/index breathes (the system breaks when crowded).
-- **Restraint** — **at most two geo rings** per frame; the single INK-BLACK `horizontal-accent` rule used sparingly; no populist accent color ever.
-- **Reference** — aim at a **Vignelli editorial / Cooper Hewitt catalogue / pencil-and-tracing-paper plan**; failure looks like a **shadowed, rounded-card SaaS deck**.
-
-- **Primary:** 1920×1080 (16:9). Display authored in **`cqw`** (`px ÷ 1920 × 100 = cqw`).
-- **Vertical:** 1080×1920 (9:16). **Square:** 1080×1080 (1:1).
-- **Safe area:** `pad-x` (7cqw) generous gutters; geometry may bleed off an edge.
-
-**The container law (load-bearing).** Every frame ground sets `container-type: size`; ALL
-frame-relative units are `cqw`/`cqh` against it — never `vw`. The 1px hairlines and geo rings hold
-their proportion against the frame at any render size.
-
-## Colors
-
-Tokens identical to the source. `{colors.bg-primary}` is the ground; `{colors.text-primary}` ink is
-headlines and the one black accent rule; `{colors.text-secondary}` gray is body; `{colors.accent}`
-taupe is labels, numerals, small text; `{colors.line}` taupe is every 1px structural border.
-`{colors.bg-secondary}` is the only secondary fill (placeholders, photo frames). **No populist
-accent** — when emphasis is needed, grow the type, switch sans→serif, or add a single
-`horizontal-accent` ink line. Headlines are never taupe; small text is never ink.
-
-## Typography
-
-Two ramps. The **reading ramp** (Cormorant Garamond body 1.0cqw gray, labels in px taupe) carries copy + chrome;
-the **display ramp** (Playfair `h3` 1.8cqw → `display` 8.0cqw, all weight 400) carries every headline.
-
-- **Legibility floor:** any load-bearing line ≥ **1.4cqw**; px labels are chrome only.
-- **Fit-to-measure:** size the headline to its length. Cap the block at **≤ 78cqw**; ≤3 words → `display`/`h1`; 4–6 → `h2`; 7+ → `h3`. Cartesian has no hero-stat numeral — stats stay modest (`stat-figure` 3cqw).
-- **Playfair at 400, ink, sentence case** — never bold, never uppercase, never taupe. **Cormorant Garamond labels uppercase, 2–3px tracked, taupe.** Italic via Playfair italic for emphasis only.
-
-## Depth & Surface
-
-The flat plane is the only technique. Hierarchy from:
-
-- **Type contrast** — Playfair serif vs Cormorant Garamond sans; the 8cqw→0.7cqw scale.
-- **1px taupe hairlines** — every divider, card outline, timeline rule, photo ring.
-- **Tone** — ink vs gray vs taupe.
-- **Negative space** — generous padding.
-- **Geometric atmosphere** — compass rings that suggest depth without creating it.
-
-**Ceiling:** no box-shadow, no elevated card, no gradient, no rounded rectangle. The single ink line
-(`horizontal-accent`) is the only non-taupe rule.
-
-## Shapes
-
-- **50% (circle)** — card-icon, team-photo, nav-dot, every geo ring.
-- **0** — everything else; soft-rounded corners do not exist.
-
-## Components
-
-- **hairline** — the universal 1px taupe separator (the identity).
-- **card** (1px taupe + white-overlay) / **card-icon** (ringed circle) / **agenda-row** / **timeline** (line, no nodes) / **stats-cluster** — all built on the hairline.
-- **geo-ring** — compass decoration (solid + dashed), 1–2 per frame. **horizontal-accent** — the one ink line, sparingly. **vertical-line** — drafting guide.
-- **image-placeholder** (crossed-X) / **team-photo** (ringed initial) — the stone-fill placeholders.
-
-## Frame Treatments
-
-> Recipe: ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density.
-> Every frame is sparse and breathing; 1–2 geo decorations max.
-
-### 1 · Cover (identity · move: serif + compass ring · left)
-
-**Ground** `{colors.bg-primary}`, `pad-x`. **Composes** geo-ring (right, ~34cqw, solid+dashed), vertical-line (left), label, display/h1. **Focal** a 2–3 line Playfair `display`/`h1` headline in ink (italic on the key word), left-anchored, with a taupe `label` above and an Cormorant Garamond subtitle below. **Chrome** optional bottom meta row (Playfair value + taupe label). **Accent** the geo ring; optionally one `horizontal-accent` ink line (if it clears the meta). **Silence** ~55% empty. **Fixed** Playfair 400 ink sentence-case, ≤2 geo elements, 1px lines. **Free** title, ring placement, meta. **Density** sparse.
-
-### 2 · Agenda / Index (index · move: hairline list · left)
-
-**Ground** `{colors.bg-primary}`, `pad-x`. **Composes** label, h2, agenda-rows. **Focal** a Playfair `h2` over 4–6 agenda rows (Playfair numeral in taupe + Playfair label in ink), each on a 1px taupe rule. **Chrome** taupe `label` eyebrow. **Accent** none — taupe numerals carry it. **Silence** moderate; rows generously spaced. **Fixed** 1px taupe rules, Playfair 400. **Free** items, count. **Density** standard (sparse rows).
-
-### 3 · Pull Quote (quote · move: centered statement · compass ring)
-
-**Ground** `{colors.bg-primary}`, centered. **Composes** geo-ring (centered dashed, ~26cqw), quote-mark, h2/display-quote, attribution. **Focal** a 2-line Playfair quote in ink, centered, under a 50%-taupe Playfair quote-mark; a taupe uppercase attribution beneath. **Accent** the faint centered ring. **Silence** ~60% — deliberately open. **Fixed** Playfair 400, one ring, centered. **Free** quote, attribution. **Density** sparse.
-
-### 4 · Closing Plate (closer · move: centered ring · centered)
-
-**Ground** `{colors.bg-primary}`, centered. **Composes** geo-ring (centered, ~40cqw, solid+dashed), label, h1/display, horizontal-accent. **Focal** a 1–2 line Playfair sign-off in ink (italic key word), centered inside the largest compass ring; a short ink `horizontal-accent` beneath. **Accent** the ring + the one ink line. **Silence** ~60%. **Fixed** Playfair 400, centered, ≤2 geo. **Free** sign-off, ring scale. **Density** sparse.
-
-### 5 · Two-Column Editorial (content · move: asymmetric split · left)
-
-**Ground** `{colors.bg-primary}`, `pad-x`, two columns with `gap-xl`. **Composes** label, h2, body, image-placeholder (crossed-X) or card. **Focal** a Playfair `h2` + Cormorant Garamond body in the text column; an image-placeholder or card in the other. **Accent** none. **Silence** generous gutter. **Fixed** 1px taupe card/placeholder borders, white-overlay fill. **Free** which side is text, body copy. **Density** standard.
-
-### 6 · Stats / Timeline (data · move: hairline rail · left)
-
-**Ground** `{colors.bg-primary}`, `pad-x`. **Composes** label, h3, stats-cluster or timeline. **Focal** a modest Playfair stat row (or a 1px-rule timeline with year + headline + body, no nodes), framed by a 1px taupe top rule. **Accent** none. **Silence** moderate. **Fixed** modest stat scale, hairline rule, no nodes. **Free** figures, phases. **Density** standard.
-
-## Composition Rules
-
-### Do
-
-- Use a **single 1px taupe line** for every separator — the hairline is the identity.
-- Set every **Playfair headline at 400, ink, sentence case**; render labels taupe, uppercase, 2–3px tracked.
-- Layer **one or two compass rings** (solid + dashed, 20–50% opacity) behind content for atmosphere.
-- Let frames **breathe** — sparse, generous negative space; 55–60% empty on declarative frames.
-- Lean centered on quote/closer; asymmetric/left on cover/agenda/editorial. Use `bg-secondary` for placeholder fills.
-
-### Don't
-
-- Don't introduce a populist accent color — stone and ink only.
-- Don't bold Playfair, render headlines in taupe, or use thick (2px+) borders.
-- Don't add shadows, elevated cards, or rounded rectangles (circles only).
-- Don't crowd the frame — packed layouts read as broken.
-- Never more than two geo decorations per frame; don't blow a headline edge-to-edge.
-
-## Aspect-Ratio Behavior
-
-| Treatment | 16:9 | 9:16 | 1:1 |
-| -------------------- | -------------------------- | ----------------------------------- | --------------------------- |
-| Cover | headline left, ring right | headline top, ring below | headline upper, ring behind |
-| Agenda / Index | h2 + rows | h2 + rows (tighter) | h2 + rows |
-| Pull Quote | centered, ring behind | centered, taller | centered |
-| Closing Plate | centered in ring | centered, ring scaled | centered |
-| Two-Column Editorial | text + visual side-by-side | stacked (collapse) | stacked |
-| Stats / Timeline | horizontal rail | vertical stack (drop timeline rule) | compact |
-
-Generous `pad-x` holds on the short edge; re-step display per ratio above the 1.4cqw floor. On
-9:16, the timeline rule loses meaning when stacked — switch to a vertical list (per source).
-
-## Approved Entities
-
-No real customers, logos, or vendors are defined in the source — render any such mark as a
-placeholder (the crossed-X image-placeholder, or a ringed initial for portraits).
-
-## Numerals & Claims (hard rule)
-
-Never invent figures, dates, or counts at frame scale. Render slots as `— figure —`, `{metric}`.
-Stats and timeline years carry placeholders until the script supplies them. Agenda ordinals
-(01, 02…) are decorative and may be sequential.
-
-## Pre-Render Self-Audit
-
-- **Squint** — one Playfair element dominates; the serif/sans contrast carries hierarchy.
-- **Silence** — declarative frames 55–60% empty; nothing is crowded.
-- **Palette** — five stones + ink only; no populist accent; headlines ink, labels taupe.
-- **Lines** — every separator is a 1px taupe hairline; the only ink line is `horizontal-accent`.
-- **Type** — Playfair 400 sentence-case, fit-to-measure; labels uppercase 2–3px; ≥1.4cqw floor.
-- **Depth** — 0 shadow, 0 rounded rectangle; ≤2 geo rings per frame.
-- **Anchor** — centered on quote/closer, left/asymmetric on cover/agenda/editorial; no 3 in a row alike.
-- **Fabrication** — every numeral traces to the script, else placeholder.
-
-## Known Gaps
-
-- **Motion intentionally out of scope.** frame.md specifies composition only; the 0.6s fade in the source is a deck mechanic.
-- **Cormorant Garamond + Cormorant Garamond via Google Fonts.** CJK pairing (Noto Serif SC 700/400) carries over; Playfair has no Hanzi italic — substitute weight/taupe for emphasis.
-- **9:16 / 1:1 are guidance**; verify the legibility floor and that the timeline collapses to a vertical list.
-- Geo rings, the crossed-X placeholder, and the dashed inner ring are CSS-only; no external imagery is required.
diff --git a/videos/dw-new-arrivals-reveal/hyperframes.json b/videos/dw-new-arrivals-reveal/hyperframes.json
deleted file mode 100644
index dc9ec2e..0000000
--- a/videos/dw-new-arrivals-reveal/hyperframes.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
- "$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
- "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
- "paths": {
- "blocks": "compositions",
- "components": "compositions/components",
- "assets": "assets"
- },
- "media": {
- "autoProxy": true
- }
-}
diff --git a/videos/dw-new-arrivals-reveal/index.html b/videos/dw-new-arrivals-reveal/index.html
deleted file mode 100644
index cfed975..0000000
--- a/videos/dw-new-arrivals-reveal/index.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!doctype html>
-<html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=1920, height=1080" />
- <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
- <style>
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- html,
- body {
- margin: 0;
- width: 1920px;
- height: 1080px;
- overflow: hidden;
- background: #000;
- }
- body {
- font-family: "Inter", sans-serif;
- }
- code,
- pre,
- .monospace {
- font-family: "JetBrains Mono", monospace;
- }
- </style>
- </head>
- <body>
- <div
- id="root"
- data-composition-id="main"
- data-start="0"
- data-duration="10"
- data-width="1920"
- data-height="1080"
- >
-
-
-
- <!--
- Add your clips here. Example:
- <div id="title" class="clip" data-start="0" data-duration="5" data-track-index="1"
- style="font-size: 64px; color: #fff; padding: 40px">
- Hello World
- </div>
- -->
- </div>
-
- <script>
- window.__timelines = window.__timelines || {};
- const tl = gsap.timeline({ paused: true });
- // Example: tl.from("#title", { opacity: 0, y: -50, duration: 1 }, 0);
- window.__timelines["main"] = tl;
- </script>
- </body>
-</html>
diff --git a/videos/dw-new-arrivals-reveal/meta.json b/videos/dw-new-arrivals-reveal/meta.json
deleted file mode 100644
index 710cb9a..0000000
--- a/videos/dw-new-arrivals-reveal/meta.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "id": "dw-new-arrivals-reveal",
- "name": "dw-new-arrivals-reveal",
- "createdAt": "2026-07-17T14:50:51.442Z"
-}
\ No newline at end of file
diff --git a/videos/dw-new-arrivals-reveal/package.json b/videos/dw-new-arrivals-reveal/package.json
deleted file mode 100644
index 791cae4..0000000
--- a/videos/dw-new-arrivals-reveal/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- "name": "dw-new-arrivals-reveal",
- "private": true,
- "type": "module",
- "scripts": {
- "dev": "npx --yes hyperframes@0.7.61 preview",
- "check": "npx --yes hyperframes@0.7.61 check",
- "render": "npx --yes hyperframes@0.7.61 render",
- "publish": "npx --yes hyperframes@0.7.61 publish"
- }
-}
← e1c1a20 auto-data-snapshot: 2026-08-30T07:15:22 (3 data files) — dat
·
back to Dw Marketing Reels
·
auto-data-snapshot: 2026-08-31T07:38:15 (3 data files) — dat 20b07bf →