mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 18:01:20 +08:00
83 lines
2.0 KiB
HTML
83 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
</head>
|
|
<body>
|
|
<div
|
|
id="root"
|
|
data-composition-id="datafast-launch"
|
|
data-width="1920"
|
|
data-height="1080"
|
|
data-start="0"
|
|
data-duration="31.5"
|
|
>
|
|
<!-- Narration VO -->
|
|
<audio
|
|
id="narration"
|
|
src="narration.wav"
|
|
data-start="0"
|
|
data-duration="31.5"
|
|
data-track-index="0"
|
|
data-volume="1"
|
|
></audio>
|
|
|
|
<!-- Beat 1: The Hook -->
|
|
<div
|
|
id="beat-1"
|
|
data-composition-id="beat-1-hook"
|
|
data-composition-src="compositions/beat-1-hook.html"
|
|
data-start="0"
|
|
data-duration="5.4"
|
|
data-track-index="1"
|
|
></div>
|
|
|
|
<!-- Beat 2: The Journey -->
|
|
<div
|
|
id="beat-2"
|
|
data-composition-id="beat-2-journey"
|
|
data-composition-src="compositions/beat-2-journey.html"
|
|
data-start="5.4"
|
|
data-duration="9.7"
|
|
data-track-index="1"
|
|
></div>
|
|
|
|
<!-- Beat 3: Three Steps -->
|
|
<div
|
|
id="beat-3"
|
|
data-composition-id="beat-3-steps"
|
|
data-composition-src="compositions/beat-3-steps.html"
|
|
data-start="15.1"
|
|
data-duration="6.0"
|
|
data-track-index="1"
|
|
></div>
|
|
|
|
<!-- Beat 4: Social Proof -->
|
|
<div
|
|
id="beat-4"
|
|
data-composition-id="beat-4-proof"
|
|
data-composition-src="compositions/beat-4-proof.html"
|
|
data-start="21.1"
|
|
data-duration="3.4"
|
|
data-track-index="1"
|
|
></div>
|
|
|
|
<!-- Beat 5: CTA -->
|
|
<div
|
|
id="beat-5"
|
|
data-composition-id="beat-5-cta"
|
|
data-composition-src="compositions/beat-5-cta.html"
|
|
data-start="24.5"
|
|
data-duration="7.0"
|
|
data-track-index="1"
|
|
></div>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
var tl = gsap.timeline({ paused: true });
|
|
window.__timelines["datafast-launch"] = tl;
|
|
</script>
|
|
</body>
|
|
</html>
|