|
| 1 | +<!doctype html> |
| 2 | +<!-- |
| 3 | + paper-collage-reveal demo. This standalone composition mounts the |
| 4 | + primitive FULL-BLEED through data-composition-src, 7 scraps and scatter |
| 5 | + spread to prove the non-default variable path, and slots a procedural |
| 6 | + scene so the reveal uncovers a real photo rather than the bare token card |
| 7 | + the primitive falls back to. |
| 8 | +--> |
| 9 | +<html lang="en"> |
| 10 | + <head> |
| 11 | + <meta charset="UTF-8" /> |
| 12 | + <meta name="viewport" content="width=1920, height=1080" /> |
| 13 | + <title>Paper Collage Reveal Demo</title> |
| 14 | + <style> |
| 15 | + * { |
| 16 | + margin: 0; |
| 17 | + padding: 0; |
| 18 | + box-sizing: border-box; |
| 19 | + } |
| 20 | + html, |
| 21 | + body { |
| 22 | + width: 1920px; |
| 23 | + height: 1080px; |
| 24 | + overflow: hidden; |
| 25 | + background: #14161c; |
| 26 | + } |
| 27 | + #root { |
| 28 | + --bg: #14161c; |
| 29 | + --fg: #f2ede2; |
| 30 | + --surface: #fffdf8; |
| 31 | + --accent: #2f6fed; |
| 32 | + --accent-2: #b98a4e; |
| 33 | + position: relative; |
| 34 | + width: 1920px; |
| 35 | + height: 1080px; |
| 36 | + overflow: hidden; |
| 37 | + background: var(--bg); |
| 38 | + } |
| 39 | + .mount-bleed { |
| 40 | + position: absolute; |
| 41 | + inset: 0; |
| 42 | + container-type: size; |
| 43 | + overflow: hidden; |
| 44 | + } |
| 45 | + .demo-scene { |
| 46 | + position: absolute; |
| 47 | + inset: 0; |
| 48 | + } |
| 49 | + .demo-scene img { |
| 50 | + display: block; |
| 51 | + width: 100%; |
| 52 | + height: 100%; |
| 53 | + object-fit: cover; |
| 54 | + } |
| 55 | + .demo-caption { |
| 56 | + position: absolute; |
| 57 | + left: 64px; |
| 58 | + bottom: 64px; |
| 59 | + padding: 14px 22px; |
| 60 | + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
| 61 | + font-weight: 700; |
| 62 | + font-size: 30px; |
| 63 | + letter-spacing: 0.04em; |
| 64 | + color: #fff; |
| 65 | + background: rgba(10, 10, 12, 0.35); |
| 66 | + border-radius: 8px; |
| 67 | + backdrop-filter: blur(6px); |
| 68 | + } |
| 69 | + </style> |
| 70 | + </head> |
| 71 | + <body> |
| 72 | + <template data-slot="paper-collage-reveal-content"> |
| 73 | + <div class="demo-scene"> |
| 74 | + <img alt="" src="" id="demo-scene-img" /> |
| 75 | + <div class="demo-caption">Field notes, spring</div> |
| 76 | + </div> |
| 77 | + </template> |
| 78 | + |
| 79 | + <div |
| 80 | + id="root" |
| 81 | + data-composition-id="paper-collage-reveal-demo" |
| 82 | + data-start="0" |
| 83 | + data-width="1920" |
| 84 | + data-height="1080" |
| 85 | + data-duration="2.6" |
| 86 | + data-fps="30" |
| 87 | + > |
| 88 | + <div |
| 89 | + id="paper-collage-reveal-mount" |
| 90 | + class="mount-bleed clip" |
| 91 | + data-composition-id="paper-collage-reveal" |
| 92 | + data-composition-src="./paper-collage-reveal.html" |
| 93 | + data-variable-values='{"panels":7,"tone":"mixed","spread":"scatter"}' |
| 94 | + data-start="0" |
| 95 | + data-duration="2.6" |
| 96 | + data-track-index="0" |
| 97 | + data-width="1920" |
| 98 | + data-height="1080" |
| 99 | + ></div> |
| 100 | + </div> |
| 101 | + |
| 102 | + <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> |
| 103 | + <script> |
| 104 | + (function () { |
| 105 | + // A procedural SVG scene, so the demo is deterministic and ships |
| 106 | + // nothing licensed (same approach as grade-split-reveal). |
| 107 | + function fieldScene() { |
| 108 | + return ( |
| 109 | + '<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">' + |
| 110 | + '<defs><linearGradient id="fs-sky" x1="0" y1="0" x2="0" y2="1">' + |
| 111 | + '<stop offset="0" stop-color="#9fd0e8"/><stop offset="0.6" stop-color="#d9e9c9"/>' + |
| 112 | + '<stop offset="1" stop-color="#b7cf7c"/></linearGradient></defs>' + |
| 113 | + '<rect width="1600" height="900" fill="url(#fs-sky)"/>' + |
| 114 | + '<circle cx="1220" cy="200" r="80" fill="#fff8de"/>' + |
| 115 | + '<path d="M0 560 L260 500 L520 560 L800 480 L1080 560 L1360 500 L1600 550 L1600 900 L0 900 Z" fill="#7fa15a"/>' + |
| 116 | + '<path d="M0 620 L300 580 L620 630 L900 560 L1200 620 L1600 590 L1600 900 L0 900 Z" fill="#5c8442"/>' + |
| 117 | + '<g fill="#3f6330" opacity="0.8">' + |
| 118 | + '<circle cx="220" cy="700" r="18"/><circle cx="420" cy="740" r="14"/>' + |
| 119 | + '<circle cx="960" cy="700" r="20"/><circle cx="1310" cy="730" r="16"/></g>' + |
| 120 | + "</svg>" |
| 121 | + ); |
| 122 | + } |
| 123 | + // Elements inside an inert <template> are not in the live document, |
| 124 | + // so they must be reached through the template's own content |
| 125 | + // fragment, never document.getElementById. |
| 126 | + document |
| 127 | + .querySelector('template[data-slot="paper-collage-reveal-content"]') |
| 128 | + .content.getElementById("demo-scene-img").src = |
| 129 | + "data:image/svg+xml;charset=utf-8," + encodeURIComponent(fieldScene()); |
| 130 | + |
| 131 | + window.__timelines = window.__timelines || {}; |
| 132 | + window.__timelines["paper-collage-reveal-demo"] = gsap.timeline({ paused: true }); |
| 133 | + })(); |
| 134 | + </script> |
| 135 | + </body> |
| 136 | +</html> |
0 commit comments