primocode 10.19.0 → 11.1.0

package/materiais/tunel/formas/TunelDeFormas.tsx

@@ -0,0 +1,52 @@
+// TunelDeFormas: 14 anéis chapados vindo na direção da câmera, em perspectiva exponencial (r = 30·(1500/30)^t),
+// com torção e curva. No centro fica uma janela limpa, da mesma forma do túnel, onde o texto mora.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {ALTURA, CENTRO_Y, COR, CORES_FAIXA, LARGURA, poligono, seg, e5} from '../base';
+
+export type FormaTunel = 'quadrado' | 'circulo' | 'hexagono' | 'triangulo' | 'octogono';
+export type TunelDeFormasProps = {
+  forma?: FormaTunel;
+  /** apótema da janela limpa, em px (0 = sem janela) */
+  abertura?: number;
+  /** anéis por segundo */
+  velocidade?: number;
+  /** quanto os anéis giram, 0..2 */
+  torcao?: number;
+  /** quanto o túnel faz curva, 0..2 */
+  curva?: number;
+  cores?: string[];
+  /** cor da janela */
+  janela?: string;
+  /** quadros até a velocidade cair a 40% no fim (marca) */
+  desacelera?: number;
+  /** o túnel se abre (a janela cresce de 0) em N quadros */
+  abre?: number;
+};
+
+const LADOS: Record<FormaTunel, number> = {quadrado: 4, circulo: 0, hexagono: 6, triangulo: 3, octogono: 8};
+const N = 14;
+
+export const TunelDeFormas: React.FC<TunelDeFormasProps> = ({forma = 'quadrado', abertura = 400, velocidade = 0.43, torcao = 1, curva = 1, cores = CORES_FAIXA, janela = COR.creme, desacelera, abre = 14}) => {
+  const f = useCurrentFrame();
+  const v = desacelera ? velocidade * (1 - 0.6 * seg(f, 0, desacelera)) : velocidade;
+  const cam = (f / 30) * v + 6.3;
+  const k0 = Math.floor(cam * N), lados = LADOS[forma];
+  const janelaR = abertura * e5(seg(f, 0, abre));
+  const aneis = [];
+  for (let k = k0 - N + 1; k <= k0; k++) {
+    const t = (cam * N - k) / N, r = 30 * Math.pow(1500 / 30, t);
+    if (r <= janelaR) continue;
+    const bend = Math.pow(1 - t, 2) * 120 * curva, cx = LARGURA / 2 + Math.sin(f * 0.05 + 1) * bend, cy = CENTRO_Y + Math.cos(f * 0.04) * bend * 0.6;
+    const rot = ((1 - t) * 70 * torcao + f * 0.25 * torcao) * (Math.PI / 180);
+    const cor = cores[((k % cores.length) + cores.length) % cores.length];
+    aneis.push(lados === 0
+      ? <circle key={k} cx={cx} cy={cy} r={r} fill={cor} />
+      : <polygon key={k} points={poligono(lados, r, cx, cy, rot)} fill={cor} />);
+  }
+  return <svg width={LARGURA} height={ALTURA} viewBox={`0 0 ${LARGURA} ${ALTURA}`} style={{position: 'absolute', inset: 0}}>
+    <rect width={LARGURA} height={ALTURA} fill={cores[0]} />
+    {aneis}
+    {janelaR > 1 && (lados === 0 ? <circle cx={LARGURA / 2} cy={CENTRO_Y} r={janelaR} fill={janela} /> : <polygon points={poligono(lados, janelaR, LARGURA / 2, CENTRO_Y, 0)} fill={janela} />)}
+  </svg>;
+};

package/materiais/tunel/pecas.json

@@ -0,0 +1,475 @@
+{
+  "estilo": "tunel",
+  "nome": "Túnel 3D",
+  "versao": 1,
+  "fps": 30,
+  "pecas": [
+    {
+      "nome": "LinhasDeVelocidade",
+      "categoria": "formas",
+      "tipo": "componente",
+      "arquivo": "formas/LinhasDeVelocidade.tsx",
+      "descricao": "44 riscos que saem do centro nos cortes (10 quadros).",
+      "params": [
+        "inicio?",
+        "duracao?",
+        "cor?",
+        "quantidade?"
+      ],
+      "duracao": [
+        30,
+        90
+      ],
+      "tags": [
+        "forma",
+        "linhas",
+        "de"
+      ]
+    },
+    {
+      "nome": "PlacaVoadora",
+      "categoria": "formas",
+      "tipo": "componente",
+      "arquivo": "formas/PlacaVoadora.tsx",
+      "descricao": "placa colorida (cantos 36 px, borda preta) com 1–2 linhas.",
+      "params": [
+        "linhas",
+        "cor?",
+        "corTexto?",
+        "y?",
+        "tamanho?",
+        "inicio?",
+        "fim?",
+        "rot?"
+      ],
+      "duracao": [
+        30,
+        90
+      ],
+      "tags": [
+        "forma",
+        "placa",
+        "voadora"
+      ]
+    },
+    {
+      "nome": "TunelDeFormas",
+      "categoria": "formas",
+      "tipo": "componente",
+      "arquivo": "formas/TunelDeFormas.tsx",
+      "descricao": "14 anéis chapados vindo na direção da câmera, em perspectiva exponencial (r = 30·(1500/30)^t), com torção e curva.",
+      "params": [
+        "forma?",
+        "abertura?",
+        "velocidade?",
+        "torcao?",
+        "curva?",
+        "cores?",
+        "janela?",
+        "desacelera?",
+        "abre?"
+      ],
+      "duracao": [
+        30,
+        90
+      ],
+      "tags": [
+        "forma",
+        "tunel",
+        "de"
+      ]
+    },
+    {
+      "nome": "Fundo",
+      "categoria": "texturas",
+      "tipo": "componente",
+      "arquivo": "texturas/Fundo.tsx",
+      "descricao": "creme chapado (a cor da janela). Só um disco claro que passeia bem devagar, pra o chão não ficar morto.",
+      "params": [
+        "cor?",
+        "velocidade?"
+      ],
+      "duracao": null,
+      "tags": [
+        "texturas",
+        "fundo"
+      ]
+    },
+    {
+      "nome": "Particulas",
+      "categoria": "texturas",
+      "tipo": "componente",
+      "arquivo": "texturas/Particulas.tsx",
+      "descricao": "Camada de pontos e traços flutuando em 3 profundidades (movimento de fundo constante).",
+      "params": [
+        "quantidade?",
+        "cor?",
+        "semente?",
+        "velocidade?",
+        "opacidade?"
+      ],
+      "duracao": null,
+      "tags": [
+        "fundo",
+        "movimento",
+        "densidade"
+      ]
+    },
+    {
+      "nome": "Cena",
+      "categoria": "transicoes",
+      "tipo": "componente",
+      "arquivo": "transicoes/Cena.tsx",
+      "descricao": "janela de tempo de um plano. Entra com movimento (nunca corte seco) e a saída cruza 10 quadros com a entrada da próxima. Dentro dela, useCurrentFrame() começa em 0.",
+      "params": [
+        "de",
+        "ate",
+        "entrada?",
+        "saida?",
+        "ultima?",
+        "children"
+      ],
+      "duracao": [
+        24,
+        150
+      ],
+      "tags": [
+        "transicoes",
+        "cena"
+      ]
+    },
+    {
+      "nome": "CorteImpacto",
+      "categoria": "transicoes",
+      "tipo": "componente",
+      "arquivo": "transicoes/CorteImpacto.tsx",
+      "descricao": "Soco de corte: clarão, tremida e zoom-pop que decaem em ~10 quadros.",
+      "params": [
+        "em",
+        "forca?",
+        "clarao?",
+        "corClarao?",
+        "children"
+      ],
+      "duracao": [
+        10,
+        14
+      ],
+      "tags": [
+        "corte",
+        "impacto",
+        "energia"
+      ]
+    },
+    {
+      "nome": "AssinaturaMarca",
+      "categoria": "tipografia",
+      "tipo": "componente",
+      "arquivo": "tipografia/AssinaturaMarca.tsx",
+      "descricao": "a última cena. Na janela, o logo chega do fundo, depois o nome em Syncopate e o endereço em Chakra Petch.",
+      "params": [
+        "logo",
+        "nome",
+        "endereco?",
+        "inicio?"
+      ],
+      "duracao": [
+        30,
+        90
+      ],
+      "tags": [
+        "tipografia",
+        "assinatura",
+        "marca"
+      ]
+    },
+    {
+      "nome": "NumeroGigante",
+      "categoria": "tipografia",
+      "tipo": "componente",
+      "arquivo": "tipografia/NumeroGigante.tsx",
+      "descricao": "número ou data enorme em Syncopate 700, que chega do ponto de fuga com overshoot; uma barra vermelha cresce embaixo e a legenda (Chakra Petch) sobe depois.",
+      "params": [
+        "texto",
+        "legenda?",
+        "y?",
+        "tamanho?",
+        "inicio?",
+        "fim?",
+        "cor?"
+      ],
+      "duracao": [
+        30,
+        90
+      ],
+      "tags": [
+        "tipografia",
+        "numero",
+        "gigante"
+      ]
+    },
+    {
+      "nome": "TituloTunel",
+      "categoria": "tipografia",
+      "tipo": "componente",
+      "arquivo": "tipografia/TituloTunel.tsx",
+      "descricao": "1 a 2 linhas em Syncopate 700 que nascem no ponto de fuga (8% do tamanho), crescem até a janela com overshoot, ficam paradas pra leitura e atravessam a tela (escala 6x, some) quando chega…",
+      "params": [
+        "linhas",
+        "y?",
+        "tamanho?",
+        "inicio?",
+        "intervalo?",
+        "fim?",
+        "cor?",
+        "destaque?"
+      ],
+      "duracao": [
+        30,
+        90
+      ],
+      "tags": [
+        "tipografia",
+        "titulo",
+        "tunel"
+      ]
+    },
+    {
+      "nome": "Camera",
+      "categoria": "camera",
+      "tipo": "componente",
+      "arquivo": "camera/Camera.tsx",
+      "descricao": "deriva constante por baixo de tudo (zoom, deslize e giro) e um soco em cada batida.",
+      "params": [
+        "batidas?",
+        "forca?",
+        "children"
+      ],
+      "duracao": null,
+      "tags": [
+        "camera",
+        "camera"
+      ]
+    },
+    {
+      "nome": "CameraDeriva",
+      "categoria": "camera",
+      "tipo": "componente",
+      "arquivo": "camera/CameraDeriva.tsx",
+      "descricao": "Câmera 3D com perspectiva: chaves {em,z,x,y,giro} levam o foco de uma a outra e por baixo roda uma deriva que nunca para.",
+      "params": [
+        "chaves?",
+        "deriva?",
+        "perspectiva?",
+        "children"
+      ],
+      "duracao": null,
+      "tags": [
+        "3d",
+        "camera",
+        "movimento"
+      ]
+    },
+    {
+      "nome": "assinatura",
+      "categoria": "sons",
+      "tipo": "audio",
+      "arquivo": "sons/assinatura.mp3",
+      "descricao": "revelação da marca.",
+      "params": [
+        "em",
+        "volume?"
+      ],
+      "duracao": [
+        48,
+        48
+      ],
+      "tags": [
+        "sfx"
+      ],
+      "volumeSugerido": 0.9
+    },
+    {
+      "nome": "clique",
+      "categoria": "sons",
+      "tipo": "audio",
+      "arquivo": "sons/clique.mp3",
+      "descricao": "detalhe / endereço.",
+      "params": [
+        "em",
+        "volume?"
+      ],
+      "duracao": [
+        48,
+        48
+      ],
+      "tags": [
+        "sfx"
+      ],
+      "volumeSugerido": 0.8
+    },
+    {
+      "nome": "impacto",
+      "categoria": "sons",
+      "tipo": "audio",
+      "arquivo": "sons/impacto.mp3",
+      "descricao": "a palavra principal assentando.",
+      "params": [
+        "em",
+        "volume?"
+      ],
+      "duracao": [
+        48,
+        48
+      ],
+      "tags": [
+        "sfx"
+      ],
+      "volumeSugerido": 0.85
+    },
+    {
+      "nome": "passa",
+      "categoria": "sons",
+      "tipo": "audio",
+      "arquivo": "sons/passa.mp3",
+      "descricao": "texto que atravessa a tela.",
+      "params": [
+        "em",
+        "volume?"
+      ],
+      "duracao": [
+        48,
+        48
+      ],
+      "tags": [
+        "sfx"
+      ],
+      "volumeSugerido": 0.85
+    },
+    {
+      "nome": "subida",
+      "categoria": "sons",
+      "tipo": "audio",
+      "arquivo": "sons/subida.mp3",
+      "descricao": "antes da data.",
+      "params": [
+        "em",
+        "volume?"
+      ],
+      "duracao": [
+        48,
+        48
+      ],
+      "tags": [
+        "sfx"
+      ],
+      "volumeSugerido": 0.6
+    },
+    {
+      "nome": "tick",
+      "categoria": "sons",
+      "tipo": "audio",
+      "arquivo": "sons/tick.mp3",
+      "descricao": "troca de forma do túnel.",
+      "params": [
+        "em",
+        "volume?"
+      ],
+      "duracao": [
+        48,
+        48
+      ],
+      "tags": [
+        "sfx"
+      ],
+      "volumeSugerido": 0.7
+    },
+    {
+      "nome": "varre",
+      "categoria": "sons",
+      "tipo": "audio",
+      "arquivo": "sons/varre.mp3",
+      "descricao": "linhas de velocidade.",
+      "params": [
+        "em",
+        "volume?"
+      ],
+      "duracao": [
+        48,
+        48
+      ],
+      "tags": [
+        "sfx"
+      ],
+      "volumeSugerido": 0.7
+    },
+    {
+      "nome": "whoosh",
+      "categoria": "sons",
+      "tipo": "audio",
+      "arquivo": "sons/whoosh.mp3",
+      "descricao": "entrada de cena / texto que chega do fundo.",
+      "params": [
+        "em",
+        "volume?"
+      ],
+      "duracao": [
+        48,
+        48
+      ],
+      "tags": [
+        "sfx"
+      ],
+      "volumeSugerido": 0.9
+    },
+    {
+      "nome": "Som",
+      "categoria": "sons",
+      "tipo": "componente",
+      "arquivo": "sons/Som.tsx",
+      "descricao": "Componentes Efeito (um som no quadro em) e Trilha (música com fade de saída) que tocam os áudios acima.",
+      "params": [
+        "som",
+        "em",
+        "volume?"
+      ],
+      "duracao": null,
+      "tags": [
+        "audio",
+        "codigo"
+      ]
+    },
+    {
+      "nome": "trilha",
+      "categoria": "trilha",
+      "tipo": "audio",
+      "arquivo": "trilha/tech-128bpm.mp3",
+      "descricao": "8,6 s a partir de 1.875 s da trilha gerada (128 bpm); repetir em laço para vídeos longos.",
+      "params": [
+        "volume?",
+        "saida?"
+      ],
+      "duracao": [
+        244,
+        244
+      ],
+      "tags": [
+        "trilha",
+        "musica"
+      ],
+      "bpm": 128
+    },
+    {
+      "nome": "paleta",
+      "categoria": "paleta",
+      "tipo": "dados",
+      "arquivo": "cores/paleta.json",
+      "descricao": "Cores, sombras, area segura, curvas e medidas do estilo (cores/paleta.png é a amostra visual).",
+      "params": [],
+      "duracao": null,
+      "tags": [
+        "cor"
+      ]
+    }
+  ]
+}

package/materiais/tunel/referencia/analise.md

@@ -0,0 +1,83 @@
+# Análise do vídeo de referência: Túnel 3D
+
+Método Clube do Motion: dissecar o vídeo pronto pra aprender a técnica, não pra copiar. Este vídeo (`referencia.mp4`, vertical 1080x1920 renderizado em 540x960) é o filme de demonstração do estilo; o código que o fez NÃO está aqui. A IA pode olhar o vídeo e esta análise; a cena nova se escreve do zero com as peças desta pasta.
+
+- Duração: 240 quadros = 8.0 s a 30 fps.
+- Trilha: trilha/tech-128bpm.mp3, 128 bpm (1 batida = 14.1 quadros = 0.47 s).
+- Cenas: 6; cortes em 1.4 s, 2.8 s, 4.2 s, 5.4 s, 6.8 s.
+
+## Linha do tempo, segundo a segundo
+
+| tempo | quadros | entrada | peças em cena (pasta/Peça) | sons |
+|---|---|---|---|---|
+| 0.0 s-1.4 s | 0-42 | nenhuma | formas/TunelDeFormas, tipografia/NumeroGigante | whoosh@0.1 s, impacto@0.6 s, clique@0.9 s |
+| 1.4 s-2.8 s | 42-84 | zoom | formas/TunelDeFormas, tipografia/TituloTunel, formas/LinhasDeVelocidade | tick@1.4 s, whoosh@1.5 s, impacto@2.1 s |
+| 2.8 s-4.2 s | 84-126 | direita | formas/TunelDeFormas, formas/PlacaVoadora | whoosh@2.9 s, passa@3.8 s |
+| 4.2 s-5.4 s | 126-162 | zoom | formas/TunelDeFormas, formas/PlacaVoadora | whoosh@4.3 s, passa@5.0 s |
+| 5.4 s-6.8 s | 162-204 | zoom | formas/TunelDeFormas, tipografia/NumeroGigante | subida@5.3 s, impacto@6.0 s, clique@6.4 s |
+| 6.8 s-8.0 s | 204-240 | zoom | formas/TunelDeFormas, tipografia/AssinaturaMarca | assinatura@6.9 s, clique@7.7 s |
+
+Fundo, partículas e a câmera valem o vídeo todo (fundo vivo + câmera em perspectiva sempre).
+
+## Cortes e batida
+
+- Corte em 1.4 s (quadro 42): batida 2.99 (NA batida).
+- Corte em 2.8 s (quadro 84): batida 5.97 (NA batida).
+- Corte em 4.2 s (quadro 126): batida 8.96 (NA batida).
+- Corte em 5.4 s (quadro 162): batida 11.52 (fora da batida: corte na voz ou no gesto).
+- Corte em 6.8 s (quadro 204): batida 14.51 (fora da batida: corte na voz ou no gesto).
+
+## Câmera
+
+A câmera deste estilo é a peça `camera/Camera` (ver o código da peça): ela dá o empurrão nos cortes e uma deriva contínua. No material novo, `camera/CameraDeriva` (chaves {em, z, x, y, giro}) acrescenta o controle por chaves.
+
+## Números de easing e tempos
+
+- `e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);`
+- `ob = (t: number, s = 1.7) => {const x = c01(t) - 1; return 1 + (s + 1) * x * x * x + s * x * x;};`
+
+Movimentos medidos no estilo:
+
+| movimento | duração | valores |
+|---|---|---|
+| avanço do túnel | contínuo | 0,0143 volta de anel por quadro (0,43/s); 14 anéis |
+| torção | contínuo | cada anel gira (1 − t) · 70° + 0,25°/quadro |
+| curva | contínuo | anéis distantes se deslocam até 120 px, `sin(0,05·f)` |
+| texto chega | 16 quadros | escala 0,08 → 1 do ponto de fuga com overshoot 1,7 |
+| texto atravessa | 12 quadros | escala 1 → 6, opacidade 1 → 0, desfoque 10 px |
+| linhas de velocidade | 10 quadros | 44 riscos de 120 a 700 px saindo do centro |
+| entrada de cena | 12 quadros | `zoom` 1,9× · `subir` 300 px · `direita` 800 px |
+| câmera (sempre) | contínuo | zoom 1,015 + 0,0002/quadro ± 0,01, giro ±0,57°; soco +0,03 |
+
+## Ritmo
+
+- 30 fps. Uma batida da trilha = **14.0625 quadros** (128 bpm). Cortes em múltiplos de 14 quadros: 0, 14, 28, 42, 56, 70, 84, 98, 112, 126, 140, 154, 168, 182, 196, 210, 224.
+| batida | duração (s) | quadros |
+|---|---|---|
+| gancho | 1,2–1,8 | 36–54 |
+| virada | 1,3–2,0 | 39–60 |
+| prova (cada) | 1,1–1,6 | 33–48 |
+| data | 1,2–1,8 | 36–54 |
+| marca | 1,6–3,0 | 48–90 |
+
+## Som
+
+- Trilha: `assets/trilha/tech-128bpm.mp3` (8,6 s, 128 bpm), volume **0.55**, fade de saída nos últimos **20 quadros**. Vídeo maior que 8,6 s: gere uma trilha nova no MotionCraft (`music make`, preset `tech-bright`, 128 bpm, tom C), não faça loop deste trecho.
+- Com narração: trilha a **0.28** e efeitos a 70% do volume da tabela.
+- Efeitos (todos sintetizados) e volume padrão:
+| som | volume | quando |
+|---|---|---|
+| `whoosh` | 0.9 | entrada de cena / texto que chega do fundo |
+| `passa` | 0.85 | texto que atravessa a tela |
+| `impacto` | 0.85 | a palavra principal assentando |
+| `tick` | 0.7 | troca de forma do túnel |
+| `varre` | 0.7 | linhas de velocidade |
+
+## Técnicas pra levar (o que se vê nos quadros 1 a 4)
+
+- Composição: forma geométrica centralizada ocupando o quadro inteiro; os textos pequenos ('21 quilômetros', 'ROTA 21') ficam dentro dela.
+- Profundidade: anéis e quadrados concêntricos em camadas que se afastam como um túnel; cada anel é uma cor chapada, sem sombra, rotação diferente.
+- Densidade: alta de forma, baixa de texto: um número ou frase por quadro.
+- Tipografia: sans larga e geométrica em preto ('ROTA' com '21' em laranja); etiqueta turquesa girada para '5 MIL CORREDORES'.
+- Cor: laranja, turquesa, amarelo, preto e creme; poucas cores repetidas em cada anel.
+- Movimento: quadrados e anéis giram e escalam em direção ao centro (zoom infinito); o cartão central encaixa por rotação.