primocode 10.17.1 → 10.19.0

package/kits/papel-recortado/regras/tipografia.md

@@ -0,0 +1,12 @@
+# Tipografia
+
+| papel | fonte | tamanho px | máx. caracteres | detalhe |
+|---|---|---|---|---|
+| título recortado | Fredoka 700 | 150–190 | 9 por linha, 2 linhas | margem creme = 20% do tamanho, giro ±5° por letra, vão 4% |
+| data / número | Fredoka 700 | 200 | 6 | terracota |
+| texto em papel | Fredoka 700 / Nunito 700 | 52–72 | 18 | numa tira de papel, giro ±2,5° |
+| etiqueta | Fredoka 700 | até 68 (encolhe: (largura − 40) ÷ (letras × 0,6)) | 9 | centro da etiqueta |
+| cartão CTA | Fredoka 700 | 110 | 11 por linha | linhas alternam tinta / terracota |
+| linha de apoio | Nunito 700 | 46 | 24 | petróleo |
+
+- line-height 1,0–1,08. Caixa: título em ALTA, o resto como se fala.

package/kits/pixel/SKILL.md

@@ -0,0 +1,52 @@
+---
+slug: pixel
+nome: Pixel art
+descricao: céu azul de 8 bits, Press Start 2P gigante com sombra dura, sprites, caixa de RPG, HUD de fliperama e moldura de tela
+familia: Retrô
+versao: 1
+quando:
+  - "vídeo de lançamento de jogo ou app gamificado"
+  - "anúncio divertido com cara de videogame antigo"
+  - "convite de evento gamer, campeonato ou live"
+  - "quero pixel art, 8 bits, retrô de fliperama"
+  - "reels com placar, fases e contagem de pontos"
+nao_serve:
+  - "vídeo sério, institucional ou premium (use apple-tipografico)"
+  - "fotos reais como protagonista (o estilo vive de sprites e texto)"
+---
+
+# Pixel art
+
+Um jogo de 8 bits em tela cheia. O chão é um céu azul `#29ADFF` com nuvens de pixel e um chão de blocos que rola; tudo o que se mexe anda em **passos de 3 quadros** (10 posições por segundo), nunca liso. Os títulos são Press Start 2P gigante, contornados em azul-noite com sombra dura. Sprites desenhados por grade de texto pulam, caixas de RPG digitam, um HUD conta pontos e a **moldura de fliperama** (borda de pixel com cantos em degrau) cobre todo plano. A paleta é curta (PICO-8, 9 cores) e nada usa degradê.
+
+## Como montar um vídeo com este kit
+
+1. **Leia o pedido e o roteiro.** Corte cada fala em frases curtas (1 a 4 palavras). Uma frase = uma cena de 0,6 a 1,5 s.
+2. **Escolha as batidas** em `receita.json` (gancho → virada → problema → lista → data → marca). Cada batida diz a duração e os elementos que 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`. 1 batida da trilha = 14.52 quadros.
+4. **Renderize** com `<Montagem plano={...} arquivos={...} />` ou combine `Fundo`, `Camera`, `Cena` e os elementos (tudo sai de `elementos/index.ts`).
+5. **Confira** um quadro por cena contra `regras/`: área segura, herói grande, nada parado, nada cortado.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| `TituloPixel` | 1–3 linhas gigantes que caem em passos e quicam, com contorno e sombra dura | gancho, data, marca |
+| `Sprite` | personagem/item em pixel art (bloco, moeda, coração, estrela, foguete, cogumelo) que pula ou flutua | virada, marca |
+| `CaixaDialogo` | caixa de RPG com borda em 3 camadas, nome e texto digitando | problema, virada |
+| `HudPlacar` | faixa de HUD: pontos que sobem, vidas e fase | virada, prova |
+| `MenuPixel` | menu de início com seta ► que pula de item em item | lista |
+| `ChuvaDeSprites` | chuva de moedas/estrelas/corações por toda a tela | data, oferta |
+| `AssinaturaMarca` | tela de título final: logo em blocos, personagem e PRESS START piscando | marca (sempre a última) |
+| `Fundo`, `Overlay`, `Camera`, `Cena` | céu que rola, moldura de fliperama, câmera e janela de cada plano | todas |
+| `Efeito`, `Trilha` | sons e trilha do kit | todas |
+
+## Proibido
+
+- Movimento liso: tudo anda em passos de 3 quadros (PASSO em `base.ts`).
+- Degradê, sombra suave, blur, brilho em letra. Sombra é sempre dura e de cor chapada.
+- Mais de 9 cores: só a paleta de `regras/cor.md`.
+- Fonte que não seja Press Start 2P (títulos) ou VT323 (texto).
+- Fotos reais, ícones vetoriais lisos ou emoji: tudo é pixel desenhado em grade.
+- Texto fora da área segura (168–1330 px na vertical, 80 px nas laterais).
+- Fundo escuro vazio com sprite pequeno no meio: sprite herói tem 18–40 px por pixel (≥ 40% da largura).

package/kits/pixel/assets/ASSETS.md

@@ -0,0 +1,18 @@
+# Assets do kit pixel
+
+| arquivo | o que é | origem | licença |
+|---|---|---|---|
+| `fontes/pressstart2p.woff2` | Press Start 2P (título), subset latino | Google Fonts (fonts.gstatic.com), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-pressstart2p.txt` |
+| `fontes/vt323.woff2` | VT323 (texto), subset latino | Google Fonts (fonts.gstatic.com), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-vt323.txt` |
+| `sons/whoosh-entra.mp3` | efeito whoosh-entra | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/whoosh-sai.mp3` | efeito whoosh-sai | sintetizado: MotionCraft `sfx make`, tipo `whoosh_out`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/swoosh.mp3` | efeito swoosh | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/pop-palavra.mp3` | efeito pop-palavra | sintetizado: MotionCraft `sfx make`, tipo `word_pop`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/pop-cartao.mp3` | efeito pop-cartao | sintetizado: MotionCraft `sfx make`, tipo `icon_pop`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/clique.mp3` | efeito clique | sintetizado: MotionCraft `sfx make`, tipo `button`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/impacto.mp3` | efeito impacto | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/subida.mp3` | efeito subida | sintetizado: MotionCraft `sfx make`, tipo `riser`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/assinatura.mp3` | efeito assinatura | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/tick.mp3` | efeito tick | sintetizado: MotionCraft `sfx make`, tipo `letter_tick`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `trilha/trilha.mp3` | trilha de 8,7 s, 124 bpm | MotionCraft `music make --preset tech-bright --bpm 124 --key C` | síntese própria (CC0); MotionCraft é MIT |
+

package/kits/pixel/assets/fontes/OFL-pressstart2p.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Press Start 2P 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/pixel/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/pixel/elementos/AssinaturaMarca.tsx

@@ -0,0 +1,18 @@
+// AssinaturaMarca: tela final de título de jogo: logo em blocos, personagem pulando e PRESS START piscando. Sempre a última cena.
+import React from 'react';
+import {COR, FONTE_TEXTO, FONTE_TITULO, LARGURA_UTIL, caber, mola, seg, useF} from './base';
+import {Sprite} from './Sprite';
+import {TituloPixel} from './TituloPixel';
+
+export type AssinaturaMarcaProps = {linhas: string[]; detalhe?: string; endereco?: string; sprite?: string; inicio?: number};
+export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({linhas, detalhe = 'PRESS START', endereco, sprite = 'bloco', inicio = 0}) => {
+  const f = useF() - inicio;
+  const p = mola(seg(f, 14, 24), 2);
+  const piscar = Math.floor(f / 7) % 2 === 0;
+  return <>
+    <Sprite nome={sprite} x={540} y={330} escala={18} inicio={inicio + 2} movimento="pular" />
+    <TituloPixel linhas={linhas} inicio={inicio + 4} intervalo={6} y={760} tamanho={150} cores={[COR.amarelo, COR.magenta]} />
+    <div style={{position: 'absolute', left: 80, width: LARGURA_UTIL, top: 1030, textAlign: 'center', fontFamily: FONTE_TITULO, fontSize: caber(detalhe, 58, LARGURA_UTIL, FONTE_TITULO, 400, 0), color: COR.creme, textShadow: `6px 6px 0 ${COR.noite}`, opacity: f > 14 && piscar ? 1 : 0, transform: `scale(${Math.max(0.01, p)})`}}>{detalhe}</div>
+    {endereco && <div style={{position: 'absolute', left: 80, width: LARGURA_UTIL, top: 1150, textAlign: 'center', fontFamily: FONTE_TEXTO, fontSize: 84, color: COR.noite, background: COR.amarelo, padding: '4px 0', border: `8px solid ${COR.noite}`, opacity: f > 20 ? 1 : 0}}>{endereco}</div>}
+  </>;
+};

package/kits/pixel/elementos/CaixaDialogo.tsx

@@ -0,0 +1,22 @@
+// CaixaDialogo: caixa de RPG com borda de pixel em 3 camadas, nome de quem fala, texto que digita e ▼ piscando.
+import React from 'react';
+import {COR, FONTE_TEXTO, FONTE_TITULO, mola, seg, useF} from './base';
+
+export type CaixaDialogoProps = {texto: string; nome?: string; inicio?: number; /** quadros por letra */ ritmo?: number; y?: number; largura?: number; tamanho?: number};
+const canto = (n: number) => `polygon(${n}px 0, calc(100% - ${n}px) 0, calc(100% - ${n}px) ${n}px, 100% ${n}px, 100% calc(100% - ${n}px), calc(100% - ${n}px) calc(100% - ${n}px), calc(100% - ${n}px) 100%, ${n}px 100%, ${n}px calc(100% - ${n}px), 0 calc(100% - ${n}px), 0 ${n}px, ${n}px ${n}px)`;
+
+export const CaixaDialogo: React.FC<CaixaDialogoProps> = ({texto, nome = 'NPC', inicio = 0, ritmo = 1.5, y = 760, largura = 900, tamanho = 150}) => {
+  const f = useF() - inicio;
+  const p = mola(seg(f, 0, 9), 2);
+  const n = Math.max(0, Math.floor((f - 8) / ritmo));
+  const mostra = texto.slice(0, n);
+  const altura = 560;
+  return <div style={{position: 'absolute', left: (1080 - largura) / 2, top: y - altura / 2, width: largura, height: altura, transform: `scale(${Math.max(0.01, p)})`, transformOrigin: '50% 100%'}}>
+    <div style={{position: 'absolute', inset: 0, background: COR.noite, clipPath: canto(24)}} />
+    <div style={{position: 'absolute', inset: 14, background: COR.creme, clipPath: canto(18)}} />
+    <div style={{position: 'absolute', inset: 30, background: COR.noite, clipPath: canto(10), opacity: 0.08}} />
+    <div style={{position: 'absolute', inset: 28, fontFamily: FONTE_TEXTO, fontSize: tamanho, lineHeight: 1.02, color: COR.noite, letterSpacing: 2, textTransform: 'uppercase'}}>{mostra}<span style={{opacity: Math.floor(f / 6) % 2 ? 0 : 1, color: COR.magenta}}>█</span></div>
+    <div style={{position: 'absolute', left: 40, top: -40, background: COR.magenta, padding: '8px 22px', fontFamily: FONTE_TITULO, fontSize: 36, color: COR.creme, boxShadow: `8px 8px 0 ${COR.noite}`, border: `6px solid ${COR.noite}`}}>{nome}</div>
+    {n >= texto.length && <div style={{position: 'absolute', right: 44, bottom: 30, fontFamily: FONTE_TITULO, fontSize: 40, color: COR.magenta, opacity: Math.floor(f / 8) % 2 ? 0.2 : 1}}>▼</div>}
+  </div>;
+};

package/kits/pixel/elementos/Camera.tsx

@@ -0,0 +1,21 @@
+// Camera: deriva constante por baixo de tudo e um soco em cada batida. O quadro nunca fica parado.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {q} from './base';
+
+export type CameraProps = {batidas?: number[]; forca?: number; children: React.ReactNode};
+
+export const posCamera = (f: number, batidas: number[], forca = 1) => {
+  let z = 1.02 + 0.012 * Math.sin(f / 60), dx = Math.sin(f / 31) * 14, dy = Math.cos(f / 43) * 10;
+  let rot = Math.sin(f / 71) * 0.004;
+  for (const h of batidas) if (f >= h) {
+    const d = Math.exp(-(f - h) / 7) * forca;
+    z += 0.035 * d; dx += 12 * d * Math.sin((f - h) * 2.7 + h); dy += 12 * d * Math.cos((f - h) * 3.3 + h); rot += 0.004 * 0.8 * d * Math.sin((f - h) * 2 + h);
+  }
+  return {z, dx, dy, rot};
+};
+
+export const Camera: React.FC<CameraProps> = ({batidas = [], forca = 1, children}) => {
+  const c = posCamera(q(useCurrentFrame()), batidas, forca);
+  return <AbsoluteFill style={{transform: `translate(${c.dx}px, ${c.dy}px) rotate(${c.rot}rad) scale(${c.z})`, transformOrigin: '50% 44%'}}>{children}</AbsoluteFill>;
+};

package/kits/pixel/elementos/Cena.tsx

@@ -0,0 +1,36 @@
+// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco), sai com movimento e sobrepõe 10 quadros com a próxima.
+// Dentro dela, useCurrentFrame() começa em 0 e useDuracaoCena() devolve a duração.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {mola, e5, seg, q} from './base';
+
+export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'nenhuma';
+export const SOBREPOE = 10;
+
+const CenaCtx = createContext({duracao: 60});
+export const useDuracaoCena = () => useContext(CenaCtx).duracao;
+
+export type CenaProps = {de: number; ate: number; entrada?: Entrada; ultima?: boolean; children: React.ReactNode};
+
+const Janela: React.FC<{duracao: number; entrada: Entrada; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, ultima, children}) => {
+  const f = q(useCurrentFrame());
+  const en = entrada === 'nenhuma' ? 0 : 1 - mola(seg(f, 0, 12));
+  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
+  let tf = '';
+  if (entrada === 'subir') tf += `translateY(${en * 300}px) `;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9}) `;
+  if (entrada === 'direita') tf += `translateX(${en * 900}px) `;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 900}px) `;
+  tf += `translateY(${-xo * 260}px)`;
+  const blur = (en * 0 + xo * 0);
+  return <AbsoluteFill style={{transform: tf, opacity: Math.max(0, (1 - Math.max(0, en) * 0.9) * (1 - xo)), filter: blur > 0.3 ? `blur(${blur}px)` : undefined}}>{children}</AbsoluteFill>;
+};
+
+export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'subir', ultima = false, children}) => {
+  const duracao = ate - de;
+  return <Sequence from={de} durationInFrames={duracao + (ultima ? 0 : SOBREPOE)} layout="none">
+    <CenaCtx.Provider value={{duracao}}>
+      <Janela duracao={duracao} entrada={entrada} ultima={ultima}>{children}</Janela>
+    </CenaCtx.Provider>
+  </Sequence>;
+};

package/kits/pixel/elementos/ChuvaDeSprites.tsx

@@ -0,0 +1,15 @@
+// ChuvaDeSprites: chuva de itens de 8 bits (moedas, estrelas, corações) caindo e balançando por toda a tela, atrás do texto.
+import React from 'react';
+import {ALTURA, ruido, useF} from './base';
+import {Sprite} from './Sprite';
+
+export type ChuvaDeSpritesProps = {nomes?: string[]; quantidade?: number; inicio?: number; escala?: number; velocidade?: number};
+export const ChuvaDeSprites: React.FC<ChuvaDeSpritesProps> = ({nomes = ['moeda', 'estrela', 'coracao'], quantidade = 16, inicio = 0, escala = 9, velocidade = 1}) => {
+  const f = useF() - inicio;
+  if (f < 0) return null;
+  return <>{Array.from({length: quantidade}).map((_, i) => {
+    const x = 70 + ruido(i + 1) * 940, v = (14 + ruido(i + 40) * 14) * velocidade, off = ruido(i + 80) * ALTURA;
+    const y = ((f * v + off) % (ALTURA + 400)) - 200;
+    return <Sprite key={i} nome={nomes[i % nomes.length]} x={x + Math.sin(f / 9 + i) * 30} y={y} escala={escala + Math.floor(ruido(i + 7) * 5)} movimento="parado" sombra={false} />;
+  })}</>;
+};

package/kits/pixel/elementos/Fundo.tsx

@@ -0,0 +1,23 @@
+// Fundo: céu de 8 bits com nuvens de pixel em duas camadas, sol quadrado e chão de blocos que rola. Tudo anda em passos.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {COR, ALTURA, LARGURA, useF} from './base';
+
+const NUVEM = [[1, 0, 3], [0, 1, 5], [1, 2, 4]]; // [col, linha, largura] em blocos
+const Nuvem: React.FC<{x: number; y: number; b: number; cor: string}> = ({x, y, b, cor}) =>
+  <>{NUVEM.map(([c, l, w], i) => <div key={i} style={{position: 'absolute', left: x + c * b, top: y + l * b, width: w * b, height: b, background: cor}} />)}</>;
+
+export const Fundo: React.FC = () => {
+  const f = useF();
+  const B = 36;
+  const nuvens = [0, 1, 2, 3].map((i) => ({x: ((i * 520 - f * 5 + 2400) % 2100) - 300, y: 240 + i * 340 + (i % 2) * 60, perto: i % 2 === 0}));
+  const chaoX = -((f * 9) % 144);
+  return <AbsoluteFill style={{background: COR.ceu}}>
+    <div style={{position: 'absolute', left: 0, right: 0, top: 0, height: ALTURA * 0.5, background: 'repeating-linear-gradient(0deg, rgba(255,255,255,0.10) 0 72px, transparent 72px 144px)'}} />
+    <div style={{position: 'absolute', left: 760, top: 150 + Math.sin(f / 14) * 12, width: 220, height: 220, background: COR.amarelo, boxShadow: `0 0 0 ${B / 2}px ${COR.laranja}`}} />
+    {nuvens.map((n, i) => <Nuvem key={i} x={n.x} y={n.y} b={n.perto ? 48 : 30} cor={n.perto ? COR.creme : 'rgba(255,241,232,0.7)'} />)}
+    <div style={{position: 'absolute', left: 0, top: 1480, width: LARGURA, height: 40, background: COR.verde}} />
+    <div style={{position: 'absolute', left: 0, top: 1520, width: LARGURA, height: ALTURA - 1520, background: COR.laranja}} />
+    <div style={{position: 'absolute', left: chaoX, top: 1520, width: LARGURA + 288, height: ALTURA - 1520, background: `repeating-linear-gradient(90deg, ${COR.noite} 0 8px, transparent 8px 144px), repeating-linear-gradient(0deg, ${COR.noite} 0 8px, transparent 8px 72px)`, opacity: 0.55}} />
+  </AbsoluteFill>;
+};

package/kits/pixel/elementos/HudPlacar.tsx

@@ -0,0 +1,19 @@
+// HudPlacar: faixa de HUD de fliperama no topo: PONTOS que sobem de moeda em moeda, vidas em coração e a fase.
+import React from 'react';
+import {COR, FONTE_TITULO, mola, seg, useF} from './base';
+import {Sprite} from './Sprite';
+
+export type HudPlacarProps = {pontos?: number; vidas?: number; fase?: string; inicio?: number; y?: number; rotulo?: string};
+export const HudPlacar: React.FC<HudPlacarProps> = ({pontos = 12400, vidas = 3, fase = '1-1', inicio = 0, y = 215, rotulo = 'PONTOS'}) => {
+  const f = useF() - inicio;
+  const p = mola(seg(f, 0, 9), 2);
+  const n = Math.round(pontos * seg(f, 4, 34) / 100) * 100;
+  const sombra = `4px 4px 0 ${COR.noite}`;
+  return <><div style={{position: 'absolute', left: 80, right: 80, top: y - 70, height: 140, transform: `translateY(${(1 - p) * -300}px)`, background: COR.noite, border: `8px solid ${COR.creme}`, boxShadow: `10px 10px 0 ${COR.noite}`, fontFamily: FONTE_TITULO, color: COR.creme}}>
+    <div style={{position: 'absolute', left: 24, top: 18, fontSize: 24, color: COR.amarelo}}>{rotulo}</div>
+    <div style={{position: 'absolute', left: 24, top: 62, fontSize: 52, textShadow: sombra}}>{String(n).padStart(6, '0')}</div>
+    <div style={{position: 'absolute', right: 24, top: 18, fontSize: 24, color: COR.amarelo}}>FASE {fase}</div>
+  </div>
+    {Array.from({length: vidas}).map((_, i) => <Sprite key={i} nome="coracao" x={930 - (vidas - 1 - i) * 70} y={y + 28} escala={5} inicio={inicio + 6 + i * 3} movimento="flutuar" sombra={false} />)}
+  </>;
+};

package/kits/pixel/elementos/MenuPixel.tsx

@@ -0,0 +1,19 @@
+// MenuPixel: menu de início de jogo. Os itens entram em fila e a seta ► pula de um para o outro a cada `troca` quadros.
+import React from 'react';
+import {COR, FONTE_TITULO, LARGURA_UTIL, caber, mola, seg, useF} from './base';
+
+export type MenuPixelProps = {itens: string[]; inicio?: number; troca?: number; y?: number; tamanho?: number};
+export const MenuPixel: React.FC<MenuPixelProps> = ({itens, inicio = 0, troca = 10, y = 740, tamanho = 76}) => {
+  const f = useF() - inicio;
+  const sel = Math.min(itens.length - 1, Math.max(0, Math.floor((f - 12) / troca)));
+  const tam = Math.min(...itens.map((t) => caber('► ' + t, tamanho, LARGURA_UTIL - 60, FONTE_TITULO, 400, 0)));
+  const alt = tam * 2.1;
+  const topo = y - (itens.length * alt) / 2;
+  return <>{itens.map((t, i) => {
+    const p = mola(seg(f, i * 4, i * 4 + 9), 1.8);
+    const ativo = i === sel && f >= 12;
+    return <div key={i} style={{position: 'absolute', left: 80, width: LARGURA_UTIL, top: topo + i * alt, height: alt * 0.86, transform: `translateX(${(1 - p) * -1100}px)`, background: ativo ? COR.magenta : COR.noite, border: `8px solid ${COR.creme}`, boxShadow: `10px 10px 0 ${COR.noite}`, fontFamily: FONTE_TITULO, fontSize: tam, color: ativo ? COR.amarelo : COR.creme, display: 'flex', alignItems: 'center', paddingLeft: 36, whiteSpace: 'nowrap'}}>
+      <span style={{width: tam * 1.4, opacity: ativo && Math.floor(f / 4) % 2 === 0 ? 0.35 : 1}}>{ativo ? '►' : ''}</span>{t}
+    </div>;
+  })}</>;
+};

package/kits/pixel/elementos/Montagem.tsx

@@ -0,0 +1,56 @@
+// Montagem: transforma um plano de cenas (JSON escrito pela IA) em vídeo, só com os elementos do kit.
+// Não decide estética: põe Fundo + Camera + Cenas + Overlay + sons onde o plano mandou. Formato: exemplos/plano.json.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {Fundo} from './Fundo';
+import {Overlay} from './Overlay';
+import {Camera} from './Camera';
+import {Cena, Entrada} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {COR} from './base';
+import {AssinaturaMarca} from './AssinaturaMarca';
+import {CaixaDialogo} from './CaixaDialogo';
+import {ChuvaDeSprites} from './ChuvaDeSprites';
+import {HudPlacar} from './HudPlacar';
+import {MenuPixel} from './MenuPixel';
+import {Sprite} from './Sprite';
+import {TituloPixel} from './TituloPixel';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {AssinaturaMarca, CaixaDialogo, ChuvaDeSprites, HudPlacar, MenuPixel, Sprite, TituloPixel};
+
+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}[];
+  socos?: number[];
+};
+export type Plano = {kit: string; duracao: number; trilha?: {volume?: number} | false; cenas: CenaPlano[]};
+
+const resolver = (v: unknown, arquivos: Record<string, string>): unknown => {
+  if (typeof v === 'string') return arquivos[v] ?? v;
+  if (Array.isArray(v)) return v.map((x) => resolver(x, arquivos));
+  if (v && typeof v === 'object') return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, resolver(x, arquivos)]));
+  return v;
+};
+
+export const Montagem: React.FC<{plano: Plano; arquivos?: Record<string, string>}> = ({plano, arquivos = {}}) => {
+  const socos = plano.cenas.flatMap((c) => [c.de, ...(c.socos ?? []).map((s) => c.de + s)]);
+  const ultima = plano.cenas.length - 1;
+  return <AbsoluteFill style={{background: "#29ADFF"}}>
+    <Fundo />
+    <Camera batidas={socos}>
+      {plano.cenas.map((c, i) => <Cena key={i} de={c.de} ate={c.ate} entrada={c.entrada} ultima={i === ultima}>
+        {c.camadas.map((k, j) => {
+          const El = ELEMENTOS[k.elemento];
+          if (!El) throw new Error(`pixel: elemento "${k.elemento}" não existe no kit`);
+          return <El key={j} {...(resolver(k.props, arquivos) as object)} />;
+        })}
+      </Cena>)}
+    </Camera>
+    <Overlay />
+    {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/pixel/elementos/Overlay.tsx

@@ -0,0 +1,14 @@
+// Overlay: a moldura de fliperama que se repete em todo plano: borda de pixel com cantos em degrau e linha clara por dentro.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {COR} from './base';
+
+export const Overlay: React.FC = () => {
+  const L = 1080, A = 1920, e = 28;
+  const canto = (x: number, y: number) => <div key={`${x}${y}`} style={{position: 'absolute', left: x, top: y, width: e * 2, height: e * 2, background: COR.noite}} />;
+  return <AbsoluteFill style={{pointerEvents: 'none'}}>
+    <div style={{position: 'absolute', inset: 0, boxShadow: `inset 0 0 0 ${e}px ${COR.noite}, inset 0 0 0 ${e + 8}px ${COR.creme}`}} />
+    {canto(0, 0)}{canto(L - e * 2, 0)}{canto(0, A - e * 2)}{canto(L - e * 2, A - e * 2)}
+    <div style={{position: 'absolute', inset: 0, background: 'repeating-linear-gradient(0deg, rgba(29,43,83,0.06) 0 3px, transparent 3px 6px)'}} />
+  </AbsoluteFill>;
+};

package/kits/pixel/elementos/Som.tsx

@@ -0,0 +1,30 @@
+// 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 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} 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};
+
+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'})} />;
+};