🎨 Premium dark house style

The house style isn’t a list of pretty colors—it’s a system with a defined role for each tone. Night background (#0D1321), slightly lighter panels, subtle borders, warm cream text, muted for hierarchy, and amber as the sole dominant accent. The cyan (#2EC4B6) is reserved exclusively for code and technical values.

:root {
  --bg:      #0D1321;   /* azul-noite – NUNCA preto puro */
  --bg2:     #1D2D44;   /* painéis e cards */
  --bg3:     #3E5C76;   /* bordas e divisores */
  --fg:      #F0EBD8;   /* texto creme quente */
  --muted:   #748CAB;   /* secundário / hierarquia */
  --accent:  #FFC300;   /* âmbar — destaque ÚNICO */
  --accent2: #FCA311;   /* âmbar quente p/ gradientes */
  --code:    #2EC4B6;   /* verde-água — só código/valores */
}

The system uses Sora for headlines (weight 700–800, video scale 72–172px at 16:9), Inter for body text and interface (28–42px), and JetBrains Mono for code, URLs, and technical labels. The three fonts have .woff2 local — the generator never makes requests to a CDN at runtime.

@font-face{font-family:'Sora';font-style:normal;font-weight:700;
  font-display:block;src:url('./fonts/Sora-700.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;
  font-display:block;src:url('./fonts/Sora-800.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;
  font-display:block;src:url('./fonts/Inter-400.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;
  font-display:block;src:url('./fonts/JetBrainsMono-400.woff2') format('woff2');}
/* subset: latin — cobre PT-BR: á à â ã é ê í ó ô õ ú ç */

Each scene has a persistent background layer marked with data-layout-ignore. It is never repositioned by the layout engine. It contains four elements: a breathing amber radial glow, giant drifting ghost text, a hairline grid, and grain (SVG noise). Together, they create depth without distraction.

<!-- FUNDO PERSISTENTE — data-layout-ignore -->
<div data-layout-ignore class="bg-layer">
  <!-- glow radial âmbar respirando -->
  <div class="glow-amber"></div>
  <!-- ghost text gigante driftando -->
  <div class="ghost-text">DARK</div>
  <!-- grid hairline -->
  <svg class="grid-lines" ...></svg>
  <!-- grão (SVG feTurbulence) -->
  <canvas class="grain"></canvas>
</div>

.bg-layer {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
}
.glow-amber {
  position: absolute; top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60%; height: 40%;
  background: radial-gradient(ellipse, #FFC300 0%, transparent 70%);
  opacity: 0.06;
  animation: breathe 4s ease-in-out infinite;
}
.ghost-text {
  position: absolute; font-family: 'Sora', sans-serif;
  font-size: 172px; font-weight: 800;
  color: #F0EBD8; opacity: 0.035;
  animation: drift 8s ease-in-out infinite;
}
@keyframes breathe {
  0%,100% { opacity:.04; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity:.08; transform: translate(-50%,-50%) scale(1.08); }
}
@keyframes drift {
  0%   { transform: translateX(0px) translateY(0px); }
  33%  { transform: translateX(12px) translateY(-6px); }
  66%  { transform: translateX(-8px) translateY(4px); }
  100% { transform: translateX(0px) translateY(0px); }
}

The script fetch-fonts.mjs uses Chrome 131's User-Agent to simulate a browser, makes a request to the Google Fonts API, filters only the latin subset (unicode-range U+0000-00FF covers all Brazilian Portuguese characters: á à â ã é ê í ó ô õ ú ç), downloads the .woff2 and generates assets/fonts/fonts.css.

The biggest mistake when creating videos with HTML is using web scale. At 1920×1080 with 1:1 zoom, 16px text disappears. The house style defines minimum 64px headline, body text 28–42px, and decorative text at 12–25% opacity to create layers without clutter. 8–10 elements per scene is the limit — more than that creates visual clutter after compression.

Scene9 (the last scene in every HyperFrames video) is the INEMA.CLUB CTA: "CONTINUES IN" text in muted, INEMA in cream (--fg), .CLUB in amber with a glow drop shadow, and 🌐 inema.club in JetBrains Mono. It's the channel's signature — every video ends the same way.

function scene9() {
  return `
    <div class="cta-wrap">
      <div class="cta-pre">CONTINUA EM</div>
      <div class="cta-brand">
        <span class="cta-inema">INEMA</span>
        <span class="cta-club">.CLUB</span>
      </div>
      <div class="cta-url">🌐 inema.club</div>
    </div>`;
}

/* CSS correspondente */
.cta-pre  { font-family:'Inter'; color:var(--muted); letter-spacing:.2em; }
.cta-brand{ font-family:'Sora'; font-weight:800; font-size:clamp(72px,8vw,120px); }
.cta-inema{ color:var(--fg); }                /* INEMA — creme */
.cta-club { color:var(--accent);              /* .CLUB — âmbar */
             filter:drop-shadow(0 0 16px #FFC300aa); }
.cta-url  { font-family:'JetBrains Mono'; color:var(--code); } /* 🌐 inema.club */