103 lines
6.0 KiB
HTML
103 lines
6.0 KiB
HTML
<!doctype html>
|
|
<html><head>
|
|
<meta name="description" content="FEEL IT Run the glove along the bead. Feather it. Not glassy. Not gutted. Ripples like straight weather."><meta charset="UTF-8"/>
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<style>
|
|
body{margin:0;background:#0c0e0a;color:#e8e2d4;font-family:"Courier New",monospace}
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#0c0e0a}
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
|
.plate{position:absolute;inset:0}
|
|
/* steel plate with fine brushed grain */
|
|
.grain{position:absolute;inset:0;opacity:.05;
|
|
background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px)}
|
|
.title-text{font-size:132px;letter-spacing:10px;text-transform:uppercase;
|
|
border:4px solid #e8e2d4;padding:30px 70px;box-shadow:0 0 80px rgba(220,180,60,.25)}
|
|
.bead{stroke-linecap:round;stroke-linejoin:round;fill:none}
|
|
.band{opacity:0}
|
|
.bodycopy{position:absolute;bottom:120px;left:200px;right:200px;
|
|
text-align:center;font-size:52px;line-height:1.35;color:#d8d2c2}
|
|
.bigword{position:absolute;top:150px;left:0;right:0;text-align:center;
|
|
font-size:230px;font-weight:700;letter-spacing:4px;text-transform:uppercase}
|
|
.metric{position:absolute;bottom:70px;right:80px;font-size:30px;color:#9a937f}
|
|
.toe{stroke:#c8c2b2}
|
|
</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|
</head>
|
|
<body>
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="31">
|
|
|
|
<!-- ============ SCENE 1 : THE FEEL ============ -->
|
|
<section id="s1" class="clip" data-start="0" data-duration="10" data-track-index="1">
|
|
<div class="plate"><div class="grain"></div>
|
|
<svg class="plate" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice">
|
|
<path class="toe" d="M100 640 Q960 540 1820 640" stroke-width="20"/>
|
|
<path class="bead" d="M100 640 Q300 610 500 640 Q700 670 900 640 Q1100 610 1300 640 Q1500 670 1700 640 Q1780 628 1820 640" stroke="#cfc9b8" stroke-width="34"/>
|
|
<path class="bead" d="M100 640 Q300 610 500 640 Q700 670 900 640 Q1100 610 1300 640 Q1500 670 1700 640 Q1780 628 1820 640" stroke="#8f8a78" stroke-width="52" opacity="0.35"/>
|
|
</svg>
|
|
</div>
|
|
<h1 id="s1-word" class="bigword">FEEL IT</h1>
|
|
<p id="s1-copy" class="bodycopy">Run the glove along the bead. Feather it.<br/>Not glassy. Not gutted. Ripples like straight weather.</p>
|
|
</section>
|
|
|
|
<!-- ============ SCENE 2 : COLOR ============ -->
|
|
<section id="s2" class="clip" data-start="10" data-duration="10" data-track-index="1">
|
|
<div class="plate"><div class="grain"></div>
|
|
<svg class="plate" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice">
|
|
<defs>
|
|
<linearGradient id="heat" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0" stop-color="#d8cc92"/>
|
|
<stop offset="0.35" stop-color="#7fa8c8"/>
|
|
<stop offset="0.6" stop-color="#8fa0b8"/>
|
|
<stop offset="1" stop-color="#6f6a5c"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<path class="bead" d="M100 560 Q500 500 900 560 Q1300 620 1820 560" stroke="url(#heat)" stroke-width="90"/>
|
|
</svg>
|
|
</div>
|
|
<h1 id="s2-word" class="bigword" style="color:#e8e2d4">STRAW / BLUE</h1>
|
|
<p id="s2-copy" class="bodycopy">Straw and light blue — came down slow, right.<br/>Oxide gray or rainbow burn — you cooked it.</p>
|
|
<div id="s2-metric" class="metric">HEAT-AFFECTED ZONE · TEMP °F</div>
|
|
</section>
|
|
|
|
<!-- ============ SCENE 3 : THE SIGNATURE ============ -->
|
|
<section id="s3" class="clip" data-start="20" data-duration="11" data-track-index="1">
|
|
<div class="plate"><div class="grain"></div>
|
|
<svg class="plate" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice">
|
|
<path id="dime-path" class="bead" d="M120 650 Q340 580 560 650 Q780 720 1000 650 Q1220 580 1440 650 Q1660 720 1800 650" stroke="#cfc9b8" stroke-width="38"/>
|
|
<path class="bead" d="M120 650 Q340 580 560 650 Q780 720 1000 650 Q1220 580 1440 650 Q1660 720 1800 650" stroke="rgba(207,201,184,.3)" stroke-width="64"/>
|
|
</svg>
|
|
</div>
|
|
<h1 id="s3-word" class="bigword" style="font-size:190px">YOUR SIGNATURE</h1>
|
|
<p id="s3-copy" class="bodycopy">Overlapping rip, the stacked dime.<br/>Tack the toes, tie each pass in. Nobody welds it but you.</p>
|
|
<div id="s3-metric" class="metric">READ · THE · WELD — A. LARGE, GARWIN IA</div>
|
|
</section>
|
|
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="10"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="20"></audio>
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
|
|
|
</div>
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
const tl = gsap.timeline({ paused: true });
|
|
|
|
/* scene 1 */
|
|
tl.from("#s1-word", { opacity: 0, y: -30, duration: 0.5, ease: "power3.out" }, 0.3);
|
|
tl.from("#s1-copy", { opacity: 0, y: 20, duration: 0.5, ease: "power2.out" }, 0.8);
|
|
tl.to("#s1", { opacity: 0, duration: 0.4 }, 9.5);
|
|
|
|
/* scene 2 */
|
|
tl.from("#s2-word", { opacity: 0, scale: 0.9, duration: 0.6, ease: "power3.out" }, 10.3);
|
|
tl.from("#s2-copy", { opacity: 0, y: 20, duration: 0.5 }, 10.9);
|
|
tl.from("#s2-metric", { opacity: 0, x: 20, duration: 0.5 }, 11.2);
|
|
tl.to("#s2", { opacity: 0, duration: 0.4 }, 19.5);
|
|
|
|
/* scene 3 */
|
|
tl.from("#s3-word", { opacity: 0, y: -30, duration: 0.6, ease: "power3.out" }, 20.3);
|
|
tl.from("#s3-copy", { opacity: 0, y: 20, duration: 0.5 }, 21.0);
|
|
tl.from("#s3-metric", { opacity: 0, x: 20, duration: 0.5 }, 21.4);
|
|
tl.from("#dime-path", { opacity: 0, strokeDasharray: "4000", strokeDashoffset: 4000, duration: 1.6, ease: "power1.inOut" }, 20.5);
|
|
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</body></html> |