Created
July 25, 2026 01:52
-
-
Save peterw/4dab1bfb702f6d82094700836b866fa0 to your computer and use it in GitHub Desktop.
Carby Format Ladder — 5 Executions
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Format Ladder — Same Angle, Five Executions</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;600;700;800&display=swap" rel="stylesheet" /> | |
| <style> | |
| :root { | |
| --bg: #0f1115; | |
| --surface: #171a21; | |
| --surface-2: #1e222b; | |
| --border: #2a2f3a; | |
| --border-soft: #232833; | |
| --text: #f3f4f6; | |
| --muted: #9ca3af; | |
| --muted-2: #6b7280; | |
| --lime: #c8f54a; | |
| --lime-dim: rgba(200, 245, 74, 0.12); | |
| --lime-border: rgba(200, 245, 74, 0.35); | |
| --ugc: #c8f54a; | |
| --podcast: #7dd3fc; | |
| --authority: #fbbf24; | |
| --ai: #c084fc; | |
| --static: #fb7185; | |
| --radius: 12px; | |
| --radius-sm: 8px; | |
| --shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.35); | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| line-height: 1.45; | |
| font-size: 14px; | |
| min-height: 100vh; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| a { color: var(--lime); text-decoration: none; } | |
| a:hover { text-decoration: underline; } | |
| .topbar { | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| background: rgba(15, 17, 21, 0.92); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .topbar-inner { | |
| max-width: 1480px; | |
| margin: 0 auto; | |
| padding: 14px 20px 12px; | |
| } | |
| .title-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: baseline; | |
| gap: 10px 16px; | |
| margin-bottom: 6px; | |
| } | |
| h1 { | |
| font-size: 18px; | |
| font-weight: 800; | |
| letter-spacing: -0.02em; | |
| color: var(--text); | |
| } | |
| h1 span { color: var(--lime); } | |
| .thesis { | |
| color: var(--muted); | |
| font-size: 13px; | |
| font-weight: 500; | |
| max-width: 640px; | |
| } | |
| .angle-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| align-items: center; | |
| margin-top: 12px; | |
| } | |
| .angle-label { | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| color: var(--lime); | |
| white-space: nowrap; | |
| } | |
| .angle-input-wrap { | |
| flex: 1; | |
| min-width: 240px; | |
| position: relative; | |
| } | |
| #angleInput { | |
| width: 100%; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| color: var(--text); | |
| border-radius: var(--radius-sm); | |
| padding: 10px 36px 10px 12px; | |
| font-family: inherit; | |
| font-size: 14px; | |
| font-weight: 500; | |
| outline: none; | |
| transition: border-color 0.15s, box-shadow 0.15s; | |
| } | |
| #angleInput:focus { | |
| border-color: var(--lime-border); | |
| box-shadow: 0 0 0 3px var(--lime-dim); | |
| } | |
| #angleInput::placeholder { color: var(--muted-2); } | |
| .angle-clear { | |
| position: absolute; | |
| right: 8px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background: transparent; | |
| border: none; | |
| color: var(--muted-2); | |
| cursor: pointer; | |
| font-size: 12px; | |
| padding: 4px 6px; | |
| border-radius: 4px; | |
| display: none; | |
| } | |
| .angle-clear:hover { color: var(--text); background: var(--surface-2); } | |
| .angle-input-wrap.has-value .angle-clear { display: block; } | |
| .nav-jumps { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| margin-top: 12px; | |
| } | |
| .nav-jumps a { | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--muted); | |
| background: var(--surface); | |
| border: 1px solid var(--border-soft); | |
| padding: 5px 10px; | |
| border-radius: 999px; | |
| text-decoration: none; | |
| transition: color 0.12s, border-color 0.12s, background 0.12s; | |
| } | |
| .nav-jumps a:hover { | |
| color: var(--text); | |
| border-color: var(--border); | |
| background: var(--surface-2); | |
| text-decoration: none; | |
| } | |
| .nav-jumps a[data-f="ugc"]:hover { color: var(--ugc); border-color: rgba(200,245,74,0.4); } | |
| .nav-jumps a[data-f="podcast"]:hover { color: var(--podcast); border-color: rgba(125,211,252,0.4); } | |
| .nav-jumps a[data-f="authority"]:hover { color: var(--authority); border-color: rgba(251,191,36,0.4); } | |
| .nav-jumps a[data-f="ai"]:hover { color: var(--ai); border-color: rgba(192,132,252,0.4); } | |
| .nav-jumps a[data-f="static"]:hover { color: var(--static); border-color: rgba(251,113,133,0.4); } | |
| .nav-jumps a[data-f="matrix"]:hover { color: var(--lime); border-color: var(--lime-border); } | |
| .howto { | |
| max-width: 1480px; | |
| margin: 0 auto; | |
| padding: 16px 20px 0; | |
| } | |
| details.howto-panel { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| } | |
| details.howto-panel summary { | |
| cursor: pointer; | |
| list-style: none; | |
| padding: 12px 16px; | |
| font-weight: 700; | |
| font-size: 13px; | |
| color: var(--text); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| user-select: none; | |
| } | |
| details.howto-panel summary::-webkit-details-marker { display: none; } | |
| details.howto-panel summary::before { | |
| content: "▸"; | |
| color: var(--lime); | |
| font-size: 12px; | |
| transition: transform 0.15s; | |
| } | |
| details.howto-panel[open] summary::before { transform: rotate(90deg); } | |
| details.howto-panel summary:hover { background: var(--surface-2); } | |
| .howto-body { | |
| padding: 14px 16px 16px; | |
| border-top: 1px solid var(--border-soft); | |
| } | |
| .howto-steps { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 10px; | |
| list-style: none; | |
| counter-reset: step; | |
| } | |
| .howto-steps li { | |
| background: var(--bg); | |
| border: 1px solid var(--border-soft); | |
| border-radius: var(--radius-sm); | |
| padding: 12px; | |
| font-size: 12.5px; | |
| color: var(--muted); | |
| counter-increment: step; | |
| position: relative; | |
| padding-left: 40px; | |
| } | |
| .howto-steps li::before { | |
| content: counter(step); | |
| position: absolute; | |
| left: 12px; | |
| top: 12px; | |
| width: 20px; | |
| height: 20px; | |
| background: var(--lime-dim); | |
| color: var(--lime); | |
| border-radius: 6px; | |
| font-weight: 800; | |
| font-size: 11px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .howto-steps li strong { color: var(--text); font-weight: 600; } | |
| .main { | |
| max-width: 1480px; | |
| margin: 0 auto; | |
| padding: 18px 20px 24px; | |
| } | |
| .ladder { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| gap: 12px; | |
| align-items: start; | |
| } | |
| @media (max-width: 1200px) { | |
| .ladder { grid-template-columns: repeat(3, 1fr); } | |
| } | |
| @media (max-width: 820px) { | |
| .ladder { grid-template-columns: 1fr; } | |
| } | |
| .col { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 0; | |
| box-shadow: var(--shadow); | |
| scroll-margin-top: 140px; | |
| } | |
| .col-head { | |
| padding: 14px 14px 12px; | |
| border-bottom: 1px solid var(--border-soft); | |
| border-top: 3px solid var(--accent, var(--lime)); | |
| } | |
| .col-num { | |
| font-size: 10px; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--muted-2); | |
| margin-bottom: 4px; | |
| } | |
| .col-name { | |
| font-size: 15px; | |
| font-weight: 800; | |
| letter-spacing: -0.02em; | |
| color: var(--text); | |
| margin-bottom: 4px; | |
| } | |
| .col-def { | |
| font-size: 12px; | |
| color: var(--muted); | |
| line-height: 1.4; | |
| } | |
| .col-body { | |
| padding: 12px 14px 14px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| flex: 1; | |
| } | |
| .block-label { | |
| font-size: 10px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.07em; | |
| color: var(--accent, var(--lime)); | |
| margin-bottom: 6px; | |
| } | |
| .why ul, .recipe ul { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| } | |
| .why li, .recipe li { | |
| font-size: 12px; | |
| color: var(--muted); | |
| padding-left: 12px; | |
| position: relative; | |
| line-height: 1.4; | |
| } | |
| .why li::before { | |
| content: "•"; | |
| position: absolute; | |
| left: 0; | |
| color: var(--accent, var(--lime)); | |
| font-weight: 700; | |
| } | |
| .recipe li::before { | |
| content: "→"; | |
| position: absolute; | |
| left: 0; | |
| color: var(--muted-2); | |
| font-size: 10px; | |
| top: 2px; | |
| } | |
| .recipe li strong { color: var(--text); font-weight: 600; } | |
| .spencer { | |
| background: var(--lime-dim); | |
| border: 1px solid var(--lime-border); | |
| border-radius: var(--radius-sm); | |
| padding: 8px 10px; | |
| font-size: 12px; | |
| color: var(--text); | |
| line-height: 1.4; | |
| } | |
| .spencer strong { | |
| color: var(--lime); | |
| font-weight: 700; | |
| } | |
| /* AI Spencer highlight callout */ | |
| .spencer-callout { | |
| background: linear-gradient(135deg, rgba(192, 132, 252, 0.16), rgba(192, 132, 252, 0.06)); | |
| border: 1.5px solid rgba(192, 132, 252, 0.55); | |
| border-radius: var(--radius-sm); | |
| padding: 12px 12px 12px 14px; | |
| font-size: 12.5px; | |
| color: var(--text); | |
| line-height: 1.45; | |
| box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.1), 0 8px 20px rgba(0, 0, 0, 0.25); | |
| position: relative; | |
| } | |
| .spencer-callout .callout-kicker { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 10px; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| letter-spacing: 0.07em; | |
| color: var(--ai); | |
| margin-bottom: 6px; | |
| } | |
| .spencer-callout .callout-kicker::before { | |
| content: ""; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--ai); | |
| box-shadow: 0 0 8px var(--ai); | |
| } | |
| .spencer-callout strong { | |
| color: #e9d5ff; | |
| font-weight: 800; | |
| } | |
| .spencer-callout .callout-stat { | |
| color: var(--ai); | |
| font-weight: 800; | |
| white-space: nowrap; | |
| } | |
| .examples { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .ex { | |
| background: var(--bg); | |
| border: 1px solid var(--border-soft); | |
| border-radius: var(--radius-sm); | |
| padding: 10px 10px 10px 12px; | |
| border-left: 3px solid var(--accent, var(--lime)); | |
| position: relative; | |
| } | |
| .ex-brand { | |
| font-size: 12px; | |
| font-weight: 700; | |
| color: var(--text); | |
| margin-bottom: 2px; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| flex-wrap: wrap; | |
| } | |
| .ex-tag { | |
| font-size: 9px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| background: var(--surface-2); | |
| color: var(--muted); | |
| border: 1px solid var(--border); | |
| padding: 1px 6px; | |
| border-radius: 999px; | |
| } | |
| .ex-desc { | |
| font-size: 11.5px; | |
| color: var(--muted); | |
| margin-bottom: 4px; | |
| line-height: 1.35; | |
| } | |
| .ex-hook { | |
| font-size: 11.5px; | |
| color: var(--text); | |
| font-style: italic; | |
| border-left: 2px solid var(--border); | |
| padding-left: 8px; | |
| margin: 4px 0 6px; | |
| line-height: 1.35; | |
| } | |
| a.ex-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 11px; | |
| font-weight: 700; | |
| color: var(--accent, var(--lime)); | |
| text-decoration: none; | |
| padding: 3px 8px 3px 0; | |
| border-radius: 4px; | |
| transition: color 0.12s, background 0.12s; | |
| } | |
| a.ex-link::after { | |
| content: "↗"; | |
| font-size: 11px; | |
| font-weight: 700; | |
| opacity: 0.85; | |
| } | |
| a.ex-link:hover { | |
| text-decoration: underline; | |
| color: var(--text); | |
| } | |
| a.ex-link .ex-link-label { | |
| text-decoration: inherit; | |
| } | |
| .ex-link.muted-link { | |
| display: inline-block; | |
| color: var(--muted-2); | |
| font-weight: 500; | |
| font-size: 11px; | |
| font-style: normal; | |
| pointer-events: none; | |
| padding: 0; | |
| } | |
| .ex-link.muted-link::after { content: none; } | |
| /* Carby riff — reactive */ | |
| .riff { | |
| background: var(--surface-2); | |
| border: 1px dashed var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 10px; | |
| margin-top: auto; | |
| transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; | |
| } | |
| .riff.is-live { | |
| border-style: solid; | |
| border-color: color-mix(in srgb, var(--accent, var(--lime)) 45%, var(--border)); | |
| box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--lime)) 12%, transparent); | |
| } | |
| .riff.is-updating { | |
| border-color: var(--accent, var(--lime)); | |
| background: color-mix(in srgb, var(--accent, var(--lime)) 8%, var(--surface-2)); | |
| } | |
| .riff-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| margin-bottom: 8px; | |
| flex-wrap: wrap; | |
| } | |
| .riff-header .block-label { margin-bottom: 0; } | |
| .riff-live-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| font-size: 9.5px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| color: var(--accent, var(--lime)); | |
| background: color-mix(in srgb, var(--accent, var(--lime)) 12%, transparent); | |
| border: 1px solid color-mix(in srgb, var(--accent, var(--lime)) 35%, transparent); | |
| padding: 2px 7px; | |
| border-radius: 999px; | |
| white-space: nowrap; | |
| } | |
| .riff-live-badge::before { | |
| content: ""; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--accent, var(--lime)); | |
| box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, var(--lime)) 60%, transparent); | |
| animation: live-pulse 1.8s ease-out infinite; | |
| } | |
| .riff.is-preview .riff-live-badge { | |
| color: var(--muted); | |
| background: var(--bg); | |
| border-color: var(--border); | |
| } | |
| .riff.is-preview .riff-live-badge::before { | |
| background: var(--muted-2); | |
| animation: none; | |
| box-shadow: none; | |
| } | |
| @keyframes live-pulse { | |
| 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, var(--lime)) 55%, transparent); } | |
| 70% { box-shadow: 0 0 0 6px transparent; } | |
| 100% { box-shadow: 0 0 0 0 transparent; } | |
| } | |
| .riff-text { | |
| font-size: 12.5px; | |
| color: var(--text); | |
| line-height: 1.45; | |
| font-weight: 500; | |
| min-height: 3.2em; | |
| white-space: pre-wrap; | |
| } | |
| .riff-text .empty-hint { | |
| color: var(--muted-2); | |
| font-weight: 400; | |
| font-style: italic; | |
| white-space: normal; | |
| } | |
| .riff-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-top: 8px; | |
| } | |
| .riff-copy { | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| color: var(--muted); | |
| font-family: inherit; | |
| font-size: 11px; | |
| font-weight: 600; | |
| padding: 5px 8px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: color 0.12s, border-color 0.12s, background 0.12s; | |
| } | |
| .riff-copy:hover { | |
| color: var(--lime); | |
| border-color: var(--lime-border); | |
| background: var(--lime-dim); | |
| } | |
| .riff-copy.copied { | |
| color: var(--lime); | |
| border-color: var(--lime-border); | |
| } | |
| .col[data-format="ugc"] { --accent: var(--ugc); } | |
| .col[data-format="podcast"] { --accent: var(--podcast); } | |
| .col[data-format="authority"] { --accent: var(--authority); } | |
| .col[data-format="ai"] { --accent: var(--ai); } | |
| .col[data-format="static"] { --accent: var(--static); } | |
| .col[data-format="podcast"] .spencer { | |
| background: rgba(125, 211, 252, 0.1); | |
| border-color: rgba(125, 211, 252, 0.3); | |
| } | |
| .col[data-format="podcast"] .spencer strong { color: var(--podcast); } | |
| .col[data-format="authority"] .spencer { | |
| background: rgba(251, 191, 36, 0.1); | |
| border-color: rgba(251, 191, 36, 0.3); | |
| } | |
| .col[data-format="authority"] .spencer strong { color: var(--authority); } | |
| .col[data-format="static"] .spencer { | |
| background: rgba(251, 113, 133, 0.1); | |
| border-color: rgba(251, 113, 133, 0.3); | |
| } | |
| .col[data-format="static"] .spencer strong { color: var(--static); } | |
| /* Format × Hook matrix */ | |
| .matrix-wrap { | |
| max-width: 1480px; | |
| margin: 0 auto; | |
| padding: 0 20px 24px; | |
| } | |
| .matrix-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| scroll-margin-top: 140px; | |
| } | |
| .matrix-head { | |
| padding: 14px 16px 12px; | |
| border-bottom: 1px solid var(--border-soft); | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: baseline; | |
| gap: 8px 14px; | |
| border-top: 3px solid var(--lime); | |
| } | |
| .matrix-head h2 { | |
| font-size: 14px; | |
| font-weight: 800; | |
| letter-spacing: -0.01em; | |
| } | |
| .matrix-head p { | |
| font-size: 12px; | |
| color: var(--muted); | |
| } | |
| .matrix-scroll { | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| table.matrix { | |
| width: 100%; | |
| border-collapse: collapse; | |
| min-width: 860px; | |
| font-size: 12px; | |
| } | |
| table.matrix th, | |
| table.matrix td { | |
| border: 1px solid var(--border-soft); | |
| padding: 10px 11px; | |
| text-align: left; | |
| vertical-align: top; | |
| line-height: 1.4; | |
| } | |
| table.matrix thead th { | |
| background: var(--bg); | |
| font-size: 10px; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| color: var(--muted); | |
| position: sticky; | |
| top: 0; | |
| } | |
| table.matrix thead th.fmt-ugc { color: var(--ugc); } | |
| table.matrix thead th.fmt-podcast { color: var(--podcast); } | |
| table.matrix thead th.fmt-authority { color: var(--authority); } | |
| table.matrix thead th.fmt-ai { color: var(--ai); } | |
| table.matrix thead th.fmt-static { color: var(--static); } | |
| table.matrix tbody th { | |
| background: var(--bg); | |
| font-weight: 700; | |
| color: var(--text); | |
| width: 150px; | |
| min-width: 130px; | |
| font-size: 12px; | |
| } | |
| table.matrix tbody th span { | |
| display: block; | |
| font-weight: 500; | |
| color: var(--muted); | |
| font-size: 11px; | |
| margin-top: 3px; | |
| } | |
| table.matrix tbody td { | |
| color: var(--muted); | |
| background: var(--surface); | |
| font-size: 11.5px; | |
| } | |
| table.matrix tbody tr:hover td { | |
| background: var(--surface-2); | |
| color: var(--text); | |
| } | |
| table.matrix tbody td strong { | |
| color: var(--text); | |
| font-weight: 600; | |
| } | |
| /* Quick stack */ | |
| .stack { | |
| max-width: 1480px; | |
| margin: 0 auto; | |
| padding: 0 20px 24px; | |
| } | |
| .stack-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 18px 20px; | |
| border-left: 4px solid var(--lime); | |
| } | |
| .stack-card h2 { | |
| font-size: 14px; | |
| font-weight: 800; | |
| margin-bottom: 12px; | |
| letter-spacing: -0.01em; | |
| } | |
| .stack-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 12px; | |
| } | |
| @media (max-width: 700px) { | |
| .stack-grid { grid-template-columns: 1fr; } | |
| } | |
| .stack-item h3 { | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| color: var(--lime); | |
| margin-bottom: 6px; | |
| } | |
| .stack-item p, .stack-item li { | |
| font-size: 12.5px; | |
| color: var(--muted); | |
| line-height: 1.45; | |
| } | |
| .stack-item ul { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .stack-item li::before { | |
| content: "· "; | |
| color: var(--lime); | |
| font-weight: 800; | |
| } | |
| .stack-item strong { color: var(--text); } | |
| footer { | |
| max-width: 1480px; | |
| margin: 0 auto; | |
| padding: 8px 20px 32px; | |
| } | |
| .footer-note { | |
| font-size: 11.5px; | |
| color: var(--muted-2); | |
| border-top: 1px solid var(--border-soft); | |
| padding-top: 16px; | |
| line-height: 1.5; | |
| } | |
| .footer-note strong { color: var(--muted); font-weight: 600; } | |
| @media (max-width: 600px) { | |
| .topbar-inner { padding: 12px 14px 10px; } | |
| .main, .howto, .stack, .matrix-wrap, footer { padding-left: 14px; padding-right: 14px; } | |
| h1 { font-size: 16px; } | |
| .col, .matrix-card { scroll-margin-top: 190px; } | |
| } | |
| </style> | |
| <script type="application/ld+json"> | |
| { | |
| "@context": "urn:goose.ai:schema", | |
| "@type": "GooseApp", | |
| "name": "format-ladder-carby", | |
| "description": "Dark-mode Format Ladder board: 5 ad formats, live riffs, hook matrix", | |
| "width": 1440, | |
| "height": 960, | |
| "resizable": true, | |
| "mcpServers": [ | |
| "apps" | |
| ] | |
| } | |
| </script> | |
| <script type="application/x-goose-prd"> | |
| # Format Ladder — Same Angle, Five Executions | |
| ## Purpose | |
| Polished dark-mode board for Carby meal-planning media buyers. Given ONE winning ad angle, produce the same message across five formats with real-world examples, creator-ready briefs, and live Carby riffs so the team can brief creators without a blank page. | |
| ## Thesis | |
| Iterate format, not idea. Keep the body identical; only the container changes. | |
| ## Layout | |
| - **Sticky top bar:** Title, thesis, Angle slot (text input, localStorage-persisted), clear button, jump-nav to formats. | |
| - **Collapsible "How to use this board"** (5 steps): paste angle → pick 2 formats → copy brief + riff → ship same body → kill/keep on 3s-view & 25% hold. | |
| - **5-column ladder** (desktop) / 3-col mid / 1-col mobile: | |
| 1. UGC Talking Head | |
| 2. Podcast Clip | |
| 3. Authority / Expert | |
| 4. AI-Animated Explainer | |
| 5. Static | |
| - Each column: name + definition, Why it works (≤2 bullets), Brief recipe (3–5 checklist items), optional Spencer/test note, 4–6 example cards, **live Carby riff** with “live from angle slot” label + copy button. | |
| - **Format × Hook matrix** (full-width strip under columns): table of 3 fixed Carby angles × 5 formats with one-line execution notes per cell. | |
| - **Quick stack suggestion** for the week (Must ship / Nice / Measure). | |
| - **Footer:** draft disclaimer + Stripe-truth reminder. | |
| ## Interactivity | |
| - Angle slot seeds all 5 Carby riffs instantly with **format-specific framing** (not the same sentence pasted). | |
| - Empty slot previews default angle: “It's not COOKING that's exhausting, it's the DECIDING” without persisting until user types. | |
| - Riffs labeled “live from angle slot”; copy-to-clipboard per column. | |
| - Example links styled “Open example ↗” when URL exists; pattern-only rows remain muted non-links. | |
| ## Design | |
| - Dark charcoal `#0f1115`, surfaces `#171a21`, electric lime `#c8f54a`, per-format accent colors. | |
| - Inter (Google Fonts) + system stack. Editorial, no glassmorphism/gradients slop. | |
| - AI-Animated Spencer note (`$2k/day → $10–15k/day`) is a highlighted callout (accent border/glow). | |
| - Responsive; scroll-margin accounts for sticky top bar. | |
| ## Content rules | |
| - Real public example links where known (TikTok, Motion library); otherwise pattern-study labels. | |
| - No lorem ipsum. Examples are references for pattern study, not claims Carby ran them. | |
| - Judge owned ads on Stripe truth only. | |
| ## Tech | |
| - Single self-contained HTML file; vanilla JS; Inter from Google Fonts CDN only. | |
| - localStorage key: `carby-format-ladder-angle`. | |
| ## Weekly stack (on-board) | |
| - Must: UGC ×3 creators same body + 1 static meme + 1 AI metaphor | |
| - Nice: podcast-clip + RD-authority | |
| - Measure: hook rate & 25% hold in 48h before ROAS | |
| </script> | |
| </head> | |
| <body> | |
| <header class="topbar"> | |
| <div class="topbar-inner"> | |
| <div class="title-row"> | |
| <h1>Format Ladder — <span>Same Angle, Five Executions</span></h1> | |
| <p class="thesis">Iterate format, not idea. Keep the body identical; only the container changes.</p> | |
| </div> | |
| <div class="angle-row"> | |
| <label class="angle-label" for="angleInput">Angle slot</label> | |
| <div class="angle-input-wrap" id="angleWrap"> | |
| <input | |
| id="angleInput" | |
| type="text" | |
| autocomplete="off" | |
| spellcheck="true" | |
| placeholder="It's not COOKING that's exhausting, it's the DECIDING" | |
| aria-label="Winning ad angle" | |
| /> | |
| <button type="button" class="angle-clear" id="angleClear" title="Clear angle" aria-label="Clear angle">✕</button> | |
| </div> | |
| </div> | |
| <nav class="nav-jumps" aria-label="Jump to format"> | |
| <a href="#fmt-ugc" data-f="ugc">1 · UGC Talking Head</a> | |
| <a href="#fmt-podcast" data-f="podcast">2 · Podcast Clip</a> | |
| <a href="#fmt-authority" data-f="authority">3 · Authority / Expert</a> | |
| <a href="#fmt-ai" data-f="ai">4 · AI-Animated</a> | |
| <a href="#fmt-static" data-f="static">5 · Static</a> | |
| <a href="#fmt-matrix" data-f="matrix">× Hook matrix</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <section class="howto"> | |
| <details class="howto-panel"> | |
| <summary>How to use this board</summary> | |
| <div class="howto-body"> | |
| <ol class="howto-steps"> | |
| <li><strong>Paste winning angle</strong> in the slot above — all five Carby riffs rewrite instantly with format-specific framing.</li> | |
| <li><strong>Pick 2 formats</strong> you don't already have live this week.</li> | |
| <li><strong>Copy brief recipe + Carby riff</strong> straight into the creator brief.</li> | |
| <li><strong>Ship same body copy</strong> across formats; only first 3s + container change.</li> | |
| <li><strong>Kill/keep on 3s-view rate and 25% hold</strong> within 48h — not purchases.</li> | |
| </ol> | |
| </div> | |
| </details> | |
| </section> | |
| <main class="main"> | |
| <div class="ladder"> | |
| <!-- 1. UGC --> | |
| <article class="col" id="fmt-ugc" data-format="ugc"> | |
| <div class="col-head"> | |
| <div class="col-num">Format 01</div> | |
| <h2 class="col-name">UGC Talking Head</h2> | |
| <p class="col-def">Face-cam creator monologue: one person, phone vertical, confession energy.</p> | |
| </div> | |
| <div class="col-body"> | |
| <div class="why"> | |
| <div class="block-label">Why it works</div> | |
| <ul> | |
| <li>Native feed pattern — thumb stops on a real face saying a true thing.</li> | |
| <li>Lowest production friction to test a new angle at volume.</li> | |
| </ul> | |
| </div> | |
| <div class="recipe"> | |
| <div class="block-label">Brief recipe</div> | |
| <ul> | |
| <li><strong>1 creator</strong>, face-cam, natural light, vertical 9:16</li> | |
| <li><strong>First line = exact hook</strong>, spoken in <3s before any branding</li> | |
| <li><strong>Body script locked</strong> — paste the winning body verbatim</li> | |
| <li><strong>End with phone screen-record</strong> of Carby, ~4s</li> | |
| <li><strong>No music</strong> under the first 3 seconds</li> | |
| </ul> | |
| </div> | |
| <div class="examples"> | |
| <div class="block-label">Examples</div> | |
| <div class="ex"> | |
| <div class="ex-brand">@tech_andrea <span class="ex-tag">mental load</span></div> | |
| <div class="ex-desc">Nori-adjacent competitor hook — wife recounts husband's "what do you want for dinner" loop.</div> | |
| <div class="ex-hook">"My husband said I don't know what do you want for dinner for the 500th night"</div> | |
| <a class="ex-link" href="https://www.tiktok.com/@tech_andrea/video/7659600303905377550" target="_blank" rel="noopener"><span class="ex-link-label">Open example</span></a> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">Mise <span class="ex-tag">direct ask</span></div> | |
| <div class="ex-desc">Clean talking-head posing the nightly decision problem, soft product stroll after.</div> | |
| <div class="ex-hook">"Still deciding what's for dinner every night?"</div> | |
| <a class="ex-link" href="https://www.tiktok.com/@meals_by_mise/video/7664744314840354062" target="_blank" rel="noopener"><span class="ex-link-label">Open example</span></a> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">Potto / Haley <span class="ex-tag">discovery</span></div> | |
| <div class="ex-desc">TJ's-shelf discovery UGC — "been shopping here for years" authenticity cue.</div> | |
| <div class="ex-hook">"Been shopping at Trader Joe's for years and NOW I find this"</div> | |
| <a class="ex-link" href="https://www.tiktok.com/@haley.potto.app/video/7655113061635869965" target="_blank" rel="noopener"><span class="ex-link-label">Open example</span></a> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">Calm Kitchen System <span class="ex-tag">stereotype break</span></div> | |
| <div class="ex-desc">Face-cam that names the real bottleneck: deciding, not cooking.</div> | |
| <div class="ex-hook">"It's not COOKING that's exhausting, it's the DECIDING"</div> | |
| <a class="ex-link" href="https://www.tiktok.com/@thecalmkitchensystem/video/7643108926489136414" target="_blank" rel="noopener"><span class="ex-link-label">Open example</span></a> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">AG1 / Athletic Greens style <span class="ex-tag">confession</span></div> | |
| <div class="ex-desc">Classic selfie monologue — quiet bathroom/kitchen light, single continuous take.</div> | |
| <div class="ex-hook">"Okay real talk — I used to dread 5pm every single day…"</div> | |
| <span class="ex-link muted-link">Motion library · AG1 face-cam pattern</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">Green-screen reaction UGC <span class="ex-tag">meta pattern</span></div> | |
| <div class="ex-desc">Creator reacts over footage of their old chaotic dinner routine, then cuts to app.</div> | |
| <div class="ex-hook">"This used to be me every Sunday night… absolutely not anymore."</div> | |
| <span class="ex-link muted-link">Common Meta UGC pattern · commission reaction take</span> | |
| </div> | |
| </div> | |
| <div class="riff" data-riff-box="ugc"> | |
| <div class="riff-header"> | |
| <div class="block-label">Carby riff</div> | |
| <span class="riff-live-badge" data-live-badge>Live from angle slot</span> | |
| </div> | |
| <div class="riff-text" data-riff="ugc"><span class="empty-hint">Type an angle above — riff appears here.</span></div> | |
| <div class="riff-actions"> | |
| <button type="button" class="riff-copy" data-copy="ugc">Copy riff</button> | |
| </div> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- 2. Podcast --> | |
| <article class="col" id="fmt-podcast" data-format="podcast"> | |
| <div class="col-head"> | |
| <div class="col-num">Format 02</div> | |
| <h2 class="col-name">Podcast Clip</h2> | |
| <p class="col-def">Host + guest energy with big captions — real or staged sounding board credibility.</p> | |
| </div> | |
| <div class="col-body"> | |
| <div class="why"> | |
| <div class="block-label">Why it works</div> | |
| <ul> | |
| <li>Borrows podcast trust: "overheard insight" beats hard sell.</li> | |
| <li>Captions + waveform pattern is instantly scannable in mute feed.</li> | |
| </ul> | |
| </div> | |
| <div class="recipe"> | |
| <div class="block-label">Brief recipe</div> | |
| <ul> | |
| <li><strong>2-shot or mics-in-frame</strong>, 9:16 crop from 16:9 if needed</li> | |
| <li><strong>Cold open on the quote</strong> — no intro music sting in first 2s</li> | |
| <li><strong>Burn-in hook captions</strong> at 40%+ screen height, high contrast</li> | |
| <li><strong>Body = winning angle</strong> said as guest monologue (15–25s)</li> | |
| <li><strong>Lower-third CTA</strong> last 4s: Carby + "plan week in 10 min"</li> | |
| </ul> | |
| </div> | |
| <div class="examples"> | |
| <div class="block-label">Examples</div> | |
| <div class="ex"> | |
| <div class="ex-brand">Diary of a CEO / Huberman clip-ad <span class="ex-tag">DTC cutdown</span></div> | |
| <div class="ex-desc">Host+guest moment with massive caption callouts used as paid — insight first, brand later.</div> | |
| <div class="ex-hook">"The thing nobody tells you about decision fatigue is…"</div> | |
| <span class="ex-link muted-link">Pattern study · DOAC / Huberman DTC clip-ads</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">Artificial podcast set <span class="ex-tag">staged authenticity</span></div> | |
| <div class="ex-desc">Two-shot filmed purely for ads — mics, LED, casual clothes. Common in nutra/info.</div> | |
| <div class="ex-hook">"So walk me through what actually drains people at dinnertime."</div> | |
| <span class="ex-link muted-link">Many nutra/info brands · commission 2-shot set</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">Audiogram-style (Beehiiv, Notion) <span class="ex-tag">waveform</span></div> | |
| <div class="ex-desc">Waveform + big quote card, Descript/CapCut template energy — audio-first authority.</div> | |
| <div class="ex-hook">"You make ~200 food decisions a day. That's the dirty secret."</div> | |
| <span class="ex-link muted-link">Descript / CapCut audiogram templates</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">Spencer Pawliw cutdowns <span class="ex-tag">scaling pods</span></div> | |
| <div class="ex-desc">Manscript → 15–30s clip with hook burned in; provenance makes angle feel earned.</div> | |
| <div class="ex-hook">"We didn't scale creatives until we stopped changing the message."</div> | |
| <span class="ex-link muted-link">Scaling-podcast cutdown pattern</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">"I was on a podcast…" cold open <span class="ex-tag">framing</span></div> | |
| <div class="ex-desc">Solo creator rests on borrowed stage — social proof without needing the full episode.</div> | |
| <div class="ex-hook">"I was on a podcast and they asked me why meal apps all fail…"</div> | |
| <span class="ex-link muted-link">Cold-open framing · brief as UGC variant</span> | |
| </div> | |
| </div> | |
| <div class="riff" data-riff-box="podcast"> | |
| <div class="riff-header"> | |
| <div class="block-label">Carby riff</div> | |
| <span class="riff-live-badge" data-live-badge>Live from angle slot</span> | |
| </div> | |
| <div class="riff-text" data-riff="podcast"><span class="empty-hint">Type an angle above — riff appears here.</span></div> | |
| <div class="riff-actions"> | |
| <button type="button" class="riff-copy" data-copy="podcast">Copy riff</button> | |
| </div> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- 3. Authority --> | |
| <article class="col" id="fmt-authority" data-format="authority"> | |
| <div class="col-head"> | |
| <div class="col-num">Format 03</div> | |
| <h2 class="col-name">Authority / Expert</h2> | |
| <p class="col-def">Credibility container — RD, founder ops, whiteboard, lab-coat energy on the same body.</p> | |
| </div> | |
| <div class="col-body"> | |
| <div class="why"> | |
| <div class="block-label">Why it works</div> | |
| <ul> | |
| <li>Signals "this isn't just another influencer take" for anxious spenders.</li> | |
| <li>Costume + set is a cheap variable with outsized CR impact in tests.</li> | |
| </ul> | |
| </div> | |
| <div class="recipe"> | |
| <div class="block-label">Brief recipe</div> | |
| <ul> | |
| <li><strong>Credential in first 2s</strong> (lower-third or spoken): RD / chef / ops founder</li> | |
| <li><strong>Same winning body</strong> — delivered as expert diagnosis, not rant</li> | |
| <li><strong>One prop max</strong>: clipboard, whiteboard, or phone plan view</li> | |
| <li><strong>Wardrobe cues trust</strong>: clean blazer / coat / quiet kitchen, not kitchen chaos</li> | |
| <li><strong>Soft demo end</strong>: 4–6s of Carby week plan on screen</li> | |
| </ul> | |
| </div> | |
| <div class="spencer"> | |
| <strong>Test note:</strong> Lab-coat vs casual talking head has shown ~100% conversion lift in VTurb / CR community tests — costume is a lever, not decoration. | |
| </div> | |
| <div class="examples"> | |
| <div class="block-label">Examples</div> | |
| <div class="ex"> | |
| <div class="ex-brand">Lab-coat / clinician office <span class="ex-tag">costume lift</span></div> | |
| <div class="ex-desc">Talking head in coat or office — same script as casual, different perceived authority.</div> | |
| <div class="ex-hook">"As someone who studies decision fatigue… dinner is free-to-play chaos."</div> | |
| <span class="ex-link muted-link">VTurb episode proof comments · CR tests</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">Whiteboard / Loom-tutor <span class="ex-tag">Hormozi energy</span></div> | |
| <div class="ex-desc">Ali Abdaal / Hormozi whiteboard applied to product — draw the problem, reveal the tool.</div> | |
| <div class="ex-hook">"Three buckets of dinner stress. Most apps only solve one."</div> | |
| <span class="ex-link muted-link">Whiteboard explainer pattern</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">RD stitch / reaction <span class="ex-tag">registered dietitian</span></div> | |
| <div class="ex-desc">"Registered dietitian reacts to…" — stitch a chaotic dinner TikTok, prescribe the plan.</div> | |
| <div class="ex-hook">"RD here — this routine is why you're exhausted by 6pm."</div> | |
| <span class="ex-link muted-link">Stitch format · commission RD creator</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">Founder-with-cred open <span class="ex-tag">ops proof</span></div> | |
| <div class="ex-desc">"I ran meal ops for X" cold open — borrowed domain expertise without clinical tone.</div> | |
| <div class="ex-hook">"I ran meal ops for a 40-person team. The bottleneck was never recipes."</div> | |
| <span class="ex-link muted-link">Founder-cred open · film with Carby founder or proxy</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">Hungryroot hybrid <span class="ex-tag">clipboard demo</span></div> | |
| <div class="ex-desc">Clipboard / chart-in-hand UGC-commercial hybrid — expert prop + app cutaway.</div> | |
| <div class="ex-hook">"Here's the actual weekly decision load most people ignore…"</div> | |
| <a class="ex-link" href="https://motionapp.com/library/hungryroot" target="_blank" rel="noopener"><span class="ex-link-label">Open example</span></a> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">HelloFresh VO + b-roll <span class="ex-tag">expert VO</span></div> | |
| <div class="ex-desc">Calm expert voiceover over kitchen/grocery b-roll — authority without face if talent is scarce.</div> | |
| <div class="ex-hook">"The average household faces 200+ food decisions a day."</div> | |
| <a class="ex-link" href="https://motionapp.com/library/hellofresh" target="_blank" rel="noopener"><span class="ex-link-label">Open example</span></a> | |
| </div> | |
| </div> | |
| <div class="riff" data-riff-box="authority"> | |
| <div class="riff-header"> | |
| <div class="block-label">Carby riff</div> | |
| <span class="riff-live-badge" data-live-badge>Live from angle slot</span> | |
| </div> | |
| <div class="riff-text" data-riff="authority"><span class="empty-hint">Type an angle above — riff appears here.</span></div> | |
| <div class="riff-actions"> | |
| <button type="button" class="riff-copy" data-copy="authority">Copy riff</button> | |
| </div> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- 4. AI Animated --> | |
| <article class="col" id="fmt-ai" data-format="ai"> | |
| <div class="col-head"> | |
| <div class="col-num">Format 04</div> | |
| <h2 class="col-name">AI-Animated Explainer</h2> | |
| <p class="col-def">Faceless motion: characters, doodles, metaphors, UI walkthroughs — high novelty, scalable.</p> | |
| </div> | |
| <div class="col-body"> | |
| <div class="why"> | |
| <div class="block-label">Why it works</div> | |
| <ul> | |
| <li>Stops scroll via motion novelty without needing creator roster.</li> | |
| <li>Metaphor can externalize mental load better than a face can describe it.</li> | |
| </ul> | |
| </div> | |
| <div class="recipe"> | |
| <div class="block-label">Brief recipe</div> | |
| <ul> | |
| <li><strong>0–3s visual hook</strong> of chaos metaphor (no logo)</li> | |
| <li><strong>VO script = winning body</strong> locked — do not rewrite for "AI tone"</li> | |
| <li><strong>Kinetic type on hook line</strong> burned in for mute viewing</li> | |
| <li><strong>Product UI appear by second 12</strong> — real Carby screens, not mock guesses</li> | |
| <li><strong>End card:</strong> app icon + one-line promise + "free to start"</li> | |
| </ul> | |
| </div> | |
| <div class="spencer-callout" role="note"> | |
| <div class="callout-kicker">Spencer note · scale lever</div> | |
| AI-animated ads were the lever from <span class="callout-stat">$2k/day → $10–15k/day</span> spend for his ecom brand. Treat as a <strong>scale format</strong>, not a novelty side-quest — this is why the format sits on the ladder. | |
| </div> | |
| <div class="examples"> | |
| <div class="block-label">Examples</div> | |
| <div class="ex"> | |
| <div class="ex-brand">2D character kitchen chaos → calm <span class="ex-tag">faceless</span></div> | |
| <div class="ex-desc">CapCut / Runway / Kling character ads — messy kitchen spirals into a tidy week plan.</div> | |
| <div class="ex-hook">"POV: your brain at 5:47pm with an empty fridge and three hungry humans."</div> | |
| <span class="ex-link muted-link">CapCut · Runway · Kling character ads</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">Whiteboard-hand / doodle AI <span class="ex-tag">dripping pen</span></div> | |
| <div class="ex-desc">VideoScribe-descendant doodle with modern AI hand — draws problem, underlines solution.</div> | |
| <div class="ex-hook">"Deciding. Shopping. Prep. Repeat. Cross one out."</div> | |
| <span class="ex-link muted-link">Doodle ads / VideoScribe descendants + AI</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">3D product hero + kinetic type <span class="ex-tag">app hero</span></div> | |
| <div class="ex-desc">Phone/app spin with bold type slamming the angle — common for mobile apps.</div> | |
| <div class="ex-hook">"STOP DECIDING. START OPENING."</div> | |
| <span class="ex-link muted-link">Common app-promo 3D pattern</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">Mascot skit <span class="ex-tag">Duolingo energy</span></div> | |
| <div class="ex-desc">Meal-anxiety character panics at the fridge, Carby mascot (or calm chef) rescues them.</div> | |
| <div class="ex-hook">"The fridge again? Buddy. We've talked about this."</div> | |
| <span class="ex-link muted-link">Mascot skit · brief illustrator + motion pass</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">UI screen-record + AI avatar VO <span class="ex-tag">Synthesia-style</span></div> | |
| <div class="ex-desc">Avatar present briefly, then full product walkthrough of building a week plan.</div> | |
| <div class="ex-hook">"Watch me build a full week of dinners in under ten minutes."</div> | |
| <span class="ex-link muted-link">Synthesia-style + real Carby UI capture</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">Surreal overload metaphor <span class="ex-tag">brain tabs</span></div> | |
| <div class="ex-desc">Brain flooded with fridge magnets / browser tabs / sticky notes → app collapses to one list.</div> | |
| <div class="ex-hook">"Your brain is 47 open tabs. Dinner is tab 48."</div> | |
| <span class="ex-link muted-link">Surreal metaphor animation · high stop-rate</span> | |
| </div> | |
| </div> | |
| <div class="riff" data-riff-box="ai"> | |
| <div class="riff-header"> | |
| <div class="block-label">Carby riff</div> | |
| <span class="riff-live-badge" data-live-badge>Live from angle slot</span> | |
| </div> | |
| <div class="riff-text" data-riff="ai"><span class="empty-hint">Type an angle above — riff appears here.</span></div> | |
| <div class="riff-actions"> | |
| <button type="button" class="riff-copy" data-copy="ai">Copy riff</button> | |
| </div> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- 5. Static --> | |
| <article class="col" id="fmt-static" data-format="static"> | |
| <div class="col-head"> | |
| <div class="col-num">Format 05</div> | |
| <h2 class="col-name">Static</h2> | |
| <p class="col-def">Single-frame feed/story/ad — offer, contrast, meme, or big-type disruption.</p> | |
| </div> | |
| <div class="col-body"> | |
| <div class="why"> | |
| <div class="block-label">Why it works</div> | |
| <ul> | |
| <li>Cheapest iteration unit — ship 10 variants of the same angle same day.</li> | |
| <li>Holds on Meta as retarget + broad when video frequency is high.</li> | |
| </ul> | |
| </div> | |
| <div class="recipe"> | |
| <div class="block-label">Brief recipe</div> | |
| <ul> | |
| <li><strong>1 idea per frame</strong> — no paragraph walls; hook in ≤12 words</li> | |
| <li><strong>Winning angle is the headline</strong>; body stays off-frame or in primary text</li> | |
| <li><strong>Thumb-stop device:</strong> face crop, meme UI, or giant stat</li> | |
| <li><strong>Brand mark ≤10%</strong> of frame; CTA strip optional on stories</li> | |
| <li><strong>Export:</strong> 1:1 + 9:16 + 4:5 from same Figma source</li> | |
| </ul> | |
| </div> | |
| <div class="examples"> | |
| <div class="block-label">Examples</div> | |
| <div class="ex"> | |
| <div class="ex-brand">HelloFresh offer-first banner <span class="ex-tag">offer-first</span></div> | |
| <div class="ex-desc">Bold "10 free meals" energy — Motion notes Offer-First ≈ 21% of their actives.</div> | |
| <div class="ex-hook">"10 free meals. Zero dinner debates."</div> | |
| <span class="ex-link muted-link">Motion notes · Offer-First ≈ 21% of HF actives</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">Us-vs-them comparison table <span class="ex-tag">contrast</span></div> | |
| <div class="ex-desc">Takeout $X / time Y vs Carby $Y / time Z — same angle as cost of indecision.</div> | |
| <div class="ex-hook">"Takeout guilt tax vs. 10-minute week plan"</div> | |
| <span class="ex-link muted-link">Brief as clean 2-column table static</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">Big-stat disruption <span class="ex-tag">full-bleed type</span></div> | |
| <div class="ex-desc">Giant type on charcoal — "200 food decisions a day" as the entire visual.</div> | |
| <div class="ex-hook">"200 FOOD DECISIONS A DAY."</div> | |
| <span class="ex-link muted-link">Full-bleed type · high contrast lime on charcoal</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">Before/after phone screenshots <span class="ex-tag">UI proof</span></div> | |
| <div class="ex-desc">Messy Notes app groceries vs clean Carby week plan — same phone chrome.</div> | |
| <div class="ex-hook">"Left: spiral. Right: done by Sunday noon."</div> | |
| <span class="ex-link muted-link">Screenshot pair · crop real Carby UI</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">Meme / native fake chat <span class="ex-tag">iMessage</span></div> | |
| <div class="ex-desc">Fake iMessage or Notes thread about "what do you want for dinner" meltdown.</div> | |
| <div class="ex-hook">"him: idk what do you want · me: [opens Carby]"</div> | |
| <span class="ex-link muted-link">Native meme static · high comment rate</span> | |
| </div> | |
| <div class="ex"> | |
| <div class="ex-brand">Quote card UGC still <span class="ex-tag">face + quote</span></div> | |
| <div class="ex-desc">Creator face still with the winning line as big quote — freezes the best UGC frame.</div> | |
| <div class="ex-hook">"my husband said… for the 500th night"</div> | |
| <span class="ex-link muted-link">Pull still from winning UGC · add type</span> | |
| </div> | |
| </div> | |
| <div class="riff" data-riff-box="static"> | |
| <div class="riff-header"> | |
| <div class="block-label">Carby riff</div> | |
| <span class="riff-live-badge" data-live-badge>Live from angle slot</span> | |
| </div> | |
| <div class="riff-text" data-riff="static"><span class="empty-hint">Type an angle above — riff appears here.</span></div> | |
| <div class="riff-actions"> | |
| <button type="button" class="riff-copy" data-copy="static">Copy riff</button> | |
| </div> | |
| </div> | |
| </div> | |
| </article> | |
| </div> | |
| </main> | |
| <!-- Format × Hook matrix --> | |
| <section class="matrix-wrap"> | |
| <div class="matrix-card" id="fmt-matrix"> | |
| <div class="matrix-head"> | |
| <h2>Format × Hook matrix</h2> | |
| <p>Same three Carby angles × five containers — one-line execution notes so the team sees the cross-product fast.</p> | |
| </div> | |
| <div class="matrix-scroll"> | |
| <table class="matrix"> | |
| <thead> | |
| <tr> | |
| <th scope="col">Angle ↓ / Format →</th> | |
| <th scope="col" class="fmt-ugc">UGC Talking Head</th> | |
| <th scope="col" class="fmt-podcast">Podcast Clip</th> | |
| <th scope="col" class="fmt-authority">Authority / Expert</th> | |
| <th scope="col" class="fmt-ai">AI-Animated</th> | |
| <th scope="col" class="fmt-static">Static</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <th scope="row"> | |
| Deciding, not cooking | |
| <span>“It's not COOKING that's exhausting, it's the DECIDING”</span> | |
| </th> | |
| <td><strong>Face-cam confession.</strong> Hook cold in <3s; body locked; end on Carby week-plan screen-record.</td> | |
| <td><strong>Guest monologue cold open.</strong> Giant captions on “DECIDING”; host only nods; CTA lower-third last 4s.</td> | |
| <td><strong>RD / ops diagnosis.</strong> Credential lower-third → same line as clinical truth → one whiteboard prop.</td> | |
| <td><strong>Chaos → calm metaphor.</strong> Kinetic type on DECIDING; VO = locked body; real UI by ~12s.</td> | |
| <td><strong>Full-bleed type.</strong> “DECIDING.” on charcoal + lime; primary text carries the full angle.</td> | |
| </tr> | |
| <tr> | |
| <th scope="row"> | |
| Husband mental-load | |
| <span>“My husband said I don't know… for the 500th night”</span> | |
| </th> | |
| <td><strong>Wife-cam recount.</strong> Natural light, no music first 3s; punch “500th night”; demo Carby as the exit.</td> | |
| <td><strong>Story-time clip.</strong> Guest tells the 500th-night bit; burn-in quote; “mental load” caption sting.</td> | |
| <td><strong>RD reacts / stitch.</strong> Stitch a dinner-fight clip; prescribe planning the week once, not nightly arbitration.</td> | |
| <td><strong>Mascot / 2D skit.</strong> Two characters loop “idk / you pick”; Carby collapses the loop into one plan.</td> | |
| <td><strong>iMessage meme.</strong> Fake chat: “idk what do you want” → green bubble opens Carby. High comment bait.</td> | |
| </tr> | |
| <tr> | |
| <th scope="row"> | |
| 30s plan proof | |
| <span>“Watch me build a full week of dinners in under ten minutes.”</span> | |
| </th> | |
| <td><strong>Speed-run UGC.</strong> Creator shares screen mid-take; talk while tapping; timestamp burnt in.</td> | |
| <td><strong>Show-notes energy.</strong> “We timed it on the show…” + waveform; cut to sped-up plan build.</td> | |
| <td><strong>Clipboard / loom.</strong> Expert walks one household through Sunday 10-min plan; prop = finished week view.</td> | |
| <td><strong>UI + avatar VO.</strong> Synthesia-style open → pure Carby screen capture at 1.25× with hook captions.</td> | |
| <td><strong>Before/after UI.</strong> Messy Notes app vs clean Carby week; badge “~10 min”. Export 1:1 + 4:5 + 9:16.</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="stack"> | |
| <div class="stack-card"> | |
| <h2>Quick stack suggestion for Carby this week</h2> | |
| <div class="stack-grid"> | |
| <div class="stack-item"> | |
| <h3>Must ship</h3> | |
| <ul> | |
| <li><strong>UGC talking head</strong> — 3 creators × same body</li> | |
| <li><strong>1 static meme</strong> (iMessage / Notes dinner fight)</li> | |
| <li><strong>1 AI-animated metaphor</strong> (brain tabs → week plan)</li> | |
| </ul> | |
| </div> | |
| <div class="stack-item"> | |
| <h3>Nice</h3> | |
| <ul> | |
| <li><strong>1 podcast-clip style</strong> — staged 2-shot or audiogram</li> | |
| <li><strong>1 RD-authority reaction</strong> — stitch or lab-coat diagnosis</li> | |
| </ul> | |
| </div> | |
| <div class="stack-item"> | |
| <h3>Measure</h3> | |
| <ul> | |
| <li><strong>Hook rate first</strong> (3s view / impression)</li> | |
| <li><strong>25% video hold</strong> within 48h</li> | |
| <li>Paid conversion later — don't kill on Day-1 ROAS</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <p class="footer-note"> | |
| <strong>Draft board</strong> — examples are public references for pattern study, not claims we ran them. | |
| Judge our own ads on Stripe truth only. Angle slot persists in localStorage on this device. | |
| </p> | |
| </footer> | |
| <script> | |
| (function () { | |
| 'use strict'; | |
| var STORAGE_KEY = 'carby-format-ladder-angle'; | |
| var DEFAULT_ANGLE = "It's not COOKING that's exhausting, it's the DECIDING"; | |
| var input = document.getElementById('angleInput'); | |
| var wrap = document.getElementById('angleWrap'); | |
| var clearBtn = document.getElementById('angleClear'); | |
| var updateTimer = null; | |
| function normalizeAngle(raw) { | |
| var a = (raw || '').trim(); | |
| if (!a) return ''; | |
| if ((a.charAt(0) === '"' && a.charAt(a.length - 1) === '"') || | |
| (a.charAt(0) === "'" && a.charAt(a.length - 1) === "'")) { | |
| a = a.slice(1, -1).trim(); | |
| } | |
| return a; | |
| } | |
| function ensurePeriod(s) { | |
| if (!s) return s; | |
| var last = s.charAt(s.length - 1); | |
| if ('.!?…"\''.indexOf(last) !== -1) return s; | |
| return s + '.'; | |
| } | |
| function shortenForStatic(angle) { | |
| var a = angle.replace(/\s+/g, ' ').trim(); | |
| if (a.length <= 64) return a.toUpperCase(); | |
| var parts = a.split(/[,—.–:;]/); | |
| if (parts[0] && parts[0].length >= 12 && parts[0].length <= 64) { | |
| return parts[0].trim().toUpperCase(); | |
| } | |
| return a.slice(0, 60).trim().toUpperCase() + '…'; | |
| } | |
| function firstClause(angle) { | |
| var parts = angle.split(/[,—.–:;]/); | |
| if (parts[0] && parts[0].trim().length >= 8) return parts[0].trim(); | |
| return angle; | |
| } | |
| function buildRiffs(angle) { | |
| var a = angle; | |
| var aPeriod = ensurePeriod(a); | |
| var quoted = '“' + a + '”'; | |
| var clause = firstClause(a); | |
| var staticHead = shortenForStatic(a); | |
| return { | |
| ugc: | |
| 'FACE-CAM BRIEF (9:16, natural light, no music 0–3s)\n\n' + | |
| 'HOOK — speak cold, word-for-word, under 3s:\n' + quoted + '\n\n' + | |
| 'Then hold the winning body verbatim — do not ad-lib a new angle. Casual confession energy, one continuous take.\n\n' + | |
| 'OUTRO (~4s): phone screen-record of Carby building a week plan. No logo until the demo starts. ' + | |
| 'Caption optional: “this is the part that replaces the deciding.”', | |
| podcast: | |
| 'PODCAST-CLIP BRIEF (2-shot or mics-in-frame · crop 9:16)\n\n' + | |
| 'COLD OPEN — zero intro sting. Guest mid-thought, captions 40%+ height:\n' + | |
| 'GUEST: ' + quoted + '\n' + | |
| 'HOST (small nod only): “Say more on that.”\n\n' + | |
| 'GUEST runs the locked body as a monologue (15–25s) — overheard-insight tone, not a pitch.\n\n' + | |
| 'LAST 4s lower-third: Carby · plan the week in 10 minutes. Soft bed music only after the hook lands.', | |
| authority: | |
| 'AUTHORITY BRIEF (credential first · calm diagnosis, not rant)\n\n' + | |
| '0–2s lower-third: “Registered Dietitian” or “Former meal-ops lead”.\n\n' + | |
| 'OPEN as expert diagnosis:\n' + quoted + '\n\n' + | |
| 'Deliver the winning body as clinical/ops clarity — same words, slower register. One prop max (clipboard, whiteboard, or phone plan).\n\n' + | |
| 'CLOSE 5s on Carby week-plan UI. Wardrobe = trust (blazer/coat/quiet kitchen), never chaos B-roll under the claim.', | |
| ai: | |
| 'AI-ANIMATED BRIEF (faceless · novelty in the container only)\n\n' + | |
| '0–3s VISUAL HOOK: surreal overload (47 brain tabs / fridge magnets / sticky-note storm). No logo.\n' + | |
| 'Kinetic type punches the line:\n' + quoted + '\n\n' + | |
| 'VO = locked winning body — do not “AI-rewrite” tone or message. Metaphor shows the mental load; VO keeps the proven angle.\n\n' + | |
| 'By ~12s: real Carby UI collapses chaos into one week plan. End card: icon + “Stop deciding. Start dinner.” + free-to-start.', | |
| static: | |
| 'STATIC BRIEF (one idea per frame · export 1:1 + 4:5 + 9:16)\n\n' + | |
| 'HEADLINE (full-bleed / ≤12 words):\n' + staticHead + '\n\n' + | |
| 'PRIMARY TEXT (ad account):\n' + aPeriod + ' Carby turns that into one week plan in ~10 minutes.\n\n' + | |
| 'LAYOUT — pick one container for this angle:\n' + | |
| '• (A) Giant type on charcoal, lime accent on key word from “' + clause + '”\n' + | |
| '• (B) iMessage / Notes meme that stages the fight behind the angle\n' + | |
| '• (C) Before/after: messy Notes vs clean Carby week UI\n\n' + | |
| 'Brand mark ≤10% of frame. No paragraph walls on the creative.' | |
| }; | |
| } | |
| function setRiffChrome(isUserAngle, flash) { | |
| document.querySelectorAll('[data-riff-box]').forEach(function (box) { | |
| box.classList.toggle('is-live', !!isUserAngle); | |
| box.classList.toggle('is-preview', !isUserAngle); | |
| var badge = box.querySelector('[data-live-badge]'); | |
| if (badge) { | |
| badge.textContent = isUserAngle ? 'Live from angle slot' : 'Preview · default angle'; | |
| } | |
| if (flash) { | |
| box.classList.add('is-updating'); | |
| (function (el) { | |
| setTimeout(function () { el.classList.remove('is-updating'); }, 280); | |
| })(box); | |
| } | |
| }); | |
| } | |
| function renderRiffs(angle, isUserAngle, flash) { | |
| var nodes = document.querySelectorAll('[data-riff]'); | |
| var riffs = buildRiffs(angle || DEFAULT_ANGLE); | |
| nodes.forEach(function (el) { | |
| var key = el.getAttribute('data-riff'); | |
| el.textContent = riffs[key] || ''; | |
| }); | |
| setRiffChrome(!!isUserAngle, !!flash); | |
| } | |
| function setHasValue(has) { | |
| if (has) wrap.classList.add('has-value'); | |
| else wrap.classList.remove('has-value'); | |
| } | |
| function persist(angle) { | |
| try { | |
| if (angle) localStorage.setItem(STORAGE_KEY, angle); | |
| else localStorage.removeItem(STORAGE_KEY); | |
| } catch (e) { /* private mode */ } | |
| } | |
| function onAngleChange() { | |
| var angle = normalizeAngle(input.value); | |
| var has = !!input.value.trim(); | |
| setHasValue(has); | |
| persist(angle); | |
| renderRiffs(angle || DEFAULT_ANGLE, has, true); | |
| } | |
| // Init from storage | |
| var saved = ''; | |
| try { | |
| saved = localStorage.getItem(STORAGE_KEY) || ''; | |
| } catch (e) { | |
| saved = ''; | |
| } | |
| if (saved) { | |
| input.value = saved; | |
| setHasValue(true); | |
| renderRiffs(normalizeAngle(saved), true, false); | |
| } else { | |
| setHasValue(false); | |
| renderRiffs(DEFAULT_ANGLE, false, false); | |
| } | |
| input.addEventListener('input', function () { | |
| if (updateTimer) clearTimeout(updateTimer); | |
| // Instant enough for UX; micro-debounce only to batch very fast keystrokes | |
| updateTimer = setTimeout(onAngleChange, 40); | |
| }); | |
| input.addEventListener('change', onAngleChange); | |
| clearBtn.addEventListener('click', function () { | |
| input.value = ''; | |
| persist(''); | |
| setHasValue(false); | |
| renderRiffs(DEFAULT_ANGLE, false, true); | |
| input.focus(); | |
| }); | |
| document.querySelectorAll('.riff-copy').forEach(function (btn) { | |
| btn.addEventListener('click', function () { | |
| var key = btn.getAttribute('data-copy'); | |
| var el = document.querySelector('[data-riff="' + key + '"]'); | |
| if (!el) return; | |
| var angle = normalizeAngle(input.value) || DEFAULT_ANGLE; | |
| var text = (el.textContent || '').trim(); | |
| if (!text || text.indexOf('Type an angle') !== -1) { | |
| text = buildRiffs(angle)[key] || ''; | |
| } | |
| function ok() { | |
| var prev = btn.textContent; | |
| btn.textContent = 'Copied'; | |
| btn.classList.add('copied'); | |
| setTimeout(function () { | |
| btn.textContent = prev; | |
| btn.classList.remove('copied'); | |
| }, 1400); | |
| } | |
| if (navigator.clipboard && navigator.clipboard.writeText) { | |
| navigator.clipboard.writeText(text).then(ok).catch(function () { | |
| fallbackCopy(text, ok); | |
| }); | |
| } else { | |
| fallbackCopy(text, ok); | |
| } | |
| }); | |
| }); | |
| function fallbackCopy(text, cb) { | |
| try { | |
| var ta = document.createElement('textarea'); | |
| ta.value = text; | |
| ta.setAttribute('readonly', ''); | |
| ta.style.position = 'fixed'; | |
| ta.style.left = '-9999px'; | |
| document.body.appendChild(ta); | |
| ta.select(); | |
| var worked = document.execCommand('copy'); | |
| document.body.removeChild(ta); | |
| if (worked && cb) cb(); | |
| } catch (e) { /* silent */ } | |
| } | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment