97 lines
6.0 KiB
HTML
97 lines
6.0 KiB
HTML
<!doctype html>
|
|
<html><head>
|
|
<meta name="description" content="From the woodshop The Mortise &amp; Tenon: A joint that holds a hundred years Part one — the tenon You cut the tongue that will ride inside the socket…"><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:#151008;color:#f2e8d5;font-family:Georgia,'Times New Roman',serif}
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#1a120a}
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
|
.veil{position:absolute;inset:0;background:
|
|
radial-gradient(1200px 700px at 50% 40%, rgba(60,40,18,.35), rgba(0,0,0,.7))}
|
|
h1{font-size:120px;line-height:1.08;margin:0;font-weight:normal;letter-spacing:.5px;text-align:center;max-width:1500px}
|
|
h2{font-size:64px;line-height:1.2;margin:0;font-weight:normal;text-align:center;max-width:1500px}
|
|
.kicker{font-size:34px;letter-spacing:6px;text-transform:uppercase;color:#c99a5b;margin-bottom:30px;text-align:center}
|
|
.joint{position:absolute;bottom:80px;right:90px}
|
|
.joint .bar{position:absolute;background:#b98a50;border:3px solid #5b3f1f}
|
|
.joint .peg{position:absolute;background:#7a542c;border:2px solid #3f2b12;border-radius:50%}
|
|
.card{position:absolute;inset:0;display:grid;place-items:end start;padding:90px;box-sizing:border-box}
|
|
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
|
|
.caption{position:relative;background:rgba(20,14,6,.78);padding:40px 56px;max-width:820px;border-left:6px solid #c99a5b}
|
|
.caption h2{margin:0;text-align:left;font-size:52px;line-height:1.25}
|
|
.foot{position:absolute;bottom:60px;left:0;right:0;text-align:center;font-size:34px;letter-spacing:4px;color:#caa97a;text-transform:uppercase}
|
|
</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="70">
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="18"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="36"></audio>
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="52"></audio>
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.16"></audio>
|
|
|
|
<!-- Scene 1 : opening -->
|
|
<section id="s1" class="clip" data-start="0" data-duration="18" data-track-index="1">
|
|
<div class="veil"></div>
|
|
<div style="position:relative;text-align:center">
|
|
<div class="kicker" id="s1-kick">From the woodshop</div>
|
|
<h1 id="s1-title">The Mortise & Tenon:<br/>A joint that holds<br/>a hundred years</h1>
|
|
</div>
|
|
<svg class="joint" width="320" height="320" viewBox="0 0 320 320" id="s1-joint">
|
|
<rect x="40" y="110" width="240" height="36" fill="#b98a50" stroke="#5b3f1f" stroke-width="3"/>
|
|
<rect x="110" y="90" width="100" height="176" fill="#a87c43" stroke="#5b3f1f" stroke-width="3"/>
|
|
</svg>
|
|
</section>
|
|
|
|
<!-- Scene 2 : the tenon -->
|
|
<section id="s2" class="clip" data-start="18" data-duration="18" data-track-index="1">
|
|
<img id="s2-img" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42" src="https://pixabay.com/get/gbcf7a2417bab1e5288b8b6ab3555627b002acae4fc609b0410bb87b51aec3127cbd3d6f9aaad1ea8ba8b70e8e2480e9c7201a6d0594ef9fb58c7eb403af30e76_1280.png" alt="tenon saw"/>
|
|
<div class="veil"></div>
|
|
<div style="position:relative;text-align:center">
|
|
<div class="kicker" id="s2-kick">Part one — the tenon</div>
|
|
<h2 id="s2-title">You cut the tongue that<br/>will ride inside the socket</h2>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Scene 3 : the mortise -->
|
|
<section id="s3" class="clip" data-start="36" data-duration="16" data-track-index="1">
|
|
<img id="s3-img" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45" src="https://images.pexels.com/photos/7109997/pexels-photo-7109997.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="chiseling a mortise"/>
|
|
<div class="veil"></div>
|
|
<div style="position:relative;text-align:center">
|
|
<div class="kicker" id="s3-kick">Part two — the socket</div>
|
|
<h2 id="s3-title">Then you chop the mortise,<br/>straight and square,<br/>wall to wall</h2>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Scene 4 : the drawbore -->
|
|
<section id="s4" class="clip" data-start="52" data-duration="18" data-track-index="1">
|
|
<div class="veil"></div>
|
|
<div style="position:relative;text-align:center">
|
|
<div class="kicker" id="s4-kick">The last truth</div>
|
|
<h2 id="s4-title">Drive the peg and it<br/>draws the shoulders<br/>tight for good</h2>
|
|
</div>
|
|
<div class="foot" id="s4-foot">Patience · Square · True — A Beardsworth short</div>
|
|
</section>
|
|
</div>
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
const tl = gsap.timeline({ paused: true });
|
|
// s1
|
|
tl.from("#s1-title", { opacity: 0, y: 40, duration: 0.8, ease: "power3.out" }, 0.4);
|
|
tl.from("#s1-kick", { opacity: 0, letterSpacing: 16, duration: 0.7, ease: "power2.out" }, 0.2);
|
|
tl.from("#s1-joint", { opacity: 0, y: 60, duration: 1.0, ease: "power3.out" }, 1.4);
|
|
// s2
|
|
tl.from("#s2-title", { opacity: 0, y: 30, duration: 0.7, ease: "power3.out" }, 18.6);
|
|
tl.from("#s2-kick", { opacity: 0, duration: 0.5 }, 18.3);
|
|
tl.to("#s2-img", { scale: 1.08, duration: 12, ease: "power1.out" }, 19);
|
|
// s3
|
|
tl.from("#s3-title", { opacity: 0, y: 30, duration: 0.7, ease: "power3.out" }, 36.6);
|
|
tl.from("#s3-kick", { opacity: 0, duration: 0.5 }, 36.3);
|
|
tl.from("#s3-title", { scale: 1.04, duration: 9, ease: "power1.out" }, 37);
|
|
// s4
|
|
tl.from("#s4-title", { opacity: 0, y: 30, duration: 0.7, ease: "power3.out" }, 52.6);
|
|
tl.from("#s4-kick", { opacity: 0, duration: 0.5 }, 52.3);
|
|
tl.from("#s4-foot", { opacity: 0, duration: 0.9 }, 60);
|
|
tl.to("#s4-title", { opacity: 0.2, duration: 1.2, ease: "power1.in" }, 66.5);
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</body></html> |