mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-11 14:50:02 +00:00
56859b618f
Rename the `graphic-overlays` workflow skill to `talking-head-recut`: - move skills/graphic-overlays/ -> skills/talking-head-recut/ - update SKILL.md frontmatter name, H1, and self-references - update all /graphic-overlays route references (hyperframes router, general-video, root + cli-template AGENTS.md/CLAUDE.md, docs, quickstart) - update telemetry --skill flag, example composition id, timeline key - update .prettierignore path and scripts/test-skills-fresh.sh Identifier-only rename: the graphic-overlay card mechanism, design references, and trigger wording are unchanged. Co-authored-by: kiritowoo <295860553+kiritowoo@users.noreply.github.com> Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
172 lines
5.7 KiB
HTML
172 lines
5.7 KiB
HTML
<!--
|
|
Frame: hairline — double stroke + four-corner viewfinder ticks
|
|
─────────────────────────────────────────────────────────────────────
|
|
When to use
|
|
- Professional / cinematographic feel without going full polaroid.
|
|
- Pairs well with: split, stack, pip layouts.
|
|
- Pairs well with: academic, audit, swiss, terminal styles.
|
|
- Skip on overlay layout — the decorative chrome clashes with full-bleed video.
|
|
|
|
How to apply in the composition
|
|
Add ONE decorative div as a sibling of #video-wrap (not a child — the
|
|
video element is muted/playsinline and the decorative div should sit
|
|
above it). The accent color is configurable per scene.
|
|
|
|
<div class="video-wrapper" id="video-wrap">
|
|
<video src="input-video.mp4" ...></video>
|
|
</div>
|
|
<div class="frame-deco frame-deco--hairline"
|
|
style="left:240px; top:140px; width:1440px; height:810px;
|
|
--frame-accent: #2557a7;">
|
|
<span class="tick tl"></span>
|
|
<span class="tick tr"></span>
|
|
<span class="tick bl"></span>
|
|
<span class="tick br"></span>
|
|
</div>
|
|
|
|
CSS (4 corners via explicit spans — preferred over ::before/::after
|
|
because pseudo-elements give you at most 2 corners cleanly):
|
|
|
|
.frame-deco { position: absolute; pointer-events: none; z-index: 3; }
|
|
.frame-deco--hairline {
|
|
box-shadow:
|
|
inset 0 0 0 2px var(--frame-accent),
|
|
inset 0 0 0 6px color-mix(in srgb, var(--frame-accent) 13%, transparent),
|
|
0 0 0 1px rgba(0,0,0,.1);
|
|
}
|
|
.frame-deco .tick { position: absolute; width: 24px; height: 24px; }
|
|
.frame-deco .tick.tl { top: -3px; left: -3px; border-top: 4px solid var(--frame-accent); border-left: 4px solid var(--frame-accent); }
|
|
.frame-deco .tick.tr { top: -3px; right: -3px; border-top: 4px solid var(--frame-accent); border-right: 4px solid var(--frame-accent); }
|
|
.frame-deco .tick.bl { bottom: -3px; left: -3px; border-bottom: 4px solid var(--frame-accent); border-left: 4px solid var(--frame-accent); }
|
|
.frame-deco .tick.br { bottom: -3px; right: -3px; border-bottom: 4px solid var(--frame-accent); border-right: 4px solid var(--frame-accent); }
|
|
|
|
When the layout changes mid-composition
|
|
Move + resize the frame-deco div together with #video-wrap using GSAP:
|
|
tl.to('#video-wrap, .frame-deco', { left:, top:, width:, height:, ... }, T);
|
|
Or fade out the deco entirely before transitioning to a clean PiP.
|
|
-->
|
|
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>frame · hairline (double stroke + viewfinder ticks)</title>
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #0a0c12;
|
|
color: #fff;
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
.stage {
|
|
position: relative;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
transform-origin: top left;
|
|
transform: scale(0.5);
|
|
background: #0a0c12;
|
|
overflow: hidden;
|
|
}
|
|
.video-wrap {
|
|
position: absolute;
|
|
left: 240px;
|
|
top: 140px;
|
|
width: 1440px;
|
|
height: 810px;
|
|
background: #1a1f2e;
|
|
background-image: repeating-linear-gradient(
|
|
45deg,
|
|
transparent 0 12px,
|
|
rgba(255, 255, 255, 0.05) 12px 13px
|
|
);
|
|
}
|
|
.v-label {
|
|
position: absolute;
|
|
left: 24px;
|
|
top: 24px;
|
|
padding: 8px 14px;
|
|
border: 1px solid rgba(255, 255, 255, 0.45);
|
|
border-radius: 3px;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font:
|
|
600 16px/1 ui-monospace,
|
|
monospace;
|
|
letter-spacing: 0.14em;
|
|
}
|
|
.frame-deco {
|
|
position: absolute;
|
|
left: 240px;
|
|
top: 140px;
|
|
width: 1440px;
|
|
height: 810px;
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
--frame-accent: #2557a7;
|
|
box-shadow:
|
|
inset 0 0 0 2px var(--frame-accent),
|
|
inset 0 0 0 6px rgba(37, 87, 167, 0.13),
|
|
0 0 0 1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.tick {
|
|
position: absolute;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
.tick.tl {
|
|
top: -3px;
|
|
left: -3px;
|
|
border-top: 4px solid var(--frame-accent, #2557a7);
|
|
border-left: 4px solid var(--frame-accent, #2557a7);
|
|
}
|
|
.tick.tr {
|
|
top: -3px;
|
|
right: -3px;
|
|
border-top: 4px solid var(--frame-accent, #2557a7);
|
|
border-right: 4px solid var(--frame-accent, #2557a7);
|
|
}
|
|
.tick.bl {
|
|
bottom: -3px;
|
|
left: -3px;
|
|
border-bottom: 4px solid var(--frame-accent, #2557a7);
|
|
border-left: 4px solid var(--frame-accent, #2557a7);
|
|
}
|
|
.tick.br {
|
|
bottom: -3px;
|
|
right: -3px;
|
|
border-bottom: 4px solid var(--frame-accent, #2557a7);
|
|
border-right: 4px solid var(--frame-accent, #2557a7);
|
|
}
|
|
.note {
|
|
position: absolute;
|
|
left: 240px;
|
|
bottom: 60px;
|
|
right: 240px;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font:
|
|
14px/1.4 ui-monospace,
|
|
monospace;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="stage">
|
|
<div class="video-wrap">
|
|
<span class="v-label">VIDEO</span>
|
|
</div>
|
|
<div class="frame-deco">
|
|
<span class="tick tl"></span>
|
|
<span class="tick tr"></span>
|
|
<span class="tick bl"></span>
|
|
<span class="tick br"></span>
|
|
</div>
|
|
<div class="note">
|
|
HAIRLINE — double stroke (2px inner + soft 6px halo) + four-corner viewfinder ticks. Accent
|
|
color matches the card style.
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|