ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-14 16:32:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(skills): unify bgm-to-video flows into music-to-video

Browse Source 
Replace bgm-to-video, bgm-to-video-new, bgm-to-video-refactor, and the
standalone beat-sync/montage skills with a single music-to-video skill.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Miao Yang
2026-06-23 21:33:01 +08:00
co-authored by Claude Opus 4.8
parent 0dcf914e14
commit a34d3dba4d
172 changed files with 1555 additions and 4198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/music-to-video/references/motion-primitives/hypercut-whip/index.html
+79
View File
@@ -0,0 +1,79 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<title>01 · hypercut_whip</title>
<script src="../assets/gsap.min.js"></script>
<style>
:root {
--hg-violet: #7c3aed;
--hg-violet-2: #a855f7;
--hg-bg: #0a0a0f;
--hg-fg: #f5f5fa;
--hg-dim: #6b6b78;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
margin: 0;
width: 1920px;
height: 1080px;
overflow: hidden;
background: var(--hg-bg);
font-family: "Inter", system-ui, sans-serif;
color: var(--hg-fg);
-webkit-font-smoothing: antialiased;
}
#scene {
position: absolute;
inset: 0;
width: 1920px;
height: 1080px;
}
.stage {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.hero {
font-weight: 900;
font-size: 280px;
letter-spacing: -0.04em;
line-height: 0.95;
color: var(--hg-fg);
white-space: nowrap;
will-change: transform, filter;
}
</style>
</head>
<body>
<div
id="root"
data-composition-id="main"
data-start="0"
data-duration="2"
data-width="1920"
data-height="1080"
>
<div id="scene" class="clip" data-start="0" data-duration="2" data-track-index="1">
<div class="stage"><div class="hero" id="hero">HYPERCUT</div></div>
</div>
</div>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
tl.set("#hero", { x: 0, filter: "blur(0px)" }, 0);
tl.to("#hero", { x: 1800, filter: "blur(30px)", duration: 0.18, ease: "power4.in" }, 1.65);
window.__timelines["main"] = tl;
</script>
</body>
</html>