primocode 10.17.1 → 10.19.0

package/kits/terminal/assets/fontes/OFL-vt323.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The VT323 Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/kits/terminal/elementos/ArteAscii.tsx

@@ -0,0 +1,61 @@
+// ArteAscii: o nome do produto em LETRAS DE BLOCO (fonte 5×7 desenhada no kit), revelado linha a linha
+// pela cabeça de escrita do tubo: cada linha de blocos acende quente e esfria pro fósforo em 6 quadros.
+// O herói do vídeo: largura até 760 px. Blocos desenhados, não glifos (nada depende da fonte).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {BLOOM, COR, VIDRO, lerp, ruido, seg} from './base';
+
+// fonte 5×7: cada letra é 7 linhas de 5 bits
+const F: Record<string, string[]> = {
+  A: ['01110', '10001', '10001', '11111', '10001', '10001', '10001'], B: ['11110', '10001', '10001', '11110', '10001', '10001', '11110'],
+  C: ['01111', '10000', '10000', '10000', '10000', '10000', '01111'], D: ['11110', '10001', '10001', '10001', '10001', '10001', '11110'],
+  E: ['11111', '10000', '10000', '11110', '10000', '10000', '11111'], F: ['11111', '10000', '10000', '11110', '10000', '10000', '10000'],
+  G: ['01111', '10000', '10000', '10111', '10001', '10001', '01111'], H: ['10001', '10001', '10001', '11111', '10001', '10001', '10001'],
+  I: ['11111', '00100', '00100', '00100', '00100', '00100', '11111'], J: ['00111', '00010', '00010', '00010', '00010', '10010', '01100'],
+  K: ['10001', '10010', '10100', '11000', '10100', '10010', '10001'], L: ['10000', '10000', '10000', '10000', '10000', '10000', '11111'],
+  M: ['10001', '11011', '10101', '10101', '10001', '10001', '10001'], N: ['10001', '11001', '10101', '10011', '10001', '10001', '10001'],
+  O: ['01110', '10001', '10001', '10001', '10001', '10001', '01110'], P: ['11110', '10001', '10001', '11110', '10000', '10000', '10000'],
+  R: ['11110', '10001', '10001', '11110', '10100', '10010', '10001'], S: ['01111', '10000', '10000', '01110', '00001', '00001', '11110'],
+  T: ['11111', '00100', '00100', '00100', '00100', '00100', '00100'], U: ['10001', '10001', '10001', '10001', '10001', '10001', '01110'],
+  V: ['10001', '10001', '10001', '10001', '10001', '01010', '00100'], X: ['10001', '10001', '01010', '00100', '01010', '10001', '10001'],
+  Y: ['10001', '10001', '01010', '00100', '00100', '00100', '00100'], Z: ['11111', '00001', '00010', '00100', '01000', '10000', '11111'],
+  0: ['01110', '10011', '10101', '10101', '10101', '11001', '01110'], 1: ['00100', '01100', '00100', '00100', '00100', '00100', '01110'],
+  2: ['01110', '10001', '00001', '00110', '01000', '10000', '11111'], 3: ['11110', '00001', '00001', '01110', '00001', '00001', '11110'],
+  4: ['00010', '00110', '01010', '10010', '11111', '00010', '00010'], 5: ['11111', '10000', '11110', '00001', '00001', '10001', '01110'],
+  6: ['01110', '10000', '10000', '11110', '10001', '10001', '01110'], 7: ['11111', '00001', '00010', '00100', '01000', '01000', '01000'],
+  8: ['01110', '10001', '10001', '01110', '10001', '10001', '01110'], 9: ['01110', '10001', '10001', '01111', '00001', '00001', '01110'],
+  '.': ['00000', '00000', '00000', '00000', '00000', '01100', '01100'], ' ': ['00000', '00000', '00000', '00000', '00000', '00000', '00000'],
+};
+
+export type ArteAsciiProps = {
+  texto: string;
+  /** topo do bloco, px no vidro */
+  y?: number;
+  /** largura máxima, px */
+  largura?: number;
+  inicio?: number;
+  /** quadros por linha de blocos (7 linhas) */
+  porLinha?: number;
+};
+
+export const ArteAscii: React.FC<ArteAsciiProps> = ({texto, y = 300, largura = 760, inicio = 0, porLinha = 2}) => {
+  const f = useCurrentFrame() - inicio;
+  if (f < 0) return null;
+  const letras = texto.toUpperCase().split('').map((c) => F[c] ?? F[' ']);
+  const colunas = letras.length * 6 - 1;
+  const cel = Math.floor(largura / colunas), gap = Math.max(2, Math.round(cel * 0.12));
+  const L = colunas * cel, x0 = (VIDRO.l - L) / 2;
+  const blocos: React.ReactNode[] = [];
+  letras.forEach((g, li) => g.forEach((row, r) => row.split('').forEach((b, c) => {
+    if (b !== '1') return;
+    const em = r * porLinha + ruido(li * 31 + c) * 0.8;
+    if (f < em) return;
+    const calor = 1 - seg(f, em, em + 6);
+    const glitch = calor > 0.6 ? (ruido(f * 3 + r) - 0.5) * cel * 0.6 : 0;
+    blocos.push(<div key={`${li}-${r}-${c}`} style={{position: 'absolute', left: x0 + (li * 6 + c) * cel + glitch, top: y + r * cel, width: cel - gap, height: cel - gap,
+      background: calor > 0.02 ? COR.quente : COR.fosforo, opacity: lerp(1, 0.94, 1 - calor), boxShadow: BLOOM(COR.fosforo, 0.5 + calor)}} />);
+  })));
+  // a cabeça de escrita
+  const cabeca = f < 7 * porLinha + 2 ? <div style={{position: 'absolute', left: x0 - 30, width: L + 60, top: y + Math.min(7, f / porLinha) * cel - 2, height: 4, background: COR.quente, boxShadow: BLOOM(COR.fosforo, 1.4)}} /> : null;
+  return <>{blocos}{cabeca}</>;
+};

package/kits/terminal/elementos/BarraProgresso.tsx

@@ -0,0 +1,42 @@
+// BarraProgresso: a saída do comando que vira herói. Uma linha por tarefa: rótulo, a barra de 14 blocos
+// entre colchetes que enche aos SALTOS (como I/O de verdade), e a porcentagem; no fim, [OK] quente.
+// Blocos desenhados (não dependem de glifo): 38 × 58 px, vão de 6 px, bloom do fósforo.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {BLOOM, COR, FONTE, GRADE, ruido, seg} from './base';
+
+export type BarraProgressoProps = {
+  itens: {rotulo: string; duracao: number}[];
+  y?: number;
+  inicio?: number;
+  /** quadros entre o início de uma barra e da próxima */
+  intervalo?: number;
+  celulas?: number;
+};
+
+export const BarraProgresso: React.FC<BarraProgressoProps> = ({itens, y = 200, inicio = 0, intervalo = 6, celulas = 14}) => {
+  const f = useCurrentFrame() - inicio;
+  const W = 38, G = 6;
+  return <>{itens.map((it, i) => {
+    const t0 = i * intervalo;
+    if (f < t0) return null;
+    const lin = seg(f, t0, t0 + it.duracao);
+    // saltos: avança em degraus irregulares
+    const deg = Math.floor(lin * 9);
+    const p = lin >= 1 ? 1 : Math.min(0.97, (deg + ruido(deg + i * 13) * 0.9) / 9);
+    const cheios = Math.round(p * celulas);
+    const top = y + i * 230;
+    return <div key={i} style={{position: 'absolute', left: GRADE.margem, top, width: 840 - GRADE.margem * 2}}>
+      <div style={{fontFamily: FONTE, fontSize: 62, color: COR.fosforo, textShadow: BLOOM(COR.fosforo, 0.8), whiteSpace: 'pre'}}>
+        {it.rotulo}<span style={{float: 'right', marginLeft: 40, color: lin >= 1 ? COR.quente : COR.fosforo}}>{lin >= 1 ? '[ OK ]' : `${String(Math.round(p * 100)).padStart(3, ' ')}%`}</span>
+      </div>
+      <div style={{display: 'flex', alignItems: 'center', marginTop: 10, fontFamily: FONTE, fontSize: 80, color: COR.apagado}}>
+        <span>[</span>
+        <div style={{display: 'flex', gap: G, margin: '0 8px'}}>
+          {Array.from({length: celulas}, (_, k) => <div key={k} style={{width: W, height: 58, background: k < cheios ? (lin >= 1 ? COR.quente : COR.fosforo) : 'rgba(255,178,63,.08)', boxShadow: k < cheios ? BLOOM(COR.fosforo, 0.5) : undefined}} />)}
+        </div>
+        <span>]</span>
+      </div>
+    </div>;
+  })}</>;
+};

package/kits/terminal/elementos/BarraStatus.tsx

@@ -0,0 +1,18 @@
+// BarraStatus: a linha de status em vídeo inverso no pé do vidro (como os programas de DOS/BBS):
+// segmentos separados por "|" e um relógio que conta o tempo do vídeo. Fica em todas as cenas.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {BLOOM, COR, FONTE, VIDRO} from './base';
+
+export type BarraStatusProps = {segmentos: string[]; desde?: number};
+
+export const BarraStatus: React.FC<BarraStatusProps> = ({segmentos, desde = 10}) => {
+  const f = useCurrentFrame();
+  if (f < desde) return null;
+  const s = Math.floor(f / 30), q = f % 30;
+  const relogio = `00:0${s}:${String(q).padStart(2, '0')}`;
+  return <div style={{position: 'absolute', left: 30, right: 30, top: VIDRO.a - 104, height: 54, background: COR.fosforo, color: COR.vidro, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+    padding: '0 22px', fontFamily: FONTE, fontSize: 40, boxShadow: BLOOM(COR.fosforo, 0.5), whiteSpace: 'pre'}}>
+    <span>{segmentos.join(' | ')}</span><span>{relogio}</span>
+  </div>;
+};

package/kits/terminal/elementos/BootBios.tsx

@@ -0,0 +1,41 @@
+// BootBios: a partida da máquina. Cabeçalho do BIOS, o CONTADOR DE MEMÓRIA gigante (140 px, herói)
+// que sobe em saltos irregulares, e as checagens que imprimem uma a uma com pontos de guia e [OK]
+// em vídeo inverso. Tudo dentro do vidro (coordenadas do vidro: 840 × 1110).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {BLOOM, COR, FONTE, GRADE, ruido, seg} from './base';
+
+export type BootBiosProps = {
+  cabecalho: string[];
+  memoria: {rotulo: string; ate: number; unidade: string};
+  checagens: string[];
+  inicio?: number;
+  /** quadros entre linhas impressas */
+  intervalo?: number;
+};
+
+export const BootBios: React.FC<BootBiosProps> = ({cabecalho, memoria, checagens, inicio = 0, intervalo = 5}) => {
+  const f = useCurrentFrame() - inicio;
+  const M = GRADE.margem, T = 44;
+  const tMem = seg(f, 6, 26);
+  // saltos irregulares (como o teste de RAM de verdade)
+  const passos = Math.floor(tMem * 12), v = tMem >= 1 ? memoria.ate : Math.round(memoria.ate * Math.min(1, (passos + ruido(passos) * 0.8) / 12));
+  const linha = (t: string, i: number, y: number, cor = COR.fosforo) => f >= i ? <div key={t + y} style={{position: 'absolute', left: M, top: y, fontFamily: FONTE, fontSize: T, color: cor, textShadow: BLOOM(cor, 0.8), whiteSpace: 'pre'}}>{t}</div> : null;
+  return <>
+    {cabecalho.map((c, i) => linha(c, i * 2, 70 + i * 52, i === 0 ? COR.quente : COR.fosforo))}
+    {f >= 5 && <div style={{position: 'absolute', left: M, top: 250, fontFamily: FONTE, fontSize: T, color: COR.apagado, textShadow: BLOOM(COR.apagado, 0.5)}}>{memoria.rotulo}</div>}
+    {f >= 6 && <div style={{position: 'absolute', left: M - 6, top: 290, fontFamily: FONTE, fontSize: 210, lineHeight: 1, color: COR.quente, textShadow: BLOOM(COR.fosforo, 1.6), whiteSpace: 'pre'}}>
+      {String(v).padStart(6, '0')}<span style={{fontSize: 96, color: COR.fosforo}}>{memoria.unidade}</span>
+      {tMem >= 1 && <span style={{fontSize: 70, background: COR.fosforo, color: COR.vidro, padding: '0 10px', marginLeft: 20, verticalAlign: 'middle', textShadow: 'none', boxShadow: BLOOM(COR.fosforo, 0.6)}}>OK</span>}
+    </div>}
+    {checagens.map((c, i) => {
+      const em = 30 + i * intervalo;
+      if (f < em) return null;
+      const pontos = Math.min(14, Math.floor((f - em) * 4));
+      const ok = f >= em + 4;
+      return <div key={i} style={{position: 'absolute', left: M, top: 560 + i * GRADE.linha, fontFamily: FONTE, fontSize: T, color: COR.fosforo, textShadow: BLOOM(COR.fosforo, 0.8), whiteSpace: 'pre'}}>
+        {c} {'.'.repeat(pontos)}{ok && <span style={{color: COR.quente}}> OK</span>}
+      </div>;
+    })}
+  </>;
+};

package/kits/terminal/elementos/Camera.tsx

@@ -0,0 +1,23 @@
+// Camera: o monitor é um objeto físico. A câmera deriva devagar em 3D (giro Y ±2,5°, X ±1,2°) e
+// empurra por chaves [[quadro, zoom, deslocY px]] (curva suave). Os empurrões fortes (1,0 → 1,18)
+// entram no herói: o vidro enche a tela.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {e3, lerp, seg} from './base';
+
+export type CameraProps = {chaves?: [number, number, number][]; children: React.ReactNode};
+
+const valor = (f: number, ks: [number, number, number][], i: 1 | 2) => {
+  if (f <= ks[0][0]) return ks[0][i];
+  for (let k = 1; k < ks.length; k++) if (f <= ks[k][0]) return lerp(ks[k - 1][i], ks[k][i], e3(seg(f, ks[k - 1][0], ks[k][0])));
+  return ks[ks.length - 1][i];
+};
+
+export const Camera: React.FC<CameraProps> = ({chaves = [[0, 1, 0]], children}) => {
+  const f = useCurrentFrame();
+  const z = valor(f, chaves, 1), dy = valor(f, chaves, 2);
+  const ry = Math.sin(f / 70) * 2.5, rx = Math.sin(f / 53) * 1.2;
+  return <AbsoluteFill style={{perspective: 2400}}>
+    <AbsoluteFill style={{transform: `translateY(${dy}px) scale(${z}) rotateY(${ry}deg) rotateX(${rx}deg)`, transformOrigin: '50% 40%'}}>{children}</AbsoluteFill>
+  </AbsoluteFill>;
+};

package/kits/terminal/elementos/Cena.tsx

@@ -0,0 +1,25 @@
+// Cena: a janela de tempo de um plano. Dentro dela, useCurrentFrame() começa em 0.
+// Entradas: corte (troca seca) · varre (a tela nova é escrita de cima a baixo em 8 quadros, com a
+// cabeça de escrita quente na frente) · nenhuma.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {BLOOM, COR, VIDRO, seg} from './base';
+
+export type Entrada = 'corte' | 'varre' | 'nenhuma';
+const CenaCtx = createContext({duracao: 60});
+export const useDuracaoCena = () => useContext(CenaCtx).duracao;
+
+const Janela: React.FC<{entrada: Entrada; children: React.ReactNode}> = ({entrada, children}) => {
+  const f = useCurrentFrame();
+  if (entrada !== 'varre' || f >= 8) return <AbsoluteFill>{children}</AbsoluteFill>;
+  const y = seg(f, 0, 8) * VIDRO.a;
+  return <AbsoluteFill>
+    <AbsoluteFill style={{clipPath: `inset(0 0 ${VIDRO.a - y}px 0)`}}>{children}</AbsoluteFill>
+    <div style={{position: 'absolute', left: 0, right: 0, top: y - 3, height: 6, background: COR.quente, boxShadow: BLOOM(COR.fosforo, 1.5)}} />
+  </AbsoluteFill>;
+};
+
+export const Cena: React.FC<{de: number; ate: number; entrada?: Entrada; children: React.ReactNode}> = ({de, ate, entrada = 'corte', children}) =>
+  <Sequence from={de} durationInFrames={ate - de} layout="none">
+    <CenaCtx.Provider value={{duracao: ate - de}}><Janela entrada={entrada}>{children}</Janela></CenaCtx.Provider>
+  </Sequence>;

package/kits/terminal/elementos/Fundo.tsx

@@ -0,0 +1,22 @@
+// Fundo: o quarto escuro onde o monitor está. Parede quase preta, o brilho âmbar do vidro vazando
+// na parede e na mesa (y 1600+), com a borda da mesa refletindo. O brilho pulsa com a tela (±4%).
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR} from './base';
+
+export type FundoProps = {
+  /** força do vazamento de luz (0–1) */
+  brilho?: number;
+};
+
+export const Fundo: React.FC<FundoProps> = ({brilho = 1}) => {
+  const f = useCurrentFrame();
+  const k = brilho * (0.96 + 0.04 * Math.sin(f / 3.1) * Math.sin(f / 7.7));
+  return <AbsoluteFill style={{background: COR.parede}}>
+    <AbsoluteFill style={{background: `radial-gradient(70% 45% at 50% 40%, rgba(255,160,50,${0.16 * k}) 0%, rgba(255,140,40,${0.05 * k}) 50%, rgba(0,0,0,0) 100%)`}} />
+    {/* a mesa */}
+    <div style={{position: 'absolute', left: 0, right: 0, top: 1590, bottom: 0, background: 'linear-gradient(180deg, #17110B 0%, #0B0806 60%)'}} />
+    <div style={{position: 'absolute', left: 0, right: 0, top: 1588, height: 3, background: `rgba(255,178,63,${0.25 * k})`}} />
+    <AbsoluteFill style={{background: `radial-gradient(45% 10% at 50% 84%, rgba(255,170,60,${0.14 * k}) 0%, rgba(0,0,0,0) 100%)`}} />
+  </AbsoluteFill>;
+};

package/kits/terminal/elementos/LinhaComando.tsx

@@ -0,0 +1,31 @@
+// LinhaComando: o prompt e o comando digitados com CADÊNCIA HUMANA (1–3 quadros por tecla, pausa antes
+// das opções), cursor de bloco sólido enquanto digita e piscando (8 on / 8 off) parado.
+// `enter` = quadro (relativo) em que a linha é confirmada: o cursor some.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {BLOOM, COR, FONTE, GRADE, cadencia, digitados} from './base';
+
+export type LinhaComandoProps = {
+  prompt?: string;
+  comando: string;
+  y?: number;
+  inicio?: number;
+  enter?: number;
+  tamanho?: number;
+  semente?: number;
+};
+
+export const LinhaComando: React.FC<LinhaComandoProps> = ({prompt = 'C:\\>', comando, y = 60, inicio = 0, enter, tamanho = 54, semente = 3}) => {
+  const f = useCurrentFrame() - inicio;
+  if (f < 0) return null;
+  const tempos = cadencia(comando, semente);
+  const n = digitados(f, tempos);
+  const fimDigitar = tempos[tempos.length - 1] ?? 0;
+  const confirmado = enter !== undefined && f >= enter;
+  const digitando = n < comando.length;
+  const cursor = !confirmado && (digitando || Math.floor((f - fimDigitar) / 8) % 2 === 0);
+  return <div style={{position: 'absolute', left: GRADE.margem, top: y, fontFamily: FONTE, fontSize: tamanho, color: COR.fosforo, textShadow: BLOOM(COR.fosforo, 0.9), whiteSpace: 'pre'}}>
+    <span style={{color: COR.apagado}}>{prompt}</span>{comando.slice(0, n)}
+    {cursor && <span style={{display: 'inline-block', width: tamanho * 0.5, height: tamanho * 0.82, background: COR.quente, verticalAlign: '-0.08em', marginLeft: 2, boxShadow: BLOOM(COR.fosforo, 0.8)}} />}
+  </div>;
+};

package/kits/terminal/elementos/Monitor.tsx

@@ -0,0 +1,42 @@
+// Monitor: a MOLDURA que se repete em todo vídeo do kit. Um monitor CRT de plástico grafite em pé
+// (retrato), com cantos de 46 px, chanfro de luz em cima e sombra embaixo, o vidro abaulado, e o queixo
+// com a placa do modelo e o LED âmbar que pisca quando a tela escreve. O vidro recebe as camadas do CRT
+// (ver Tela.tsx). Liga no quadro `liga` e desliga no `desliga` (a linha e o ponto do tubo).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_PLACA, MONITOR, VIDRO, e5, seg} from './base';
+
+export type MonitorProps = {
+  /** texto da placa no queixo (modelo fictício) */
+  placa?: string;
+  /** quadro (absoluto) em que o tubo liga / desliga; −1 = nunca */
+  liga?: number; desliga?: number;
+  children?: React.ReactNode;
+};
+
+export const Monitor: React.FC<MonitorProps> = ({placa = 'VG-9 · FÓSFORO P3', liga = 0, desliga = -1, children}) => {
+  const f = useCurrentFrame();
+  // ligar: linha horizontal que abre (0–8) · desligar: fecha numa linha (0–4) e num ponto (4–8)
+  const on = liga < 0 ? 1 : e5(seg(f, liga + 2, liga + 9));
+  const offA = desliga < 0 ? 0 : seg(f, desliga, desliga + 4), offB = desliga < 0 ? 0 : seg(f, desliga + 4, desliga + 8);
+  const sy = Math.max(0.004, on * (1 - offA * 0.996));
+  const sx = 1 - offB * 0.99;
+  const linha = (on > 0 && on < 1) || offA > 0;
+  const led = f % 22 < 18 ? 1 : 0.35;
+  return <div style={{position: 'absolute', left: MONITOR.x, top: MONITOR.y, width: MONITOR.l, height: MONITOR.a}}>
+    {/* plástico */}
+    <div style={{position: 'absolute', inset: 0, borderRadius: 46, background: `linear-gradient(180deg, ${COR.plasticoLuz} 0%, ${COR.plastico} 12%, ${COR.plastico} 80%, ${COR.plasticoSombra} 100%)`,
+      boxShadow: '0 40px 80px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.6)'}} />
+    {/* rebaixo do vidro */}
+    <div style={{position: 'absolute', left: VIDRO.x - MONITOR.x - 14, top: VIDRO.y - MONITOR.y - 14, width: VIDRO.l + 28, height: VIDRO.a + 28, borderRadius: 70, background: '#0B0908', boxShadow: 'inset 0 6px 14px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06)'}} />
+    {/* o vidro */}
+    <div style={{position: 'absolute', left: VIDRO.x - MONITOR.x, top: VIDRO.y - MONITOR.y, width: VIDRO.l, height: VIDRO.a, borderRadius: '64px / 56px', overflow: 'hidden', background: '#050302'}}>
+      <div style={{position: 'absolute', inset: 0, transform: `scale(${sx}, ${sy})`, filter: linha ? 'brightness(2.2)' : undefined}}>{children}</div>
+      {linha && <div style={{position: 'absolute', left: '50%', top: '50%', width: VIDRO.l * sx, height: 4, transform: 'translate(-50%,-50%)', background: COR.quente, boxShadow: `0 0 24px ${COR.fosforo}`}} />}
+    </div>
+    {/* queixo: placa + LED */}
+    <div style={{position: 'absolute', left: 70, bottom: 54, fontFamily: FONTE_PLACA, fontWeight: 700, fontSize: 22, letterSpacing: '0.24em', color: '#5E564D', textTransform: 'uppercase'}}>{placa}</div>
+    <div style={{position: 'absolute', right: 74, bottom: 60, width: 14, height: 14, borderRadius: 7, background: COR.led, opacity: on > 0.5 && offB < 1 ? led : 0.15, boxShadow: `0 0 12px ${COR.led}`}} />
+    <div style={{position: 'absolute', right: 104, bottom: 56, width: 54, height: 22, borderRadius: 4, background: '#141210', boxShadow: 'inset 0 2px 3px rgba(0,0,0,.8)'}} />
+  </div>;
+};

package/kits/terminal/elementos/Montagem.tsx

@@ -0,0 +1,52 @@
+// Montagem: transforma um plano de cenas (JSON escrito pela IA) em vídeo. O monitor, a sala, o vidro do
+// CRT e a barra de status são FIXOS (a moldura do kit); as cenas trocam só o que está no vidro.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {Fundo} from './Fundo';
+import {Camera} from './Camera';
+import {Monitor} from './Monitor';
+import {Tela} from './Tela';
+import {Cena, Entrada} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {BootBios} from './BootBios';
+import {LinhaComando} from './LinhaComando';
+import {BarraProgresso} from './BarraProgresso';
+import {ArteAscii} from './ArteAscii';
+import {PainelCaixa} from './PainelCaixa';
+import {TextoGrande} from './TextoGrande';
+import {BarraStatus, BarraStatusProps} from './BarraStatus';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {BootBios, LinhaComando, BarraProgresso, ArteAscii, PainelCaixa, TextoGrande};
+
+export type Camada = {elemento: string; props: Record<string, unknown>};
+export type CenaPlano = {batida: string; de: number; ate: number; entrada?: Entrada; camadas: Camada[]; sons?: {som: NomeSom; em: number; volume?: number}[]};
+export type Plano = {
+  kit: string; duracao: number; trilha?: {volume?: number} | false;
+  /** placa do monitor, quadros de ligar/desligar, barra de status e chaves da câmera [[quadro, zoom, deslocY]] */
+  monitor?: {placa?: string; liga?: number; desliga?: number};
+  status?: BarraStatusProps;
+  camera?: [number, number, number][];
+  cenas: CenaPlano[];
+};
+
+export const Montagem: React.FC<{plano: Plano}> = ({plano}) =>
+  <AbsoluteFill style={{background: '#0A0705'}}>
+    <Camera chaves={plano.camera}>
+      <Fundo />
+      <Monitor {...plano.monitor}>
+        <Tela>
+          {plano.cenas.map((c, i) => <Cena key={i} de={c.de} ate={c.ate} entrada={c.entrada}>
+            {c.camadas.map((k, j) => {
+              const El = ELEMENTOS[k.elemento];
+              if (!El) throw new Error(`terminal: elemento "${k.elemento}" não existe no kit`);
+              return <El key={j} {...k.props} />;
+            })}
+          </Cena>)}
+          {plano.status && <BarraStatus {...plano.status} />}
+        </Tela>
+      </Monitor>
+    </Camera>
+    {plano.cenas.flatMap((c, i) => (c.sons ?? []).map((s, j) => <Efeito key={`${i}-${j}`} som={s.som} em={c.de + s.em} volume={s.volume} />))}
+    {plano.trilha !== false && <Trilha volume={plano.trilha?.volume} />}
+  </AbsoluteFill>;

package/kits/terminal/elementos/PainelCaixa.tsx

@@ -0,0 +1,35 @@
+// PainelCaixa: um painel de linha DUPLA (╔═╗ desenhado com bordas de 4 px + 4 px de vão), com o título em
+// vídeo inverso cravado na borda de cima e linhas chave · valor que contam. A moldura se desenha em 8
+// quadros (de cima-esquerda pra baixo-direita) antes das linhas.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {BLOOM, COR, FONTE, GRADE, e5, seg} from './base';
+
+export type PainelCaixaProps = {
+  titulo: string;
+  linhas: {chave: string; valor: number; de?: number; casas?: number; sufixo?: string}[];
+  y?: number;
+  inicio?: number;
+  intervalo?: number;
+};
+
+export const PainelCaixa: React.FC<PainelCaixaProps> = ({titulo, linhas, y = 260, inicio = 0, intervalo = 5}) => {
+  const f = useCurrentFrame() - inicio;
+  if (f < 0) return null;
+  const W = 840 - GRADE.margem * 2, H = 120 + linhas.length * 112;
+  const t = e5(seg(f, 0, 8));
+  const borda = `4px solid ${COR.fosforo}`;
+  const caixa = (inset: number) => <div style={{position: 'absolute', left: inset, top: inset, width: (W - inset * 2) * t, height: (H - inset * 2) * t, borderTop: borda, borderLeft: borda, borderRight: t > 0.95 ? borda : undefined, borderBottom: t > 0.95 ? borda : undefined, boxShadow: `0 0 10px ${COR.fosforo}66, inset 0 0 10px ${COR.fosforo}33`}} />;
+  return <div style={{position: 'absolute', left: GRADE.margem, top: y, width: W, height: H}}>
+    {caixa(0)}{caixa(12)}
+    {f >= 6 && <div style={{position: 'absolute', left: 50, top: -30, padding: '0 16px', background: COR.fosforo, color: COR.vidro, fontFamily: FONTE, fontSize: 50, lineHeight: '58px', boxShadow: BLOOM(COR.fosforo, 0.6)}}>{titulo}</div>}
+    {linhas.map((l, i) => {
+      const em = 10 + i * intervalo;
+      if (f < em) return null;
+      const v = (l.de ?? 0) + (l.valor - (l.de ?? 0)) * e5(seg(f, em, em + 12));
+      return <div key={i} style={{position: 'absolute', left: 52, right: 52, top: 76 + i * 112, display: 'flex', justifyContent: 'space-between', fontFamily: FONTE, fontSize: 64, color: COR.fosforo, textShadow: BLOOM(COR.fosforo, 0.8), whiteSpace: 'pre'}}>
+        <span>{l.chave}</span><span style={{color: COR.quente}}>{v.toFixed(l.casas ?? 0).replace('.', ',')}{l.sufixo ?? ''}</span>
+      </div>;
+    })}
+  </div>;
+};

package/kits/terminal/elementos/Som.tsx

@@ -0,0 +1,32 @@
+// Som: efeitos e trilha do kit (sintetizados no MotionCraft, pacote digital-soft). Um som por movimento, 1–2 quadros ANTES do visual.
+import React from 'react';
+import {Audio, Sequence, interpolate, useVideoConfig} from 'remotion';
+import whooshEntra from '../assets/sons/whoosh-entra.mp3';
+import whooshSai from '../assets/sons/whoosh-sai.mp3';
+import swoosh from '../assets/sons/swoosh.mp3';
+import popPalavra from '../assets/sons/pop-palavra.mp3';
+import popCartao from '../assets/sons/pop-cartao.mp3';
+import clique from '../assets/sons/clique.mp3';
+import impacto from '../assets/sons/impacto.mp3';
+import subida from '../assets/sons/subida.mp3';
+import assinatura from '../assets/sons/assinatura.mp3';
+import tick from '../assets/sons/tick.mp3';
+import digitar from '../assets/sons/digitar.mp3';
+import ligaCrt from '../assets/sons/liga-crt.mp3';
+import trilha from '../assets/trilha/trilha.mp3';
+
+export const SONS = {'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao, clique, impacto, subida, assinatura, tick, digitar, 'liga-crt': ligaCrt} as const;
+export type NomeSom = keyof typeof SONS;
+const VOLUME: Record<NomeSom, number> = {'whoosh-entra': 0.9, 'whoosh-sai': 0.8, swoosh: 1, 'pop-palavra': 1, 'pop-cartao': 0.9, clique: 0.8, impacto: 0.9, subida: 0.7, assinatura: 0.9, tick: 0.6, digitar: 0.8, 'liga-crt': 0.9};
+
+export type EfeitoProps = {som: NomeSom; em: number; volume?: number};
+export const Efeito: React.FC<EfeitoProps> = ({som, em, volume}) =>
+  <Sequence from={Math.max(0, Math.round(em))} durationInFrames={90} layout="none">
+    <Audio src={SONS[som]} volume={volume ?? VOLUME[som]} />
+  </Sequence>;
+
+export type TrilhaProps = {volume?: number; saida?: number};
+export const Trilha: React.FC<TrilhaProps> = ({volume = 0.5, saida = 20}) => {
+  const {durationInFrames} = useVideoConfig();
+  return <Audio src={trilha} volume={(f) => volume * interpolate(f, [durationInFrames - saida, durationInFrames], [1, 0], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'})} />;
+};

package/kits/terminal/elementos/Tela.tsx

@@ -0,0 +1,25 @@
+// Tela: o vidro do CRT por cima do conteúdo. Fundo de fósforo apagado com o centro 6% mais claro
+// (o abaulado), linhas de varredura de 3 px, máscara de sombra, a barra de atualização que rola de cima
+// a baixo a cada 75 quadros, cintilação de ±3%, vinheta forte nos cantos e o reflexo do vidro.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR, ruido} from './base';
+
+export const Tela: React.FC<{children?: React.ReactNode}> = ({children}) => {
+  const f = useCurrentFrame();
+  const flick = 0.97 + 0.03 * ruido(f);
+  const barra = ((f % 75) / 75) * 140 - 20;
+  return <AbsoluteFill>
+    <AbsoluteFill style={{background: `radial-gradient(75% 65% at 50% 46%, ${COR.vidroCentro} 0%, ${COR.vidro} 70%, #070401 100%)`}} />
+    <AbsoluteFill style={{opacity: flick}}>{children}</AbsoluteFill>
+    {/* barra de atualização */}
+    <div style={{position: 'absolute', left: 0, right: 0, top: `${barra}%`, height: '14%', background: 'linear-gradient(180deg, rgba(255,190,90,0) 0%, rgba(255,190,90,.05) 50%, rgba(255,190,90,0) 100%)'}} />
+    {/* varredura + máscara */}
+    <AbsoluteFill style={{background: 'repeating-linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.34) 2px, rgba(0,0,0,.34) 3px)'}} />
+    <AbsoluteFill style={{background: 'repeating-linear-gradient(90deg, rgba(255,120,0,.025) 0px, rgba(255,120,0,.025) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px)'}} />
+    {/* vinheta do tubo (os cantos fogem) */}
+    <AbsoluteFill style={{background: 'radial-gradient(90% 80% at 50% 48%, rgba(0,0,0,0) 58%, rgba(0,0,0,.55) 88%, rgba(0,0,0,.92) 100%)'}} />
+    {/* reflexo do vidro */}
+    <AbsoluteFill style={{background: 'linear-gradient(128deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 22%, rgba(255,255,255,0) 34%)'}} />
+  </AbsoluteFill>;
+};