primocode 10.17.0 → 10.19.0

package/kits/antes-depois/SKILL.md

@@ -0,0 +1,57 @@
+---
+slug: antes-depois
+nome: Antes e depois
+descricao: tela partida ao meio, concreto cinza de um lado e limão do outro, divisor preto que varre a imagem, adesivos e sombra dura
+familia: Redes sociais
+versao: 2
+quando:
+  - "vídeo de antes e depois de reforma, tratamento, edição ou resultado"
+  - "comparar a situação antiga com a nova, com número de ganho"
+  - "reels mostrando a transformação de um cliente"
+  - "mostrar o que mudou depois de usar meu produto ou serviço"
+nao_serve:
+  - "história calma ou emocional, tom de luxo (use luxo ou minimal)"
+  - "vídeo sem nenhum 'depois' claro (o estilo vive do contraste entre dois estados)"
+---
+
+# Antes e depois
+
+O vídeo inteiro é uma comparação. O chão é **partido ao meio**: **concreto cinza** (`#8F8C86`) de um lado e
+**limão elétrico** (`#C8FF2E`) do outro, com a emenda preta balançando no meio, igual em todas as cenas.
+O herói é a **TelaDividida**: a mesma imagem duas vezes, a "antes" fosca, cinza e desfocada, a "depois" viva,
+separadas por uma **barra preta com puxador** que varre de um lado a outro. Tudo tem **borda preta de 8–10 px e
+sombra dura**; a letra é **Archivo Black** em caixa alta. O ganho vira número gigante (−87%), barras de tamanhos
+diferentes ou uma lista de linhas partidas (cinza riscado | limão com check). O som é de papel cortado e clique.
+
+## Como montar um vídeo com este kit
+
+1. **Ache o par**: a imagem do antes e do depois (ou a mesma foto: o filtro faz o "antes"), 1 número de ganho, 2 valores para comparar e 3 mudanças em 2–3 palavras.
+2. **Escolha as batidas** em `receita.json` (comparacao → resultado → medidor → lista → cta). Cada cena dura 42–52 quadros.
+3. **Escreva o plano** (`plano.json`, formato de `exemplos/plano.json`). Em `TelaDividida`, `pos` guarda as chaves do divisor: [quadro, 0..1].
+4. **Renderize** com `<Montagem plano={...} arquivos={...} />`.
+5. **Confira** contra `regras/`: o divisor passa pela imagem inteira, os dois estados se leem, texto em y 168–1330, nada parado.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| `TelaDividida` | a janela da comparação: divisor branco com puxador que parece arrastável (curva em S, cresce 8% ao andar); rótulos ANTES/DEPOIS dentro de cada metade, recortados com ela e só visíveis inteiros | comparacao, cta |
+| `RotuloAntesDepois` | adesivo solto "ANTES"/"DEPOIS" pra quando a comparação NÃO é a TelaDividida (ex.: duas fotos lado a lado). Nunca em cima da TelaDividida | comparacao |
+| `NumeroDelta` | bloco limão com o ganho em número gigante que conta e seta | resultado |
+| `BarraMedidor` | duas barras de largura total (cinza comprida, limão curta) com valor contando | medidor |
+| `ListaMudancas` | linhas partidas: "antes" riscado à esquerda, "depois" com check à direita | lista |
+| `FaixaMarquee` | faixa inclinada contida (margem 100 px) com o texto correndo | cta |
+| `Fundo`, `Camera`, `Cena` | tela partida ao meio, câmera, troca por revelação | todas |
+| `Efeito`, `Trilha` | sons e trilha do kit | todas |
+
+## Proibido
+
+- Duas cenas na tela ao mesmo tempo: a cena sai sozinha nos últimos 7 quadros e a próxima entra limpa (v2).
+- Valor dentro de barra curta (< 380 px): ele vai pra fora, à direita.
+
+- Chão de uma cor só, degradê, roxo-azul, brilho em letra, fundo escuro.
+- "Antes" e "depois" que não se distinguem (o antes é sempre mais cinza, escuro ou desfocado).
+- Divisor parado ou que não atravessa a imagem; imagem sem borda preta.
+- Sombra com blur (aqui é sempre sombra dura de 10–20 px) e cantos vivos.
+- Resultado inventado em uso real: o número do ganho tem que ser medido pelo cliente.
+- Texto fora da área segura (168–1330 px na vertical, 80 px nas laterais).

package/kits/antes-depois/assets/ASSETS.md

@@ -0,0 +1,23 @@
+# Assets do kit antes-depois
+
+| arquivo | o que é | origem | licença |
+|---|---|---|---|
+| `fontes/archivoblack.woff2` | Archivo Black regular (400), subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Archivo+Black`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-ArchivoBlack.txt` |
+| `fontes/manrope.woff2` | Manrope variável 500–800, subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Manrope:wght@500..800`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-Manrope.txt` |
+| `sons/whoosh-entra.mp3` | whoosh de entrada | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `paper` | 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 `paper` | sem samples; síntese própria, uso livre (CC0) |
+| `sons/swoosh.mp3` | swoosh lateral | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `paper` | 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 `paper` | 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 `paper` | sem samples; síntese própria, uso livre (CC0) |
+| `sons/clique.mp3` | clique de botão | sintetizado: MotionCraft `sfx make`, tipo `button`, pacote `paper` | sem samples; síntese própria, uso livre (CC0) |
+| `sons/impacto.mp3` | impacto grave | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `paper` | sem samples; síntese própria, uso livre (CC0) |
+| `sons/subida.mp3` | riser de 1,2 s | sintetizado: MotionCraft `sfx make`, tipo `riser`, pacote `paper` | sem samples; síntese própria, uso livre (CC0) |
+| `sons/assinatura.mp3` | acorde da marca | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `paper` | sem samples; síntese própria, uso livre (CC0) |
+| `sons/tick.mp3` | tique do número que conta | sintetizado: MotionCraft `sfx make`, tipo `slot_tick`, pacote `paper` | sem samples; síntese própria, uso livre (CC0) |
+| `trilha/corte-118bpm.mp3` | 8.6 s de trilha, preset tech-bright, 118 bpm, tom D | MotionCraft `music make --preset tech-bright --bpm 118 --key D --duration 10 --force`, cortada em 8,6 s com fade | sem samples; síntese própria (CC0). MotionCraft é MIT |
+
+Conteúdo de demonstração (não faz parte do estilo, fica em `exemplos/`):
+
+| arquivo | origem | licença |
+|---|---|---|
+| `exemplos/fotos/foto-06.jpg`, `foto-07.jpg`, `foto-08.jpg` | cópia das fotos de demonstração do kit apple-tipografico (Unsplash, picsum ids 20, 26, 60), recorte 720×960; o "antes" é a mesma foto com filtro CSS (cinza, escura, desfocada) | Unsplash License |

package/kits/antes-depois/assets/fontes/OFL-ArchivoBlack.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Archivo Black Project Authors (https://fonts.google.com/specimen/Archivo+Black)
+
+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/antes-depois/assets/fontes/OFL-Manrope.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Manrope Project Authors (https://fonts.google.com/specimen/Manrope)
+
+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/antes-depois/elementos/BarraMedidor.tsx

@@ -0,0 +1,43 @@
+// BarraMedidor: duas barras de largura total, a do "antes" cinza e comprida, a do "depois" limão e curta, cada uma com
+// o valor contando dentro. Mostra a diferença em número e em tamanho ao mesmo tempo.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, TEXTO, SOMBRA_DURA, lerp, ov, seg} from './base';
+
+export type BarraMedidorProps = {
+  titulo: string;
+  unidade: string;
+  antes: {valor: number; rotulo: string};
+  depois: {valor: number; rotulo: string};
+  inicio?: number;
+  /** centro vertical do conjunto, px */
+  y: number;
+  fim?: number;
+};
+
+export const BarraMedidor: React.FC<BarraMedidorProps> = ({titulo, unidade, antes, depois, inicio = 0, y, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 12) return null;
+  const sai = seg(f, fim, fim + 10);
+  const max = Math.max(antes.valor, depois.valor);
+  const linha = (d: {valor: number; rotulo: string}, i: number, cor: string, texto: string) => {
+    const t = ov(seg(f, inicio + 4 + i * 10, inicio + 24 + i * 10));
+    const larg = Math.max(150, (880 * d.valor) / max) * Math.max(0, t);
+    const v = Math.round(lerp(0, d.valor, seg(f, inicio + 6 + i * 10, inicio + 30 + i * 10)));
+    // barra curta: o valor vai pra FORA, à direita (na v1 ele era cortado dentro da barra)
+    const fora = (880 * d.valor) / max < 380;
+    const valor = <>{v}<span style={{fontSize: 62, marginLeft: 12}}>{unidade}</span></>;
+    return <div key={i} style={{marginTop: i ? 40 : 0}}>
+      <div style={{fontFamily: TEXTO, fontWeight: 800, fontSize: 46, color: COR.tinta, marginBottom: 14, opacity: seg(f, inicio + 4 + i * 10, inicio + 14 + i * 10)}}>{d.rotulo}</div>
+      <div style={{display: 'flex', alignItems: 'center', gap: 30}}>
+        <div style={{width: Math.max(0, larg), height: 190, borderRadius: 40, background: cor, border: `8px solid ${COR.tinta}`, boxSizing: 'border-box', boxShadow: SOMBRA_DURA(12), display: 'flex', alignItems: 'center', justifyContent: 'flex-end', padding: '0 34px', overflow: 'hidden', whiteSpace: 'nowrap', fontFamily: FONTE, fontSize: 118, color: texto, flex: 'none'}}>{fora ? null : valor}</div>
+        {fora && <div style={{fontFamily: FONTE, fontSize: 118, color: COR.tinta, whiteSpace: 'nowrap', opacity: seg(f, inicio + 10 + i * 10, inicio + 18 + i * 10)}}>{valor}</div>}
+      </div>
+    </div>;
+  };
+  return <div style={{position: 'absolute', left: 100, width: 880, top: y - 330, opacity: 1 - sai, transform: `translateY(${-sai * 160}px)`}}>
+    <div style={{fontFamily: FONTE, fontSize: 92, lineHeight: 1.05, textTransform: 'uppercase', color: COR.tinta, marginBottom: 52, transform: `translateX(${(1 - ov(seg(f, inicio, inicio + 16))) * -900}px)`}}>{titulo}</div>
+    {linha(antes, 0, COR.cinza, COR.tinta)}
+    {linha(depois, 1, COR.limao, COR.tinta)}
+  </div>;
+};

package/kits/antes-depois/elementos/Camera.tsx

@@ -0,0 +1,21 @@
+// Camera: deriva constante por baixo de tudo (zoom, deslize e giro mínimos) e um soco em cada batida.
+// O quadro nunca fica parado. `batidas` são quadros absolutos do vídeo.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+
+export type CameraProps = {batidas?: number[]; forca?: number; children: React.ReactNode};
+
+export const posCamera = (f: number, batidas: number[], forca = 1) => {
+  let z = 1.018 + 0.012 * Math.sin(f / 120) + f * 0.00012, dx = Math.sin(f / 37) * 12, dy = Math.cos(f / 51) * 8;
+  const rot = Math.sin(f / 83) * 0.004;
+  for (const h of batidas) if (f >= h) {
+    const d = Math.exp(-(f - h) / 7) * forca;
+    z += 0.035 * d; dx += 10 * d * Math.sin((f - h) * 2.7 + h); dy += 10 * d * Math.cos((f - h) * 3.3 + h);
+  }
+  return {z, dx, dy, rot};
+};
+
+export const Camera: React.FC<CameraProps> = ({batidas = [], forca = 1, children}) => {
+  const c = posCamera(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/antes-depois/elementos/Cena.tsx

@@ -0,0 +1,41 @@
+// Cena: janela de tempo de um plano (troca "revelar"). Dentro dela, useCurrentFrame() começa em 0.
+// v2: as cenas NÃO se sobrepõem (a v1 deixava a cena velha por baixo da nova e embolava tudo).
+// A cena sai sozinha nos últimos 7 quadros (encolhe 6%, sobe 40 px, some); a próxima entra limpa.
+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 = 0; // sem sobreposição entre cenas
+export const SAIDA = 7; // quadros da saída dentro da própria cena
+
+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 : seg(f, duracao - SAIDA, duracao) ** 2;
+  const base = {transform: `translateY(${-xo * 40}px) scale(${1 - xo * 0.06})`, opacity: 1 - xo} as React.CSSProperties;
+  if (p >= 1) return base;
+  if (entrada === 'cortina') return {...base, clipPath: `polygon(0 0, ${p * 130}% 0, ${p * 130 - 30}% 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)`, 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/antes-depois/elementos/FaixaMarquee.tsx

@@ -0,0 +1,35 @@
+// FaixaMarquee: faixa inclinada, contida em 880 px (margem de 100 px), com o texto correndo sem parar (como fita de obra).
+// Chega varrendo de um lado com overshoot. Sozinha vira chamada de ação.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, ov, seg} from './base';
+
+export type FaixaMarqueeProps = {
+  /** a frase que repete (ex.: "VEJA O SEU •") */
+  texto: string;
+  /** centro vertical, px */
+  y: number;
+  /** inclinação, graus */
+  rot?: number;
+  altura?: number;
+  cor?: 'limao' | 'tinta';
+  /** px por quadro; negativo corre pra direita */
+  velocidade?: number;
+  inicio?: number;
+  fim?: number;
+};
+
+export const FaixaMarquee: React.FC<FaixaMarqueeProps> = ({texto, y, rot = -6, altura = 210, cor = 'limao', velocidade = 16, inicio = 0, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 12) return null;
+  const t = ov(seg(f, inicio, inicio + 16)), sai = seg(f, fim, fim + 10);
+  const fundo = cor === 'limao' ? COR.limao : COR.tinta, letra = cor === 'limao' ? COR.tinta : COR.limao;
+  const item = `${texto}  `;
+  const passo = item.length * altura * 0.52;
+  const desloc = ((f - inicio) * velocidade) % passo;
+  return <div style={{position: 'absolute', left: 100, width: 880, borderRadius: 56, borderLeft: `8px solid ${COR.tinta}`, borderRight: `8px solid ${COR.tinta}`, top: y - altura / 2, height: altura, background: fundo, borderTop: `8px solid ${COR.tinta}`, borderBottom: `8px solid ${COR.tinta}`, boxSizing: 'border-box', overflow: 'hidden', transform: `rotate(${rot + (1 - t) * 14}deg) translateX(${(1 - t) * (rot < 0 ? -1200 : 1200) + sai * 1200}px)`}}>
+    <div style={{position: 'absolute', top: 0, bottom: 0, left: -passo + desloc, display: 'flex', alignItems: 'center', whiteSpace: 'nowrap', fontFamily: FONTE, fontSize: altura * 0.62, color: letra, textTransform: 'uppercase', paddingTop: altura * 0.04}}>
+      {[0, 1, 2, 3].map((i) => <span key={i} style={{width: passo, flex: 'none'}}>{item}</span>)}
+    </div>
+  </div>;
+};

package/kits/antes-depois/elementos/Fundo.tsx

@@ -0,0 +1,24 @@
+// Fundo: a tela dividida em duas metades chapadas, concreto à esquerda (antes) e limão à direita (depois),
+// com a emenda ao meio balançando devagar. É a moldura que se repete em todo vídeo do kit.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR} from './base';
+
+export type FundoProps = {
+  /** cor da metade "antes" */
+  antes?: string;
+  /** cor da metade "depois" */
+  depois?: string;
+  /** posição média da emenda, 0..1 */
+  pos?: number;
+};
+
+export const Fundo: React.FC<FundoProps> = ({antes = COR.concreto, depois = COR.limao, pos = 0.5}) => {
+  const f = useCurrentFrame();
+  const x = (pos + Math.sin(f / 26) * 0.045) * 1080;
+  return <AbsoluteFill style={{background: antes}}>
+    <AbsoluteFill style={{background: `repeating-linear-gradient(135deg, rgba(15,15,13,0.045) 0 3px, transparent 3px 22px)`}} />
+    <div style={{position: 'absolute', left: x, top: 0, width: 1080 - x + 40, height: 1920, background: depois}} />
+    <div style={{position: 'absolute', left: x - 8, top: 0, width: 16, height: 1920, background: COR.tinta}} />
+  </AbsoluteFill>;
+};

package/kits/antes-depois/elementos/ListaMudancas.tsx

@@ -0,0 +1,37 @@
+// ListaMudancas: o que mudou, linha a linha. Cada linha é um cartão partido ao meio: a metade "antes" cinza e riscada,
+// a metade "depois" limão com check. As duas metades entram de lados opostos e se encontram no meio.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, SOMBRA_DURA, TEXTO, ov, seg} from './base';
+
+export type ListaMudancasProps = {
+  linhas: {antes: string; depois: string}[];
+  inicio?: number;
+  /** quadros entre linhas */
+  intervalo?: number;
+  /** centro vertical do conjunto, px */
+  y: number;
+  fim?: number;
+};
+
+export const ListaMudancas: React.FC<ListaMudancasProps> = ({linhas, inicio = 0, intervalo = 11, y, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 12) return null;
+  const alt = 230, gap = 34, total = linhas.length * alt + (linhas.length - 1) * gap, sai = seg(f, fim, fim + 10);
+  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 160}px)`}}>
+    {linhas.map((l, i) => {
+      const t = ov(seg(f, inicio + i * intervalo, inicio + i * intervalo + 14));
+      const risca = seg(f, inicio + i * intervalo + 12, inicio + i * intervalo + 22);
+      return <div key={i} style={{position: 'absolute', left: 100, top: y - total / 2 + i * (alt + gap), width: 880, height: alt, display: 'flex', borderRadius: 40, border: `8px solid ${COR.tinta}`, boxSizing: 'border-box', overflow: 'hidden', boxShadow: SOMBRA_DURA(12), transform: `scale(${0.8 + 0.2 * t})`, opacity: Math.min(1, t * 3)}}>
+        <div style={{width: '44%', background: COR.cinza, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 20px', transform: `translateX(${(1 - t) * -700}px)`, position: 'relative'}}>
+          <span style={{fontFamily: TEXTO, fontWeight: 700, fontSize: 52, lineHeight: 1.1, color: COR.concretoEscuro, textAlign: 'center'}}>{l.antes}</span>
+          <div style={{position: 'absolute', left: '8%', top: '50%', height: 8, width: `${84 * risca}%`, background: COR.tinta}} />
+        </div>
+        <div style={{width: '56%', background: COR.limao, borderLeft: `8px solid ${COR.tinta}`, display: 'flex', alignItems: 'center', gap: 18, padding: '0 24px', transform: `translateX(${(1 - t) * 700}px)`}}>
+          <svg width={64} height={64} viewBox="0 0 40 40" style={{flex: 'none'}}><circle cx={20} cy={20} r={19} fill={COR.tinta} /><path d="M11 21 L18 28 L30 13" stroke={COR.limao} strokeWidth={5} fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
+          <span style={{fontFamily: TEXTO, fontWeight: 800, fontSize: 56, lineHeight: 1.08, color: COR.tinta}}>{l.depois}</span>
+        </div>
+      </div>;
+    })}
+  </div>;
+};

package/kits/antes-depois/elementos/Montagem.tsx

@@ -0,0 +1,59 @@
+// 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 {TelaDividida} from './TelaDividida';
+import {RotuloAntesDepois} from './RotuloAntesDepois';
+import {BarraMedidor} from './BarraMedidor';
+import {NumeroDelta} from './NumeroDelta';
+import {ListaMudancas} from './ListaMudancas';
+import {FaixaMarquee} from './FaixaMarquee';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {
+  TelaDividida, RotuloAntesDepois, BarraMedidor, NumeroDelta, ListaMudancas, FaixaMarquee,
+};
+
+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.concreto}}>
+    <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(`antes-depois: 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/antes-depois/elementos/NumeroDelta.tsx

@@ -0,0 +1,36 @@
+// NumeroDelta: o ganho em um número só. Bloco limão inclinado, borda preta e sombra dura, com o número em Archivo Black
+// que conta de 0 até o valor, uma seta grande e o rótulo. É o herói da batida de resultado.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, TEXTO, SOMBRA_DURA, caber, lerp, ov, seg} from './base';
+
+export type NumeroDeltaProps = {
+  valor: number;
+  /** sinal mostrado antes do número ("−" ou "+") */
+  sinal?: string;
+  sufixo?: string;
+  rotulo: string;
+  /** sentido da seta */
+  seta?: 'baixo' | 'cima';
+  inicio?: number;
+  /** centro vertical, px */
+  y: number;
+  fim?: number;
+};
+
+export const NumeroDelta: React.FC<NumeroDeltaProps> = ({valor, sinal = '−', sufixo = '%', rotulo, seta = 'baixo', inicio = 0, y, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 12) return null;
+  const t = ov(seg(f, inicio, inicio + 18)), sai = seg(f, fim, fim + 10);
+  const n = Math.round(lerp(valor * 0.35, valor, seg(f, inicio + 4, inicio + 22)));
+  const texto = `${sinal}${n}${sufixo}`;
+  const tam = caber(`${sinal}${valor}${sufixo}`, 400, 800, 400, -0.02, 'AD Archivo Black');
+  const dir = seta === 'baixo' ? 1 : -1;
+  return <div style={{position: 'absolute', left: 100, top: y - 380, width: 880, height: 760, background: COR.limao, border: `10px solid ${COR.tinta}`, borderRadius: 56, boxShadow: SOMBRA_DURA(20), boxSizing: 'border-box', transform: `translateY(${(1 - t) * 1000 - sai * 1000}px) rotate(${-4 + (1 - t) * 12}deg) scale(${0.85 + 0.15 * t})`, overflow: 'hidden'}}>
+    <svg width={880} height={760} style={{position: 'absolute', inset: 0}}>
+      <path d={dir > 0 ? 'M700 -40 L700 220 L610 130 M700 220 L790 130' : 'M700 220 L700 -40 L610 50 M700 -40 L790 50'} transform="translate(0 20)" stroke={COR.tinta} strokeWidth={30} fill="none" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.14} />
+    </svg>
+    <div style={{position: 'absolute', left: 0, width: 860, top: 90, textAlign: 'center', fontFamily: FONTE, fontSize: tam, lineHeight: 1.1, color: COR.tinta, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums', transform: `scale(${1 + 0.06 * Math.exp(-Math.max(0, f - inicio - 22) / 5) * (f >= inicio + 22 ? 1 : 0)})`}}>{texto}</div>
+    <div style={{position: 'absolute', left: 30, width: 820, top: 560, textAlign: 'center', fontFamily: TEXTO, fontWeight: 800, fontSize: 70, lineHeight: 1.1, color: COR.tinta, opacity: seg(f, inicio + 14, inicio + 26)}}>{rotulo}</div>
+  </div>;
+};

package/kits/antes-depois/elementos/RotuloAntesDepois.tsx

@@ -0,0 +1,26 @@
+// RotuloAntesDepois: adesivo "ANTES" (concreto escuro) ou "DEPOIS" (limão) com borda preta e sombra dura, inclinado,
+// que estala no canto com overshoot. Marca de que lado da divisão a pessoa está olhando.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, SOMBRA_DURA, ov, seg} from './base';
+
+export type RotuloAntesDepoisProps = {
+  lado: 'antes' | 'depois';
+  texto?: string;
+  inicio?: number;
+  /** centro, px */
+  x: number;
+  y: number;
+  /** tamanho da letra, px (padrão 96) */
+  tamanho?: number;
+  fim?: number;
+};
+
+export const RotuloAntesDepois: React.FC<RotuloAntesDepoisProps> = ({lado, texto, inicio = 0, x, y, tamanho = 96, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 12) return null;
+  const t = ov(seg(f, inicio, inicio + 14)), sai = seg(f, fim, fim + 10);
+  const antes = lado === 'antes';
+  const rot = (antes ? -7 : 6) + (1 - t) * (antes ? -30 : 30) + Math.sin(f / 9) * 1.2;
+  return <div style={{position: 'absolute', left: x, top: y, transform: `translate(-50%, -50%) scale(${Math.max(0, t) * (1 - sai)}) rotate(${rot}deg)`, background: antes ? COR.concretoEscuro : COR.limao, color: antes ? COR.papel : COR.tinta, border: `8px solid ${COR.tinta}`, borderRadius: 26, padding: `${tamanho * 0.12}px ${tamanho * 0.3}px ${tamanho * 0.06}px`, boxShadow: SOMBRA_DURA(10), fontFamily: FONTE, fontSize: tamanho, lineHeight: 1.1, textTransform: 'uppercase', whiteSpace: 'nowrap'}}>{texto ?? (antes ? 'Antes' : 'Depois')}</div>;
+};