89 lines
4.4 KiB
HTML
89 lines
4.4 KiB
HTML
<!doctype html>
|
|
<html><head>
|
|
<meta name="description" content="Each layer dries on its own time. Wet into wet blooms where it wants."><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:#f3ead9;color:#3b3d33;font-family:Georgia,serif}
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
|
.paper{position:absolute;inset:0;background:
|
|
radial-gradient(ellipse at 30% 20%, #fbf6e8 0%, #f3ead9 45%, #e8dcc3 100%)}
|
|
.wash{position:absolute;border-radius:50%;
|
|
filter:blur(28px);opacity:.62}
|
|
.line{position:absolute;left:0;right:0;
|
|
background:linear-gradient(90deg,transparent,#4a5d73 45%,#4a5d73 55%,transparent)}
|
|
.title{position:relative;text-align:center;padding:0 240px}
|
|
h1{font-size:118px;font-weight:400;letter-spacing:.02em;margin:0;color:#2f3328;
|
|
font-style:italic}
|
|
.sub{font-size:44px;color:#5d654f;margin-top:28px;letter-spacing:.14em;
|
|
text-transform:uppercase}
|
|
.big{font-size:150px;font-weight:400;color:#2f3328;font-style:italic;margin:0}
|
|
.cap{position:relative;font-size:62px;line-height:1.35;color:#3f4436;font-style:italic;
|
|
text-align:center;padding:0 300px}
|
|
</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="45">
|
|
|
|
<section id="s1" class="clip" data-start="0" data-duration="13" data-track-index="1">
|
|
<div class="paper"></div>
|
|
<div class="wash" id="wash1"></div>
|
|
<div class="title">
|
|
<h1 id="t1">A Wash Won't Be Pushed</h1>
|
|
<div class="sub" id="s1-sub">watercolor · waiting · gum arabic</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="s2" class="clip" data-start="13" data-duration="12" data-track-index="1">
|
|
<div class="paper"></div>
|
|
<div class="wash" id="wash2"></div>
|
|
<div class="line" id="line2"></div>
|
|
<p class="cap" id="c2">Each layer dries on its own time. Wet into wet blooms where it wants.</p>
|
|
</section>
|
|
|
|
<section id="s3" class="clip" data-start="25" data-duration="11" data-track-index="1">
|
|
<div class="paper"></div>
|
|
<div class="wash" id="wash3"></div>
|
|
<p class="cap" id="c3">The crawl from shine to matte. When it goes quiet, it belongs to you.</p>
|
|
</section>
|
|
|
|
<section id="s4" class="clip" data-start="36" data-duration="9" data-track-index="1">
|
|
<div class="paper"></div>
|
|
<div class="wash" id="wash4"></div>
|
|
<p class="big" id="c4">It waits.</p>
|
|
</section>
|
|
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="13"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="25"></audio>
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="36"></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 });
|
|
|
|
function wash(el){ el.style.width='1100px'; el.style.height='1100px'; el.style.left='55%';
|
|
el.style.top='45%'; el.style.transform='translate(-50%,-50%)'; el.style.background='#7a6a5a'; }
|
|
|
|
wash('#wash1'); wash('#wash2'); wash('#wash3'); wash('#wash4');
|
|
|
|
tl.fromTo('#wash1',{opacity:.18},{opacity:.62,duration:7,ease:'power1.out'},0.3);
|
|
tl.fromTo('#t1',{opacity:0,y:26},{opacity:1,y:0,duration:1.6,ease:'power3.out'},1.2);
|
|
tl.fromTo('#s1-sub',{opacity:0},{opacity:1,duration:1.2},3.2);
|
|
|
|
tl.fromTo('#wash2',{opacity:0,scale:1.15},{opacity:.55,scale:1,duration:6,ease:'power1.inOut'},13.4);
|
|
tl.fromTo('#line2',{height:0},{height:3,duration:2.4,ease:'power2.out'},14);
|
|
tl.fromTo('#c2',{opacity:0,y:20},{opacity:1,y:0,duration:1.4},13.8);
|
|
|
|
tl.fromTo('#wash3',{opacity:.1,scale:1.2},{opacity:.5,scale:1,duration:6,ease:'power1.inOut'},25.4);
|
|
tl.fromTo('#c3',{opacity:0},{opacity:1,duration:1.4},25.8);
|
|
|
|
tl.fromTo('#wash4',{opacity:.08,scale:1.25},{opacity:.5,scale:1,duration:5,ease:'none'},36.2);
|
|
tl.fromTo('#c4',{opacity:0,letterSpacing:'0.1em'},{opacity:1,letterSpacing:'0.06em',duration:1.6,ease:'power2.out'},36.6);
|
|
tl.to('#root',{opacity:1,duration:0.1},36);
|
|
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</body></html> |