Add HyperFrames skills
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011h6NB8JQtfPc6eRCefEzBB
This commit is contained in:
964 files changed
+142321
No files matched your search
@@ -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>
|
||||
Reference in new issue
Block a user