mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-11 06:30:03 +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>
197 lines
6.8 KiB
HTML
197 lines
6.8 KiB
HTML
<!--
|
|
Style: terminal — dark · JetBrains Mono · ASCII border · prompt · multi-color highlight
|
|
─────────────────────────────────────────────────────────────────────
|
|
Tokens
|
|
bg #0d1117 (deep terminal)
|
|
ink #e6edf3
|
|
muted #7d8590
|
|
accent #4ade80 (green — primary output)
|
|
accent2#fbbf24 (amber — string/warn)
|
|
accent3#f472b6 (magenta — variable)
|
|
accent4#60a5fa (blue — function/path)
|
|
Fonts
|
|
mono (everything) — ui-monospace, "SF Mono", Menlo, monospace
|
|
(Real JetBrains Mono would need a woff2 ship; mono fallback fine.)
|
|
Best with
|
|
layouts: split, pip
|
|
frames: hairline, clean
|
|
content: 技术分析 / 代码片段 / 性能数据 / 工程思考
|
|
Notes
|
|
- "Blinking cursor" must be a CSS animation, NOT a data-anim. Allowed
|
|
because pure CSS @keyframes on a single visual indicator is harmless.
|
|
- For animated reveal of lines, use data-anim="fade-in" per line.
|
|
-->
|
|
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>style · terminal</title>
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #0a0c12;
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
.stage {
|
|
position: relative;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
transform-origin: top left;
|
|
transform: scale(0.5);
|
|
overflow: hidden;
|
|
}
|
|
.card-host {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="stage">
|
|
<div class="card-host">
|
|
<div class="card" data-card-id="ref-terminal">
|
|
<style>
|
|
.card[data-card-id="ref-terminal"] .root {
|
|
--bg: #0d1117;
|
|
--ink: #e6edf3;
|
|
--muted: #7d8590;
|
|
--green: #4ade80;
|
|
--amber: #fbbf24;
|
|
--magenta: #f472b6;
|
|
--blue: #60a5fa;
|
|
--font-mono: ui-monospace, "SF Mono", Menlo, "Courier New", monospace;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
padding: 36px 48px;
|
|
box-sizing: border-box;
|
|
font: 28px/1.55 var(--font-mono);
|
|
}
|
|
.card[data-card-id="ref-terminal"] .ascii-frame {
|
|
position: absolute;
|
|
inset: 16px;
|
|
border: 2px solid #2c333e;
|
|
border-radius: 6px;
|
|
box-shadow:
|
|
inset 0 0 0 1px #1a1f27,
|
|
0 0 0 1px #06080c;
|
|
}
|
|
.card[data-card-id="ref-terminal"] .titlebar {
|
|
position: absolute;
|
|
left: 36px;
|
|
top: 12px;
|
|
padding: 0 8px;
|
|
background: var(--bg);
|
|
font: 600 14px/1 var(--font-mono);
|
|
color: var(--muted);
|
|
letter-spacing: 0.12em;
|
|
}
|
|
.card[data-card-id="ref-terminal"] .content {
|
|
position: relative;
|
|
padding: 18px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
.card[data-card-id="ref-terminal"] .prompt {
|
|
color: var(--green);
|
|
}
|
|
.card[data-card-id="ref-terminal"] .line .blue {
|
|
color: var(--blue);
|
|
}
|
|
.card[data-card-id="ref-terminal"] .line .amber {
|
|
color: var(--amber);
|
|
}
|
|
.card[data-card-id="ref-terminal"] .line .pink {
|
|
color: var(--magenta);
|
|
}
|
|
.card[data-card-id="ref-terminal"] .line .green {
|
|
color: var(--green);
|
|
}
|
|
.card[data-card-id="ref-terminal"] .line .muted {
|
|
color: var(--muted);
|
|
}
|
|
.card[data-card-id="ref-terminal"] .kicker {
|
|
color: var(--muted);
|
|
font: 600 16px/1 var(--font-mono);
|
|
letter-spacing: 0.22em;
|
|
margin-bottom: 4px;
|
|
}
|
|
.card[data-card-id="ref-terminal"] .headline {
|
|
font: 700 56px/1.15 var(--font-mono);
|
|
color: var(--ink);
|
|
margin: 4px 0 14px;
|
|
}
|
|
.card[data-card-id="ref-terminal"] .headline .hl {
|
|
background: rgba(74, 222, 128, 0.18);
|
|
color: var(--green);
|
|
padding: 0 6px;
|
|
}
|
|
.card[data-card-id="ref-terminal"] .cursor {
|
|
display: inline-block;
|
|
width: 14px;
|
|
height: 28px;
|
|
background: var(--green);
|
|
margin-left: 4px;
|
|
vertical-align: -4px;
|
|
animation: ref-term-blink 1s steps(1) infinite;
|
|
}
|
|
@keyframes ref-term-blink {
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="root">
|
|
<div class="ascii-frame"></div>
|
|
<span class="titlebar">~/notes/takeaway-007.md</span>
|
|
|
|
<div class="content">
|
|
<div class="kicker" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.3">
|
|
$ cat takeaway
|
|
</div>
|
|
|
|
<h2
|
|
class="headline"
|
|
data-anim="fade-in"
|
|
data-anim-at="0.25"
|
|
data-anim-duration="0.45"
|
|
>
|
|
缓存命中率提升到 <span class="hl">92%</span>
|
|
</h2>
|
|
|
|
<div class="line" data-anim="fade-in" data-anim-at="0.55" data-anim-duration="0.35">
|
|
<span class="prompt">$</span> bench --tier <span class="amber">"hot"</span>
|
|
<span class="muted">--n 10k</span>
|
|
</div>
|
|
<div class="line" data-anim="fade-in" data-anim-at="0.8" data-anim-duration="0.35">
|
|
<span class="muted">→</span> <span class="blue">p50</span>=<span class="green"
|
|
>12ms</span
|
|
>
|
|
<span class="blue">p99</span>=<span class="green">38ms</span>
|
|
<span class="pink">hit</span>=<span class="green">92.4%</span>
|
|
</div>
|
|
<div class="line" data-anim="fade-in" data-anim-at="1.05" data-anim-duration="0.35">
|
|
<span class="muted">// before this change: hit=63%, p99=210ms</span>
|
|
</div>
|
|
<div class="line" data-anim="fade-in" data-anim-at="1.35" data-anim-duration="0.3">
|
|
<span class="prompt">$</span><span class="cursor"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|