mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-05 00:56:23 +00:00
WaterrrForeverandClaude Opus 4.8
d0f0ec29e7
* feat(hyperframes-creative): add frame-preset library Add a library of ready-made visual frame presets (claude, biennale-yellow, blockframe, blue-professional, bold-poster, broadside, capsule, cartesian, cobalt-grid, coral, creative-mode, daisy-days, editorial-forest, …), each with a FRAME.md spec, a frame-showcase.html, and a per-preset caption-skin.html. Registered in the creative design-spec so workflows can remix a preset onto brand tokens. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(hyperframes-media): shared TTS/BGM/SFX audio engine Add a shared audio engine under hyperframes-media (scripts/audio.mjs + lib/ tts.mjs, bgm.mjs, sfx.mjs, heygen.mjs) plus a bundled SFX pack and manifest. Workflows resolve this engine by path (../../hyperframes-media/scripts/ audio.mjs) for text-to-speech, background music, and sound effects, so audio is authored once and reused across skills instead of duplicated per workflow. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(skills): gate render on user review; refresh router, core, general-video - hyperframes-cli: render is now user-gated — preview opens Studio (the timeline editor where the user can hand-edit anything, not just watch); never auto-render once checks pass, pause at preview and render only after approval. - hyperframes (router): tighten the entry SKILL.md description + routing. - hyperframes-core: rewrite SKILL.md and add script-format.md + storyboard-format.md references for the script-driven authoring architecture. - general-video: tidy the fallback-workflow description and routing table. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * style(hyperframes-creative): reformat frame-preset showcase HTML Run the HTML formatter over the frame-showcase.html files (indentation, self-closing void tags, one CSS declaration per line). Formatting only — no content or markup changes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(hyperframes-media): correct wait-bgm field mapping and guard credential parse Two correctness fixes from review (#1632): - wait-bgm.mjs read audioMeta.bgm_path / audioMeta.bgm_enabled, but audio.mjs writes the path nested as bgm.path and the flag as bgm_pending. The detached generate path (Lyria/MusicGen) therefore always saw an empty path and exited status: disabled, silently dropping the music track even while generation was running. Read audioMeta.bgm?.path and gate on bgm_pending. - heygenCredential() had an unguarded JSON.parse despite documenting that it never throws — a malformed ~/.heygen credentials file crashed the engine at startup instead of degrading to no-credential. Wrap the parse and return null. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * chore(hyperframes): add router tag to entry skill metadata Fold the router metadata tag into the foundation rewrite of the entry SKILL.md. This file is owned by this PR (the full router rewrite); keeping the tag tweak here — instead of a separate edit on the pre-rewrite version in another PR — avoids a guaranteed merge conflict between the two. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1348 lines
38 KiB
HTML
1348 lines
38 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>BlockFrame</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<style id="ds-tokens">
|
||
:root {
|
||
--black: #000000;
|
||
--white: #ffffff;
|
||
--offwhite: #fffdf5;
|
||
--pink: #fe90e8;
|
||
--blue: #c0f7fe;
|
||
--green: #99e885;
|
||
--yellow: #f7cb46;
|
||
--cream: #ffdc8b;
|
||
--disp: "Inter", sans-serif;
|
||
--mono: "Space Grotesk", monospace;
|
||
}
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
html {
|
||
background: #111;
|
||
}
|
||
body {
|
||
background: var(--offwhite);
|
||
color: var(--black);
|
||
font-family: var(--disp);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
.disp {
|
||
font-family: var(--disp);
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.03em;
|
||
line-height: 0.95;
|
||
font-weight: 900;
|
||
}
|
||
.pill {
|
||
display: inline-block;
|
||
border: 3px solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 4px 4px 0 var(--black);
|
||
padding: 6px 16px;
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 13px;
|
||
}
|
||
.dotgrid {
|
||
background-image: radial-gradient(circle, var(--black) 1.2px, transparent 1.2px);
|
||
background-size: 24px 24px;
|
||
}
|
||
|
||
section {
|
||
padding: 90px 60px;
|
||
position: relative;
|
||
border-bottom: 4px solid var(--black);
|
||
}
|
||
.sec-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.sec-head h2 {
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.03em;
|
||
font-size: 46px;
|
||
line-height: 1;
|
||
}
|
||
.sec-head .sp {
|
||
flex: 1;
|
||
height: 4px;
|
||
background: var(--black);
|
||
}
|
||
|
||
/* COVER */
|
||
.cover {
|
||
min-height: 100vh;
|
||
background: var(--offwhite);
|
||
padding: 60px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.cover .dg {
|
||
position: absolute;
|
||
inset: 0;
|
||
opacity: 0.4;
|
||
background-image: radial-gradient(circle, var(--black) 1.2px, transparent 1.2px);
|
||
background-size: 24px 24px;
|
||
pointer-events: none;
|
||
}
|
||
.cover .inner {
|
||
position: relative;
|
||
z-index: 3;
|
||
max-width: 72%;
|
||
}
|
||
.cover .pill {
|
||
margin-bottom: 28px;
|
||
}
|
||
.cover h1 {
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.04em;
|
||
line-height: 0.9;
|
||
font-size: clamp(64px, 9vw, 150px);
|
||
}
|
||
.cover .sub {
|
||
font-family: var(--mono);
|
||
font-weight: 500;
|
||
font-size: 18px;
|
||
line-height: 1.5;
|
||
color: var(--black);
|
||
margin-top: 24px;
|
||
max-width: 540px;
|
||
}
|
||
.cover .deco-rect {
|
||
position: absolute;
|
||
top: 18%;
|
||
right: 8%;
|
||
width: 200px;
|
||
height: 130px;
|
||
background: var(--pink);
|
||
border: 4px solid var(--black);
|
||
box-shadow: 8px 8px 0 var(--black);
|
||
transform: rotate(8deg);
|
||
z-index: 2;
|
||
}
|
||
.cover .deco-rect2 {
|
||
position: absolute;
|
||
bottom: 16%;
|
||
right: 18%;
|
||
width: 120px;
|
||
height: 120px;
|
||
background: var(--blue);
|
||
border: 4px solid var(--black);
|
||
box-shadow: 8px 8px 0 var(--black);
|
||
transform: rotate(-6deg);
|
||
z-index: 1;
|
||
}
|
||
.cover .star {
|
||
position: absolute;
|
||
top: 30%;
|
||
right: 30%;
|
||
width: 90px;
|
||
height: 90px;
|
||
background: var(--yellow);
|
||
border: 3px solid var(--black);
|
||
clip-path: polygon(
|
||
50% 0%,
|
||
61% 35%,
|
||
98% 35%,
|
||
68% 57%,
|
||
79% 91%,
|
||
50% 70%,
|
||
21% 91%,
|
||
32% 57%,
|
||
2% 35%,
|
||
39% 35%
|
||
);
|
||
z-index: 4;
|
||
}
|
||
.cover .counter {
|
||
position: absolute;
|
||
bottom: 30px;
|
||
left: 60px;
|
||
border: 3px solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 4px 4px 0 var(--black);
|
||
padding: 10px 18px;
|
||
font-family: var(--mono);
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* PALETTE */
|
||
.swatches {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 28px;
|
||
}
|
||
.sw {
|
||
border: 4px solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 8px 8px 0 var(--black);
|
||
}
|
||
.sw .chip {
|
||
height: 120px;
|
||
border-bottom: 4px solid var(--black);
|
||
}
|
||
.sw .meta {
|
||
padding: 16px 18px;
|
||
}
|
||
.sw .name {
|
||
font-family: var(--disp);
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.01em;
|
||
font-size: 18px;
|
||
}
|
||
.sw .hex {
|
||
font-family: var(--mono);
|
||
font-weight: 500;
|
||
font-size: 12px;
|
||
letter-spacing: 0.04em;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
/* TYPE */
|
||
.type-row {
|
||
display: grid;
|
||
grid-template-columns: 220px 1fr;
|
||
align-items: center;
|
||
padding: 24px 0;
|
||
border-bottom: 4px solid var(--black);
|
||
}
|
||
.type-row .tok {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 12px;
|
||
}
|
||
.type-row .m {
|
||
font-family: var(--mono);
|
||
font-weight: 500;
|
||
font-size: 11px;
|
||
color: #444;
|
||
margin-top: 8px;
|
||
line-height: 1.5;
|
||
}
|
||
.type-row .spec {
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* COMPONENTS */
|
||
.cnote {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 12px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.cgrid {
|
||
display: grid;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
gap: 32px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.s3 {
|
||
grid-column: span 3;
|
||
}
|
||
.s4 {
|
||
grid-column: span 4;
|
||
}
|
||
.s6 {
|
||
grid-column: span 6;
|
||
}
|
||
.s8 {
|
||
grid-column: span 8;
|
||
}
|
||
.fcard {
|
||
border: 4px solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 8px 8px 0 var(--black);
|
||
padding: 32px;
|
||
position: relative;
|
||
height: 100%;
|
||
}
|
||
.fcard .notch {
|
||
position: absolute;
|
||
top: -12px;
|
||
right: 24px;
|
||
width: 44px;
|
||
height: 44px;
|
||
background: var(--yellow);
|
||
border: 3px solid var(--black);
|
||
}
|
||
.fcard .ic {
|
||
width: 60px;
|
||
height: 60px;
|
||
border: 3px solid var(--black);
|
||
background: var(--blue);
|
||
display: grid;
|
||
place-items: center;
|
||
font-family: var(--disp);
|
||
font-weight: 700;
|
||
font-size: 26px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.fcard .t {
|
||
font-family: var(--disp);
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
font-size: 21px;
|
||
line-height: 1.2;
|
||
}
|
||
.fcard .bd {
|
||
font-family: var(--disp);
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: #222;
|
||
margin-top: 10px;
|
||
}
|
||
.statcard {
|
||
border: 3px solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 4px 4px 0 var(--black);
|
||
padding: 24px;
|
||
position: relative;
|
||
}
|
||
.statcard .dot {
|
||
position: absolute;
|
||
top: 14px;
|
||
right: 14px;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
border: 2px solid var(--black);
|
||
}
|
||
.statcard .n {
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
font-size: 48px;
|
||
line-height: 1;
|
||
}
|
||
.statcard .l {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 12px;
|
||
margin-top: 8px;
|
||
}
|
||
.btn {
|
||
display: inline-block;
|
||
border: 3px solid var(--black);
|
||
background: var(--yellow);
|
||
box-shadow: 4px 4px 0 var(--black);
|
||
padding: 14px 32px;
|
||
font-family: var(--disp);
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
}
|
||
.stripe {
|
||
height: 80px;
|
||
border: 3px solid var(--black);
|
||
background: repeating-linear-gradient(
|
||
45deg,
|
||
var(--black),
|
||
var(--black) 4px,
|
||
var(--green) 4px,
|
||
var(--green) 12px
|
||
);
|
||
}
|
||
.listnum {
|
||
display: inline-grid;
|
||
place-items: center;
|
||
width: 36px;
|
||
height: 36px;
|
||
border: 3px solid var(--black);
|
||
background: var(--yellow);
|
||
font-family: var(--mono);
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* COMPOSITIONS */
|
||
.gallery {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 48px;
|
||
}
|
||
.fw .flabel {
|
||
display: flex;
|
||
gap: 14px;
|
||
align-items: baseline;
|
||
margin-bottom: 16px;
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 12px;
|
||
color: #555;
|
||
}
|
||
.fw .flabel b {
|
||
color: var(--black);
|
||
}
|
||
.frame {
|
||
aspect-ratio: 16/9;
|
||
container-type: size;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: var(--offwhite);
|
||
border: 4px solid var(--black);
|
||
}
|
||
.frame > .body {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 3;
|
||
}
|
||
|
||
/* f1 cover */
|
||
.bf1 {
|
||
background: var(--cream);
|
||
}
|
||
.bf1 .dg {
|
||
position: absolute;
|
||
inset: 0;
|
||
opacity: 0.35;
|
||
background-image: radial-gradient(circle, var(--black) 0.15cqw, transparent 0.15cqw);
|
||
background-size: 3cqw 3cqw;
|
||
z-index: 1;
|
||
}
|
||
.bf1 .body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 5cqw;
|
||
}
|
||
.bf1 .pill {
|
||
display: inline-block;
|
||
border: 0.25cqw solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 0.4cqw 0.4cqw 0 var(--black);
|
||
padding: 0.5cqw 1.2cqw;
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 1cqw;
|
||
margin-bottom: 2cqw;
|
||
align-self: flex-start;
|
||
}
|
||
.bf1 h3 {
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.04em;
|
||
line-height: 0.9;
|
||
font-size: 9.5cqw;
|
||
max-width: 60cqw;
|
||
}
|
||
.bf1 .star {
|
||
position: absolute;
|
||
top: 18%;
|
||
right: 8%;
|
||
width: 14cqw;
|
||
height: 14cqw;
|
||
background: var(--pink);
|
||
border: 0.3cqw solid var(--black);
|
||
clip-path: polygon(
|
||
50% 0%,
|
||
61% 35%,
|
||
98% 35%,
|
||
68% 57%,
|
||
79% 91%,
|
||
50% 70%,
|
||
21% 91%,
|
||
32% 57%,
|
||
2% 35%,
|
||
39% 35%
|
||
);
|
||
z-index: 2;
|
||
}
|
||
.bf1 .rect {
|
||
position: absolute;
|
||
bottom: 16%;
|
||
right: 16%;
|
||
width: 16cqw;
|
||
height: 9cqw;
|
||
background: var(--blue);
|
||
border: 0.3cqw solid var(--black);
|
||
box-shadow: 0.6cqw 0.6cqw 0 var(--black);
|
||
transform: rotate(-6deg);
|
||
z-index: 1;
|
||
}
|
||
|
||
/* f2 feature cards */
|
||
.bf2 {
|
||
background: var(--blue);
|
||
}
|
||
.bf2 .body {
|
||
padding: 5cqw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.bf2 .pill {
|
||
align-self: flex-start;
|
||
border: 0.2cqw solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 0.3cqw 0.3cqw 0 var(--black);
|
||
padding: 0.4cqw 1cqw;
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 0.85cqw;
|
||
margin-bottom: 1.4cqw;
|
||
}
|
||
.bf2 h3 {
|
||
font-family: var(--disp);
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.02em;
|
||
font-size: 3.6cqw;
|
||
margin-bottom: 2cqw;
|
||
}
|
||
.bf2 .row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1.6cqw;
|
||
flex: 1;
|
||
}
|
||
.bf2 .c {
|
||
border: 0.3cqw solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 0.6cqw 0.6cqw 0 var(--black);
|
||
padding: 1.8cqw;
|
||
}
|
||
.bf2 .c .ic {
|
||
width: 4cqw;
|
||
height: 4cqw;
|
||
border: 0.2cqw solid var(--black);
|
||
display: grid;
|
||
place-items: center;
|
||
font-family: var(--disp);
|
||
font-weight: 700;
|
||
font-size: 1.8cqw;
|
||
margin-bottom: 1.2cqw;
|
||
}
|
||
.bf2 .c .t {
|
||
font-family: var(--disp);
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
font-size: 1.5cqw;
|
||
line-height: 1.15;
|
||
}
|
||
.bf2 .c .bd {
|
||
font-family: var(--disp);
|
||
font-weight: 500;
|
||
font-size: 0.95cqw;
|
||
line-height: 1.5;
|
||
color: #222;
|
||
margin-top: 0.6cqw;
|
||
}
|
||
|
||
/* f3 stat grid (tilted) */
|
||
.bf3 {
|
||
background: var(--green);
|
||
}
|
||
.bf3 .body {
|
||
padding: 5cqw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.bf3 .pill {
|
||
align-self: flex-start;
|
||
border: 0.2cqw solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 0.3cqw 0.3cqw 0 var(--black);
|
||
padding: 0.4cqw 1cqw;
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 0.85cqw;
|
||
margin-bottom: 1.4cqw;
|
||
}
|
||
.bf3 h3 {
|
||
font-family: var(--disp);
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.02em;
|
||
font-size: 3.6cqw;
|
||
margin-bottom: 2.4cqw;
|
||
}
|
||
.bf3 .row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 2cqw;
|
||
}
|
||
.bf3 .sc {
|
||
border: 0.25cqw solid var(--black);
|
||
background: var(--white);
|
||
box-shadow: 0.4cqw 0.4cqw 0 var(--black);
|
||
padding: 1.8cqw;
|
||
position: relative;
|
||
}
|
||
.bf3 .sc:nth-child(odd) {
|
||
transform: rotate(-2deg);
|
||
}
|
||
.bf3 .sc:nth-child(even) {
|
||
transform: rotate(2deg);
|
||
}
|
||
.bf3 .sc .dot {
|
||
position: absolute;
|
||
top: 1cqw;
|
||
right: 1cqw;
|
||
width: 1cqw;
|
||
height: 1cqw;
|
||
border-radius: 50%;
|
||
border: 0.15cqw solid var(--black);
|
||
}
|
||
.bf3 .sc .n {
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
font-size: 4.6cqw;
|
||
line-height: 1;
|
||
}
|
||
.bf3 .sc .l {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 0.85cqw;
|
||
margin-top: 0.6cqw;
|
||
}
|
||
|
||
/* f4 close (black) */
|
||
.bf4 {
|
||
background: var(--black);
|
||
}
|
||
.bf4 .body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
.bf4 .cardf {
|
||
border: 0.3cqw solid var(--white);
|
||
box-shadow: 1.2cqw 1.2cqw 0 var(--yellow);
|
||
padding: 4cqw 6cqw;
|
||
position: relative;
|
||
}
|
||
.bf4 .pill {
|
||
border: 0.25cqw solid var(--white);
|
||
background: var(--black);
|
||
color: var(--white);
|
||
box-shadow: 0.5cqw 0.5cqw 0 var(--white);
|
||
padding: 0.5cqw 1.2cqw;
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 1cqw;
|
||
margin-bottom: 1.6cqw;
|
||
display: inline-block;
|
||
}
|
||
.bf4 h3 {
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.03em;
|
||
font-size: 7cqw;
|
||
line-height: 0.95;
|
||
color: var(--white);
|
||
}
|
||
.bf4 .star {
|
||
position: absolute;
|
||
top: -3cqw;
|
||
right: -3cqw;
|
||
width: 9cqw;
|
||
height: 9cqw;
|
||
background: var(--pink);
|
||
border: 0.3cqw solid var(--white);
|
||
clip-path: polygon(
|
||
50% 0%,
|
||
61% 35%,
|
||
98% 35%,
|
||
68% 57%,
|
||
79% 91%,
|
||
50% 70%,
|
||
21% 91%,
|
||
32% 57%,
|
||
2% 35%,
|
||
39% 35%
|
||
);
|
||
}
|
||
|
||
/* PRINCIPLES */
|
||
.dos {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 32px;
|
||
}
|
||
.do-card {
|
||
border: 4px solid var(--black);
|
||
box-shadow: 8px 8px 0 var(--black);
|
||
padding: 36px;
|
||
}
|
||
.do-card.do {
|
||
background: var(--green);
|
||
}
|
||
.do-card.dont {
|
||
background: var(--white);
|
||
}
|
||
.do-card h4 {
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.02em;
|
||
font-size: 30px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.do-card ul {
|
||
list-style: none;
|
||
}
|
||
.do-card li {
|
||
font-family: var(--disp);
|
||
font-weight: 500;
|
||
font-size: 15px;
|
||
line-height: 1.55;
|
||
padding-left: 26px;
|
||
position: relative;
|
||
margin-bottom: 13px;
|
||
}
|
||
.do-card li::before {
|
||
position: absolute;
|
||
left: 0;
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
}
|
||
.do-card.do li::before {
|
||
content: "+";
|
||
}
|
||
.do-card.dont li::before {
|
||
content: "\00d7";
|
||
}
|
||
|
||
.foot {
|
||
padding: 48px 60px;
|
||
background: var(--black);
|
||
color: var(--white);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.foot .l {
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.03em;
|
||
font-size: 28px;
|
||
}
|
||
.foot .r {
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 11px;
|
||
color: #aaa;
|
||
}
|
||
@media (max-width: 1100px) {
|
||
.gallery {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.swatches {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
|
||
/>
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"
|
||
/>
|
||
<style id="ft-override">
|
||
:root {
|
||
--primary: #fffdf5 !important;
|
||
--secondary: #000000 !important;
|
||
--tertiary: #ffdc8b !important;
|
||
--accent: #fe90e8 !important;
|
||
--f-disp: "Inter", sans-serif !important;
|
||
--f-body: "Space Grotesk", sans-serif !important;
|
||
--black: #000000 !important;
|
||
--offwhite: #fffdf5 !important;
|
||
--pink: #fe90e8 !important;
|
||
--cream: #ffdc8b !important;
|
||
--disp: "Inter", sans-serif !important;
|
||
--mono: "Space Grotesk", sans-serif !important;
|
||
--white: #ffffff !important;
|
||
--blue: #c0f7fe !important;
|
||
--green: #99e885 !important;
|
||
--yellow: #f7cb46 !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- COVER -->
|
||
<section class="cover">
|
||
<div class="dg"></div>
|
||
<div class="star"></div>
|
||
<div class="deco-rect"></div>
|
||
<div class="deco-rect2"></div>
|
||
<div class="inner">
|
||
<span class="pill">Frame System · Vol. 01</span>
|
||
<h1>Loud,<br />bordered,<br />a little crooked.</h1>
|
||
<div class="sub">
|
||
A maximalist neobrutalist frame system — 4px ink borders, 8px hard shadows, five candy
|
||
pastels, and tilted decorations that puncture the grid.
|
||
</div>
|
||
</div>
|
||
<div class="counter">01 / 06</div>
|
||
</section>
|
||
|
||
<!-- PALETTE -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="pill">Palette</span>
|
||
<h2>Five Candy Pastels</h2>
|
||
<span class="sp"></span>
|
||
</div>
|
||
<div class="swatches">
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--pink)"></div>
|
||
<div class="meta">
|
||
<div class="name">Pink</div>
|
||
<div class="hex">#FE90E8</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--blue)"></div>
|
||
<div class="meta">
|
||
<div class="name">Blue</div>
|
||
<div class="hex">#C0F7FE</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--green)"></div>
|
||
<div class="meta">
|
||
<div class="name">Green</div>
|
||
<div class="hex">#99E885</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--yellow)"></div>
|
||
<div class="meta">
|
||
<div class="name">Yellow</div>
|
||
<div class="hex">#F7CB46 · CTA</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--cream)"></div>
|
||
<div class="meta">
|
||
<div class="name">Cream</div>
|
||
<div class="hex">#FFDC8B</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div
|
||
class="chip"
|
||
style="background: var(--offwhite); border-bottom: 4px solid var(--black)"
|
||
></div>
|
||
<div class="meta">
|
||
<div class="name">Off-White</div>
|
||
<div class="hex">#FFFDF5 · canvas</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div
|
||
class="chip"
|
||
style="background: var(--white); border-bottom: 4px solid var(--black)"
|
||
></div>
|
||
<div class="meta">
|
||
<div class="name">White</div>
|
||
<div class="hex">#FFFFFF · cards</div>
|
||
</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--black)"></div>
|
||
<div class="meta">
|
||
<div class="name">Black</div>
|
||
<div class="hex">#000000 · all borders</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TYPOGRAPHY -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="pill" style="background: var(--pink)">Type</span>
|
||
<h2>Inter × Space Grotesk</h2>
|
||
<span class="sp"></span>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">heading-xl</div>
|
||
<div class="m">Inter 900 · uppercase · −0.03em</div>
|
||
</div>
|
||
<div class="spec"><span class="disp" style="font-size: 80px">Maximal.</span></div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">heading-lg</div>
|
||
<div class="m">Inter 800 · uppercase · −0.02em</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span class="disp" style="font-weight: 800; font-size: 50px">Bordered & Bold</span>
|
||
</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">stat-number</div>
|
||
<div class="m">Inter 900 · line 1</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span class="disp" style="font-size: 64px; letter-spacing: -0.02em">240</span>
|
||
</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">body</div>
|
||
<div class="m">Inter 500 · sentence case · line 1.6</div>
|
||
</div>
|
||
<div class="spec">
|
||
<p style="font-weight: 500; font-size: 18px; line-height: 1.6; max-width: 640px">
|
||
Body runs Inter at weight 500, sentence case — the calm against the heavy uppercase
|
||
display.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="type-row" style="border-bottom: 0">
|
||
<div>
|
||
<div class="tok">label</div>
|
||
<div class="m">Space Grotesk 600 · uppercase · 0.08em</div>
|
||
</div>
|
||
<div class="spec"><span class="pill">Section Eyebrow</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMPONENTS -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="pill" style="background: var(--blue)">Components</span>
|
||
<h2>Borders & Hard Shadows</h2>
|
||
<span class="sp"></span>
|
||
</div>
|
||
|
||
<div class="cgrid">
|
||
<div class="s4">
|
||
<div class="cnote">Feature card + notch + icon</div>
|
||
<div class="fcard">
|
||
<div class="notch"></div>
|
||
<div class="ic" style="background: var(--pink)">A</div>
|
||
<div class="t">Bordered Block</div>
|
||
<div class="bd">4px ink border + 8px hard offset shadow, square corners.</div>
|
||
</div>
|
||
</div>
|
||
<div class="s4">
|
||
<div class="cnote">Stat cards (tilted) + deco dot</div>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px">
|
||
<div class="statcard" style="transform: rotate(-2deg)">
|
||
<div class="dot" style="background: var(--pink)"></div>
|
||
<div class="n">240</div>
|
||
<div class="l">Output</div>
|
||
</div>
|
||
<div class="statcard" style="transform: rotate(2deg)">
|
||
<div class="dot" style="background: var(--blue)"></div>
|
||
<div class="n">3.4×</div>
|
||
<div class="l">Faster</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="s4">
|
||
<div class="cnote">CTA · list number · stripe</div>
|
||
<span class="btn">Click Here →</span>
|
||
<div style="display: flex; align-items: center; gap: 14px; margin-top: 24px">
|
||
<span class="listnum">01</span
|
||
><span style="font-family: var(--disp); font-weight: 500; font-size: 15px"
|
||
>Numbered list bullet</span
|
||
>
|
||
</div>
|
||
<div class="stripe" style="margin-top: 24px"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cgrid" style="margin-bottom: 0">
|
||
<div class="s6">
|
||
<div class="cnote">Label pills — pastel variants</div>
|
||
<div style="display: flex; gap: 16px; flex-wrap: wrap">
|
||
<span class="pill" style="background: var(--pink)">Pink</span
|
||
><span class="pill" style="background: var(--blue)">Blue</span
|
||
><span class="pill" style="background: var(--green)">Green</span
|
||
><span class="pill" style="background: var(--yellow)">Yellow</span
|
||
><span class="pill" style="background: var(--cream)">Cream</span>
|
||
</div>
|
||
</div>
|
||
<div class="s6">
|
||
<div class="cnote">Icon squares + star burst</div>
|
||
<div style="display: flex; align-items: center; gap: 20px">
|
||
<span
|
||
style="
|
||
width: 64px;
|
||
height: 64px;
|
||
border: 3px solid var(--black);
|
||
background: var(--green);
|
||
display: grid;
|
||
place-items: center;
|
||
font-family: var(--disp);
|
||
font-weight: 700;
|
||
font-size: 26px;
|
||
"
|
||
>B</span
|
||
>
|
||
<span
|
||
style="
|
||
width: 64px;
|
||
height: 64px;
|
||
border: 3px solid var(--black);
|
||
background: var(--yellow);
|
||
display: grid;
|
||
place-items: center;
|
||
font-family: var(--disp);
|
||
font-weight: 700;
|
||
font-size: 26px;
|
||
"
|
||
>C</span
|
||
>
|
||
<span
|
||
style="
|
||
width: 64px;
|
||
height: 64px;
|
||
background: var(--pink);
|
||
border: 3px solid var(--black);
|
||
clip-path: polygon(
|
||
50% 0%,
|
||
61% 35%,
|
||
98% 35%,
|
||
68% 57%,
|
||
79% 91%,
|
||
50% 70%,
|
||
21% 91%,
|
||
32% 57%,
|
||
2% 35%,
|
||
39% 35%
|
||
);
|
||
"
|
||
></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMPOSITIONS -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="pill" style="background: var(--yellow)">Frames</span>
|
||
<h2>Frame Compositions</h2>
|
||
<span class="sp"></span>
|
||
</div>
|
||
<div class="gallery">
|
||
<div class="fw">
|
||
<div class="flabel"><b>Cover</b><span>· identity · cream · decorations · left</span></div>
|
||
<div class="frame bf1">
|
||
<div class="dg"></div>
|
||
<div class="star"></div>
|
||
<div class="rect"></div>
|
||
<div class="body">
|
||
<span class="pill">Frame System</span>
|
||
<h3>Loud, bordered, crooked.</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel"><b>Feature Cards</b><span>· catalog · blue ground · 3-up</span></div>
|
||
<div class="frame bf2">
|
||
<div class="body">
|
||
<span class="pill">Three Laws</span>
|
||
<h3>Cards on Grounds</h3>
|
||
<div class="row">
|
||
<div class="c">
|
||
<div class="ic" style="background: var(--pink)">A</div>
|
||
<div class="t">Border</div>
|
||
<div class="bd">4px ink on all.</div>
|
||
</div>
|
||
<div class="c">
|
||
<div class="ic" style="background: var(--green)">B</div>
|
||
<div class="t">Shadow</div>
|
||
<div class="bd">8px hard offset.</div>
|
||
</div>
|
||
<div class="c">
|
||
<div class="ic" style="background: var(--yellow)">C</div>
|
||
<div class="t">Tilt</div>
|
||
<div class="bd">A little crooked.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel">
|
||
<b>Stat Grid</b><span>· data · green ground · tilted · the dense frame</span>
|
||
</div>
|
||
<div class="frame bf3">
|
||
<div class="body">
|
||
<span class="pill">By The Numbers</span>
|
||
<h3>The Tally</h3>
|
||
<div class="row">
|
||
<div class="sc">
|
||
<div class="dot" style="background: var(--pink)"></div>
|
||
<div class="n">240</div>
|
||
<div class="l">Output</div>
|
||
</div>
|
||
<div class="sc">
|
||
<div class="dot" style="background: var(--blue)"></div>
|
||
<div class="n">3.4×</div>
|
||
<div class="l">Faster</div>
|
||
</div>
|
||
<div class="sc">
|
||
<div class="dot" style="background: var(--yellow)"></div>
|
||
<div class="n">12K</div>
|
||
<div class="l">Shipped</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel">
|
||
<b>Closing Plate</b><span>· closer · black ground · yellow shadow</span>
|
||
</div>
|
||
<div class="frame bf4">
|
||
<div class="body">
|
||
<div class="cardf">
|
||
<div class="star"></div>
|
||
<span class="pill">The End</span>
|
||
<h3>Stay loud.</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PRINCIPLES -->
|
||
<section style="border-bottom: none">
|
||
<div class="sec-head">
|
||
<span class="pill" style="background: var(--green)">Rules</span>
|
||
<h2>Frame Rules</h2>
|
||
<span class="sp"></span>
|
||
</div>
|
||
<div class="dos">
|
||
<div class="do-card do">
|
||
<h4>Do</h4>
|
||
<ul>
|
||
<li>4px borders + 8px shadows on primary cards; 3px + 4px on chrome.</li>
|
||
<li>Cycle pastel grounds across frames; keep the rhythm.</li>
|
||
<li>Inter 800–900 uppercase, negative tracking, for all display.</li>
|
||
<li>Open every region with a label-pill eyebrow.</li>
|
||
<li>Tilt decorations ±2°–12°; add one to every frame.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="do-card dont">
|
||
<h4>Don't</h4>
|
||
<ul>
|
||
<li>No rounded corners (save the stat-deco dot); no blurred shadows.</li>
|
||
<li>No colored borders (black only, save the close-frame white).</li>
|
||
<li>No sentence-case Inter display; no sixth pastel.</li>
|
||
<li>No label rendered as plain text — pill or nothing.</li>
|
||
<li>Don't blow a headline edge-to-edge — fit to measure.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
|
||
<style>
|
||
/* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
|
||
.capdemo {
|
||
--cap-ink: var(--black);
|
||
--cap-canvas: var(--white);
|
||
--cap-accent: var(--yellow);
|
||
--cap-accent-2: var(--cream);
|
||
}
|
||
.capdemo .stage {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 16.67cqh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 4;
|
||
}
|
||
.capdemo .pill {
|
||
max-width: 80cqw;
|
||
padding: 1.4cqw 3cqw 1.7cqw;
|
||
background: var(--cap-canvas);
|
||
border: 0.4cqw solid var(--cap-ink);
|
||
border-radius: 0;
|
||
box-shadow: 0.8cqw 0.8cqw 0 var(--cap-ink);
|
||
}
|
||
.capdemo .line {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 0.12em 0.32em;
|
||
font-family: var(--disp);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
font-size: 3.2cqw;
|
||
line-height: 1.12;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.capdemo .w {
|
||
display: inline-block;
|
||
padding: 0 0.1em;
|
||
color: color-mix(in srgb, var(--cap-ink) 40%, var(--cap-canvas));
|
||
}
|
||
.capdemo .w.spoken {
|
||
color: var(--cap-ink);
|
||
}
|
||
.capdemo .w.active {
|
||
color: var(--cap-ink);
|
||
background: var(--cap-accent);
|
||
box-shadow: 0 0 0 0.08em var(--cap-accent);
|
||
}
|
||
.capdemo .bandline {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 16.67cqh;
|
||
border-top: 0.15cqw dashed rgba(0, 0, 0, 0.4);
|
||
z-index: 3;
|
||
}
|
||
.capdemo .bandtag {
|
||
position: absolute;
|
||
right: 3cqw;
|
||
bottom: calc(16.67cqh + 0.7cqw);
|
||
font-family: var(--mono);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
font-size: 0.9cqw;
|
||
letter-spacing: 0.08em;
|
||
color: var(--black);
|
||
opacity: 0.55;
|
||
z-index: 4;
|
||
}
|
||
</style>
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="pill" style="background: var(--yellow)">Captions</span>
|
||
<h2>Lower-Third Karaoke</h2>
|
||
<span class="sp"></span>
|
||
</div>
|
||
<div class="gallery">
|
||
<div class="fw">
|
||
<div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
|
||
<div class="frame capdemo" style="background: var(--cream)">
|
||
<div
|
||
class="dg"
|
||
style="
|
||
position: absolute;
|
||
inset: 0;
|
||
opacity: 0.3;
|
||
background-image: radial-gradient(
|
||
circle,
|
||
var(--black) 0.15cqw,
|
||
transparent 0.15cqw
|
||
);
|
||
background-size: 3cqw 3cqw;
|
||
z-index: 1;
|
||
"
|
||
></div>
|
||
<div class="bandline"></div>
|
||
<div class="bandtag">caption band · 16.7%</div>
|
||
<div class="stage">
|
||
<div class="pill">
|
||
<div class="line">
|
||
<span class="w spoken">Built</span>
|
||
<span class="w spoken">for</span>
|
||
<span class="w active">teams</span>
|
||
<span class="w">who</span>
|
||
<span class="w">ship.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel"><b>Settled line</b><span>· all spoken · stamp cleared</span></div>
|
||
<div class="frame capdemo" style="background: var(--blue)">
|
||
<div class="stage">
|
||
<div class="pill">
|
||
<div class="line">
|
||
<span class="w spoken">Ship</span>
|
||
<span class="w spoken">faster</span>
|
||
<span class="w spoken">today.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="foot">
|
||
<span class="l">BlockFrame</span>
|
||
<span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
|
||
</div>
|
||
|
||
<template id="__bundler_thumbnail">
|
||
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||
<rect width="100" height="100" fill="#FFFDF5" />
|
||
<rect x="16" y="34" width="46" height="32" fill="#FE90E8" stroke="#000" stroke-width="4" />
|
||
<rect x="22" y="40" width="46" height="32" fill="#C0F7FE" stroke="#000" stroke-width="4" />
|
||
<path
|
||
d="M74 16l4 11h12l-9 7 3 11-10-6-10 6 3-11-9-7h12z"
|
||
fill="#F7CB46"
|
||
stroke="#000"
|
||
stroke-width="2"
|
||
/>
|
||
</svg>
|
||
</template>
|
||
</body>
|
||
</html>
|