ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-07 18:26:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(remove-background): broaden framing from avatar-specific to any person video

Browse Source 
The model removes background from any video with a person — we tested
with avatars because they were convenient, but anyone can bring a
talking-head clip, presenter footage, vlog, etc. Replace avatar-specific
filenames (avatar.mp4 / brandon.mp4) with neutral subject.mp4 (or
presenter.mp4 in the text-behind-subject example) and rephrase
copy that read as if avatars were the only use case.

Touches docs/guides/remove-background.mdx, hyperframes-media SKILL.md,
and hyperframes/patterns.md.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
James
2026-05-04 20:34:37 -07:00
co-authored by Claude Opus 4.7
parent f4ecf96918
commit b8b82fa8d2
3 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/hyperframes/patterns.md
+4 -4
View File
@@ -32,7 +32,7 @@ tl.to("#pip-frame", { left: 40, duration: 0.6 }, 30);
## Text Behind Subject (transparent webm overlay)
Put a headline _behind_ a presenter so their silhouette occludes the text. Requires a transparent cutout produced by `npx hyperframes remove-background avatar.mp4 -o avatar.webm`.
Put a headline _behind_ a presenter so their silhouette occludes the text. Requires a transparent cutout produced by `npx hyperframes remove-background presenter.mp4 -o presenter.webm`.
Three layers, plus one critical rule:
@@ -44,7 +44,7 @@ Three layers, plus one critical rule:
data-duration="6"
data-media-start="0"
data-track-index="0"
src="avatar.mp4"
src="presenter.mp4"
muted
playsinline
></video>
@@ -68,7 +68,7 @@ Three layers, plus one critical rule:
data-duration="6"
data-media-start="0"
data-track-index="1"
src="avatar.webm"
src="presenter.webm"
muted
playsinline
></video>
@@ -82,7 +82,7 @@ const CUT = 3.3;
// Reveal headline early
tl.to("#cf-headline", { clipPath: "inset(0 0 0% 0)", duration: 0.6, ease: "expo.out" }, 0.25);
// At the cut, flip the cutout wrapper visible — Brandon's silhouette
// At the cut, flip the cutout wrapper visible — the presenter's silhouette
// punches through the headline.
tl.set(".cutout-wrap", { opacity: 1 }, CUT);