245 lines
7.6 KiB
HTML
245 lines
7.6 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=1080, height=1920" />
|
||
|
|
<script src="assets/vendor/gsap.min.js"></script>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
html,
|
||
|
|
body {
|
||
|
|
width: 1080px;
|
||
|
|
height: 1920px;
|
||
|
|
overflow: hidden;
|
||
|
|
background: #000;
|
||
|
|
}
|
||
|
|
#root {
|
||
|
|
position: relative;
|
||
|
|
width: 1080px;
|
||
|
|
height: 1920px;
|
||
|
|
overflow: hidden;
|
||
|
|
background: #F5F0E6;
|
||
|
|
}
|
||
|
|
.scene {
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div
|
||
|
|
id="root"
|
||
|
|
data-composition-id="main"
|
||
|
|
data-start="0"
|
||
|
|
data-duration="54.733"
|
||
|
|
data-width="1080"
|
||
|
|
data-height="1920"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
id="el-01-hook"
|
||
|
|
class="scene"
|
||
|
|
data-composition-id="01-hook"
|
||
|
|
data-composition-src="compositions/frames/01-hook.html"
|
||
|
|
data-start="0"
|
||
|
|
data-duration="6.14"
|
||
|
|
data-track-index="0"
|
||
|
|
></div>
|
||
|
|
<audio
|
||
|
|
id="el-01-hook-voice"
|
||
|
|
src="assets/voice/01.wav"
|
||
|
|
data-start="0"
|
||
|
|
data-duration="5.64"
|
||
|
|
data-track-index="10"
|
||
|
|
data-volume="1"
|
||
|
|
></audio>
|
||
|
|
|
||
|
|
<div
|
||
|
|
id="el-02-worry"
|
||
|
|
class="scene"
|
||
|
|
data-composition-id="02-worry"
|
||
|
|
data-composition-src="compositions/frames/02-worry.html"
|
||
|
|
data-start="5.64"
|
||
|
|
data-duration="7.511"
|
||
|
|
data-track-index="1"
|
||
|
|
></div>
|
||
|
|
<audio
|
||
|
|
id="el-02-worry-voice"
|
||
|
|
src="assets/voice/02.wav"
|
||
|
|
data-start="5.64"
|
||
|
|
data-duration="7.111"
|
||
|
|
data-track-index="10"
|
||
|
|
data-volume="1"
|
||
|
|
></audio>
|
||
|
|
|
||
|
|
<div
|
||
|
|
id="el-03-meet"
|
||
|
|
class="scene"
|
||
|
|
data-composition-id="03-meet"
|
||
|
|
data-composition-src="compositions/frames/03-meet.html"
|
||
|
|
data-start="12.751"
|
||
|
|
data-duration="8.644"
|
||
|
|
data-track-index="0"
|
||
|
|
></div>
|
||
|
|
<audio
|
||
|
|
id="el-03-meet-voice"
|
||
|
|
src="assets/voice/03.wav"
|
||
|
|
data-start="12.751"
|
||
|
|
data-duration="8.144"
|
||
|
|
data-track-index="10"
|
||
|
|
data-volume="1"
|
||
|
|
></audio>
|
||
|
|
|
||
|
|
<div
|
||
|
|
id="el-04-limits"
|
||
|
|
class="scene"
|
||
|
|
data-composition-id="04-limits"
|
||
|
|
data-composition-src="compositions/frames/04-limits.html"
|
||
|
|
data-start="20.895"
|
||
|
|
data-duration="7.099"
|
||
|
|
data-track-index="1"
|
||
|
|
></div>
|
||
|
|
<audio
|
||
|
|
id="el-04-limits-voice"
|
||
|
|
src="assets/voice/04.wav"
|
||
|
|
data-start="20.895"
|
||
|
|
data-duration="6.599"
|
||
|
|
data-track-index="10"
|
||
|
|
data-volume="1"
|
||
|
|
></audio>
|
||
|
|
|
||
|
|
<div
|
||
|
|
id="el-05-apps"
|
||
|
|
class="scene"
|
||
|
|
data-composition-id="05-apps"
|
||
|
|
data-composition-src="compositions/frames/05-apps.html"
|
||
|
|
data-start="27.494"
|
||
|
|
data-duration="6.203"
|
||
|
|
data-track-index="0"
|
||
|
|
></div>
|
||
|
|
<audio
|
||
|
|
id="el-05-apps-voice"
|
||
|
|
src="assets/voice/05.wav"
|
||
|
|
data-start="27.494"
|
||
|
|
data-duration="5.703"
|
||
|
|
data-track-index="10"
|
||
|
|
data-volume="1"
|
||
|
|
></audio>
|
||
|
|
|
||
|
|
<div
|
||
|
|
id="el-06-location"
|
||
|
|
class="scene"
|
||
|
|
data-composition-id="06-location"
|
||
|
|
data-composition-src="compositions/frames/06-location.html"
|
||
|
|
data-start="33.197"
|
||
|
|
data-duration="7.013"
|
||
|
|
data-track-index="1"
|
||
|
|
></div>
|
||
|
|
<audio
|
||
|
|
id="el-06-location-voice"
|
||
|
|
src="assets/voice/06.wav"
|
||
|
|
data-start="33.197"
|
||
|
|
data-duration="6.513"
|
||
|
|
data-track-index="10"
|
||
|
|
data-volume="1"
|
||
|
|
></audio>
|
||
|
|
|
||
|
|
<div
|
||
|
|
id="el-07-balance"
|
||
|
|
class="scene"
|
||
|
|
data-composition-id="07-balance"
|
||
|
|
data-composition-src="compositions/frames/07-balance.html"
|
||
|
|
data-start="39.71"
|
||
|
|
data-duration="5.968"
|
||
|
|
data-track-index="0"
|
||
|
|
></div>
|
||
|
|
<audio
|
||
|
|
id="el-07-balance-voice"
|
||
|
|
src="assets/voice/07.wav"
|
||
|
|
data-start="39.71"
|
||
|
|
data-duration="5.468"
|
||
|
|
data-track-index="10"
|
||
|
|
data-volume="1"
|
||
|
|
></audio>
|
||
|
|
|
||
|
|
<div
|
||
|
|
id="el-08-platforms"
|
||
|
|
class="scene"
|
||
|
|
data-composition-id="08-platforms"
|
||
|
|
data-composition-src="compositions/frames/08-platforms.html"
|
||
|
|
data-start="45.178"
|
||
|
|
data-duration="4.183"
|
||
|
|
data-track-index="1"
|
||
|
|
></div>
|
||
|
|
<audio
|
||
|
|
id="el-08-platforms-voice"
|
||
|
|
src="assets/voice/08.wav"
|
||
|
|
data-start="45.178"
|
||
|
|
data-duration="3.783"
|
||
|
|
data-track-index="10"
|
||
|
|
data-volume="1"
|
||
|
|
></audio>
|
||
|
|
|
||
|
|
<div
|
||
|
|
id="el-09-cta"
|
||
|
|
class="scene"
|
||
|
|
data-composition-id="09-cta"
|
||
|
|
data-composition-src="compositions/frames/09-cta.html"
|
||
|
|
data-start="48.961"
|
||
|
|
data-duration="5.772"
|
||
|
|
data-track-index="0"
|
||
|
|
></div>
|
||
|
|
<audio
|
||
|
|
id="el-09-cta-voice"
|
||
|
|
src="assets/voice/09.wav"
|
||
|
|
data-start="48.961"
|
||
|
|
data-duration="5.772"
|
||
|
|
data-track-index="10"
|
||
|
|
data-volume="1"
|
||
|
|
></audio>
|
||
|
|
|
||
|
|
<!-- captions -->
|
||
|
|
<div
|
||
|
|
id="el-captions"
|
||
|
|
data-track-kind="captions"
|
||
|
|
class="scene"
|
||
|
|
data-composition-id="captions"
|
||
|
|
data-composition-src="compositions/captions.html"
|
||
|
|
data-start="0"
|
||
|
|
data-duration="54.733"
|
||
|
|
data-track-index="2"
|
||
|
|
></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
window.__timelines["main"] = gsap.timeline({ paused: true });
|
||
|
|
// ── frame transitions (injected by transitions.mjs) ──
|
||
|
|
(function () { var tl = window.__timelines["main"];
|
||
|
|
tl.to("#el-01-hook", { opacity: 0, duration: 0.5, ease: "power2.inOut" }, 5.64);
|
||
|
|
tl.fromTo("#el-02-worry", { opacity: 0 }, { opacity: 1, duration: 0.5, ease: "power2.inOut" }, 5.64);
|
||
|
|
tl.to("#el-02-worry", { scale: 2.5, opacity: 0, filter: "blur(8px)", duration: 0.4, ease: "power3.in" }, 12.751);
|
||
|
|
tl.fromTo("#el-03-meet", { scale: 0.5, opacity: 0, filter: "blur(8px)" }, { scale: 1, opacity: 1, filter: "blur(0px)", duration: 0.4, ease: "power3.out" }, 12.751);
|
||
|
|
tl.to("#el-03-meet", { x: -1080, duration: 0.5, ease: "power3.inOut" }, 20.895);
|
||
|
|
tl.fromTo("#el-04-limits", { x: 1080, opacity: 1 }, { x: 0, opacity: 1, duration: 0.5, ease: "power3.inOut" }, 20.895);
|
||
|
|
tl.to("#el-04-limits", { x: -1080, duration: 0.5, ease: "power3.inOut" }, 27.494);
|
||
|
|
tl.fromTo("#el-05-apps", { x: 1080, opacity: 1 }, { x: 0, opacity: 1, duration: 0.5, ease: "power3.inOut" }, 27.494);
|
||
|
|
tl.to("#el-05-apps", { x: -1080, duration: 0.5, ease: "power3.inOut" }, 33.197);
|
||
|
|
tl.fromTo("#el-06-location", { x: 1080, opacity: 1 }, { x: 0, opacity: 1, duration: 0.5, ease: "power3.inOut" }, 33.197);
|
||
|
|
tl.to("#el-06-location", { opacity: 0, duration: 0.5, ease: "power2.inOut" }, 39.71);
|
||
|
|
tl.fromTo("#el-07-balance", { opacity: 0 }, { opacity: 1, duration: 0.5, ease: "power2.inOut" }, 39.71);
|
||
|
|
tl.to("#el-07-balance", { opacity: 0, duration: 0.5, ease: "power2.inOut" }, 45.178);
|
||
|
|
tl.fromTo("#el-08-platforms", { opacity: 0 }, { opacity: 1, duration: 0.5, ease: "power2.inOut" }, 45.178);
|
||
|
|
tl.to("#el-08-platforms", { scale: 2.5, opacity: 0, filter: "blur(8px)", duration: 0.4, ease: "power3.in" }, 48.961);
|
||
|
|
tl.fromTo("#el-09-cta", { scale: 0.5, opacity: 0, filter: "blur(8px)" }, { scale: 1, opacity: 1, filter: "blur(0px)", duration: 0.4, ease: "power3.out" }, 48.961);
|
||
|
|
tl.to({}, { duration: 54.733 }, 0); // full-span anchor — main.duration() == composition total (Studio master duration)
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|