mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-13 15:49:53 +00:00
Vance Ingalls
20be2ea1c2
## Summary - Run `oxfmt .` across the entire codebase to establish formatted baseline - 299 files changed — mechanical formatting only, no logic changes - Double quotes, semicolons, 2-space indent, trailing commas, 100 print width Part 3/4 of [VA-851](https://linear.app/heygen/issue/VA-851/pre-migration-configure-eslint-prettier-and-conventional-commits) ## Test plan - [x] `pnpm format:check` — all 426 files pass - [x] `pnpm -r typecheck` — all packages pass - [x] `pnpm build` — all packages build - [x] All 348 tests pass
117 lines
2.3 KiB
JavaScript
117 lines
2.3 KiB
JavaScript
const masterTL = gsap.timeline({ paused: true });
|
|
|
|
const variants = [
|
|
"#v1",
|
|
"#v2",
|
|
"#v3",
|
|
"#v4",
|
|
"#v5",
|
|
"#v6",
|
|
"#v7",
|
|
"#v8",
|
|
"#v9",
|
|
"#v10",
|
|
"#v11",
|
|
"#v12",
|
|
"#v13",
|
|
];
|
|
const cutDuration = 0.2;
|
|
|
|
variants.forEach((selector, index) => {
|
|
// Show current variant
|
|
masterTL.set(
|
|
selector,
|
|
{
|
|
opacity: 1,
|
|
},
|
|
index * cutDuration,
|
|
);
|
|
|
|
// Hide previous variant
|
|
if (index > 0) {
|
|
masterTL.set(
|
|
variants[index - 1],
|
|
{
|
|
opacity: 0,
|
|
},
|
|
index * cutDuration,
|
|
);
|
|
}
|
|
});
|
|
|
|
const finalStartTime = variants.length * cutDuration; // 2.6s
|
|
|
|
// Hide last variant
|
|
masterTL.set(
|
|
variants[variants.length - 1],
|
|
{
|
|
opacity: 0,
|
|
},
|
|
finalStartTime,
|
|
);
|
|
|
|
// Show final message with epic effect
|
|
masterTL.to(
|
|
"#final-message",
|
|
{
|
|
opacity: 1,
|
|
scale: 1,
|
|
duration: 0.8,
|
|
ease: "elastic.out(1, 0.5)",
|
|
},
|
|
finalStartTime,
|
|
);
|
|
|
|
// Explosion Particles
|
|
const particlesContainer = document.getElementById("particles-container");
|
|
const particleCount = 120; // Increased count
|
|
const colors = ["#FFD700", "#FF4500", "#FF69B4", "#00FFFF", "#FFF", "#ADFF2F", "#FF8C00"];
|
|
|
|
for (let i = 0; i < particleCount; i++) {
|
|
const particle = document.createElement("div");
|
|
particle.className = "particle";
|
|
particlesContainer.appendChild(particle);
|
|
|
|
const angle = (i / particleCount) * Math.PI * 2;
|
|
// Deterministic "randomness" using modulo and index
|
|
const velocity = 400 + 600 * (((i * 7) % 10) / 10); // Increased velocity for bigger explosion
|
|
const x = Math.cos(angle) * velocity;
|
|
const y = Math.sin(angle) * velocity;
|
|
const color = colors[i % colors.length];
|
|
const size = 8 + 12 * (((i * 3) % 5) / 5); // Varied sizes
|
|
|
|
masterTL.set(
|
|
particle,
|
|
{
|
|
x: 540,
|
|
y: 960,
|
|
width: size,
|
|
height: size,
|
|
xPercent: -50,
|
|
yPercent: -50,
|
|
backgroundColor: color,
|
|
opacity: 1,
|
|
scale: 1,
|
|
},
|
|
finalStartTime,
|
|
);
|
|
|
|
masterTL.to(
|
|
particle,
|
|
{
|
|
x: 540 + x,
|
|
y: 960 + y,
|
|
opacity: 0,
|
|
scale: 0,
|
|
rotation: i % 2 === 0 ? 360 : -360, // Add some rotation
|
|
duration: 2.0, // Longer duration for bigger feel
|
|
ease: "power3.out",
|
|
},
|
|
finalStartTime,
|
|
);
|
|
}
|
|
|
|
// Register the timeline
|
|
window.__timelines = window.__timelines || {};
|
|
window.__timelines["magic-cut-intro"] = masterTL;
|