🎨 Premium dark house style

The default 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, a subtle border, warm cream text, muted for hierarchy, and amber as the only dominant accent. 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 in 16:9), Inter for body text and UI (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: breathing amber radial glow, giant drifting ghost text, 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: á à â ã é ê í ó ô õ ú ç), download 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 elements at 12–25% opacity to create layers without clutter. 8–10 elements per scene is the limit—more than that creates visual chaos in 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 drop-shadow glow, 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 */