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>
93 lines
2.6 KiB
HTML
93 lines
2.6 KiB
HTML
<!--
|
|
Frame: clean — no decoration. Raw video edge.
|
|
─────────────────────────────────────────────────────────────────────
|
|
When to use
|
|
- Default; safest.
|
|
- Pairs with any layout and any style.
|
|
- Required over the `overlay` layout (decorative frames clash with full-bleed video).
|
|
|
|
How to apply in the composition
|
|
No extra HTML — just leave #video-wrap without the `framed` class.
|
|
|
|
.video-wrapper { border-radius: 0; box-shadow: none; }
|
|
|
|
How to apply on PiP layouts
|
|
Even with `clean`, PiPs benefit from a 14px border-radius + soft shadow
|
|
(see layouts/pip.html). That's a layout-level treatment, not a frame.
|
|
|
|
Placement
|
|
None. This reference exists as documentation of the "no-frame" option.
|
|
-->
|
|
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>frame · clean (no decoration)</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;
|
|
}
|
|
.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 · no chrome</span>
|
|
</div>
|
|
<div class="note">CLEAN — let the video speak for itself.</div>
|
|
</div>
|
|
</body>
|
|
</html>
|