keithrana/cycle-atlas
1
0 Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Add HyperFrames skills

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011h6NB8JQtfPc6eRCefEzBB
This commit is contained in:
Claude committed 2026-10-14 21:51:46 +00:00
1 parent 6bd8165e6d
commit 1b2c8439f0
964 files changed
+142321
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.agents/skills/talking-head-recut/references/frames/clean.html
+92
View File
@@ -0,0 +1,92 @@
<!--
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>
.agents/skills/talking-head-recut/references/frames/hairline.html
+171
View File
@@ -0,0 +1,171 @@
<!--
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 keeps its sound (data-has-audio="true") and plays inline,
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>
.agents/skills/talking-head-recut/references/frames/polaroid.html
+131
View File
@@ -0,0 +1,131 @@
<!--
Frame: polaroid — white photo frame + Caveat label + blue washi tape (no tilt)
─────────────────────────────────────────────────────────────────────
When to use
- Casual, personal, warm feel. Looks great for interviews, memoirs, vlogs.
- Pairs well with: split, stack, pip layouts.
- Pairs well with: academic, whiteboard, editorial, xhs styles.
- Skip on overlay layout (clashes with full-bleed).
- In portrait PiP (narrow video bubble), polaroid gets cramped — prefer hairline.
IMPORTANT — NO TILT
Earlier iterations of the design tilted the polaroid by -1.4° / 5°. User
explicitly removed the tilt (chat L770–790). Keep the polaroid card,
label, and washi tape all UPRIGHT.
How to apply in the composition
Replace the bare #video-wrap with a wrapper div that draws the polaroid
around it. The polaroid card has its own background + padding; the video
sits inside a sub-region.
HTML pattern (use absolute positioning to fit the layout's video bounds):
<div class="frame-deco frame-deco--polaroid"
style="left:240px; top:140px; width:1440px; height:990px;">
<div class="polaroid-card">
<div class="polaroid-photo">
<!-- the actual #video-wrap element, sized to fill -->
<div class="video-wrapper" id="video-wrap">
<video src="input-video.mp4" ...></video>
</div>
</div>
<div class="polaroid-caption">speaker · 2026</div>
</div>
<div class="washi"></div>
</div>
The video bounds in storyboard.json should be the OUTER polaroid bounds.
The CSS inset values below carve out the inner photo area.
Suggested CSS
.frame-deco--polaroid { position: absolute; }
.polaroid-card {
position: absolute; inset: 24px;
background: #fefefe; padding: 14px 14px 64px;
box-shadow: 0 28px 60px -18px rgba(0,0,0,.55),
0 4px 12px rgba(0,0,0,.12);
box-sizing: border-box;
}
.polaroid-photo {
position: relative; width: 100%; height: calc(100% - 50px);
overflow: hidden; background: #000;
}
.polaroid-photo .video-wrapper {
position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0;
}
.polaroid-caption {
position: absolute; bottom: 18px; left: 0; right: 0;
text-align: center;
font: 700 32px/1 "Caveat", ui-serif, cursive;
color: #1d1c1a;
}
.washi {
position: absolute; top: 12px; left: 20%;
width: 120px; height: 28px;
background: rgba(180,210,235,.85);
background-image: repeating-linear-gradient(90deg,
transparent 0 6px, rgba(255,255,255,.3) 6px 7px);
box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
-->
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>frame · polaroid (white photo frame + caveat label, no tilt)</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; }
.frame-deco { position: absolute; left: 240px; top: 70px; width: 1440px; height: 940px; }
.polaroid-card {
position: absolute; inset: 24px;
background: #fefefe; padding: 14px 14px 64px;
box-shadow: 0 28px 60px -18px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.12);
box-sizing: border-box;
}
.polaroid-photo {
position: relative; width: 100%; height: calc(100% - 50px);
overflow: hidden; background: #1a1f2e;
background-image: repeating-linear-gradient(45deg,
transparent 0 12px, rgba(255,255,255,.05) 12px 13px);
}
.v-label { position: absolute; left: 24px; top: 24px;
padding: 8px 14px; border: 1px solid rgba(255,255,255,.45);
border-radius: 3px; color: rgba(255,255,255,.7);
font: 600 16px/1 ui-monospace, monospace; letter-spacing: .14em; }
.polaroid-caption {
position: absolute; bottom: 18px; left: 0; right: 0;
text-align: center;
font: 700 32px/1 "Caveat", ui-serif, cursive;
color: #1d1c1a;
}
.washi {
position: absolute; top: 12px; left: 20%;
width: 120px; height: 28px;
background: rgba(180,210,235,.85);
background-image: repeating-linear-gradient(90deg,
transparent 0 6px, rgba(255,255,255,.3) 6px 7px);
box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
.note { position: absolute; left: 240px; bottom: 18px; right: 240px;
text-align: center; color: rgba(255,255,255,.5);
font: 14px/1.4 ui-monospace, monospace; letter-spacing: .12em; }
</style>
</head>
<body>
<div class="stage">
<div class="frame-deco">
<div class="polaroid-card">
<div class="polaroid-photo">
<span class="v-label">VIDEO</span>
</div>
<div class="polaroid-caption">speaker · 2026</div>
</div>
<div class="washi"></div>
</div>
<div class="note">POLAROID — white frame, Caveat handwritten caption, blue washi tape on top. Upright (no tilt).</div>
</div>
</body>
</html>