mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-10 22:20:14 +00:00
130 lines
3.3 KiB
HTML
130 lines
3.3 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>chunk-boundary: Lottie</title>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
|
||
<style>
|
||
body,
|
||
html {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 320px;
|
||
height: 180px;
|
||
background: #0f172a;
|
||
overflow: hidden;
|
||
}
|
||
#main-comp {
|
||
position: relative;
|
||
width: 320px;
|
||
height: 180px;
|
||
}
|
||
#lottie-host {
|
||
position: absolute;
|
||
inset: 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div
|
||
id="main-comp"
|
||
data-composition-id="main-comp"
|
||
data-width="320"
|
||
data-height="180"
|
||
data-start="0"
|
||
data-duration="2"
|
||
>
|
||
<div id="lottie-host"></div>
|
||
</div>
|
||
|
||
<script>
|
||
// Minimal Lottie JSON: 60-frame composition (30fps × 2s) with a
|
||
// single rectangle layer animating its position from x=20 to x=280
|
||
// linearly. The chunk-boundary test asserts N=1 == N=4 byte-identical
|
||
// — any Lottie sub-frame interpolation drift across seams trips it.
|
||
const lottieJson = {
|
||
v: "5.7.0",
|
||
fr: 30,
|
||
ip: 0,
|
||
op: 60,
|
||
w: 320,
|
||
h: 180,
|
||
nm: "boundary",
|
||
ddd: 0,
|
||
assets: [],
|
||
layers: [
|
||
{
|
||
ddd: 0,
|
||
ind: 1,
|
||
ty: 4,
|
||
nm: "rect",
|
||
sr: 1,
|
||
ks: {
|
||
o: { a: 0, k: 100 },
|
||
p: {
|
||
a: 1,
|
||
k: [
|
||
{
|
||
i: { x: [1], y: [1] },
|
||
o: { x: [0], y: [0] },
|
||
t: 0,
|
||
s: [20, 90],
|
||
},
|
||
{ t: 60, s: [280, 90] },
|
||
],
|
||
},
|
||
r: {
|
||
a: 1,
|
||
k: [
|
||
{
|
||
i: { x: [1], y: [1] },
|
||
o: { x: [0], y: [0] },
|
||
t: 0,
|
||
s: [0],
|
||
},
|
||
{ t: 60, s: [360] },
|
||
],
|
||
},
|
||
s: { a: 0, k: [100, 100, 100] },
|
||
a: { a: 0, k: [0, 0, 0] },
|
||
},
|
||
shapes: [
|
||
{
|
||
ty: "rc",
|
||
p: { a: 0, k: [0, 0] },
|
||
s: { a: 0, k: [40, 40] },
|
||
r: { a: 0, k: 6 },
|
||
},
|
||
{
|
||
ty: "fl",
|
||
c: { a: 0, k: [0.337, 0.408, 0.941, 1] },
|
||
o: { a: 0, k: 100 },
|
||
},
|
||
],
|
||
ip: 0,
|
||
op: 60,
|
||
st: 0,
|
||
bm: 0,
|
||
},
|
||
],
|
||
};
|
||
|
||
const anim = lottie.loadAnimation({
|
||
container: document.getElementById("lottie-host"),
|
||
renderer: "svg",
|
||
loop: false,
|
||
autoplay: false,
|
||
animationData: lottieJson,
|
||
});
|
||
window.__hfLottie = window.__hfLottie || [];
|
||
window.__hfLottie.push(anim);
|
||
|
||
const dur = gsap.timeline({ paused: true });
|
||
window.__timelines = window.__timelines || {};
|
||
window.__timelines["main-comp"] = dur;
|
||
dur.to({}, { duration: 2 }, 0);
|
||
</script>
|
||
</body>
|
||
</html>
|