primocode 10.17.1 → 10.19.0

package/editor/modelo-projeto/ferramentas/medir_fontes.py

@@ -19,7 +19,7 @@ AQUI = os.path.dirname(os.path.abspath(__file__))
 FONTES = os.path.join(os.path.dirname(AQUI), 'assets', 'fontes')
 EM = 1000
 # arquivo, pesos medidos (o que o modelo usa na tela)
-MEDIR = {'Montserrat': ('Montserrat.ttf', (700, 800, 900)), 'Caveat': ('Caveat.ttf', (700,))}
+MEDIR = {'Montserrat': ('Montserrat.ttf', (700, 800, 900)), 'Caveat': ('Caveat.ttf', (700,)), 'Inter': ('Inter.ttf', (800,))}
 EXTRAS = '–—‘’“”…•€✓→×'
 
 

package/kits/CATALOGO.md

@@ -0,0 +1,65 @@
+# Os 50 estilos (slug · nome · o que é)
+
+## SaaS e tecnologia
+1. apple-tipografico · Apple tipográfico · creme liso, tipografia gigante com a palavra-chave em degradê, fotos reais em cartões com movimento, marca só no fim (o vídeo da Destrava, aprovado em 26/10)
+2. saas-linear · SaaS Linear · fundo grafite, formas de interface nítidas, luz suave, câmera lenta em perspectiva
+3. campos-de-cor · Campos de cor · campos de cor chapada que trocam na batida, palavras gigantes com ponto colorido, formas geométricas (motion1.mp4)
+4. produto-3d · Produto 3D em estúdio · objeto 3D realista em estúdio claro, órbita lenta, peças que se separam (vídeo dos AirPods)
+5. stripe-ondas · Ondas Stripe · ondas de degradê fluindo, tipografia limpa por cima
+6. vercel-mono · Mono Vercel · preto e branco, triângulos e grades, cortes secos
+7. notion-editorial · Notion editorial · creme, traço fino desenhado, serifa
+8. dashboard-dados · Painel de dados · gráficos que crescem, números contando
+9. isometrico · Isométrico · blocos isométricos montando um sistema
+10. vidro-ios · Vidro iOS · cartões de vidro fosco, desfoque, movimento de iPhone
+
+## Tipografia em movimento
+11. suica · Suíço · grade rígida, Helvetica, vermelho e preto
+12. brutalista · Brutalista · mono enorme, preto, branco e amarelo, sem enfeite
+13. cartaz-cinetico · Cartaz cinético · cartazes de tipo que se transformam
+14. jornal · Jornal · papel de jornal, colunas, manchete
+15. revista · Revista · páginas duplas, fotos grandes, serifa elegante
+16. legenda-viva · Legenda viva · fala com legenda animada palavra por palavra
+
+## Retrô
+17. y2k-cromado · Y2K cromado · cromo, bolhas, anos 2000
+18. vhs-90 · VHS anos 90 · ruído de fita, timecode, cor lavada
+19. synthwave · Synthwave · sol listrado, grade roxa, anos 80
+20. retro-70 · Retrô anos 70 · laranja e marrom, tipo arredondado, raios de sol
+21. pixel · Pixel art · 8 bits, sprites, paleta curta
+22. terminal · Terminal hacker · verde no preto, cursor, digitação
+23. memphis · Memphis · rabiscos, formas e cores fortes
+24. bauhaus · Bauhaus · círculo, quadrado e triângulo nas cores primárias
+
+## Feito à mão
+25. papel-recortado · Papel recortado · camadas de papel com sombra
+26. risografia · Risografia · duas tintas, retícula, registro fora
+27. colagem · Colagem · recortes de foto, fita, rasgado
+28. rabisco · Rabisco · desenho à mão, traço tremido
+29. quadro-giz · Quadro de giz · giz no quadro verde
+30. massinha · Massinha · 3D com cara de massa de modelar
+31. aquarela · Aquarela · manchas de tinta, papel texturizado
+32. adesivos · Adesivos · adesivos com borda branca que colam na tela
+
+## 3D e abstrato
+33. metal-liquido · Metal líquido · bolhas cromadas que se fundem
+34. pontos-3d · Campo de pontos · grade e esfera de pontos 3D
+35. tunel · Túnel 3D · voo por um túnel de formas
+36. cubos · Cubos modulares · cubos que se montam e desmontam
+37. neon-cidade · Neon urbano · letreiros neon na noite
+38. aurora · Aurora · faixas de luz suaves, tipo calmo
+
+## Redes sociais
+39. ugc-reels · UGC de Reels · cara de celular, legenda com emoji, cortes rápidos
+40. tiktok-energia · Energia TikTok · zoom, tremor, texto de adesivo, muito corte
+41. corte-podcast · Corte de podcast · onda do áudio, citação grande
+42. depoimento · Depoimento · cartões de depoimento com foto e estrelas
+43. antes-depois · Antes e depois · tela dividida, comparação
+44. tutorial-tela · Tutorial de tela · tela gravada com zoom e cursor
+
+## Marca e evento
+45. convite-evento · Convite de evento · data e lugar como herói
+46. contagem · Contagem regressiva · números grandes contando até o dia
+47. infografico · Infográfico · ícones e setas explicando um processo
+48. mapa · Mapa local · mapa, pino, rota até o lugar
+49. luxo · Luxo · preto e dourado, serifa fina, lentidão
+50. minimal · Minimalista · uma cor, muito espaço, um elemento

package/kits/KITS.md

@@ -0,0 +1,179 @@
+# KITS.md · o formato de um kit de estilo de motion
+
+Um kit **não é template**. É uma pasta que a IA carrega como uma skill: dentro tem a skill (como o estilo
+pensa), as regras em números, os elementos (componentes Remotion com props), os assets e uma receita
+de batidas. A IA monta o motion a partir disso e escreve o roteiro. **O motion nunca vem pronto.**
+
+O kit de referência é `kits/apple-tipografico/`. Na dúvida, copie a forma dele.
+
+## 1. Pasta
+
+```
+kits/<slug>/
+  SKILL.md             frontmatter + o que é o estilo, como montar, o que é proibido
+  regras/              6 MDs curtos, só números: tipografia · cor · movimento · som · ritmo · area-segura
+  elementos/           componentes Remotion (.tsx) com props + base.ts + Montagem.tsx + index.ts
+  assets/              fontes (OFL/Apache), sons (CC0 ou sintetizados), texturas pequenas + ASSETS.md
+  receita.json         as batidas que o estilo aceita, duração, elementos de cada batida, transições
+  exemplos/            roteiro.md + plano.json (como a IA montou a demo) + o conteúdo fictício da demo
+  preview.tsx          a demo: `export const preview = {duracaoEmQuadros, quadroCapa, Componente}`
+  capa.jpg             gerado por scripts/render-kit.mjs (540×960)
+  preview.mp4          gerado por scripts/render-kit.mjs (540×960, ≤ 2 MB, h264 + AAC)
+```
+
+`<slug>` é o do `CATALOGO.md` (ex.: `saas-linear`). Nada fora dessa pasta é do kit.
+
+## 2. SKILL.md
+
+```yaml
+---
+slug: saas-linear
+nome: SaaS Linear                      # igual ao CATALOGO.md
+descricao: fundo grafite, formas de interface nítidas, luz suave, câmera lenta em perspectiva
+familia: SaaS e tecnologia             # exatamente uma das 7 abaixo
+versao: 1                              # suba 1 a cada preview novo que o dono precisa rever
+quando:                                # 3+ pedidos reais em que o kit serve (frases do usuário)
+  - "vídeo de lançamento de SaaS"
+  - "demo de produto com interface"
+  - "anúncio B2B premium"
+nao_serve:                             # opcional: quando mandar pra outro kit
+  - "vídeo divertido ou retrô"
+---
+```
+
+Famílias (iguais às seções do CATALOGO.md): `SaaS e tecnologia` · `Tipografia em movimento` · `Retrô` ·
+`Feito à mão` · `3D e abstrato` · `Redes sociais` · `Marca e evento`.
+
+Corpo, nesta ordem: **o que é o estilo** (1 parágrafo, concreto), **como montar um vídeo** (passos:
+cortar o roteiro em frases → escolher batidas na receita → escrever o plano → renderizar → conferir),
+**tabela de elementos** (elemento · o que faz · batidas), **proibido** (lista curta e específica).
+
+## 3. regras/
+
+Seis arquivos, curtos, com **números e não adjetivos**: px, hex, curvas (`cubic-bezier` ou fórmula),
+quadros, volumes, LUFS. Tela de referência 1080×1920, 30 fps.
+
+| arquivo | tem que ter |
+|---|---|
+| `tipografia.md` | fontes e pesos, tabela papel → tamanho px → máx. caracteres, tracking, line-height, caixa |
+| `cor.md` | tabela token → hex → uso, degradês exatos, sombras, o que o cliente pode trocar |
+| `movimento.md` | curva padrão, tabela movimento → quadros → valores (entrada, saída, câmera, cada elemento) |
+| `som.md` | trilha (arquivo, volume, fade), tabela som → volume → quando, máx. sons/s, alvo −14 LUFS |
+| `ritmo.md` | bpm/batida em quadros, tabela batida → duração s → quadros, tempo mínimo de leitura |
+| `area-segura.md` | limites (padrão 9:16: y 168–1330, x 80–1000), y de referência de cada elemento |
+
+## 4. elementos/
+
+- **Um componente por arquivo**, nome em PascalCase PT-BR (`TituloGigante.tsx`, `CartaoFoto.tsx`).
+  Mínimo **5** elementos visuais além de `Fundo`/`Camera`/`Cena`.
+- **Tudo vem por props**: texto, imagem (`src` como URL), cores de destaque, tempo (`inicio`, `fim`,
+  `intervalo` em quadros). **Nenhum texto de demo fixo** dentro de um elemento.
+- Tempo é **relativo à cena**: os elementos usam `useCurrentFrame()` dentro de `<Cena>` (que é uma
+  `<Sequence>`), e a duração da cena vem de `useDuracaoCena()`.
+- `base.ts`: tokens (cores, fonte, área segura, curvas, `BATIDA`) e o carregamento das fontes com
+  `delayRender`. **Registre a fonte com prefixo do kit** (`"AT Inter"`, `"SL Geist"`…) pra não colidir
+  com outro kit no mesmo estúdio, e proteja com uma flag em `globalThis` pra carregar uma vez só.
+- Texto que pode crescer (copy do cliente) **encolhe sozinho** pra caber na largura útil (veja `caber()`
+  em `apple-tipografico/elementos/base.ts`). Nunca palavra cortada.
+- `Som.tsx`: `Efeito {som, em, volume}` e `Trilha {volume}`; os sons são importados de `../assets/`.
+- `Montagem.tsx`: recebe um `plano` (formato da seção 6) e um mapa `arquivos` (nome → URL importada) e
+  monta `Fundo + Camera + Cena[] + sons + trilha`. Não decide estética, só executa o plano.
+- `index.ts`: exporta tudo.
+- **Imports permitidos**: arquivos da própria pasta do kit, `react`, `remotion`, `@remotion/*` que já
+  estão no `package.json`. Nada de `src/`, de outro kit ou de pacote novo. Asset entra por `import`
+  (`import url from '../assets/sons/pop.mp3'`): o webpack do Remotion devolve a URL. Não existe `public/`.
+
+## 5. assets/
+
+- Fontes: **só OFL ou Apache**, com o texto da licença ao lado (`OFL-<Fonte>.txt`). woff2, subset latino.
+- Sons: **CC0 ou sintetizados**. Caminho fácil: o MotionCraft sintetiza tudo sem samples:
+  `node ~/www/pg/apps/primocode-motioncraft/vendor/motioncraft/scripts/motioncraft.mjs sfx make --cues c.json --duration 2.5 --pack <soft-pop|glass|paper|digital-soft|organic-wood> --out /tmp/x.wav`
+  e `music make` para a trilha (`music presets` lista os presets; em `music make`, `--out` é uma **pasta**
+  e é obrigatório, senão ele cria `audio/` na pasta atual). Rode sempre de um diretório temporário.
+  Converta para mp3 160k. Tipos: `word_pop icon_pop letter_tick check success slot_tick bubble type button whoosh_in whoosh_out swoosh riser impact confetti logo_sting`.
+- Trilha: 8–9 s bastam pro preview. "Trilha forte ou nenhuma": nada de pad morno.
+- Texturas: pequenas (< 300 KB cada), geradas ou CC0.
+- `ASSETS.md`: tabela arquivo · o que é · origem (URL/comando) · licença. **Todo arquivo** de `assets/`
+  aparece nela. Fotos da demo ficam em `exemplos/` e também são listadas (Unsplash/Pexels/CC0).
+
+## 6. receita.json e plano de cenas
+
+`receita.json`:
+
+```json
+{
+  "kit": "<slug>", "fps": 30, "batida_trilha_quadros": 14.4,
+  "batidas": [
+    {"nome": "gancho", "obrigatoria": true, "duracao": [45, 105], "elementos": ["TituloGigante"],
+     "entrada": ["nenhuma"], "sons": ["whoosh-entra"], "nota": "..."}
+  ],
+  "transicoes": [{"nome": "subir", "quadros": 12, "como": "..."}]
+}
+```
+
+Nomes de batida (use os que servem ao estilo, 4+): `gancho` · `problema` · `virada` · `prova` · `lista`
+· `depoimento` · `data` · `oferta` · `cta` · `marca`. `duracao` em quadros [mín, máx]. Todo nome em
+`elementos` tem que existir em `elementos/<Nome>.tsx`.
+
+`exemplos/plano.json` (o que a IA escreve a cada vídeo, e o que a `Montagem` lê):
+
+```json
+{
+  "kit": "<slug>", "duracao": 240, "trilha": {"volume": 0.5},
+  "cenas": [
+    {"batida": "gancho", "de": 0, "ate": 58, "entrada": "nenhuma",
+     "camadas": [{"elemento": "TituloGigante", "props": {"linhas": ["Prazo", "*estourado?*"], "inicio": 0}}],
+     "socos": [31],
+     "sons": [{"som": "whoosh-entra", "em": 0}]}
+  ]
+}
+```
+
+`de`/`ate` absolutos; `inicio`, `socos` e `sons[].em` relativos à cena. Strings de arquivo nas props
+(`"fotos/foto-01.jpg"`) são trocadas pela URL do mapa `arquivos` do `preview.tsx`.
+
+`exemplos/roteiro.md`: o pedido do usuário, a tabela cena · batida · quadros · na tela · elemento · som,
+e 3–4 linhas de "como a IA chegou nisso".
+
+## 7. preview.tsx e a demo
+
+```tsx
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+import f1 from './exemplos/fotos/foto-01.jpg';
+const Preview: React.FC = () => <Montagem plano={plano as Plano} arquivos={{'fotos/foto-01.jpg': f1}} />;
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 88, Componente: Preview};
+```
+
+- 1080×1920, 30 fps, **6 a 8 s** (180–240 quadros). Feito **só** com os elementos do kit.
+- Copy de demo **genérica em PT-BR** sobre produto/evento **fictício**. Nunca a marca Destrava, nem
+  marca real. Logo da demo: um SVG simples desenhado na hora.
+- Mostre no preview o máximo de elementos assinatura do estilo (4+), com som em cada movimento.
+- `quadroCapa`: o quadro que melhor vende o estilo (tipo + destaque + imagem, nada no meio da entrada).
+
+## 8. Comandos
+
+```bash
+npm run studio                                   # abre todos os kits (Kit-<slug>)
+node scripts/render-kit.mjs <slug>               # preview.mp4 + capa.jpg do kit (≈ 15–25 s)
+node scripts/checar-kit.mjs <slug>               # confere este formato; tem que dar "ok"
+node scripts/manifest.mjs                        # reescreve kits/manifest.json
+npx tsc --noEmit                                 # tipos
+```
+
+Depois de renderizar, **olhe os quadros**: `ffmpeg -i kits/<slug>/preview.mp4 -vf "select='not(mod(n\,10))',scale=270:480,tile=8x3" -frames:v 1 /tmp/tile.jpg`
+e abra a imagem. Corrija o que estiver cortado, parado, fora da área segura ou feio, e renderize de novo.
+
+## 9. Trabalho em paralelo (vários agentes, um kit cada)
+
+- Cada agente **só toca `kits/<slug>/`**. Registro do kit é automático (`src/Estudio.tsx` acha todo
+  `kits/*/preview.tsx` com `require.context`): **não existe linha de registro pra editar**.
+- **Não edite** `src/`, `scripts/`, `package.json`, `KITS.md`, `CATALOGO.md`, `galeria/` nem outro kit.
+  Precisa de pacote novo? Não instale: peça a quem coordena.
+- **Não rode `scripts/manifest.mjs` nem commite `kits/manifest.json`** em paralelo: quem coordena roda
+  uma vez no fim (evita conflito no mesmo arquivo).
+- O render empacota só o kit pedido (`.cache/entrada-<slug>.tsx`, `.cache/<slug>/`), então um kit
+  quebrado não derruba os outros. Rodando muitos ao mesmo tempo, use `KIT_CONCORRENCIA=2`.
+- Commit só da sua pasta: `git add kits/<slug> && git commit -m "kit <n>: <slug> ..."`. Nunca `git add -A`.
+  Nunca push.
+- Pronto quando: `checar-kit.mjs <slug>` dá ok, o preview tem ≤ 2 MB com áudio, e você olhou os quadros.

package/kits/adesivos/SKILL.md

@@ -0,0 +1,53 @@
+---
+slug: adesivos
+nome: Adesivos
+descricao: fundo amarelo-gema com pontos de retícula, tudo é adesivo com borda branca grossa que cola na tela com um tapa
+familia: Feito à mão
+versao: 1
+quando:
+  - "vídeo de papelaria, loja de brindes ou marca jovem e divertida"
+  - "promoção, oferta ou lançamento com preço em destaque"
+  - "reels de coleção, kit, drop ou sorteio"
+  - "anúncio colorido, cheio de personalidade, estilo caderno de adolescente"
+  - "convite de evento descontraído, feira ou festa"
+nao_serve:
+  - "vídeo sério, corporativo ou financeiro (use um kit de interface ou editorial)"
+  - "clima calmo, elegante ou luxuoso (use aurora ou apple-tipografico)"
+---
+
+# Adesivos
+
+O chão é **amarelo-gema** com retícula de pontos que anda na diagonal, e **tudo o que aparece é um adesivo**: título em etiquetas arredondadas, palavras em Bowlby One com **borda branca de 14 px** (o corte do adesivo), figuras (estrela, coração, raio, balão, seta, flor) e fotos recortadas em círculo, estrela ou cantos grandes. Cada adesivo **cola com um tapa**: entra a 2,6× o tamanho, bate, achata 10% por 8 quadros e assenta, com sombra que encolhe de 40 para 10 px. Chuvas de adesivos pequenos preenchem as laterais, e o selo de preço gira sem parar. A câmera dá soco em cada tapa.
+
+## Como montar um vídeo com este kit
+
+1. **Leia o pedido e o roteiro.** Corte cada fala em frases curtas. Uma frase = uma cena.
+2. **Escolha as batidas** em `receita.json` (gancho → virada → prova → lista → oferta → cta → marca). Cada batida diz quanto dura e quais elementos servem.
+3. **Escreva o plano de cenas** (`plano.json`, mesmo formato de `exemplos/plano.json`): para cada cena, `de`/`ate` em quadros, a `entrada`, as `camadas` (elemento + props) e os `sons`. Os cortes seguem a voz (se houver) ou a batida da trilha: 1 batida = 16.0714 quadros.
+4. **Renderize** com `<Montagem plano={...} arquivos={...} />` ou escreva o TSX direto combinando `Fundo`, `Camera`, `Cena` e os elementos (tudo sai de `elementos/index.ts`).
+5. **Confira** os quadros (um por cena) contra `regras/`: área segura, nada cortado, um herói por cena, nenhum quadro parado.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| `TituloEtiquetas` | cada linha do título é uma etiqueta arredondada com borda branca que entra de um lado e cola | gancho, lista |
+| `AdesivoTexto` | uma palavra em Bowlby One com corte branco, cola com tapa | virada, oferta, cta |
+| `AdesivoForma` | estrela, coração, raio, balão, seta ou flor em adesivo, com rótulo opcional | virada, prova, cta |
+| `AdesivoFoto` | foto recortada em círculo, estrela ou canto grande com borda branca | prova |
+| `ChuvaDeAdesivos` | dezenas de adesivos pequenos colando nas laterais, um a cada 2 quadros | gancho, oferta, cta |
+| `SeloPreco` | estrela de 16 pontas girando com preço ou desconto gigante | oferta |
+| `AssinaturaMarca` | logo em adesivo redondo + nome + etiqueta de endereço, a última cena | marca |
+| `Fundo`, `Camera`, `Cena` | amarelo-gema com retícula de pontos andando na diagonal e listras claras | todas |
+| `Efeito`, `Trilha` | sons e trilha do kit | todas |
+
+## Proibido
+
+- Adesivo sem a borda branca grossa (14–22 px) ou sem sombra: sem o corte ele deixa de ser adesivo.
+- Mais de 4 cores de adesivo na mesma cena; as 5 do `regras/cor.md` e mais nada.
+- Texto fino ou em caixa baixa pequena: palavra de adesivo é Bowlby One em caixa-alta, ≥ 90 px.
+- Degradê, glow, neon, sombra em letra fora a sombra do adesivo; fundo escuro.
+- Elemento parado: depois de colar, o adesivo balança ±1,5° e flutua ±8 px; a câmera nunca para.
+- Foto sem recorte e sem borda branca.
+- Tela abarrotada: 1 herói + no máximo 1 apoio por cena, 35–45% de fundo livre, margem ≥ 96 px, nada encostando na borda; a chuva de adesivos só entra se a cena não tiver apoio.
+- Texto fora da área segura (168–1330 px na vertical, 80 px nas laterais).

package/kits/adesivos/assets/ASSETS.md

@@ -0,0 +1,22 @@
+# Assets do kit adesivos
+
+| arquivo | o que é | origem | licença |
+|---|---|---|---|
+| `fontes/bowlby-latin.woff2` | Bowlby One (400), subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Bowlby+One`), baixado em 26/10/2026 | SIL OFL 1.1, texto em `fontes/OFL-BowlbyOne.txt` |
+| `fontes/nunito-latin.woff2` | Nunito (700 900), subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Nunito`), baixado em 26/10/2026 | SIL OFL 1.1, texto em `fontes/OFL-Nunito.txt` |
+| `sons/cola.mp3` | adesivo grande que cola (no quadro do tapa) | sintetizado: MotionCraft `sfx make`, tipo `button`, pacote `soft-pop` | sem samples; síntese própria (CC0) |
+| `sons/pop.mp3` | adesivo pequeno ou figura que cola | sintetizado: MotionCraft `sfx make`, tipo `icon_pop`, pacote `soft-pop` | sem samples; síntese própria (CC0) |
+| `sons/palavra.mp3` | etiqueta de título que entra | sintetizado: MotionCraft `sfx make`, tipo `word_pop`, pacote `soft-pop` | sem samples; síntese própria (CC0) |
+| `sons/whoosh.mp3` | entrada de cena | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `paper` | sem samples; síntese própria (CC0) |
+| `sons/swipe.mp3` | chuva de adesivos que passa | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `paper` | sem samples; síntese própria (CC0) |
+| `sons/impacto.mp3` | selo de preço | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `soft-pop` | sem samples; síntese própria (CC0) |
+| `sons/confete.mp3` | oferta e chamada final | sintetizado: MotionCraft `sfx make`, tipo `confetti`, pacote `soft-pop` | sem samples; síntese própria (CC0) |
+| `sons/assinatura.mp3` | revelação da marca | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `soft-pop` | sem samples; síntese própria (CC0) |
+| `trilha/pop-colorido-112bpm.mp3` | 8,6 s a partir de 2.1429 s da trilha gerada | MotionCraft `music make` (preset `warm-major`, 112 bpm, tom C) | 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-01.jpg`, `foto-02.jpg`, `foto-03.jpg` | cópias de `kits/apple-tipografico/exemplos/fotos/` (Unsplash, picsum ids 1, 2, 3), recorte 720×960 | Unsplash License |
+| `exemplos/logo-grude.svg` | logo fictício desenhado para a demo | próprio |

package/kits/adesivos/assets/fontes/OFL-BowlbyOne.txt

@@ -0,0 +1,92 @@
+Copyright (c) Bowlby One Project Authors (Google Fonts)
+
+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://openfontlicense.org
+
+-----------------------------------------------------------
+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/adesivos/assets/fontes/OFL-Nunito.txt

@@ -0,0 +1,92 @@
+Copyright (c) Nunito Project Authors (Google Fonts)
+
+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://openfontlicense.org
+
+-----------------------------------------------------------
+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/adesivos/elementos/AdesivoForma.tsx

@@ -0,0 +1,42 @@
+// AdesivoForma: figura em adesivo (estrela, coração, raio, balão, seta ou flor) com corte branco e rótulo opcional.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_A, SOMBRA, cola, flutua} from './base';
+
+export type Forma = 'estrela' | 'coracao' | 'raio' | 'balao' | 'seta' | 'flor';
+const estrela = (n: number, r1: number, r2: number) => Array.from({length: n * 2}, (_, i) => {const a = (Math.PI * i) / n - Math.PI / 2, r = i % 2 ? r2 : r1; return `${(50 + Math.cos(a) * r).toFixed(1)},${(50 + Math.sin(a) * r).toFixed(1)}`;}).join(' ');
+const FORMAS: Record<Forma, React.ReactNode> = {
+  estrela: <polygon points={estrela(5, 44, 19)} />,
+  coracao: <path d="M50 86 C14 60 8 38 18 24 C28 12 44 16 50 30 C56 16 72 12 82 24 C92 38 86 60 50 86Z" />,
+  raio: <polygon points="58,6 22,56 46,56 38,94 78,40 54,40" />,
+  balao: <path d="M14 18 H86 Q94 18 94 26 V62 Q94 70 86 70 H58 L40 90 L42 70 H14 Q6 70 6 62 V26 Q6 18 14 18Z" />,
+  seta: <path d="M8 38 H56 V16 L94 50 L56 84 V62 H8Z" />,
+  flor: <g>{Array.from({length: 6}, (_, i) => <circle key={i} cx={50 + Math.cos((i * Math.PI) / 3) * 26} cy={50 + Math.sin((i * Math.PI) / 3) * 26} r={19} />)}<circle cx={50} cy={50} r={20} /></g>,
+};
+
+export type AdesivoFormaProps = {
+  forma: Forma;
+  x: number;
+  y: number;
+  /** lado em px */
+  tamanho?: number;
+  rot?: number;
+  cor?: string;
+  inicio?: number;
+  /** texto dentro (1 a 6 letras) */
+  rotulo?: string;
+  corRotulo?: string;
+};
+
+export const AdesivoForma: React.FC<AdesivoFormaProps> = ({forma, x, y, tamanho = 300, rot = 8, cor = COR.azul, inicio = 0, rotulo, corRotulo = COR.branco}) => {
+  const f = useCurrentFrame();
+  const c = cola(f, inicio), fl = flutua(f, x * 0.3 + y);
+  if (!c.visivel) return null;
+  return <div style={{position: 'absolute', left: x - tamanho / 2, top: y - tamanho / 2 + fl.sobe, width: tamanho, height: tamanho, transform: `rotate(${rot + c.tilt + fl.gira}deg) scale(${c.sx}, ${c.sy})`, filter: SOMBRA(c.sombra)}}>
+    <svg width={tamanho} height={tamanho} viewBox="0 0 100 100" style={{overflow: 'visible'}}>
+      <g fill={cor} stroke={COR.branco} strokeWidth={9} strokeLinejoin="round" paintOrder="stroke">{FORMAS[forma]}</g>
+      <path d="M22 30 Q34 16 52 16" fill="none" stroke="#fff" strokeWidth={3.2} strokeLinecap="round" opacity={0.55} />
+      {rotulo && <text x={50} y={forma === 'balao' ? 52 : 60} textAnchor="middle" fontFamily={FONTE_A} fontSize={rotulo.length > 3 ? 24 : 36} fill={corRotulo}>{rotulo}</text>}
+    </svg>
+  </div>;
+};

package/kits/adesivos/elementos/AdesivoFoto.tsx

@@ -0,0 +1,36 @@
+// AdesivoFoto: foto recortada (círculo, estrela ou canto grande) com borda branca de 22 px e sombra. Cola com tapa;
+// a foto dentro dá um zoom lento (nada fica parado).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, SOMBRA, cola, flutua} from './base';
+
+export type AdesivoFotoProps = {
+  src: string;
+  forma?: 'circulo' | 'estrela' | 'arredondado';
+  x?: number;
+  y?: number;
+  /** lado em px */
+  tamanho?: number;
+  rot?: number;
+  inicio?: number;
+  /** ponto da foto que fica no centro, ex.: "50% 40%" */
+  foco?: string;
+};
+
+const ESTRELA = 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)';
+
+export const AdesivoFoto: React.FC<AdesivoFotoProps> = ({src, forma = 'circulo', x = 540, y = 660, tamanho = 620, rot = -5, inicio = 0, foco = '50% 50%'}) => {
+  const f = useCurrentFrame();
+  const c = cola(f, inicio), fl = flutua(f, x + y * 0.2);
+  if (!c.visivel) return null;
+  const borda = 22, interior = tamanho - borda * 2, est = forma === 'estrela';
+  const clip = est ? ESTRELA : undefined;
+  const raio = forma === 'circulo' ? '50%' : forma === 'arredondado' ? 96 : 0;
+  const zoom = 1.08 + (f - inicio) * 0.0016;
+  return <div style={{position: 'absolute', left: x - tamanho / 2, top: y - tamanho / 2 + fl.sobe, width: tamanho, height: tamanho, transform: `rotate(${rot + c.tilt + fl.gira}deg) scale(${c.sx}, ${c.sy})`, filter: SOMBRA(c.sombra)}}>
+    <div style={{position: 'absolute', inset: 0, background: COR.branco, borderRadius: raio, clipPath: clip}} />
+    <div style={{position: 'absolute', left: est ? tamanho * 0.1 : borda, top: est ? tamanho * 0.1 : borda, width: est ? tamanho * 0.8 : interior, height: est ? tamanho * 0.8 : interior, borderRadius: forma === 'circulo' ? '50%' : forma === 'arredondado' ? 76 : 0, clipPath: clip, overflow: 'hidden'}}>
+      <img src={src} style={{width: '100%', height: '100%', objectFit: 'cover', objectPosition: foco, transform: `scale(${zoom})`}} />
+    </div>
+  </div>;
+};