|
| 1 | +<!doctype html> |
| 2 | +<!-- |
| 3 | + torn-paper-rip demo. This standalone composition mounts the primitive |
| 4 | + FULL-BLEED through data-composition-src, kraft tone and right-to-left |
| 5 | + travel to prove the non-default variable path, and slots two procedural |
| 6 | + scenes so the tear reads as one photo tearing into the next rather than |
| 7 | + the bare token cards 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>Torn Paper Rip 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: #0b0c10; |
| 26 | + } |
| 27 | + #root { |
| 28 | + --bg: #0b0c10; |
| 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: #0b0c10; |
| 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 | + display: grid; |
| 49 | + place-items: end start; |
| 50 | + } |
| 51 | + .demo-scene img { |
| 52 | + display: block; |
| 53 | + width: 100%; |
| 54 | + height: 100%; |
| 55 | + object-fit: cover; |
| 56 | + } |
| 57 | + .demo-caption { |
| 58 | + position: relative; |
| 59 | + margin: 64px; |
| 60 | + padding: 14px 22px; |
| 61 | + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
| 62 | + font-weight: 700; |
| 63 | + font-size: 30px; |
| 64 | + letter-spacing: 0.04em; |
| 65 | + color: #fff; |
| 66 | + background: rgba(10, 10, 12, 0.35); |
| 67 | + border-radius: 8px; |
| 68 | + backdrop-filter: blur(6px); |
| 69 | + } |
| 70 | + </style> |
| 71 | + </head> |
| 72 | + <body> |
| 73 | + <template data-slot="torn-paper-rip-from"> |
| 74 | + <div class="demo-scene"> |
| 75 | + <img alt="" src="" id="demo-scene-from-img" /> |
| 76 | + <div class="demo-caption">Harbor at dusk</div> |
| 77 | + </div> |
| 78 | + </template> |
| 79 | + <template data-slot="torn-paper-rip-to"> |
| 80 | + <div class="demo-scene"> |
| 81 | + <img alt="" src="" id="demo-scene-to-img" /> |
| 82 | + <div class="demo-caption">Terrace, morning</div> |
| 83 | + </div> |
| 84 | + </template> |
| 85 | + |
| 86 | + <div |
| 87 | + id="root" |
| 88 | + data-composition-id="torn-paper-rip-demo" |
| 89 | + data-start="0" |
| 90 | + data-width="1920" |
| 91 | + data-height="1080" |
| 92 | + data-duration="2.4" |
| 93 | + data-fps="30" |
| 94 | + > |
| 95 | + <div |
| 96 | + id="torn-paper-rip-mount" |
| 97 | + class="mount-bleed clip" |
| 98 | + data-composition-id="torn-paper-rip" |
| 99 | + data-composition-src="./torn-paper-rip.html" |
| 100 | + data-variable-values='{"direction":"right-to-left","tone":"kraft","roughness":72}' |
| 101 | + data-start="0" |
| 102 | + data-duration="2.4" |
| 103 | + data-track-index="0" |
| 104 | + data-width="1920" |
| 105 | + data-height="1080" |
| 106 | + ></div> |
| 107 | + </div> |
| 108 | + |
| 109 | + <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> |
| 110 | + <script> |
| 111 | + (function () { |
| 112 | + // Two procedural SVG scenes, so the demo is deterministic and ships |
| 113 | + // nothing licensed (same approach as grade-split-reveal). |
| 114 | + function harborScene() { |
| 115 | + return ( |
| 116 | + '<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">' + |
| 117 | + '<defs><linearGradient id="hs-sky" x1="0" y1="0" x2="0" y2="1">' + |
| 118 | + '<stop offset="0" stop-color="#1b2340"/><stop offset="0.55" stop-color="#7a4a5a"/>' + |
| 119 | + '<stop offset="1" stop-color="#f0a75c"/></linearGradient>' + |
| 120 | + '<linearGradient id="hs-sea" x1="0" y1="0" x2="0" y2="1">' + |
| 121 | + '<stop offset="0" stop-color="#c98a55"/><stop offset="1" stop-color="#131226"/></linearGradient></defs>' + |
| 122 | + '<rect width="1600" height="900" fill="url(#hs-sky)"/>' + |
| 123 | + '<circle cx="1080" cy="560" r="70" fill="#ffe6bf"/>' + |
| 124 | + '<path d="M0 620 L260 560 L470 610 L700 540 L900 600 L1140 550 L1600 600 L1600 900 L0 900 Z" fill="#241a2e"/>' + |
| 125 | + '<rect y="640" width="1600" height="260" fill="url(#hs-sea)"/>' + |
| 126 | + '<rect x="1050" y="640" width="60" height="260" fill="#ffdfa8" opacity="0.4"/>' + |
| 127 | + "</svg>" |
| 128 | + ); |
| 129 | + } |
| 130 | + function terraceScene() { |
| 131 | + return ( |
| 132 | + '<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">' + |
| 133 | + '<defs><linearGradient id="ts-sky" x1="0" y1="0" x2="0" y2="1">' + |
| 134 | + '<stop offset="0" stop-color="#bfe3f2"/><stop offset="1" stop-color="#f4ead0"/></linearGradient></defs>' + |
| 135 | + '<rect width="1600" height="900" fill="url(#ts-sky)"/>' + |
| 136 | + '<circle cx="420" cy="220" r="90" fill="#fff7dd"/>' + |
| 137 | + '<rect y="560" width="1600" height="340" fill="#e7d9b8"/>' + |
| 138 | + '<g fill="#c9b183"><rect x="60" y="600" width="220" height="260" rx="6"/>' + |
| 139 | + '<rect x="340" y="640" width="220" height="220" rx="6"/>' + |
| 140 | + '<rect x="1280" y="600" width="260" height="260" rx="6"/></g>' + |
| 141 | + '<g stroke="#9c8a5f" stroke-width="6"><line x1="0" y1="560" x2="1600" y2="560"/></g>' + |
| 142 | + "</svg>" |
| 143 | + ); |
| 144 | + } |
| 145 | + // Elements inside an inert <template> are not in the live document, |
| 146 | + // so they must be reached through the template's own content |
| 147 | + // fragment, never document.getElementById. |
| 148 | + function setSlotImage(slotName, imgId, svg) { |
| 149 | + document |
| 150 | + .querySelector('template[data-slot="' + slotName + '"]') |
| 151 | + .content.getElementById(imgId).src = |
| 152 | + "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg); |
| 153 | + } |
| 154 | + setSlotImage("torn-paper-rip-from", "demo-scene-from-img", harborScene()); |
| 155 | + setSlotImage("torn-paper-rip-to", "demo-scene-to-img", terraceScene()); |
| 156 | + |
| 157 | + window.__timelines = window.__timelines || {}; |
| 158 | + window.__timelines["torn-paper-rip-demo"] = gsap.timeline({ paused: true }); |
| 159 | + })(); |
| 160 | + </script> |
| 161 | + </body> |
| 162 | +</html> |
0 commit comments