primocode 10.19.0 → 11.1.0

package/kits/contagem/exemplos/roteiro.md

@@ -1,19 +0,0 @@
-# Roteiro de demonstração · "Lançamento Nobre" (loja fictícia, dia 12/03)
-
-Pedido: *"uma contagem de 8 s pro lançamento da loja Nobre: faltam 7 dias, depois 1 dia, as horas, os últimos segundos, e fecha com 'É HOJE 12/03'."*
-
-Sem narração: os cortes seguem a trilha (1 batida = 14,1 quadros).
-
-| # | batida | quadros | na tela | elemento | som |
-|---|---|---|---|---|---|
-| 1 | numero | 0–56 | "FALTAM" + número rolando 09 → 07 + "DIAS" | NumeroRolando | whoosh, ticks, impacto |
-| 2 | dias | 56–104 | "1 DIA", 7 blocos com X, o último vermelho, "É AMANHÃ" | BarraDias | swoosh, pops, impacto |
-| 3 | relogio | 104–156 | cartões 23 : 59 : 57 com os segundos virando | RelogioFlip | swoosh, pop, ticks |
-| 4 | final | 156–202 | anel com 3 → 2 → 1 e "SEGUNDOS" | AnelTempo | whoosh, ticks, pop |
-| 5 | dia | 202–240 | carimbo "É HOJE 12/03" | CarimboData | subida, impacto, confete, assinatura |
-
-Como a IA chegou nisso:
-1. Desceu a escala do tempo a cada cena (dias → dia → horas → segundos) para a urgência subir, e fechou no carimbo.
-2. Deu um herói por cena e pausa de 15–24 quadros depois de cada impacto, com o relógio de fundo andando.
-3. Cortou nas batidas da trilha (0, 56, 104, 156, 202) e alternou a troca de cena (nenhuma, baixo, cortina, círculo, nenhuma).
-4. O `preview.tsx` passa o plano para `Montagem`, que só usa os elementos do kit.

package/kits/contagem/preview.tsx

@@ -1,9 +0,0 @@
-// 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-contagem`.
-import React from 'react';
-import {Montagem, Plano} from './elementos';
-import plano from './exemplos/plano.json';
-
-const Preview: React.FC = () => <Montagem plano={plano as Plano} />;
-
-export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 40, Componente: Preview};

package/kits/contagem/receita.json

@@ -1,21 +0,0 @@
-{
-  "kit": "contagem", "fps": 30, "batida_trilha_quadros": 14.1,
-  "duracao_video_s": [6, 30],
-  "ordem_sugerida": ["numero", "dias", "relogio", "final", "dia"],
-  "batidas": [
-    {"nome": "numero", "obrigatoria": true, "duracao": [48, 60], "elementos": ["NumeroRolando"], "entrada": ["nenhuma"], "sons": ["whoosh-entra", "tick", "impacto"], "nota": "o herói: 'FALTAM 07 DIAS'; rola 2–4 passos de 14 quadros e assenta com impacto."},
-    {"nome": "dias", "obrigatoria": false, "duracao": [42, 54], "elementos": ["BarraDias"], "entrada": ["baixo"], "sons": ["swoosh", "pop-cartao", "pop-palavra", "impacto"], "nota": "a semana em blocos; os que passaram ganham X, sobra o de hoje em vermelho."},
-    {"nome": "relogio", "obrigatoria": false, "duracao": [48, 60], "elementos": ["RelogioFlip"], "entrada": ["cortina"], "sons": ["swoosh", "pop-cartao", "tick"], "nota": "HORAS : MIN : SEG; só os segundos trocam (a cada 9 quadros)."},
-    {"nome": "final", "obrigatoria": false, "duracao": [42, 54], "elementos": ["AnelTempo"], "entrada": ["circulo"], "sons": ["whoosh-entra", "tick", "pop-palavra"], "nota": "3, 2, 1 em anel que esvazia; acelerado (11 quadros por número) no preview, 30 em tempo real."},
-    {"nome": "dia", "obrigatoria": true, "duracao": [36, 54], "elementos": ["CarimboData"], "entrada": ["nenhuma"], "sons": ["subida", "impacto", "confete", "assinatura"], "nota": "sempre a última: carimbo 'É HOJE' + data. Soco de câmera no quadro da batida."}
-  ],
-  "transicoes": [
-    {"nome": "cortina", "quadros": 14, "como": "faixa diagonal que varre da esquerda revelando a cena nova"},
-    {"nome": "baixo", "quadros": 14, "como": "revela de baixo pra cima"},
-    {"nome": "circulo", "quadros": 14, "como": "círculo que cresce de 0 a 150% a partir de (50%, 55%)"},
-    {"nome": "flip", "quadros": 14, "como": "gira em X de −80° a 0° pelo topo"},
-    {"nome": "nenhuma", "quadros": 0, "como": "sem janela; no número e no carimbo"}
-  ],
-  "camera": {"deriva": "sempre", "socos": "cada tique grande, número final, carimbo"},
-  "trilha": {"arquivo": "assets/trilha/pulso-128bpm.mp3", "volume": 0.5, "com_narracao": 0.25}
-}

package/kits/contagem/regras/area-segura.md

@@ -1,16 +0,0 @@
-# Área segura (9:16, 1080×1920)
-
-- Todo texto lido: **y 168–1330**, **x 100–980** (margem ≥ 96 px). Nada encosta na borda. O mostrador e o ponteiro sangram (são fundo).
-- Respiro (regra do dono): 35–45% de cada quadro vazio; 1 herói por plano.
-
-| elemento | y de referência (centro) |
-|---|---|
-| número rolando (760 px) | 780 (janela de 670 px: 445–1115) |
-| "FALTAM" | ≈ 335 (topo) |
-| "DIAS" | ≈ 1230 (topo) |
-| barra de dias (blocos de 380 px) | 800; título ≈ 360 (topo); rótulo ≈ 1040 |
-| relógio de cartões (270 × 380) | 760; rótulos ≈ 970 |
-| anel (640 px) | 740; rótulo ≈ 1110 |
-| carimbo (880 × 720) | 780 |
-
-- Carimbo no auge (3,4×) pode passar da área segura por 2–3 quadros; ao pousar, cabe com 100 px de margem.

package/kits/contagem/regras/cor.md

@@ -1,14 +0,0 @@
-# Cor
-
-| token | hex | uso |
-|---|---|---|
-| `osso` | `#F2F0EA` | chão, dígitos dos cartões |
-| `tinta` | `#0E0E0C` | números, cartões, blocos riscados, marcas do relógio (9–16%) |
-| `vermelho` | `#E5251B` | a única cor viva: rótulos, X, anel, carimbo, ponteiro (30%) |
-| `cinza` | `#CFCBC0` | blocos dos dias que faltam, trilho do anel |
-| `branco` | `#FFFFFF` | reserva |
-
-- Mostrador: 60 marcas, as de hora com 12 px e 16% de opacidade, as de minuto com 5 px e 9%; giro 0,12°/quadro; centro (540, 980). Ponteiro vermelho a 0,5 volta por segundo.
-- Carimbo usa `mix-blend-mode: multiply` (a tinta sobe sobre o relógio do fundo).
-- Sombra dos cartões: `0 40px 60px rgba(14,14,12,.3)`.
-- O cliente pode trocar o vermelho pela cor da marca e o osso por qualquer neutro claro; manter `tinta`. Proibido: degradê, fundo escuro.

package/kits/contagem/regras/movimento.md

@@ -1,23 +0,0 @@
-# Movimento
-
-Curvas: `e5(t) = 1 − (1 − t)^5` e `ov(t)` = pouso com overshoot (`1 + 3,2x³ + 2,2x²`). **Toda entrada usa `ov`.**
-
-| movimento | duração | valores |
-|---|---|---|
-| número entra | 16 quadros | sobe 1000 px com overshoot |
-| odômetro | 10 quadros por passo, 14 entre passos | cada dígito é uma fita; a dezena rola quando a unidade passa de 9 |
-| pulso do número | decai em 4 quadros a cada passo | +5% de escala |
-| bloco de dia nasce | 14 quadros, 2 de intervalo | sobe 900 px |
-| X do dia | 8 quadros, 4–5 de intervalo | traço se desenha; bloco vira preto |
-| bloco de hoje | 8 quadros | vira vermelho e pulsa ±3% |
-| cartão entra | 16 quadros, 4 de intervalo | sobe 1000 px, gira ±10° → 0 |
-| virada do cartão | 8 quadros | metade de cima gira 0 → −90°, a de baixo 90° → 0 (perspectiva 900) |
-| anel | 14 quadros | gira −120° → 0, escala 0 → 1; varredura esvazia em 10–11 quadros por número |
-| número do anel | 6 quadros | escala 0,7 → 1 com overshoot, sobe 30 px |
-| carimbo | 7 quadros | escala 3,4 → 1, gira +14° → −7°; depois tremor ±14 px decaindo em 4 quadros; 10 respingos em 8 quadros |
-| troca de cena | 14 quadros | `cortina` diagonal, `baixo`, `circulo`, `flip` |
-| mostrador | contínuo | giro 0,12°/quadro; ponteiro 180°/s |
-| câmera (sempre) | contínuo | zoom 1,02 ± 0,012 (+0,00012/quadro), deriva ±8/±8 px, giro ±0,23° |
-| soco de câmera | decai em ~7 quadros | +0,04 de zoom, tremor 12 px |
-
-- **Pausa**: depois do impacto do carimbo ou do número final, 15–24 quadros sem evento novo.

package/kits/contagem/regras/ritmo.md

@@ -1,15 +0,0 @@
-# Ritmo
-
-- 128 bpm: **1 batida = 14,1 quadros** (0,47 s). Passo do odômetro = 1 batida (14 quadros); número do anel = 11 quadros.
-- Vídeo de 8 s = 240 quadros = 5 cenas de 38–56 quadros.
-
-| batida | duração s | quadros |
-|---|---|---|
-| numero | 1,6–2,0 | 48–60 |
-| dias | 1,4–1,8 | 42–54 |
-| relogio | 1,6–2,0 | 48–60 |
-| final | 1,4–1,8 | 42–54 |
-| dia | 1,2–1,8 | 36–54 |
-
-- Em cada cena: entrada (≤ 18 quadros) → eventos de tique → impacto → **pausa de 15–24 quadros** → saída.
-- Leitura mínima: cada número fica ≥ 9 quadros inteiro na tela; o carimbo fica ≥ 24 quadros parado depois de bater.

package/kits/contagem/regras/som.md

@@ -1,21 +0,0 @@
-# Som
-
-- Trilha: `assets/trilha/pulso-128bpm.mp3` (8,6 s, 128 bpm, tech-bright, tom A), volume **0,5**, fade nos últimos **20 quadros**. Vídeo maior: gere outra (`music make --preset tech-bright --bpm 128 --key A --force`), sem loop.
-- Com narração: trilha a **0,25** e efeitos a 70%.
-
-| som | volume | quando |
-|---|---|---|
-| `tick` | 0,6 | cada passo do odômetro, cada virada de cartão, cada número do anel (alternar com `pop-palavra`) |
-| `impacto` | 1,0 | número assenta, X final, carimbo bate |
-| `pop-cartao` | 0,9 | blocos e cartões que pousam |
-| `pop-palavra` | 0,9 | rótulo, número do anel |
-| `swoosh` | 0,9 | cena que entra de lado |
-| `whoosh-entra` | 0,85 | cena sem lado (−1 quadro) |
-| `subida` | 0,7 | 0,3 s antes do carimbo |
-| `confete` | 0,7 | só no carimbo |
-| `assinatura` | 0,85 | 4 quadros depois do carimbo |
-| `clique` | 0,8 | opcional |
-| `whoosh-sai` | 0,7 | opcional |
-
-- No máximo **3 sons por segundo** (a contagem de tique pode chegar a 4 num trecho de 1 s de relógio); nunca o mesmo arquivo 3 vezes seguidas.
-- Alvo −14 LUFS, pico −1,5 dBTP.

package/kits/contagem/regras/tipografia.md

@@ -1,16 +0,0 @@
-# Tipografia
-
-- **Big Shoulders Display 700–900** (números, títulos) · **Space Mono 700** (rótulos espaçados e a data do carimbo). Registradas como `"CT Big Shoulders"` e `"CT Space Mono"`.
-- Big Shoulders em caixa alta, `line-height` 1–1,05. Rótulos em Space Mono com tracking 0,3–0,4 em.
-
-| papel | fonte | tamanho px | máx. caracteres |
-|---|---|---|---|
-| número rolando | Big Shoulders 900 | 760 (digito 380 px de largura) | 2 |
-| "FALTAM" (topo) | Space Mono 700, 0,4 em | 64 | 8 |
-| "DIAS" (base) | Big Shoulders 900 | 200 | 8 |
-| título da barra de dias | Big Shoulders 900 | 230 | 7 |
-| dígitos do relógio | Big Shoulders 900 | 270 (cartão 270 × 380) | 2 |
-| rótulo do cartão / do anel | Space Mono 700, 0,3 em | 40–56 | 8 |
-| número do anel | Big Shoulders 900 | 440 | 2 |
-| carimbo | Big Shoulders 900 | 400 (encolhe até 700 px) | 7 |
-| data do carimbo | Space Mono 700, 0,1 em | 110 | 6 |

package/kits/convite-evento/assets/ASSETS.md

@@ -1,19 +0,0 @@
-# Assets do kit convite-evento
-
-| arquivo | o que é | origem | licença |
-|---|---|---|---|
-| `fontes/unbounded.woff2` | Unbounded variável 500–900, subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Unbounded:wght@500..900`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-Unbounded.txt` |
-| `fontes/instrumentserif-i.woff2` | Instrument Serif itálico (400), subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Instrument+Serif:ital@1`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-InstrumentSerif.txt` |
-| `sons/whoosh-entra.mp3` | whoosh de entrada | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/whoosh-sai.mp3` | whoosh de saída | sintetizado: MotionCraft `sfx make`, tipo `whoosh_out`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/swoosh.mp3` | swoosh lateral | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/pop-palavra.mp3` | pop curto de palavra | sintetizado: MotionCraft `sfx make`, tipo `word_pop`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/pop-cartao.mp3` | pop de cartão/selo que pousa | sintetizado: MotionCraft `sfx make`, tipo `icon_pop`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/clique.mp3` | clique de botão | sintetizado: MotionCraft `sfx make`, tipo `button`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/impacto.mp3` | impacto grave | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/subida.mp3` | riser de 1,2 s | sintetizado: MotionCraft `sfx make`, tipo `riser`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/assinatura.mp3` | acorde da marca | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `sons/confete.mp3` | estouro de confete no clímax | sintetizado: MotionCraft `sfx make`, tipo `confetti`, pacote `soft-pop` | sem samples; síntese própria, uso livre (CC0) |
-| `trilha/festa-112bpm.mp3` | 8.6 s de trilha, preset warm-major, 112 bpm, tom D (energia alta) | MotionCraft `music make --preset warm-major --bpm 112 --key D --duration 10 --force`, cortada em 8,6 s com fade | sem samples; síntese própria (CC0). MotionCraft é MIT |
-
-A demo não usa foto nem arquivo externo: tudo é desenhado pelos elementos do kit.

package/kits/convite-evento/elementos/BotaoInscricao.tsx

@@ -1,36 +0,0 @@
-// BotaoInscricao: o botão da chamada final, pílula coral de 880 px com texto grande e seta, que estoura, pulsa e "aperta"
-// no quadro `clica`, soltando um anel. Embaixo, o endereço do evento em lima. Herói do fechamento.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE, caber, e5, ov, seg} from './base';
-
-export type BotaoInscricaoProps = {
-  texto: string;
-  endereco: string;
-  inicio?: number;
-  /** quadro (na cena) do clique */
-  clica?: number;
-  /** centro vertical do botão, px */
-  y: number;
-  fim?: number;
-};
-
-export const BotaoInscricao: React.FC<BotaoInscricaoProps> = ({texto, endereco, inicio = 0, clica, y, fim = 1e9}) => {
-  const f = useCurrentFrame();
-  if (f < inicio - 1 || f > fim + 12) return null;
-  const quando = clica ?? inicio + 22;
-  const t = ov(seg(f, inicio, inicio + 18)), sai = e5(seg(f, fim, fim + 10));
-  const aperta = f >= quando && f < quando + 8 ? 1 - Math.abs(f - quando - 3) / 5 : 0;
-  const anel = seg(f, quando, quando + 18);
-  const tam = caber(texto, 66, 600, 800, -0.02, 'CE Unbounded');
-  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 140}px)`}}>
-    {f >= quando && <div style={{position: 'absolute', left: 100 - anel * 80, top: y - 100 - anel * 80, width: 880 + anel * 160, height: 200 + anel * 160, borderRadius: 100 + anel * 80, border: `${10 * (1 - anel)}px solid ${COR.lima}`, boxSizing: 'border-box', opacity: 1 - anel}} />}
-    <div style={{position: 'absolute', left: 100, top: y - 100, width: 880, height: 200, borderRadius: 100, background: COR.coral, boxShadow: '0 28px 0 #B8442A, 0 60px 60px rgba(0,0,0,.35)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 40px 0 68px', boxSizing: 'border-box', transform: `translateY(${(1 - t) * 900 + aperta * 14}px) scale(${(0.85 + 0.15 * t) * (1 - aperta * 0.03) * (1 + 0.012 * Math.sin(f / 5))})`}}>
-      <div style={{fontFamily: FONTE, fontWeight: 800, fontSize: tam, color: COR.creme, letterSpacing: '-0.02em', whiteSpace: 'nowrap'}}>{texto}</div>
-      <div style={{width: 120, height: 120, borderRadius: 60, background: COR.creme, display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none', transform: `translateX(${Math.sin(f / 5) * 6}px)`}}>
-        <svg width={64} height={50} viewBox="0 0 64 50"><path d="M4 25 H54 M34 5 L56 25 L34 45" stroke={COR.coral} strokeWidth={9} fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
-      </div>
-    </div>
-    <div style={{position: 'absolute', left: 0, width: 1080, top: y + 190, textAlign: 'center', fontFamily: FONTE, fontWeight: 600, fontSize: 52, letterSpacing: '0.04em', color: COR.lima, opacity: seg(f, inicio + 14, inicio + 26), transform: `translateY(${(1 - ov(seg(f, inicio + 14, inicio + 30))) * 50}px)`}}>{endereco}</div>
-  </div>;
-};

package/kits/convite-evento/elementos/Cena.tsx

@@ -1,39 +0,0 @@
-// Cena: janela de tempo de um plano (troca "revelar"). Dentro dela, useCurrentFrame() começa em 0.
-// A saída da cena cruza 14 quadros com a entrada da próxima.
-import React, {createContext, useContext} from 'react';
-import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
-import {e5, seg} from './base';
-
-export type Entrada = 'cortina' | 'baixo' | 'circulo' | 'flip' | 'nenhuma';
-export const SOBREPOE = 14; // quadros em que a saída desta cena cruza a entrada da próxima
-
-const CenaCtx = createContext({duracao: 60});
-/** duração da cena atual em quadros (sem a sobreposição) */
-export const useDuracaoCena = () => useContext(CenaCtx).duracao;
-
-export type CenaProps = {de: number; ate: number; entrada?: Entrada; ultima?: boolean; children: React.ReactNode};
-
-const estilo = (f: number, duracao: number, entrada: Entrada, ultima: boolean): React.CSSProperties => {
-  const p = entrada === 'nenhuma' ? 1 : e5(seg(f, 0, 14));
-  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
-  const base = {transform: `scale(${1 - xo * 0.05})`, opacity: 1 - xo * 0.6} as React.CSSProperties;
-  if (p >= 1) return base;
-  if (entrada === 'cortina') return {...base, clipPath: `polygon(0 0, ${p * 140 - 20}% 0, ${p * 140 - 40}% 100%, 0 100%)`};
-  if (entrada === 'baixo') return {...base, clipPath: `inset(${(1 - p) * 100}% 0 0 0)`};
-  if (entrada === 'circulo') return {...base, clipPath: `circle(${p * 150}% at 50% 55%)`};
-  return {...base, transform: `perspective(1800px) rotateX(${(1 - p) * -80}deg) scale(${1 - xo * 0.05})`, transformOrigin: '50% 0%', opacity: 0.3 + 0.7 * p};
-};
-
-const Janela: React.FC<{duracao: number; entrada: Entrada; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, ultima, children}) => {
-  const f = useCurrentFrame();
-  return <AbsoluteFill style={estilo(f, duracao, entrada, ultima)}>{children}</AbsoluteFill>;
-};
-
-export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'cortina', 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/convite-evento/elementos/DataGigante.tsx

@@ -1,37 +0,0 @@
-// DataGigante: o dia em número enorme (Unbounded 900, lima) que gira em X ao pousar, o mês em itálico serifado por baixo
-// e uma linha de apoio ("SÁBADO · 14H"). É o herói da cena de data: o número ocupa mais de 40% da altura útil.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE, LARGURA, SERIFA, caber, e5, ov, seg} from './base';
-
-export type DataGiganteProps = {
-  /** o dia, ex.: "12" */
-  dia: string;
-  /** o mês por extenso, ex.: "março" */
-  mes: string;
-  /** linha de apoio, ex.: "SÁBADO · 14H" */
-  apoio: string;
-  inicio?: number;
-  /** centro vertical do número, px */
-  y: number;
-  tamanho?: number;
-  fim?: number;
-};
-
-export const DataGigante: React.FC<DataGiganteProps> = ({dia, mes, apoio, inicio = 0, y, tamanho = 640, fim = 1e9}) => {
-  const f = useCurrentFrame();
-  if (f < inicio - 1 || f > fim + 12) return null;
-  const tam = caber(dia, tamanho, 860, 900, -0.05, 'CE Unbounded'), sai = e5(seg(f, fim, fim + 10));
-  const letras = dia.split('');
-  const mesT = ov(seg(f, inicio + 12, inicio + 28)), apoioT = ov(seg(f, inicio + 20, inicio + 34));
-  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 160}px)`}}>
-    <div style={{position: 'absolute', left: 0, width: LARGURA, top: y - tam * 0.58, height: tam * 1.16, display: 'flex', justifyContent: 'center', perspective: 1600}}>
-      {letras.map((c, i) => {
-        const t = ov(seg(f, inicio + i * 5, inicio + i * 5 + 18));
-        return <div key={i} style={{fontFamily: FONTE, fontWeight: 900, fontSize: tam, lineHeight: `${tam * 1.16}px`, color: COR.lima, letterSpacing: '-0.05em', transform: `rotateX(${(1 - t) * -95}deg) translateY(${(1 - t) * -200}px) scale(${0.8 + 0.2 * t})`, transformOrigin: '50% 100%', opacity: Math.min(1, t * 3), textShadow: `0 ${18 * t}px 0 rgba(0,0,0,0.22)`}}>{c}</div>;
-      })}
-    </div>
-    <div style={{position: 'absolute', left: 0, width: LARGURA, top: y + tam * 0.5 + 10, textAlign: 'center', fontFamily: SERIFA, fontStyle: 'italic', fontWeight: 400, fontSize: 210, lineHeight: 1.05, color: COR.creme, transform: `translateY(${(1 - mesT) * 120}px)`, opacity: Math.min(1, mesT * 2)}}>{mes}</div>
-    <div style={{position: 'absolute', left: 0, width: LARGURA, top: y + tam * 0.5 + 270, textAlign: 'center', fontFamily: FONTE, fontWeight: 600, fontSize: 52, letterSpacing: '0.18em', color: COR.creme, opacity: Math.min(1, apoioT * 2) * 0.85, transform: `translateY(${(1 - apoioT) * 60}px)`}}>{apoio}</div>
-  </div>;
-};

package/kits/convite-evento/elementos/Fundo.tsx

@@ -1,30 +0,0 @@
-// Fundo: verde-floresta com raios de sol (sunburst) saindo de baixo, girando devagar numa tonalidade um pouco mais clara.
-// Fica FORA da Camera; quem se mexe é o que está em cima.
-import React from 'react';
-import {AbsoluteFill, useCurrentFrame} from 'remotion';
-import {COR} from './base';
-
-export type FundoProps = {
-  /** cor do chão */
-  cor?: string;
-  /** cor dos raios */
-  raios?: string;
-  /** velocidade do giro (1 = a do preview) */
-  velocidade?: number;
-};
-
-export const Fundo: React.FC<FundoProps> = ({cor = COR.floresta, raios = COR.florestaClara, velocidade = 1}) => {
-  const f = useCurrentFrame() * velocidade;
-  const n = 14, fatia = 360 / n;
-  return <AbsoluteFill style={{background: cor}}>
-    <svg width={1080} height={1920} style={{position: 'absolute', inset: 0}}>
-      <g transform={`translate(540 1500) rotate(${f * 0.22})`}>
-        {Array.from({length: n}, (_, i) => {
-          const a0 = (i * fatia * Math.PI) / 180, a1 = ((i * fatia + fatia / 2) * Math.PI) / 180, R = 2600;
-          return <path key={i} d={`M0 0 L${Math.cos(a0) * R} ${Math.sin(a0) * R} L${Math.cos(a1) * R} ${Math.sin(a1) * R} Z`} fill={raios} />;
-        })}
-      </g>
-    </svg>
-    <AbsoluteFill style={{background: `radial-gradient(70% 36% at 50% 82%, rgba(232,255,90,0.16), transparent 70%), linear-gradient(180deg, rgba(12,59,44,0.55), transparent 40%)`}} />
-  </AbsoluteFill>;
-};

package/kits/convite-evento/elementos/IngressoBilhete.tsx

@@ -1,40 +0,0 @@
-// IngressoBilhete: o ingresso de papel creme, com entalhes nas laterais, linha tracejada e canhoto com código de barras.
-// Entra de baixo girando em X (3D), fica inclinado e boiando. Nome do evento, lugar e horário vêm por props.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE, SERIFA, caber, e5, ov, seg} from './base';
-
-export type IngressoBilheteProps = {
-  nome: string;
-  lugar: string;
-  /** texto do canhoto, ex.: "SÁB 12/03 · 14H–22H" */
-  quando: string;
-  rotulo?: string;
-  inicio?: number;
-  /** centro vertical, px */
-  y: number;
-  fim?: number;
-};
-
-const L = 880, A = 700, CORTE = 470, R = 44;
-const caminho = `M0 0 H${L} V${CORTE - R} A${R} ${R} 0 0 0 ${L} ${CORTE + R} V${A} H0 V${CORTE + R} A${R} ${R} 0 0 0 0 ${CORTE - R} Z`;
-
-export const IngressoBilhete: React.FC<IngressoBilheteProps> = ({nome, lugar, quando, rotulo = 'INGRESSO', inicio = 0, y, fim = 1e9}) => {
-  const f = useCurrentFrame();
-  if (f < inicio - 1 || f > fim + 12) return null;
-  const t = ov(seg(f, inicio, inicio + 20)), sai = e5(seg(f, fim, fim + 10));
-  const tamNome = caber(nome.toUpperCase(), 108, 760, 900, -0.03, 'CE Unbounded');
-  const barras = Array.from({length: 38}, (_, i) => 3 + ((i * 7 + 3) % 5) * 3);
-  return <div style={{position: 'absolute', left: 100, top: y - A / 2, width: L, height: A, perspective: 1800, transform: `translateY(${-sai * 1000}px)`}}>
-    <div style={{width: L, height: A, transform: `translateY(${(1 - t) * 1200}px) rotateX(${(1 - t) * 70}deg) rotateZ(${-5 + Math.sin(f / 22) * 1.2}deg) rotateY(${Math.sin(f / 30) * 4}deg)`, filter: 'drop-shadow(0 50px 50px rgba(0,0,0,0.38))', position: 'relative'}}>
-      <svg width={L} height={A} style={{position: 'absolute', inset: 0}}><path d={caminho} fill={COR.creme} /><line x1={60} y1={CORTE} x2={L - 60} y2={CORTE} stroke={COR.floresta} strokeWidth={5} strokeDasharray="4 16" strokeLinecap="round" opacity={0.5} /></svg>
-      <div style={{position: 'absolute', left: 64, top: 52, fontFamily: FONTE, fontWeight: 600, fontSize: 30, letterSpacing: '0.3em', color: COR.coral}}>{rotulo}</div>
-      <div style={{position: 'absolute', left: 64, top: 112, width: 760, fontFamily: FONTE, fontWeight: 900, fontSize: tamNome, lineHeight: 1.08, color: COR.floresta, letterSpacing: '-0.03em', textTransform: 'uppercase', whiteSpace: 'nowrap'}}>{nome}</div>
-      <div style={{position: 'absolute', left: 64, top: 112 + tamNome * 1.2 + 24, fontFamily: SERIFA, fontStyle: 'italic', fontSize: 84, lineHeight: 1.05, color: COR.floresta}}>{lugar}</div>
-      <div style={{position: 'absolute', left: 64, top: CORTE + 52, fontFamily: FONTE, fontWeight: 800, fontSize: 40, letterSpacing: '0.04em', color: COR.floresta}}>{quando}</div>
-      <div style={{position: 'absolute', left: 64, top: CORTE + 120, display: 'flex', alignItems: 'flex-end', gap: 6, height: 70}}>
-        {barras.map((w, i) => <div key={i} style={{width: w, height: 70, background: COR.floresta}} />)}
-      </div>
-    </div>
-  </div>;
-};

package/kits/convite-evento/elementos/LugarGigante.tsx

@@ -1,38 +0,0 @@
-// LugarGigante: o lugar como herói. Um pino coral cai de cima e quica (overshoot), o nome do lugar em Unbounded 900 lima
-// aparece em até 2 linhas e o endereço em itálico serifado fecha. Poucas peças, muito ar.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE, LARGURA, SERIFA, caber, e5, ov, seg, textoLimpo} from './base';
-
-export type LugarGiganteProps = {
-  linhas: string[];
-  endereco: string;
-  inicio?: number;
-  /** centro vertical do nome, px */
-  y: number;
-  tamanho?: number;
-  fim?: number;
-};
-
-export const LugarGigante: React.FC<LugarGiganteProps> = ({linhas, endereco, inicio = 0, y, tamanho = 170, fim = 1e9}) => {
-  const f = useCurrentFrame();
-  if (f < inicio - 1 || f > fim + 12) return null;
-  const tam = Math.min(...linhas.map((l) => caber(textoLimpo(l).toUpperCase(), tamanho, 880, 900, -0.03, 'CE Unbounded')));
-  const alt = tam * 1.12, topo = y - (linhas.length * alt) / 2, sai = e5(seg(f, fim, fim + 10));
-  const pino = ov(seg(f, inicio, inicio + 18));
-  const sombra = e5(seg(f, inicio + 8, inicio + 18));
-  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 140}px)`}}>
-    <div style={{position: 'absolute', left: 540 - 24 * sombra * 3, top: topo - 120, width: 144 * sombra, height: 24, borderRadius: 12, background: 'rgba(0,0,0,0.25)'}} />
-    <svg width={190} height={250} viewBox="0 0 76 100" style={{position: 'absolute', left: 540 - 95, top: topo - 270 + (1 - pino) * -900}}>
-      <path d="M38 98 C 38 98, 4 58, 4 36 A 34 34 0 0 1 72 36 C 72 58, 38 98, 38 98 Z" fill={COR.coral} />
-      <circle cx={38} cy={36} r={14} fill={COR.creme} />
-    </svg>
-    {linhas.map((l, i) => {
-      const p = ov(seg(f, inicio + 12 + i * 6, inicio + 28 + i * 6));
-      return <div key={i} style={{position: 'absolute', left: 0, width: LARGURA, top: topo + i * alt, height: alt, overflow: 'hidden', textAlign: 'center'}}>
-        <div style={{transform: `translateY(${(1 - p) * 115}%)`, fontFamily: FONTE, fontWeight: 900, fontSize: tam, lineHeight: `${alt}px`, textTransform: 'uppercase', color: COR.lima, letterSpacing: '-0.03em', whiteSpace: 'nowrap'}}>{l}</div>
-      </div>;
-    })}
-    <div style={{position: 'absolute', left: 0, width: LARGURA, top: topo + linhas.length * alt + 30, textAlign: 'center', fontFamily: SERIFA, fontStyle: 'italic', fontSize: 76, color: COR.creme, opacity: seg(f, inicio + 26, inicio + 38), transform: `translateY(${(1 - ov(seg(f, inicio + 26, inicio + 42))) * 60}px)`}}>{endereco}</div>
-  </div>;
-};

package/kits/convite-evento/elementos/Montagem.tsx

@@ -1,59 +0,0 @@
-// Montagem: transforma um plano de cenas (JSON escrito pela IA) em vídeo, usando só os elementos do kit.
-// Ela NÃO decide nada de estética: só põe Fundo + Camera + Cenas + sons onde o plano mandou.
-// Formato do plano: ver exemplos/plano.json e KITS.md (seção "plano de cenas").
-import React from 'react';
-import {AbsoluteFill} from 'remotion';
-import {COR} from './base';
-import {Fundo} from './Fundo';
-import {Camera} from './Camera';
-import {Cena, Entrada} from './Cena';
-import {Efeito, NomeSom, Trilha} from './Som';
-import {TituloEvento} from './TituloEvento';
-import {DataGigante} from './DataGigante';
-import {LugarGigante} from './LugarGigante';
-import {IngressoBilhete} from './IngressoBilhete';
-import {SeloRotativo} from './SeloRotativo';
-import {BotaoInscricao} from './BotaoInscricao';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const ELEMENTOS: Record<string, React.FC<any>> = {
-  TituloEvento, DataGigante, LugarGigante, IngressoBilhete, SeloRotativo, BotaoInscricao,
-};
-
-export type Camada = {elemento: string; props: Record<string, unknown>};
-export type CenaPlano = {
-  batida: string; de: number; ate: number; entrada?: Entrada;
-  camadas: Camada[];
-  /** sons relativos ao início da cena */
-  sons?: {som: NomeSom; em: number; volume?: number}[];
-  /** socos de câmera extras, relativos ao início da cena (o início já é um soco) */
-  socos?: number[];
-};
-export type Plano = {kit: string; duracao: number; fundo?: Record<string, unknown>; trilha?: {volume?: number} | false; cenas: CenaPlano[]};
-
-/** troca "fotos/foto-01.jpg" pela URL importada, em qualquer prop (texto, lista ou objeto) */
-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: COR.floresta}}>
-    <Fundo {...(plano.fundo as object)} />
-    <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(`convite-evento: elemento "${k.elemento}" não existe no kit`);
-          return <El key={j} {...(resolver(k.props, arquivos) as object)} />;
-        })}
-      </Cena>)}
-    </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/convite-evento/elementos/SeloRotativo.tsx

@@ -1,32 +0,0 @@
-// SeloRotativo: adesivo redondo lima com o texto girando em volta e uma estrela no meio. Estoura com overshoot e gira sem
-// parar. É o único apoio permitido ao lado de um herói (use tamanho 280–340).
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE, e5, ov, pontosEstrelaSelo, seg} from './base';
-
-export type SeloRotativoProps = {
-  /** texto que roda em volta (repete sozinho) */
-  texto: string;
-  inicio?: number;
-  /** centro, px */
-  x?: number;
-  y?: number;
-  tamanho?: number;
-  fim?: number;
-};
-
-export const SeloRotativo: React.FC<SeloRotativoProps> = ({texto, inicio = 0, x = 820, y = 340, tamanho = 300, fim = 1e9}) => {
-  const f = useCurrentFrame();
-  if (f < inicio - 1 || f > fim + 12) return null;
-  const t = ov(seg(f, inicio, inicio + 16)), sai = e5(seg(f, fim, fim + 10));
-  const unidade = `${texto.toUpperCase()} • `;
-  const anel = unidade.repeat(Math.max(1, Math.round(30 / unidade.length)));
-  return <div style={{position: 'absolute', left: x - tamanho / 2, top: y - tamanho / 2, width: tamanho, height: tamanho, transform: `scale(${Math.max(0, t) * (1 - sai)}) rotate(${(1 - t) * 160}deg)`}}>
-    <svg width={tamanho} height={tamanho} viewBox="0 0 300 300">
-      <circle cx={150} cy={150} r={146} fill={COR.lima} />
-      <defs><path id="ce-anel" d="M 150 150 m -112 0 a 112 112 0 1 1 224 0 a 112 112 0 1 1 -224 0" /></defs>
-      <g transform={`rotate(${f * 2.4} 150 150)`}><text fontFamily={FONTE} fontWeight={700} fontSize={25} fill={COR.floresta}><textPath href="#ce-anel" textLength={700} lengthAdjust="spacing">{anel}</textPath></text></g>
-      <g transform={`translate(150 150) rotate(${-f * 1.2})`}><polygon points={pontosEstrelaSelo(52)} fill={COR.floresta} /></g>
-    </svg>
-  </div>;
-};

package/kits/convite-evento/elementos/Som.tsx

@@ -1,40 +0,0 @@
-// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`, pacote soft-pop); trilha de 8.6 s
-// (MotionCraft `music make`, preset warm-major, 112 bpm, tom D (energia alta)). Ver assets/ASSETS.md.
-// Regra: um som por movimento que importa, 1 a 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 confete from '../assets/sons/confete.mp3';
-import trilha from '../assets/trilha/festa-112bpm.mp3';
-
-export const SONS = {
-  'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao, clique, impacto, subida, assinatura, confete,
-} as const;
-export type NomeSom = keyof typeof SONS;
-
-// volume de cada efeito (0..1) já calibrado contra a trilha a 0.5
-const VOLUME: Record<NomeSom, number> = {
-  'whoosh-entra': 0.85, 'whoosh-sai': 0.7, swoosh: 0.9, 'pop-palavra': 0.9, 'pop-cartao': 0.9, clique: 0.8, impacto: 0.9, subida: 0.7, assinatura: 0.85, confete: 0.7,
-};
-
-export type EfeitoProps = {som: NomeSom; em: number; volume?: number};
-/** um efeito no quadro `em` (relativo à Cena se estiver dentro de uma, absoluto no resto) */
-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; /** quadros de fade no fim */ saida?: number};
-/** a trilha do kit, do quadro 0 ao fim, com fade de saída */
-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/convite-evento/elementos/TituloEvento.tsx

@@ -1,33 +0,0 @@
-// TituloEvento: o nome do evento em Unbounded 900 gigante, caixa alta, uma linha por vez subindo de dentro de uma máscara
-// com overshoot e leve giro. `*palavra*` fica lima; o resto, creme. Herói do gancho.
-import React from 'react';
-import {useCurrentFrame} from 'remotion';
-import {COR, FONTE, LARGURA, caber, e5, ov, partes, seg, textoLimpo} from './base';
-
-export type TituloEventoProps = {
-  linhas: string[];
-  inicio?: number;
-  /** quadros entre linhas */
-  intervalo?: number;
-  /** centro vertical do bloco, px */
-  y: number;
-  tamanho?: number;
-  fim?: number;
-};
-
-export const TituloEvento: React.FC<TituloEventoProps> = ({linhas, inicio = 0, intervalo = 6, y, tamanho = 200, fim = 1e9}) => {
-  const f = useCurrentFrame();
-  if (f < inicio - 1 || f > fim + 12) return null;
-  const tam = Math.min(...linhas.map((l) => caber(textoLimpo(l).toUpperCase(), tamanho, 880, 900, -0.03, 'CE Unbounded')));
-  const alt = tam * 1.12, topo = y - (linhas.length * alt) / 2, sai = e5(seg(f, fim, fim + 10));
-  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 140}px)`}}>
-    {linhas.map((l, i) => {
-      const p = ov(seg(f, inicio + i * intervalo, inicio + i * intervalo + 16));
-      return <div key={i} style={{position: 'absolute', left: 0, width: LARGURA, top: topo + i * alt, height: alt, overflow: 'hidden', textAlign: 'center'}}>
-        <div style={{transform: `translateY(${(1 - p) * 115}%) rotate(${(1 - p) * (i % 2 ? 5 : -5)}deg)`, fontFamily: FONTE, fontWeight: 900, fontSize: tam, lineHeight: `${alt}px`, textTransform: 'uppercase', letterSpacing: '-0.03em', whiteSpace: 'nowrap'}}>
-          {partes(l).map((s, k) => <span key={k} style={{color: s.d ? COR.lima : COR.creme}}>{s.t}</span>)}
-        </div>
-      </div>;
-    })}
-  </div>;
-};