primocode 10.17.1 → 11.0.0

package/kits/vhs-90/elementos/base.ts

@@ -0,0 +1,75 @@
+// Base do kit vhs-90: cores, fontes, curvas e medidas. Todo número visual sai daqui.
+// Os elementos importam só este arquivo, 'react' e 'remotion'. Nada de fora da pasta do kit.
+import {continueRender, delayRender} from 'remotion';
+import fonte0 from '../assets/fontes/bebas.woff2';
+import fonte1 from '../assets/fontes/vt323.woff2';
+
+// ---------- tela ----------
+export const LARGURA = 1080, ALTURA = 1920, FPS = 30;
+// área segura (Reels/TikTok): o que se lê fica entre estas linhas
+export const SEGURA = {topo: 168, base: 1330, lado: 96};
+export const LARGURA_UTIL = LARGURA - SEGURA.lado * 2; // 888 px
+
+// ---------- cor ----------
+export const COR = {
+  tinta: '#101215',
+  azul: '#0A1F8F',
+  osd: '#EDE8D5',
+  rec: '#E63B2E',
+  amarelo: '#F2D43D',
+  laranja: '#FF9A2E',
+  ciano: '#38D9C0'
+};
+
+// ---------- fonte ----------
+// Nome de família com o prefixo do kit ("VH ..."), pra não colidir com outro kit no mesmo estúdio.
+export const FONTE = {
+  titulo: '"VH Bebas Neue", Impact, Arial Narrow, sans-serif',
+  apoio: '"VH VT323", Courier New, monospace',
+};
+type G = {__kit_vhs_90?: boolean};
+if (typeof document !== 'undefined' && !(globalThis as G).__kit_vhs_90) {
+  (globalThis as G).__kit_vhs_90 = true;
+  const h = delayRender('vhs-90: fontes');
+  Promise.all([
+    new FontFace('VH Bebas Neue', `url(${fonte0}) format('woff2')`, {weight: '400', style: 'normal'}).load(),
+    new FontFace('VH VT323', `url(${fonte1}) format('woff2')`, {weight: '400', style: 'normal'}).load(),
+  ]).then((fs) => {fs.forEach((ff) => document.fonts.add(ff)); continueRender(h);}).catch(() => continueRender(h));
+}
+
+// ---------- tempo e curva ----------
+export const c01 = (t: number) => Math.max(0, Math.min(1, t));
+/** progresso 0..1 de f entre a e b */
+export const seg = (f: number, a: number, b: number) => c01((f - a) / (b - a));
+/** saída rápida e pouso longo, parecida com cubic-bezier(.2,.8,.2,1) */
+export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
+/** easeOutBack: passa do destino em ~10% e volta (toda entrada tem overshoot) */
+export const eb = (t: number, s = 1.70158) => {const x = c01(t) - 1; return 1 + (s + 1) * x * x * x + s * x * x;};
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+/** uma batida da trilha do kit (88 bpm) em quadros */
+export const BATIDA = 20.45;
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, peso = 400, trackingEm = 0.01, familia = 'VH Bebas Neue'): number => {
+  const chave = `${texto}|${tamanho}|${peso}|${trackingEm}|${familia}`;
+  const c = cache.get(chave); if (c !== undefined) return c;
+  if (typeof document === 'undefined') return texto.length * tamanho * 0.58;
+  canvas = canvas || document.createElement('canvas');
+  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.58;
+  const fonte = `${peso} ${tamanho}px "${familia}"`;
+  ctx.font = fonte;
+  const w = ctx.measureText(texto).width + texto.length * trackingEm * tamanho;
+  if (document.fonts.check(fonte)) cache.set(chave, w);
+  return w;
+};
+/** o maior tamanho até `tamanho` em que o texto cabe em `largura` (nunca palavra cortada) */
+export const caber = (texto: string, tamanho: number, largura = LARGURA_UTIL, peso = 400, trackingEm = 0.01, familia = 'VH Bebas Neue') => {
+  const w = larguraTexto(texto, tamanho, peso, trackingEm, familia);
+  return w > largura ? Math.floor(tamanho * (largura / w)) : tamanho;
+};
+/** tira os asteriscos de destaque: "Usar *IA*" -> "Usar IA" */
+export const textoLimpo = (t: string) => t.replace(/\*/g, '');
+/** quebra "a *b* c" em pedaços {t, d}: d = true quando estava entre asteriscos */
+export const pedacos = (t: string) => t.split(/(\*[^*]+\*)/).filter(Boolean).map((p) => p.startsWith('*') ? {t: p.slice(1, -1), d: true} : {t: p, d: false});

package/kits/vhs-90/elementos/index.ts

@@ -0,0 +1,16 @@
+// Tudo que o kit vhs-90 oferece. A IA monta o vídeo combinando isto (ou escrevendo um plano pra Montagem).
+export * from './base';
+export {Fundo, Sobre} from './Fundo';
+export {Camera, posCamera} from './Camera';
+export {Cena, useDuracaoCena, SOBREPOE} from './Cena';
+export {TituloFita} from './TituloFita';
+export {TelaAzul} from './TelaAzul';
+export {CapaVHS} from './CapaVHS';
+export {MenuOSD} from './MenuOSD';
+export {BarrasRastreio} from './BarrasRastreio';
+export {CarimboData} from './CarimboData';
+export {AssinaturaMarca} from './AssinaturaMarca';
+export {Efeito, Trilha, SONS} from './Som';
+export type {NomeSom} from './Som';
+export {Montagem, ELEMENTOS} from './Montagem';
+export type {Plano, CenaPlano, Camada} from './Montagem';

package/kits/vhs-90/exemplos/logo-rewind.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100"><rect x="2" y="2" width="156" height="96" rx="8" fill="#101215" stroke="#EDE8D5" stroke-width="4"/><rect x="24" y="14" width="112" height="36" fill="#EDE8D5"/><circle cx="52" cy="70" r="16" fill="none" stroke="#EDE8D5" stroke-width="5"/><circle cx="108" cy="70" r="16" fill="none" stroke="#EDE8D5" stroke-width="5"/><rect x="62" y="22" width="36" height="20" fill="#E63B2E"/></svg>

package/kits/vhs-90/exemplos/plano.json

@@ -0,0 +1,47 @@
+{
+  "kit": "vhs-90",
+  "roteiro": "exemplos/roteiro.md",
+  "duracao": 240,
+  "trilha": {"volume": 0.5},
+  "cenas": [
+    {
+      "batida": "gancho", "de": 0, "ate": 56, "entrada": "nenhuma",
+      "camadas": [
+        {"elemento": "TelaAzul", "props": {"linhas": ["insira", "a fita"], "rotulo": "AV 1", "inicio": 2, "y": 760}}
+      ],
+      "sons": [{"som": "clique", "em": 2}, {"som": "clique", "em": 14}, {"som": "pop-palavra", "em": 30}]
+    },
+    {
+      "batida": "virada", "de": 56, "ate": 110, "entrada": "cortar",
+      "camadas": [
+        {"elemento": "TituloFita", "props": {"linhas": ["sábado", "noite de", "*filme*"], "inicio": 4, "intervalo": 9, "y": 780, "tamanho": 300}},
+        {"elemento": "BarrasRastreio", "props": {"em": [0]}}
+      ],
+      "socos": [22],
+      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "pop-palavra", "em": 4}, {"som": "pop-palavra", "em": 13}, {"som": "impacto", "em": 22}]
+    },
+    {
+      "batida": "prova", "de": 110, "ate": 164, "entrada": "cortar",
+      "camadas": [
+        {"elemento": "CapaVHS", "props": {"src": "fotos/foto-05.jpg", "titulo": "Maratona", "topo": "REWIND VIDEOCLUBE", "selo": "grátis", "y": 720, "inicio": 2, "foco": "50% 40%"}},
+        {"elemento": "BarrasRastreio", "props": {"em": [0]}}
+      ],
+      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "pop-cartao", "em": 4}, {"som": "pop-palavra", "em": 14}]
+    },
+    {
+      "batida": "lista", "de": 164, "ate": 206, "entrada": "cortar",
+      "camadas": [
+        {"elemento": "MenuOSD", "props": {"titulo": "selecione a fita", "itens": ["comédia", "terror", "aventura"], "inicio": 2, "passo": 12, "y": 700}},
+        {"elemento": "CarimboData", "props": {"linhas": ["08 AGO 1996", "play ▶"], "inicio": 10, "y": 1180}}
+      ],
+      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "clique", "em": 14}, {"som": "clique", "em": 26}]
+    },
+    {
+      "batida": "marca", "de": 206, "ate": 240, "entrada": "cortar",
+      "camadas": [
+        {"elemento": "AssinaturaMarca", "props": {"nome": "Rewind", "icone": "logo-rewind.svg", "detalhe": "locadora do bairro", "endereco": "rewind.exemplo", "inicio": 2, "y": 740}}
+      ],
+      "sons": [{"som": "whoosh-entra", "em": -1}, {"som": "impacto", "em": 6}, {"som": "assinatura", "em": 8}]
+    }
+  ]
+}

package/kits/vhs-90/exemplos/roteiro.md

@@ -0,0 +1,19 @@
+# Roteiro de demonstração · "Rewind" (locadora fictícia)
+
+Pedido: *"um reels de 8 s da Rewind, locadora de bairro, convidando para a noite de filme de sábado. Cara de fita VHS."*
+
+Sem narração: os cortes seguem a trilha (88 bpm, 1 batida = 20,5 quadros). REC e timecode ficam o tempo todo.
+
+| # | batida | tempo (quadros) | na tela | elemento | som |
+|---|---|---|---|---|---|
+| 1 | gancho | 0–56 | tela azul "AV 1": "INSIRA / A FITA" digitado | TelaAzul | cliques, pop |
+| 2 | virada | 56–110 | "SÁBADO / NOITE DE / *FILME*" com aberração + rastreio no corte | TituloFita + BarrasRastreio | whoosh, pops, impacto |
+| 3 | prova | 110–164 | capa de locadora "MARATONA" com selo GRÁTIS + rastreio | CapaVHS + BarrasRastreio | whoosh, pop de cartão |
+| 4 | lista | 164–206 | menu "SELECIONE A FITA": comédia · terror · aventura + data 08 AGO 1996 | MenuOSD + CarimboData | whoosh, cliques |
+| 5 | marca | 206–240 | tela azul "REWIND" + ▶ PLAY + endereço | AssinaturaMarca | impacto, assinatura |
+
+Como a IA chegou nisso:
+1. Abriu como se a fita ligasse (tela azul digitada) e fechou do mesmo jeito, com o nome.
+2. Um herói por plano; a barra de rastreio só como apoio nos cortes; o carimbo de data só no menu.
+3. Manteve grão, linhas, REC e timecode em todos os planos (camada `Sobre`) e foto sempre lavada.
+4. O `preview.tsx` passa esse plano para `Montagem`, que só usa os elementos do kit.

package/kits/vhs-90/preview.tsx

@@ -0,0 +1,17 @@
+// Preview do kit: o vídeo de demonstração (8 s) montado SÓ com os elementos do kit, a partir de exemplos/plano.json.
+// O estúdio registra isto como `Kit-vhs-90`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+import f5 from './exemplos/fotos/foto-05.jpg';
+import f7 from './exemplos/fotos/foto-07.jpg';
+import logo from './exemplos/logo-rewind.svg';
+
+const arquivos: Record<string, string> = {
+  'fotos/foto-05.jpg': f5, 'fotos/foto-07.jpg': f7,
+  'logo-rewind.svg': logo,
+};
+
+const Preview: React.FC = () => <Montagem plano={plano as Plano} arquivos={arquivos} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 100, Componente: Preview};

package/kits/vhs-90/receita.json

@@ -0,0 +1,189 @@
+{
+  "kit": "vhs-90",
+  "fps": 30,
+  "batida_trilha_quadros": 20.45,
+  "duracao_video_s": [
+    6,
+    45
+  ],
+  "ordem_sugerida": [
+    "gancho",
+    "virada",
+    "prova",
+    "lista",
+    "oferta",
+    "marca"
+  ],
+  "batidas": [
+    {
+      "nome": "gancho",
+      "obrigatoria": true,
+      "duracao": [
+        45,
+        75
+      ],
+      "elementos": [
+        "TelaAzul",
+        "CarimboData"
+      ],
+      "entrada": [
+        "nenhuma"
+      ],
+      "sons": [
+        "clique",
+        "pop-palavra"
+      ],
+      "nota": "a fita liga: tela azul com \"INSIRA A FITA\" digitado."
+    },
+    {
+      "nome": "problema",
+      "obrigatoria": false,
+      "duracao": [
+        40,
+        66
+      ],
+      "elementos": [
+        "TelaAzul",
+        "BarrasRastreio"
+      ],
+      "entrada": [
+        "cortar"
+      ],
+      "sons": [
+        "whoosh-entra",
+        "clique"
+      ],
+      "nota": "a dor em tela azul, com rastreio no corte."
+    },
+    {
+      "nome": "virada",
+      "obrigatoria": true,
+      "duracao": [
+        45,
+        75
+      ],
+      "elementos": [
+        "TituloFita",
+        "BarrasRastreio"
+      ],
+      "entrada": [
+        "cortar"
+      ],
+      "sons": [
+        "whoosh-entra",
+        "pop-palavra",
+        "impacto"
+      ],
+      "nota": "título de 2–3 linhas com a palavra em amarelo."
+    },
+    {
+      "nome": "prova",
+      "obrigatoria": true,
+      "duracao": [
+        45,
+        75
+      ],
+      "elementos": [
+        "CapaVHS",
+        "BarrasRastreio"
+      ],
+      "entrada": [
+        "cortar"
+      ],
+      "sons": [
+        "whoosh-entra",
+        "pop-cartao"
+      ],
+      "nota": "capa de locadora com foto lavada e selo."
+    },
+    {
+      "nome": "lista",
+      "obrigatoria": false,
+      "duracao": [
+        45,
+        90
+      ],
+      "elementos": [
+        "MenuOSD",
+        "CarimboData"
+      ],
+      "entrada": [
+        "cortar"
+      ],
+      "sons": [
+        "clique"
+      ],
+      "nota": "3–4 itens; o cursor pula a cada 18 quadros."
+    },
+    {
+      "nome": "oferta",
+      "obrigatoria": false,
+      "duracao": [
+        36,
+        66
+      ],
+      "elementos": [
+        "TituloFita",
+        "CarimboData"
+      ],
+      "entrada": [
+        "cortar"
+      ],
+      "sons": [
+        "subida",
+        "impacto"
+      ],
+      "nota": "preço/prazo em título de fita."
+    },
+    {
+      "nome": "marca",
+      "obrigatoria": true,
+      "duracao": [
+        48,
+        90
+      ],
+      "elementos": [
+        "AssinaturaMarca"
+      ],
+      "entrada": [
+        "cortar"
+      ],
+      "sons": [
+        "assinatura",
+        "clique"
+      ],
+      "nota": "sempre a última: tela azul, nome, ▶ PLAY, endereço."
+    }
+  ],
+  "transicoes": [
+    {
+      "nome": "cortar",
+      "quadros": 8,
+      "como": "entra com zoom 1,14 → 1 e sobra; a anterior desliza 20 px e some; BarrasRastreio varre em 12 quadros"
+    },
+    {
+      "nome": "subir",
+      "quadros": 8,
+      "como": "entra 80 px de baixo"
+    },
+    {
+      "nome": "direita",
+      "quadros": 8,
+      "como": "entra 232 px da direita"
+    },
+    {
+      "nome": "nenhuma",
+      "quadros": 0,
+      "como": "sem movimento de janela (gancho)"
+    }
+  ],
+  "camera": {
+    "deriva": "sempre, de mão",
+    "socos": "cada corte"
+  },
+  "trilha": {
+    "arquivo": "assets/trilha/fita-88bpm.mp3",
+    "volume": 0.5,
+    "com_narracao": 0.25
+  }
+}

package/kits/vhs-90/regras/area-segura.md

@@ -0,0 +1,18 @@
+# Área segura (9:16, 1080×1920)
+
+- Tudo que se lê fica entre **y = 168** e **y = 1330** e entre **x = 96** e **x = 984** (888 px úteis, margem de 8,9%).
+- Embaixo de 1330 px ficam a legenda e os botões do Reels/TikTok: ali só fundo e elementos que sangram.
+- Posições de referência (centro, em px):
+
+| uso | y |
+|---|---|
+| REC e timecode (OSD) | 210 |
+| título de fita (centro do bloco) | 700 |
+| tela azul (centro do texto) | 740 |
+| capa de locadora (centro) | 720 |
+| menu OSD (centro) | 700 |
+| carimbo de data | 1280 |
+| marca (nome) | 700 |
+
+- O ruído, as linhas e a vinheta cobrem a tela inteira; o texto lido fica entre 168 e 1330 e com 96 px de margem.
+- Respiro: 35–45% do quadro vazio, 1 herói + no máximo 1 apoio por plano, nada encostando na borda, e uma pausa de 15 a 24 quadros depois de cada golpe grande.

package/kits/vhs-90/regras/cor.md

@@ -0,0 +1,16 @@
+# Cor
+
+| token | hex | uso |
+|---|---|---|
+| `tinta` | `#101215` | fundo da fita (quase preto) |
+| `azul` | `#0A1F8F` | tela azul de AV, barra de seleção do menu |
+| `osd` | `#EDE8D5` | texto do OSD e títulos (branco quente) |
+| `rec` | `#E63B2E` | ponto REC, faixa da capa, aberração vermelha |
+| `amarelo` | `#F2D43D` | palavra em destaque e endereço |
+| `laranja` | `#FF9A2E` | carimbo de data da câmera |
+| `ciano` | `#38D9C0` | aberração ciano e detalhes |
+
+- Aberração: duas cópias do texto, `rgba(255,40,70,0.85)` em −6 px e `rgba(0,220,255,0.85)` em +6 px (oscila ±3 px, período 9 quadros).
+- Foto: `saturate(0.7) contrast(1.15) sepia(0.25) hue-rotate(-8deg) blur(0.6px)`. Nunca foto limpa.
+- Camada de grão: ruído fractal 0,9 em overlay a 22%, linhas de varredura `rgba(0,0,0,0.28)` a cada 4 px, vinheta preta nas bordas a 55%.
+- O cliente pode trocar a data e o texto do OSD; as cores ficam.

package/kits/vhs-90/regras/movimento.md

@@ -0,0 +1,16 @@
+# Movimento
+
+- Tela 1080×1920, **30 fps**. Curva padrão `e5` ≈ cubic-bezier(.2,.8,.2,1); toda entrada com sobra `eb` (easeOutBack, passa ~10% e volta).
+- A câmera nunca para: zoom 1,02 ± 0,015 (período 110 quadros), deslize ±14 × ±10 px, giro ±0,34° (mão tremida); soco de +2,5% que cai em 8 quadros a cada corte.
+- Entrada de cena: 8 quadros; saída sobrepõe 8 quadros com a próxima. Corte ou troca a cada 0,6–1,5 s (18–45 quadros).
+
+| movimento | quadros | valores |
+|---|---|---|
+| título entra | 10 | scale 1,3 → 1 com `eb`; piscar de opacidade 0/1 nos 4 primeiros quadros |
+| tremor do título | contínuo | translateX ±5 px em 1 de cada 7 quadros; fatia de cima desloca 18 px por 3 quadros a cada 23 |
+| aberração | contínuo | cópias vermelha e ciano oscilam 6 ± 3 px (período 9 quadros) |
+| barra de rastreio | 12 | faixa de 170 px sobe de y 2000 a −200 em `e5`, com 2 fios brancos e ruído de linha |
+| tela azul liga | 8 | varredura azul de cima para baixo; texto digitado a 0,8 car./quadro, cursor pisca a cada 8 |
+| capa de locadora | 16 | scale 0,6 → 1 com `eb`; oscila rotateY −14° ± 5° e rotateX 6° (período 60 quadros) |
+| cursor do menu | 2 | pula uma linha a cada 18 quadros, barra azul muda em 2 quadros |
+| saída de cena | 8 | translateX ±20 px e some, sobrepondo 8 quadros |

package/kits/vhs-90/regras/ritmo.md

@@ -0,0 +1,16 @@
+# Ritmo
+
+- 88 bpm → 1 batida = **20.45 quadros** (0.682 s). Cortes caem nas batidas; a barra de rastreio cai em todo corte; o golpe fica parado por 0,5 s.
+- Tempo mínimo de leitura: **40** quadros por frase (≈ 0,45 s por palavra curta).
+
+| batida | duração (s) | quadros |
+|---|---|---|
+| gancho | 1.5–2.5 | 45–75 |
+| problema | 1.3–2.2 | 40–66 |
+| virada | 1.5–2.5 | 45–75 |
+| prova | 1.5–2.5 | 45–75 |
+| lista | 1.5–3.0 | 45–90 |
+| oferta | 1.2–2.2 | 36–66 |
+| marca | 1.6–3.0 | 48–90 |
+
+- Vídeo de demo: 8 s = 240 quadros (11.7 batidas).

package/kits/vhs-90/regras/som.md

@@ -0,0 +1,21 @@
+# Som
+
+- Trilha: `assets/trilha/fita-88bpm.mp3` (9 s, 88 bpm), volume **0.5**, fade de saída nos últimos **20 quadros**. Vídeo maior que 9 s: gere outra no MotionCraft (`music make`, preset lofi-desk, 88 bpm, tom Eb, lead marimba, bateria lofi; filtro passa-baixa 5,2 kHz + redução de bits (acrusher 9 bits)) — não faça loop.
+- Com narração: trilha a **0,25** e efeitos a 70% do volume da tabela.
+- Efeitos sintetizados (MotionCraft `sfx make`, pacote paper) e passados por filtro de fita (passa-baixa 5,2 kHz + acrusher 9 bits); trilha de 9 s, 88 bpm, lo-fi quebrada.
+
+| som | volume | quando |
+|---|---|---|
+| `clique` | 0.8 | tecla da fita (liga a tela azul, cursor do menu) |
+| `pop-palavra` | 1 | título que entra |
+| `whoosh-entra` | 0.7 | barra de rastreio e entrada de cena |
+| `impacto` | 0.9 | a palavra em destaque |
+| `pop-cartao` | 0.9 | capa que aparece |
+| `swoosh` | 0.8 | corte entre cenas |
+| `subida` | 0.7 | 1,3 s antes do golpe final |
+| `assinatura` | 0.9 | revelação da marca |
+| `whoosh-sai` | 0.8 | saída grande |
+
+- Um som por movimento que importa; no máximo **3 sons por segundo**; nunca o mesmo arquivo duas vezes seguidas.
+- Som entra **1 a 2 quadros antes** do visual.
+- O render nivela o mix em **−14 LUFS**, pico −1,5 dBTP.

package/kits/vhs-90/regras/tipografia.md

@@ -0,0 +1,17 @@
+# Tipografia
+
+Bebas Neue (400, condensada) para títulos; VT323 (400, pixel de terminal) para todo OSD: REC, timecode, menu, tela azul e data.
+
+| papel | tamanho (px) | máx. caracteres | peso · tracking · caixa |
+|---|---|---|---|
+| título de fita (linha) | 330 (encolhe até 120) | 10 por linha | Bebas · 0,01 em · MAIÚSCULAS · aberração de cor |
+| tela azul (texto) | 110 | 18 por linha | VT323 · MAIÚSCULAS · digitado a 0,8 car./quadro |
+| menu OSD (item) | 84 | 20 | VT323 · MAIÚSCULAS |
+| título da capa | 170 (encolhe) | 10 | Bebas · MAIÚSCULAS · branco sobre vermelho |
+| REC / timecode | 56 | 12 | VT323 · branco quente |
+| carimbo de data | 60 | 14 | VT323 · laranja |
+| nome na marca | 300 (encolhe) | 10 | Bebas · MAIÚSCULAS |
+
+- Texto que passa da largura útil (888 px) **encolhe sozinho** (`caber()` em `elementos/base.ts`). Nunca palavra cortada.
+- Destaque `*palavra*` = amarelo (`#F2D43D`) no lugar do branco quente.
+- O OSD (REC e timecode) fica fixo em y = 210, dentro da área segura, em todo plano.

package/kits/vidro-ios/SKILL.md

@@ -0,0 +1,52 @@
+---
+slug: vidro-ios
+nome: Vidro iOS
+descricao: cartões de vidro fosco com desfoque sobre manchas de cor, mola de iPhone, ilha dinâmica, widgets e central de controle
+familia: SaaS e tecnologia
+versao: 1
+quando:
+  - "vídeo de app mobile, rotina, saúde, delivery ou finanças pessoais"
+  - "mostrar notificações, widgets ou a ilha dinâmica do iPhone"
+  - "anúncio moderno com cara de iOS e vidro fosco"
+  - "quero movimento de iPhone, com mola e desfoque"
+  - "lançamento de app com botão de baixar"
+nao_serve:
+  - "vídeo B2B sério ou técnico (use saas-linear ou vercel-mono)"
+  - "estilo editorial, papel ou retrô"
+---
+
+# Vidro iOS
+
+Um **papel de parede vivo**: verde-azulado profundo `#06303A` com 4 manchas enormes (**lima `#C6F432`, água `#3BE8D0`, coral `#FF7A59`, amarelo**) que flutuam e se cruzam para o vidro ter o que desfocar. Os heróis são **painéis de vidro fosco** (`backdrop-filter: blur(36px) saturate(1.6)`, fundo branco a 17%, borda de 2 px a 38%, realce interno no topo): **pilha de notificações** que cai do alto, **ilha dinâmica** que se estica de pílula a painel preto, **widgets** de início e **central de controle** com blocos que ligam. **Todo movimento usa mola de iPhone** (sobe, passa ~12%, assenta; função `mola`) e o título entra **grande e desfocado e assenta** como na tela de bloqueio. Inter 800 branca. Uma cena = um herói, margens de 96 px.
+
+## Como montar um vídeo com este kit
+
+1. **Leia o pedido e o roteiro.** Corte cada fala em frases curtas. Uma frase = um plano.
+2. **Escolha as batidas** em `receita.json`. Cada batida diz quanto dura e quais elementos servem.
+3. **Escreva o plano de cenas** (`plano.json`, mesmo formato de `exemplos/plano.json`): `de`/`ate` em quadros, `entrada`, `camadas` (elemento + props) e `sons`. Os cortes seguem a voz ou a batida da trilha (1 batida = 15.0 quadros).
+4. **Renderize** com `<Montagem plano={...} arquivos={...} />`.
+5. **Confira** um quadro por cena contra `regras/`: área segura, herói grande, nada parado, nada cortado.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| `TituloVidro` | título branco que entra maior e desfocado e assenta com mola; `*palavra*` em degradê lima→água | gancho |
+| `PilhaNotificacoes` | 3–4 notificações de vidro que caem do alto e se empilham | notificacoes |
+| `IlhaDinamica` | pílula preta que se estica até um painel com número grande e barra de progresso | ilha |
+| `WidgetsGrade` | widget largo + rosca de progresso + mini gráfico, pulando com mola | widgets |
+| `PainelControle` | 4 blocos de ligar/desligar que acendem em branco + barra de brilho | controle |
+| `AssinaturaMarca` | ícone do app que cai com mola + nome + botão de vidro "Baixar" + endereço | marca (última) |
+| `vidro (material)` | `VIDRO` (estilo do painel) e `Icone` (quadrado arredondado com glifo): monte novos cartões | base de qualquer cartão |
+| `Fundo`, `Camera`, `Cena` | o chão, a deriva da câmera e a janela de cada plano | todas |
+| `Efeito`, `Trilha` | sons e trilha do kit | todas |
+
+## Proibido
+
+- Vidro sem manchas de cor atrás: o fundo precisa se mexer para o desfoque aparecer.
+- Movimento linear ou `ease` seco: tudo entra com a mola.
+- Cartão opaco (exceto o painel preto da ilha dinâmica).
+- Sombra difusa clara ou brilho em letra; só sombra funda azul-petróleo.
+- Mais de um herói por cena; elemento a menos de 96 px da borda.
+- Mais de 4 cores de mancha; lima é o destaque.
+- Texto fora da área segura (168–1330 px, 96 px nas laterais).

package/kits/vidro-ios/assets/ASSETS.md

@@ -0,0 +1,18 @@
+# Assets do kit vidro-ios
+
+| arquivo | o que é | origem | licença |
+|---|---|---|---|
+| `fontes/inter.woff2` | Inter (subset latino) | Google Fonts, baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-Inter.txt` |
+| `fontes/dm-mono.woff2` | DM Mono (subset latino) | Google Fonts, baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-DM-Mono.txt` |
+| `sons/whoosh-entra.mp3` | efeito `whoosh_in` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
+| `sons/whoosh-sai.mp3` | efeito `whoosh_out` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
+| `sons/swoosh.mp3` | efeito `swoosh` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
+| `sons/pop-palavra.mp3` | efeito `word_pop` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
+| `sons/pop-cartao.mp3` | efeito `icon_pop` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
+| `sons/clique.mp3` | efeito `button` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
+| `sons/impacto.mp3` | efeito `impact` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
+| `sons/subida.mp3` | efeito `riser` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
+| `sons/assinatura.mp3` | efeito `logo_sting` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
+| `trilha/trilha.mp3` | 9 s de trilha | MotionCraft `music make` ({"preset": "calm-punch", "bpm": 100, "key": "F", "lead": "marimba", "drums": "soft", "comp": "syncopated"}) | sem samples; síntese própria (CC0). MotionCraft é MIT |
+
+Conteúdo de demonstração (fica em `exemplos/`, não faz parte do estilo): desenhado no código ou SVG próprio, sem fotos de terceiros, a menos que listado abaixo.

package/kits/vidro-ios/assets/fontes/OFL-DM-Mono.txt

@@ -0,0 +1,93 @@
+Copyright The DM Mono Project Authors (https://www.github.com/googlefonts/dm-mono)
+
+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.