primocode 10.17.0 → 10.19.0

package/kits/tutorial-tela/exemplos/roteiro.md

@@ -0,0 +1,14 @@
+# Roteiro da demo: Pauta (app de tarefas fictício)
+
+Pedido: "Tutorial rápido de como criar uma tarefa no nosso app, com cara profissional."
+
+| quadros | batida | na tela | elemento | som |
+|---|---|---|---|---|
+| 0–44 | gancho | "Tarefa nova em 3 passos" · janela sobe (zoom 0,62) | TituloTela, CameraTela, JanelaApp | pop-palavra, whoosh |
+| 44–84 | passo 1 | câmera mergulha no botão (zoom 2,0) · cursor clica · modal abre | Cursor, DestaqueCaixa, PassoChamada | swoosh, clique, pop |
+| 84–140 | passo 2 | câmera atravessa até o campo (1,6) · clique · "Revisar contrato" digitado | Cursor, DestaqueCaixa, PassoChamada | swoosh, clique, digitar |
+| 140–192 | passo 3 + prova | zoom no Salvar (2,3) · clique · modal fecha · recua: linha nova destacada | Cursor, DestaqueCaixa, PassoChamada | swoosh, clique, sucesso |
+| 192–240 | atalho | janela cai · teclas ⌘ N apertadas · "Ou use o atalho." | TeclaAtalho | whoosh-sai, pop, clique, assinatura |
+
+Como a IA chegou nisso: um tutorial bom é UMA gravação contínua; a câmera faz o papel do dedo apontando. Cada
+clique é a causa da tela seguinte, então o espectador entende sem ler. Pauta é fictício.

package/kits/tutorial-tela/preview.tsx

@@ -0,0 +1,9 @@
+// Preview do kit: demo de 8 s montada SÓ com os elementos do kit, a partir de exemplos/plano.json.
+// O estúdio registra isto como `Kit-tutorial-tela`.
+import React from 'react';
+import {Montagem, Plano} from './elementos';
+import plano from './exemplos/plano.json';
+
+const Preview: React.FC = () => <Montagem plano={plano as unknown as Plano} />;
+
+export const preview = {duracaoEmQuadros: plano.duracao, quadroCapa: 120, Componente: Preview};

package/kits/tutorial-tela/receita.json

@@ -0,0 +1,15 @@
+{
+  "kit": "tutorial-tela", "fps": 30, "batida_trilha_quadros": 16.7,
+  "batidas": [
+    {"nome": "gancho", "obrigatoria": true, "duracao": [36, 48], "elementos": ["TituloTela", "CameraTela", "JanelaApp"], "entrada": ["janela sobe"], "sons": ["pop-palavra", "whoosh-entra"], "nota": "título com marca-texto; a janela sobe inteira (zoom 0,62)"},
+    {"nome": "passo", "obrigatoria": true, "duracao": [40, 56], "elementos": ["CameraTela", "Cursor", "DestaqueCaixa", "PassoChamada", "JanelaApp"], "entrada": ["camera"], "sons": ["swoosh", "clique", "pop-cartao", "digitar", "sucesso"], "nota": "câmera mergulha no controle, cursor clica, a tela muda; repita 2–4 vezes"},
+    {"nome": "prova", "obrigatoria": false, "duracao": [24, 36], "elementos": ["CameraTela", "JanelaApp"], "entrada": ["camera"], "sons": ["sucesso"], "nota": "recua pra mostrar o resultado (linha nova destacada)"},
+    {"nome": "atalho", "obrigatoria": false, "duracao": [36, 48], "elementos": ["TeclaAtalho"], "entrada": ["janela sai"], "sons": ["whoosh-sai", "pop-cartao", "clique"], "nota": "teclas apertadas + legenda"},
+    {"nome": "cta", "obrigatoria": false, "duracao": [36, 48], "elementos": ["TituloTela", "TeclaAtalho"], "entrada": ["janela sai"], "sons": ["assinatura"], "nota": "frase final grande"}
+  ],
+  "transicoes": [
+    {"nome": "camera", "quadros": 12, "como": "o passo seguinte chega pela câmera (rampa + desfoque de movimento)"},
+    {"nome": "janela sobe", "quadros": 18, "como": "a janela entra de baixo inclinada"},
+    {"nome": "janela sai", "quadros": 14, "como": "a janela cai pra trás e some"}
+  ]
+}

package/kits/tutorial-tela/regras/area-segura.md

@@ -0,0 +1,13 @@
+# Área segura
+
+Tela 1080×1920. Texto lido entre y 168 e 1330, x 88 a 992.
+
+| elemento | y de referência |
+|---|---|
+| centro óptico da câmera (o controle da vez) | (540, 820) |
+| título | 250–470 (janela abaixo, de 634 a 1217 no zoom 0,62) |
+| legenda do passo | 1180 |
+| teclas de atalho | 680–870, legenda 940 |
+
+- No zoom do controle, a legenda cobre a janela: tudo bem, ela tem cartão branco e sombra.
+- Campo largo (560 de largura): zoom ≤ 1,7 pra caber em 1000 px.

package/kits/tutorial-tela/regras/cor.md

@@ -0,0 +1,17 @@
+# Cor
+
+| token | hex | uso |
+|---|---|---|
+| chao | #ECEEF2 → #DCE0E7 | chão (radial do centro à borda) |
+| tela | #FFFFFF | janela, cartões, teclas |
+| lateral | #F6F7F9 | lateral do app |
+| linha | #E4E7EC | divisórias |
+| tinta | #14161A | texto |
+| apagado | #6B7280 | texto secundário |
+| acento | #FF5B14 | botão, cursor clicando, anel, número do passo, marca-texto |
+| acentoClaro | #FFE4D6 | foco do campo, linha nova |
+| ok | #17A05D | check |
+
+- Grade de pontos: tinta a 7%, 2 px a cada 32 px.
+- Sombra da janela: 0 60 120 tinta 22% + 0 12 30 tinta 12%. Holofote: tinta 22% fora do anel.
+- Linha nova: acento 14% + contorno 50%, some em 30 quadros.

package/kits/tutorial-tela/regras/movimento.md

@@ -0,0 +1,20 @@
+# Movimento
+
+Curva da câmera e do cursor: `rampa` = easeInOutQuint. Entradas de cartão: `mola` (s = 1,7).
+
+| movimento | quadros | valores |
+|---|---|---|
+| janela entra | 18 | sobe 900 px, rotateX 22° → 0 |
+| janela sai | 14 | desce 300 px, rotateX 30°, escala 0,8, some |
+| câmera vai ao controle | 12–18 | zoom 0,62 → 2,0–2,3; segura ≥ 8 depois do clique |
+| câmera atravessa | 12–16 | pan entre controles, zoom 1,6–2,3 |
+| desfoque de movimento | durante o voo | até 7 px na direção (0,05 × px/quadro) |
+| cursor | 14–20 por trecho | arco de 12% da distância |
+| clique | 4 | cursor 82%, botão 92–94% |
+| onda do clique | 14 | r 0 → 54, opacidade 1 → 0 |
+| modal | 8 abre · 6 fecha | escala 0,94 → 1, sobe 20 px, fundo 28% |
+| digitação | 28 por 16 letras | cursor de texto pisca 8/8 |
+| linha nova | 10 | altura 0 → 84 |
+| anel de foco | 8 entra · 8 sai | 1,25 → 1, pulso 3% |
+| legenda do passo | 12 entra · 8 sai | sobe 60 px |
+| teclas | 12 entram · aperta 3 entre teclas | descem 10 px, borda 14 → 4 |

package/kits/tutorial-tela/regras/ritmo.md

@@ -0,0 +1,24 @@
+# Ritmo
+
+- 108 bpm: **1 batida = 16,7 quadros** (0,56 s). A cena da tela dura ~7,5 batidas (126 quadros); as outras 2–2,5 batidas.
+- Vídeo de 8 s = 240 quadros = 4 cenas.
+
+| batida | duração s | quadros |
+|---|---|---|
+| titulo | 1,0–1,4 | 30–42 |
+| tela | 3,6–5,0 | 110–150 (um passo a cada 30–45 quadros) |
+| atalho | 1,2–1,6 | 36–48 |
+| fim | 1,2–1,6 | 36–48 |
+
+- Leitura mínima: cada legenda de passo fica ≥ 26 quadros; a tarefa nova fica ≥ 10 quadros visível antes do zoom sair.
+- Evento novo (zoom, clique, modal, letra) a cada ≤ 0,7 s dentro da cena da tela; 12–20 quadros de pausa depois do clique final.
+
+## v2
+
+| batida | quadros |
+|---|---|
+| gancho (título + janela entra) | 36–48 |
+| passo (câmera chega + clique + respiro) | 40–56 |
+| atalho | 36–48 |
+
+- Clique ≥ 6 quadros depois que a câmera chega; respiro ≥ 8 depois do clique.

package/kits/tutorial-tela/regras/som.md

@@ -0,0 +1,21 @@
+# Som
+
+- Trilha: `assets/trilha/passo-108bpm.mp3` (8,6 s, 108 bpm, calm-punch, tom F), volume **0,42**, fade nos últimos **20 quadros**. Vídeo maior: gere outra (`music make --preset calm-punch --bpm 108 --key F --force`), sem loop.
+- Com narração: trilha a **0,2** e efeitos a 70%.
+
+| som | volume | quando |
+|---|---|---|
+| `clique` | 0,9 | cada clique do cursor, aperto da tecla |
+| `digitar` | 0,6 | a rajada de teclas no início da digitação |
+| `pop-cartao` | 0,9 | modal abre, tecla pousa |
+| `pop-palavra` | 0,9 | palavra do título, rótulo do atalho |
+| `sucesso` | 0,8 | o último clique deu certo (linha nova entra) |
+| `swoosh` | 0,85 | a câmera voa até o próximo controle |
+| `whoosh-entra` | 0,8 | entrada de cena sem lado (−1 quadro) |
+| `impacto` | 0,85 | opcional, no título |
+| `subida` | 0,65 | opcional, antes do fim |
+| `assinatura` | 0,85 | fecho |
+| `whoosh-sai` | 0,65 | saída grande (opcional) |
+
+- No máximo **3 sons por segundo**; nunca o mesmo arquivo duas vezes seguidas (clique, pop, clique é ok). Som entra 1 a 2 quadros antes do visual.
+- Alvo −14 LUFS, pico −1,5 dBTP.

package/kits/tutorial-tela/regras/tipografia.md

@@ -0,0 +1,15 @@
+# Tipografia
+
+- **Plus Jakarta Sans 500–800** (títulos, UI do app, passos) · **JetBrains Mono 500–700** (rótulos pequenos: "passo 1 de 3", etiquetas, endereço). Registradas como `"TS Jakarta"` e `"TS JetBrains Mono"`.
+- Títulos em caixa normal, tracking −0,03 a −0,04 em, `line-height` 1,1–1,18.
+
+| papel | fonte | tamanho px | máx. caracteres |
+|---|---|---|---|
+| título de abertura | Jakarta 800 | 96, tracking −0,03 em | 14 por linha |
+| frase do passo | Jakarta 800 | 46 | 24 |
+| "PASSO N DE M" | Mono 500 | 22, tracking 0,08 em | 14 |
+| número do passo | Jakarta 800 | 46 num círculo de 84 | 1 |
+| tecla com letra | Jakarta 800 | 100 numa tecla de 190 | 1 |
+| legenda do atalho | Jakarta 800 | 64 | 22 |
+| UI: título / linha / botão | Jakarta 800 / 600 / 700 | 54 / 30 / 24 (na janela 1400 × 940) | 12 / 28 / 14 |
+| UI: endereço, etiqueta | Mono 500 | 20 | 16 |

package/kits/ugc-reels/SKILL.md

@@ -0,0 +1,53 @@
+---
+slug: ugc-reels
+nome: UGC de Reels
+descricao: vídeo de celular em tela cheia com tremida de mão, cortes secos, legenda branca com contorno e palavra ativa em chip amarelo, emoji, cabeçalho de perfil e comentário
+familia: Redes sociais
+versao: 1
+quando:
+  - "depoimento de cliente ou criador sobre um produto ou app"
+  - "anúncio com cara de vídeo feito no celular, "review" ou "como eu uso""
+  - "reels de prova social com comentários e curtidas"
+  - "chamada "link na bio" com cara nativa de rede social"
+  - "vídeo de influenciadora, bastidor ou tutorial rápido"
+nao_serve:
+  - "vídeo de marca polida, cinematográfica ou luxuosa (use apple-tipografico ou metal-liquido)"
+  - "abertura de evento sem foto ou vídeo (o kit vive de imagem real)"
+---
+
+# UGC de Reels
+
+Parece que **alguém gravou no celular e editou no próprio app**. A imagem (foto ou vídeo do cliente) ocupa a tela toda, com **tremida de mão** (±5 px, ±0,4°), contraste 1,08 e vinheta; a cada 12–20 quadros dá um **corte seco com zoom** alternando 1,0× e 1,2×. A legenda é **Montserrat 900 branca com contorno preto** no terço de baixo, e a palavra falada no momento vira um **chip amarelo** que pula; no fim da frase entra um emoji com overshoot. Em cima, o **cabeçalho de perfil** (barrinhas de story, avatar, @usuário, botão Seguir). Por cima da imagem, no máximo um adereço: **bolha de comentário**, nota escrita à mão em Caveat, corações subindo pela lateral ou o botão **LINK NA BIO** com a mãozinha. O fim é um cartão com avatar de anel de story. Sem polimento demais: o charme é o ar de feito em casa.
+
+## 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 → 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 = 15 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 |
+|---|---|---|
+| `VideoCelular` | imagem em tela cheia com tremida de mão, vinheta e cortes secos com zoom alternado | todas |
+| `LegendaEmoji` | legenda branca com contorno; a palavra ativa vira chip amarelo; emoji ao fim da frase | todas |
+| `CabecalhoPerfil` | barrinhas de story, avatar, @usuário e botão Seguir | gancho |
+| `Comentario` | bolha de comentário com avatar, nome, texto e coração | prova |
+| `NotaDeMao` | nota em Caveat com contorno e seta à mão | virada, prova |
+| `Reacoes` | emojis que sobem pela lateral direita | virada |
+| `BotaoLink` | botão LINK NA BIO com mãozinha e anel pulsando | cta |
+| `AssinaturaMarca` | cartão final: imagem borrada, avatar com anel de story, @usuário e botão | marca |
+| `Fundo`, `Camera`, `Cena` | preto liso (só aparece nos 3 quadros de corte entre imagens) | todas |
+| `Efeito`, `Trilha` | sons e trilha do kit | todas |
+
+## Proibido
+
+- Imagem com cara de banco ou com moldura: a imagem é tela cheia, sem cantos arredondados.
+- Legenda sem contorno preto, em caixa baixa pequena ou com mais de 2 linhas de 3 palavras.
+- Mais de 1 adereço (comentário, nota, corações, botão) por cena e mais de 1 chip amarelo por vez.
+- Transição elegante: só corte seco (com zoom de 12 quadros), nada de fade ou deslize longo.
+- Emoji pequeno (< 64 px) ou mais de 1 por frase.
+- Flash branco, glitch ou efeito de TV; a imperfeição é só a tremida.
+- Texto fora da área segura (168–1330 px na vertical, 96 px nas laterais).

package/kits/ugc-reels/assets/ASSETS.md

@@ -0,0 +1,22 @@
+# Assets do kit ugc-reels
+
+| arquivo | o que é | origem | licença |
+|---|---|---|---|
+| `fontes/montserrat-latin.woff2` | Montserrat (700 900), subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Montserrat`), baixado em 26/10/2026 | SIL OFL 1.1, texto em `fontes/OFL-Montserrat.txt` |
+| `fontes/caveat-latin.woff2` | Caveat (600 700), subset latino | Google Fonts (`fonts.googleapis.com/css2?family=Caveat`), baixado em 26/10/2026 | SIL OFL 1.1, texto em `fontes/OFL-Caveat.txt` |
+| `sons/corte.mp3` | cada corte seco entre imagens | sintetizado: MotionCraft `sfx make`, tipo `slot_tick`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/palavra.mp3` | início de cada frase da legenda | sintetizado: MotionCraft `sfx make`, tipo `word_pop`, pacote `soft-pop` | sem samples; síntese própria (CC0) |
+| `sons/pop.mp3` | emoji, avatar ou adereço que entra | sintetizado: MotionCraft `sfx make`, tipo `icon_pop`, pacote `soft-pop` | sem samples; síntese própria (CC0) |
+| `sons/notificacao.mp3` | bolha de comentário | sintetizado: MotionCraft `sfx make`, tipo `success`, pacote `soft-pop` | sem samples; síntese própria (CC0) |
+| `sons/whoosh.mp3` | nota ou botão que entra | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/toque.mp3` | botão LINK NA BIO | sintetizado: MotionCraft `sfx make`, tipo `button`, pacote `digital-soft` | sem samples; síntese própria (CC0) |
+| `sons/impacto.mp3` | a frase da virada | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `soft-pop` | sem samples; síntese própria (CC0) |
+| `sons/assinatura.mp3` | cartão final | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `soft-pop` | sem samples; síntese própria (CC0) |
+| `trilha/pop-120bpm.mp3` | 8,6 s a partir de 2.0 s da trilha gerada | MotionCraft `music make` (preset `warm-major`, 120 bpm, tom D) | 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-02.jpg`, `foto-03.jpg`, `foto-04.jpg`, `foto-06.jpg` | cópias de `kits/apple-tipografico/exemplos/fotos/` (Unsplash, picsum ids 2, 3, 4, 20), recorte 720×960 | Unsplash License |
+| `exemplos/logo-rotina.svg` | logo fictício desenhado para a demo | próprio |

package/kits/ugc-reels/assets/fontes/OFL-Caveat.txt

@@ -0,0 +1,92 @@
+Copyright (c) Caveat 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/ugc-reels/assets/fontes/OFL-Montserrat.txt

@@ -0,0 +1,92 @@
+Copyright (c) Montserrat 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/ugc-reels/elementos/AssinaturaMarca.tsx

@@ -0,0 +1,28 @@
+// AssinaturaMarca: cartão final. A imagem fica borrada (24 px) e escurecida; o avatar com anel de story cai com overshoot,
+// o @usuário aparece e o botão Seguir / site fecham. Sem logo gigante: o clima é de perfil, não de comercial.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FAM_A, FONTE_A, caber, ob, seg} from './base';
+
+export type AssinaturaMarcaProps = {
+  /** imagem de fundo (borrada) */
+  fundo: string;
+  logo: string;
+  usuario: string;
+  endereco?: string;
+  inicio?: number;
+};
+
+export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({fundo, logo, usuario, endereco, inicio = 0}) => {
+  const f = useCurrentFrame() - inicio;
+  const av = ob(seg(f, 0, 12), 1.9), us = ob(seg(f, 8, 20), 1.9), bt = ob(seg(f, 16, 28), 1.9);
+  const tu = caber(usuario, 70, FAM_A, 800, 900, -0.01), te = caber(endereco ?? '', 46, FAM_A, 800, 700, 0);
+  return <>
+    <img src={fundo} style={{position: 'absolute', inset: 0, width: 1080, height: 1920, objectFit: 'cover', filter: 'blur(24px) brightness(0.45) saturate(1.1)', transform: `scale(${1.2 + f * 0.001})`}} />
+    <div style={{position: 'absolute', left: 540 - 190, top: 540 - 190, width: 380, height: 380, borderRadius: '50%', background: `conic-gradient(${COR.amarelo}, ${COR.vermelho}, ${COR.amarelo})`, padding: 14, boxSizing: 'border-box', transform: `scale(${av})`, opacity: Math.min(1, av * 2)}}>
+      <img src={logo} style={{width: '100%', height: '100%', borderRadius: '50%', border: '10px solid #0E0E10', boxSizing: 'border-box', objectFit: 'cover'}} />
+    </div>
+    <div style={{position: 'absolute', left: 0, width: 1080, top: 800, textAlign: 'center', fontFamily: FONTE_A, fontWeight: 900, fontSize: tu, letterSpacing: '-0.01em', color: COR.branco, transform: `scale(${us})`, opacity: Math.min(1, us * 2)}}>{usuario}</div>
+    {endereco && <div style={{position: 'absolute', left: 540 - 300, top: 940, width: 600, height: 110, borderRadius: 55, background: COR.amarelo, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONTE_A, fontWeight: 900, fontSize: te, color: COR.preto, transform: `scale(${bt})`, opacity: Math.min(1, bt * 2)}}>{endereco}</div>}
+  </>;
+};

package/kits/ugc-reels/elementos/BotaoLink.tsx

@@ -0,0 +1,24 @@
+// BotaoLink: botão amarelo LINK NA BIO (Montserrat 900) com mãozinha 👆 que quica 14 px e um anel que pulsa a cada 20 quadros.
+// Entra com overshoot 1,9.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FAM_A, FONTE_A, caber, larguraTexto, ob, seg} from './base';
+
+export type BotaoLinkProps = {
+  texto?: string;
+  y?: number;
+  tamanho?: number;
+  inicio?: number;
+};
+
+export const BotaoLink: React.FC<BotaoLinkProps> = ({texto = 'LINK NA BIO', y = 1000, tamanho = 72, inicio = 0}) => {
+  const f = useCurrentFrame() - inicio;
+  if (f < -1) return null;
+  const t = caber(texto, tamanho, FAM_A, 700, 900, 0.01), w = larguraTexto(texto, t, FAM_A, 900, 0.01) + t * 1.8, h = t * 2.2;
+  const p = ob(seg(f, 0, 12), 1.9), pulso = (f % 20) / 20;
+  return <div style={{position: 'absolute', left: 540 - w / 2, top: y - h / 2, width: w, height: h, transform: `scale(${p})`}}>
+    <div style={{position: 'absolute', inset: -pulso * 34, borderRadius: h, border: `5px solid ${COR.amarelo}`, opacity: (1 - pulso) * 0.8}} />
+    <div style={{position: 'absolute', inset: 0, borderRadius: h, background: COR.amarelo, boxShadow: '0 16px 40px rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONTE_A, fontWeight: 900, fontSize: t, letterSpacing: '0.01em', color: COR.preto, whiteSpace: 'nowrap'}}>{texto}</div>
+    <div style={{position: 'absolute', left: w / 2 - 50, top: h - 10 + Math.abs(Math.sin(f / 5)) * 14, fontSize: 100, lineHeight: 1}}>👆</div>
+  </div>;
+};

package/kits/ugc-reels/elementos/CabecalhoPerfil.tsx

@@ -0,0 +1,38 @@
+// CabecalhoPerfil: barrinhas de story no topo (a da cena enche de 0 a 100%), avatar com anel, @usuário e botão Seguir.
+// Desce 80 px com overshoot em 12 quadros.
+import React from 'react';
+import {useCurrentFrame, useVideoConfig} from 'remotion';
+import {COR, FAM_A, FONTE_A, ob, seg} from './base';
+
+export type CabecalhoPerfilProps = {
+  usuario: string;
+  /** inicial do avatar (ou URL de imagem se começar com http ou /) */
+  avatar?: string;
+  barras?: number;
+  /** barra ativa (0-based) */
+  ativa?: number;
+  /** duração da cena em quadros pra encher a barra */
+  duracao?: number;
+  inicio?: number;
+};
+
+export const CabecalhoPerfil: React.FC<CabecalhoPerfilProps> = ({usuario, avatar = 'B', barras = 5, ativa = 0, duracao = 42, inicio = 0}) => {
+  const f = useCurrentFrame();
+  void useVideoConfig;
+  if (f < inicio - 1) return null;
+  const p = ob(seg(f, inicio, inicio + 12), 1.9), enche = seg(f, inicio, inicio + duracao);
+  const img = /^(https?:|\/|data:|static)/.test(avatar) || avatar.includes('.');
+  return <div style={{position: 'absolute', left: 96, width: 888, top: 168, transform: `translateY(${(1 - p) * -80}px)`, opacity: Math.min(1, p * 2)}}>
+    <div style={{display: 'flex', gap: 8}}>
+      {Array.from({length: barras}, (_, i) => <div key={i} style={{flex: 1, height: 8, borderRadius: 4, background: 'rgba(255,255,255,0.35)', overflow: 'hidden'}}><div style={{width: `${i < ativa ? 100 : i === ativa ? enche * 100 : 0}%`, height: '100%', background: COR.branco}} /></div>)}
+    </div>
+    <div style={{display: 'flex', alignItems: 'center', marginTop: 30, gap: 22}}>
+      <div style={{width: 96, height: 96, borderRadius: 48, background: `conic-gradient(${COR.amarelo}, ${COR.vermelho}, ${COR.amarelo})`, padding: 7, boxSizing: 'border-box'}}>
+        <div style={{width: '100%', height: '100%', borderRadius: '50%', background: COR.cinza, border: '4px solid #0E0E10', boxSizing: 'border-box', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONTE_A, fontWeight: 900, fontSize: 42, color: COR.branco}}>{img ? <img src={avatar} style={{width: '100%', height: '100%', objectFit: 'cover'}} /> : avatar}</div>
+      </div>
+      <div style={{fontFamily: FONTE_A, fontWeight: 700, fontSize: 44, color: COR.branco, textShadow: '0 2px 8px rgba(0,0,0,0.5)'}}>{usuario}</div>
+      <div style={{marginLeft: 'auto', fontFamily: FONTE_A, fontWeight: 700, fontSize: 38, color: COR.branco, background: COR.azulSeguir, borderRadius: 14, padding: '10px 28px'}}>Seguir</div>
+    </div>
+  </div>;
+};
+void FAM_A;

package/kits/ugc-reels/elementos/Camera.tsx

@@ -0,0 +1,22 @@
+// Camera: deriva constante por baixo de tudo (zoom, deslize e giro) 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.01 + 0.01 * Math.sin(f / 70) + f * 0.0001, dx = Math.sin(f / 37) * 6, dy = Math.cos(f / 51) * 5;
+  let rot = Math.sin(f / 83) * 0.004;
+  for (const h of batidas) if (f >= h) {
+    const d = Math.exp(-(f - h) / 5) * forca;
+    z += 0.025 * d; dx += 6 * d * Math.sin((f - h) * 2.7 + h); dy += 6 * d * Math.cos((f - h) * 3.3 + h);
+    rot += 0.004 * d * Math.sin((f - h) * 1.9 + 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% 50%'}}>{children}</AbsoluteFill>;
+};

package/kits/ugc-reels/elementos/Cena.tsx

@@ -0,0 +1,48 @@
+// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco) e a saída cruza 4 quadros
+// com a entrada da próxima. Dentro dela, useCurrentFrame() começa em 0.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {c01, e5, ob, seg} from './base';
+
+export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'giro' | 'queda' | 'circulo' | 'nenhuma';
+export type Saida = 'sobe' | 'esquerda' | 'zoom' | 'gira' | 'encolhe';
+export const SOBREPOE = 4; // quadros em que a saída desta cena cruza a entrada da próxima
+export const QUADROS_ENTRADA = 6;
+
+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; saida?: Saida; ultima?: boolean; children: React.ReactNode};
+
+const Janela: React.FC<{duracao: number; entrada: Entrada; saida: Saida; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, saida, ultima, children}) => {
+  const f = useCurrentFrame();
+  const p = seg(f, 0, QUADROS_ENTRADA);
+  const en = entrada === 'nenhuma' ? 0 : 1 - ob(p, 1.2);
+  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
+  let tf = '';
+  let clip: string | undefined;
+  if (entrada === 'subir') tf += `translateY(${en * 300}px) `;
+  if (entrada === 'queda') tf += `translateY(${-en * 520}px) `;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9}) `;
+  if (entrada === 'direita') tf += `translateX(${en * 800}px) `;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 800}px) `;
+  if (entrada === 'giro') tf += `rotate(${-en * 16}deg) scale(${1 + en * 0.6}) `;
+  if (entrada === 'circulo') clip = `circle(${e5(p) * 1700 + 4}px at 50% 52%)`;
+  if (saida === 'sobe') tf += `translateY(${-xo * 240}px) scale(${1 + xo * 0.08})`;
+  if (saida === 'esquerda') tf += `translateX(${-xo * 820}px) rotate(${-xo * 4}deg)`;
+  if (saida === 'zoom') tf += `scale(${1 + xo * 0.9})`;
+  if (saida === 'gira') tf += `rotate(${xo * 12}deg) scale(${1 - xo * 0.25}) translateY(${xo * 300}px)`;
+  if (saida === 'encolhe') tf += `scale(${1 - xo * 0.35})`;
+  const blur = c01(en) * 0 + xo * 0;
+  return <AbsoluteFill style={{transform: tf, clipPath: clip, opacity: (1 - c01(en) * 0.85) * (1 - xo), filter: blur > 0.3 ? `blur(${blur}px)` : undefined}}>{children}</AbsoluteFill>;
+};
+
+export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'subir', saida = 'encolhe', 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} saida={saida} ultima={ultima}>{children}</Janela>
+    </CenaCtx.Provider>
+  </Sequence>;
+};