primocode 10.17.1 → 11.0.0

package/kits/synthwave/assets/fontes/OFL-Orbitron.txt

@@ -0,0 +1,93 @@
+Copyright The Orbitron Project Authors (https://github.com/theleagueof/orbitron)
+
+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/synthwave/assets/fontes/OFL-Rajdhani.txt

@@ -0,0 +1,93 @@
+Copyright The Rajdhani Project Authors (https://github.com/itfoundry/rajdhani)
+
+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/synthwave/elementos/AssinaturaMarca.tsx

@@ -0,0 +1,26 @@
+// AssinaturaMarca: a última cena. O ícone (sol listrado) sobe do horizonte, o nome em neon (degradê sol → rosa com brilho magenta,
+// −8°) entra da esquerda com sobra, uma linha ciano se estica, a tagline (Rajdhani) aparece e o endereço fica numa pílula de
+// contorno ciano. Tudo centralizado, com o céu escuro em volta.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, e5, eb, seg} from './base';
+
+export type AssinaturaMarcaProps = {nome: string; icone: string; detalhe?: string; endereco?: string; inicio?: number; y?: number};
+
+export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({nome, icone, detalhe, endereco, inicio = 0, y = 700}) => {
+  const f = useCurrentFrame();
+  const n = nome.toUpperCase();
+  const tam = caber(n, 180, LARGURA_UTIL - 40, 900, 0.02);
+  const ic = eb(seg(f, inicio, inicio + 18), 1.7), nm = eb(seg(f, inicio + 6, inicio + 22), 1.7), ln = e5(seg(f, inicio + 16, inicio + 32));
+  const base: React.CSSProperties = {position: 'absolute', left: SEGURA.lado, width: LARGURA_UTIL, top: y - 40, height: tam * 1.2, lineHeight: `${tam * 1.2}px`, textAlign: 'center', fontFamily: FONTE.titulo, fontWeight: 900, fontSize: tam, letterSpacing: '0.02em', whiteSpace: 'nowrap'};
+  return <div style={{position: 'absolute', inset: 0}}>
+    <Img src={icone} style={{position: 'absolute', left: 540 - 130, top: y - 360 + (1 - ic) * 400, width: 260, height: 260, filter: 'drop-shadow(0 0 30px rgba(255,42,109,0.6))'}} />
+    <div style={{position: 'absolute', inset: 0, transform: `translateX(${(1 - nm) * -900}px) skewX(-8deg)`, opacity: f < inicio + 6 ? 0 : 1}}>
+      <div style={{...base, color: COR.magenta, textShadow: `0 0 16px ${COR.magenta}, 0 0 44px ${COR.magenta}, -4px 0 0 ${COR.ciano}`}}>{n}</div>
+      <div style={{...base, color: 'transparent', backgroundImage: `linear-gradient(180deg, ${COR.sol} 10%, ${COR.rosa} 90%)`, WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextStroke: `2px ${COR.branco}`}}>{n}</div>
+    </div>
+    <div style={{position: 'absolute', left: 540 - 300 * ln, top: y + tam * 1.2 + 20, width: 600 * ln, height: 4, background: COR.ciano, boxShadow: `0 0 14px ${COR.ciano}`}} />
+    {detalhe && <div style={{position: 'absolute', left: SEGURA.lado, width: LARGURA_UTIL, top: y + tam * 1.2 + 50, textAlign: 'center', fontFamily: FONTE.apoio, fontWeight: 600, fontSize: 48, letterSpacing: '0.3em', color: COR.branco, textTransform: 'uppercase', opacity: seg(f, inicio + 24, inicio + 30)}}>{detalhe}</div>}
+    {endereco && <div style={{position: 'absolute', left: 540 - 300, top: y + tam * 1.2 + 140, width: 600, height: 100, borderRadius: 50, border: `4px solid ${COR.ciano}`, boxSizing: 'border-box', boxShadow: `0 0 16px ${COR.ciano}`, textAlign: 'center', fontFamily: FONTE.apoio, fontWeight: 600, fontSize: 52, lineHeight: '92px', letterSpacing: '0.2em', color: COR.ciano, textTransform: 'uppercase', opacity: seg(f, inicio + 32, inicio + 36), transform: `scale(${0.8 + 0.2 * eb(seg(f, inicio + 32, inicio + 44), 1.8)})`}}>{endereco}</div>}
+  </div>;
+};

package/kits/synthwave/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 = (fr: number, batidas: number[], forca = 1) => {
+  const f = fr;
+  let z = 1.02 + 0.014 * Math.sin(f / 120), dx = Math.sin(f / 37) * 10, dy = Math.cos(f / 51) * 8;
+  const rot = Math.sin(f / 83) * 0.005;
+  for (const h of batidas) if (f >= h) {
+    const d = Math.exp(-(f - h) / 8) * 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);
+  }
+  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/synthwave/elementos/Cena.tsx

@@ -0,0 +1,41 @@
+// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco) e sai deslizando,
+// sobrepondo 8 quadros com a próxima. Dentro dela, useCurrentFrame() começa em 0.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {e5, eb, seg} from './base';
+
+export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'girar' | 'cortar' | 'nenhuma';
+export const SOBREPOE = 8; // quadros em que a saída desta cena cruza a entrada da próxima
+
+const CenaCtx = createContext({duracao: 60});
+/** duração da cena atual em quadros (sem a sobreposição) */
+export const useDuracaoCena = () => useContext(CenaCtx).duracao;
+
+export type CenaProps = {de: number; ate: number; entrada?: Entrada; ultima?: boolean; children: React.ReactNode};
+
+const Janela: React.FC<{duracao: number; entrada: Entrada; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, ultima, children}) => {
+  const f = useCurrentFrame();
+  const q = 10; // quadros da entrada
+  const en = entrada === 'nenhuma' ? 0 : 1 - (entrada === 'cortar' ? eb(seg(f, 0, q)) : e5(seg(f, 0, q)));
+  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
+  let tf = '';
+  if (entrada === 'subir') tf += `translateY(${en * 120}px) `;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9}) `;
+  if (entrada === 'direita') tf += `translateX(${en * 348}px) `;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 348}px) `;
+  if (entrada === 'girar') tf += `rotate(${en * -14}deg) scale(${1 + en * 0.5}) `;
+  if (entrada === 'cortar') tf += `scale(${1 + en * 0.14}) `;
+  tf += `scale(${1 + xo * 0.08})`;
+  const blur = (entrada === 'cortar' ? 0 : en * 6) + xo * 6;
+  const op = entrada === 'cortar' ? 1 - xo : (1 - en * 0.6) * (1 - xo);
+  return <AbsoluteFill style={{transform: tf, opacity: op, filter: blur > 0.3 ? `blur(${blur}px)` : undefined}}>{children}</AbsoluteFill>;
+};
+
+export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'subir', 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/synthwave/elementos/Estrelas.tsx

@@ -0,0 +1,27 @@
+// Estrelas: o túnel de estrelas que cobre os cortes. 36 riscos saem do ponto de fuga (540, 1180) em ângulos fixos; o raio cresce
+// com o quadrado do tempo (até 1500 px em 20 quadros) e cada risco alonga junto. Cores: branco, ciano e magenta. É apoio de corte.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR} from './base';
+import {HORIZONTE} from './Fundo';
+
+const N = 36;
+export type EstrelasProps = {inicio?: number; duracao?: number};
+
+export const Estrelas: React.FC<EstrelasProps> = ({inicio = 0, duracao = 20}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  if (t < 0 || t >= duracao) return null;
+  const k = t / duracao;
+  return <svg width="1080" height="1920" style={{position: 'absolute', inset: 0}}>
+    {Array.from({length: N}, (_, i) => {
+      const a = (i / N) * Math.PI * 2 + (i % 3) * 0.07;
+      const off = ((i * 37) % 10) / 10 * 0.35;
+      const r1 = Math.pow(Math.max(0, k - off), 2) * 1500;
+      const r0 = Math.pow(Math.max(0, k - off - 0.18), 2) * 1500;
+      if (r1 <= 2) return null;
+      const cor = [COR.branco, COR.ciano, COR.magenta][i % 3];
+      return <line key={i} x1={540 + Math.cos(a) * r0} y1={HORIZONTE + Math.sin(a) * r0} x2={540 + Math.cos(a) * r1} y2={HORIZONTE + Math.sin(a) * r1} stroke={cor} strokeWidth={2 + k * 6} strokeLinecap="round" opacity={Math.min(1, k * 3) * (1 - k * 0.4)} />;
+    })}
+  </svg>;
+};

package/kits/synthwave/elementos/Fundo.tsx

@@ -0,0 +1,20 @@
+// Fundo: o cenário fixo. Céu em degradê (noite → roxo → magenta no horizonte, y = 1180), 34 estrelas que piscam e um chão de
+// grade em perspectiva (linhas magenta verticais e ciano horizontais) que corre 14 px por quadro em direção à câmera.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR} from './base';
+
+export const HORIZONTE = 1180;
+const ESTRELAS = Array.from({length: 34}, (_, i) => ({x: (i * 397) % 1080, y: ((i * 211) % 980) + 20, d: 3 + (i % 3), f: 20 + (i % 5) * 7}));
+
+export const Fundo: React.FC = () => {
+  const f = useCurrentFrame();
+  return <AbsoluteFill style={{background: COR.noite}}>
+    <div style={{position: 'absolute', left: 0, top: 0, width: 1080, height: HORIZONTE, background: `linear-gradient(180deg, ${COR.noite} 0%, ${COR.roxo} 40%, #7A1E8C 55%, ${COR.magenta} 100%)`}} />
+    {ESTRELAS.map((s, i) => <div key={i} style={{position: 'absolute', left: s.x, top: s.y, width: s.d, height: s.d, borderRadius: '50%', background: COR.branco, opacity: 0.35 + 0.35 * Math.sin(f / s.f + i)}} />)}
+    <div style={{position: 'absolute', left: 0, top: HORIZONTE, width: 1080, height: 1920 - HORIZONTE, overflow: 'hidden', perspective: 520, perspectiveOrigin: '50% 0%', background: `linear-gradient(180deg, ${COR.magenta}55 0%, ${COR.noite} 22%)`}}>
+      <div style={{position: 'absolute', left: -2600, top: -2400, width: 6280, height: 3140, transformOrigin: '50% 100%', transform: 'rotateX(78deg)', backgroundImage: `linear-gradient(${COR.ciano}cc 4px, transparent 4px), linear-gradient(90deg, ${COR.magenta}dd 4px, transparent 4px)`, backgroundSize: '160px 160px', backgroundPosition: `0 ${(f * 14) % 160}px, 0 0`}} />
+    </div>
+    <div style={{position: 'absolute', left: 0, top: HORIZONTE - 3, width: 1080, height: 6, background: COR.magenta, boxShadow: `0 0 30px ${COR.magenta}`}} />
+  </AbsoluteFill>;
+};

package/kits/synthwave/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 {Fundo} from './Fundo';
+import {Camera} from './Camera';
+import {Cena, Entrada} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {SolListrado} from './SolListrado';
+import {TituloNeon} from './TituloNeon';
+import {QuadroHUD} from './QuadroHUD';
+import {Montanhas} from './Montanhas';
+import {Palmeiras} from './Palmeiras';
+import {Estrelas} from './Estrelas';
+import {AssinaturaMarca} from './AssinaturaMarca';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {
+  SolListrado, TituloNeon, QuadroHUD, Montanhas, Palmeiras, Estrelas, AssinaturaMarca,
+};
+
+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; 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: '#0D0221'}}>
+    <Fundo />
+    <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(`synthwave: 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/synthwave/elementos/Montanhas.tsx

@@ -0,0 +1,27 @@
+// Montanhas: duas cadeias de montanhas de arame ancoradas no horizonte (y = 1180): a de trás em ciano (fundo roxo), a da
+// frente em magenta (fundo noite). Sobem 300 px com sobra em 18 quadros e derivam em paralaxe (0,15 e 0,3 px por quadro).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, eb} from './base';
+import {HORIZONTE} from './Fundo';
+
+const PONTOS_T = '0,300 90,220 170,270 260,150 360,260 450,200 560,300 650,190 760,280 850,170 960,270 1060,210 1160,300 1300,230 1500,300';
+const PONTOS_F = '0,300 110,240 200,290 300,210 400,300 520,250 620,300 700,230 800,300 930,240 1040,300 1160,260 1300,300 1500,300';
+
+export type MontanhasProps = {inicio?: number; fim?: number};
+
+export const Montanhas: React.FC<MontanhasProps> = ({inicio = 0, fim}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  if (t < 0 || (fim !== undefined && f >= fim)) return null;
+  const p = eb(t / 18, 1.3);
+  const camada = (pontos: string, fundo: string, borda: string, v: number, k: string) => <svg key={k} viewBox="0 0 1500 300" style={{position: 'absolute', left: -210 - t * v, top: HORIZONTE - 300, width: 1500, height: 300, overflow: 'visible'}}>
+    <polygon points={pontos} fill={fundo} stroke={borda} strokeWidth="5" strokeLinejoin="round" />
+  </svg>;
+  return <div style={{position: 'absolute', left: 0, top: 0, width: 1080, height: HORIZONTE, overflow: 'hidden'}}>
+    <div style={{position: 'absolute', inset: 0, transform: `translateY(${(1 - p) * 300}px)`}}>
+      {camada(PONTOS_T, COR.roxo, COR.ciano, 0.15, 't')}
+      {camada(PONTOS_F, COR.noite, COR.magenta, 0.3, 'f')}
+    </div>
+  </div>;
+};

package/kits/synthwave/elementos/Palmeiras.tsx

@@ -0,0 +1,30 @@
+// Palmeiras: duas palmeiras de silhueta (preto-noite com borda magenta de 3 px) plantadas no horizonte, uma à esquerda e uma à
+// direita. Sobem com sobra em 16 quadros e balançam ±2° (período 60 quadros) em torno da base. Sempre apoio, nunca no centro.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, eb} from './base';
+import {HORIZONTE} from './Fundo';
+
+const FOLHAS = [-75, -45, -15, 15, 45, 75, 105].map((a) => a);
+const Palma: React.FC<{x: number; escala: number; lado: 1 | -1; fase: number; t: number}> = ({x, escala, lado, fase, t}) => {
+  const sway = Math.sin((t / 60) * 2 * Math.PI + fase) * 2;
+  return <svg viewBox="-200 -700 400 740" style={{position: 'absolute', left: x - 200 * escala, top: HORIZONTE + 30 - 740 * escala, width: 400 * escala, height: 740 * escala, overflow: 'visible', transformOrigin: '50% 100%', transform: `scaleX(${lado}) rotate(${sway}deg)`}}>
+    <path d="M-14 40 C-10 -200 20 -400 40 -600 L62 -600 C44 -400 22 -200 18 40 Z" fill={COR.noite} stroke={COR.magenta} strokeWidth="3" />
+    <g transform="translate(51 -600)">
+      {FOLHAS.map((a, i) => <path key={i} transform={`rotate(${a - 90})`} d="M0 0 C40 -50 130 -70 210 -20 C140 -44 70 -34 0 0Z" fill={COR.noite} stroke={COR.magenta} strokeWidth="3" strokeLinejoin="round" />)}
+    </g>
+  </svg>;
+};
+
+export type PalmeirasProps = {inicio?: number; fim?: number};
+
+export const Palmeiras: React.FC<PalmeirasProps> = ({inicio = 0, fim}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  if (t < 0 || (fim !== undefined && f >= fim)) return null;
+  const p = eb(t / 16, 1.4);
+  return <div style={{position: 'absolute', inset: 0, transform: `translateY(${(1 - p) * 500}px)`}}>
+    <Palma x={150} escala={0.8} lado={1} fase={0} t={t} />
+    <Palma x={940} escala={0.62} lado={-1} fase={2} t={t} />
+  </div>;
+};

package/kits/synthwave/elementos/QuadroHUD.tsx

@@ -0,0 +1,33 @@
+// QuadroHUD: painel de dados (888 × altura por linha) com cantoneiras ciano de 6 px que abrem do centro em 10 quadros. Cada linha
+// (rótulo Rajdhani ciano + valor Orbitron branco com brilho ciano) revela por varredura da esquerda para a direita em 10 quadros,
+// 8 quadros depois da anterior; fio magenta entre linhas. Cursor em bloco pisca na última.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, e5, eb, seg} from './base';
+
+export type LinhaHUD = {rotulo: string; valor: string};
+export type QuadroHUDProps = {linhas: LinhaHUD[]; titulo?: string; inicio?: number; intervalo?: number; y?: number; fim?: number};
+
+export const QuadroHUD: React.FC<QuadroHUDProps> = ({linhas, titulo, inicio = 0, intervalo = 8, y = 700, fim}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  if (t < 0 || (fim !== undefined && f >= fim)) return null;
+  const h = 190;
+  const altura = (titulo ? 90 : 0) + linhas.length * h + 40;
+  const a = e5(seg(f, inicio, inicio + 10));
+  const canto = (pos: React.CSSProperties) => <div style={{position: 'absolute', width: 70, height: 70, borderColor: COR.ciano, borderStyle: 'solid', borderWidth: 0, boxShadow: `0 0 14px ${COR.ciano}`, ...pos}} />;
+  return <div style={{position: 'absolute', left: SEGURA.lado, top: y - altura / 2, width: LARGURA_UTIL, height: altura, transform: `scaleX(${Math.max(0.001, a)}) scaleY(${Math.max(0.001, eb(t / 12, 1.4))})`, background: 'rgba(13,2,33,0.62)', border: `2px solid ${COR.magenta}88`, boxSizing: 'border-box'}}>
+    {canto({left: -6, top: -6, borderTopWidth: 6, borderLeftWidth: 6})}{canto({right: -6, top: -6, borderTopWidth: 6, borderRightWidth: 6})}
+    {canto({left: -6, bottom: -6, borderBottomWidth: 6, borderLeftWidth: 6})}{canto({right: -6, bottom: -6, borderBottomWidth: 6, borderRightWidth: 6})}
+    {titulo && <div style={{position: 'absolute', left: 40, top: 22, fontFamily: FONTE.apoio, fontWeight: 600, fontSize: 40, letterSpacing: '0.3em', color: COR.magenta, textTransform: 'uppercase'}}>{titulo}</div>}
+    {linhas.map((l, i) => {
+      const r = e5(seg(f, inicio + 10 + i * intervalo, inicio + 20 + i * intervalo));
+      const tam = caber(l.valor.toUpperCase(), 96, LARGURA_UTIL - 120, 900, 0.02);
+      const ultima = i === linhas.length - 1;
+      return <div key={i} style={{position: 'absolute', left: 40, right: 40, top: (titulo ? 90 : 20) + i * h, height: h, borderTop: i > 0 ? `2px solid ${COR.magenta}88` : undefined, clipPath: `inset(0 ${(1 - r) * 100}% 0 0)`}}>
+        <div style={{position: 'absolute', left: 0, top: 18, fontFamily: FONTE.apoio, fontWeight: 600, fontSize: 40, letterSpacing: '0.3em', color: COR.ciano, textTransform: 'uppercase'}}>{l.rotulo}</div>
+        <div style={{position: 'absolute', left: 0, top: 66, fontFamily: FONTE.titulo, fontWeight: 900, fontSize: tam, letterSpacing: '0.02em', color: COR.branco, textShadow: `0 0 16px ${COR.ciano}`, whiteSpace: 'nowrap'}}>{l.valor.toUpperCase()}{ultima && Math.floor(f / 8) % 2 === 0 ? <span style={{background: COR.ciano, color: 'transparent'}}>_</span> : null}</div>
+      </div>;
+    })}
+  </div>;
+};

package/kits/synthwave/elementos/SolListrado.tsx

@@ -0,0 +1,29 @@
+// SolListrado: o sol (degradê `#FFD23F → #FF2A6D`, brilho rosa) com listras pretas que engrossam para baixo e descem 0,25 unidade
+// por quadro. Nasce do horizonte (sobe 700 px com sobra em 22 quadros) e é cortado pelo horizonte em y = 1180.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, eb} from './base';
+import {HORIZONTE} from './Fundo';
+
+export type SolListradoProps = {diametro?: number; y?: number; x?: number; inicio?: number; fim?: number};
+
+export const SolListrado: React.FC<SolListradoProps> = ({diametro = 720, y = 880, x = 540, inicio = 0, fim}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  if (t < 0 || (fim !== undefined && f >= fim)) return null;
+  const p = eb(t / 22, 1.3);
+  const barras = Array.from({length: 8}, (_, k) => {
+    const pos = (k * 7 + t * 0.25) % 56;
+    const yy = 44 + pos;
+    return {y: yy, h: 0.6 + ((yy - 44) / 56) * 6};
+  });
+  return <div style={{position: 'absolute', left: 0, top: 0, width: 1080, height: HORIZONTE, overflow: 'hidden'}}>
+    <svg viewBox="0 0 100 100" style={{position: 'absolute', left: x - diametro / 2, top: y - diametro / 2 + (1 - p) * 700, width: diametro, height: diametro, overflow: 'visible', filter: 'drop-shadow(0 0 40px rgba(255,42,109,0.6))'}}>
+      <defs>
+        <linearGradient id="sol-g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor={COR.sol} /><stop offset="1" stopColor={COR.rosa} /></linearGradient>
+        <mask id="sol-m"><rect width="100" height="100" fill="#fff" />{barras.map((b, i) => <rect key={i} x="0" y={b.y} width="100" height={b.h} fill="#000" />)}</mask>
+      </defs>
+      <circle cx="50" cy="50" r="50" fill="url(#sol-g)" mask="url(#sol-m)" />
+    </svg>
+  </div>;
+};

package/kits/synthwave/elementos/Som.tsx

@@ -0,0 +1,38 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`, pacote digital-soft: secos e digitais); trilha de 9 s, 110 bpm, noturna e batida.
+// Regra: um som por movimento que importa, 1 a 2 quadros ANTES do visual.
+import React from 'react';
+import {Audio, Sequence, interpolate, useVideoConfig} from 'remotion';
+import whooshEntra from '../assets/sons/whoosh-entra.mp3';
+import whooshSai from '../assets/sons/whoosh-sai.mp3';
+import swoosh from '../assets/sons/swoosh.mp3';
+import popPalavra from '../assets/sons/pop-palavra.mp3';
+import popCartao from '../assets/sons/pop-cartao.mp3';
+import clique from '../assets/sons/clique.mp3';
+import impacto from '../assets/sons/impacto.mp3';
+import subida from '../assets/sons/subida.mp3';
+import assinatura from '../assets/sons/assinatura.mp3';
+import trilha from '../assets/trilha/noite-110bpm.mp3';
+
+export const SONS = {
+  'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao, clique, impacto, subida, assinatura,
+} as const;
+export type NomeSom = keyof typeof SONS;
+
+// volume de cada efeito (0..1) já calibrado contra a trilha a 0.55
+const VOLUME: Record<NomeSom, number> = {
+  'whoosh-entra': 0.9, 'whoosh-sai': 0.8, swoosh: 1, 'pop-palavra': 1, 'pop-cartao': 0.9, clique: 0.8, impacto: 0.9, subida: 0.7, assinatura: 0.9,
+};
+
+export type EfeitoProps = {som: NomeSom; em: number; volume?: number};
+/** um efeito no quadro `em` (absoluto, ou relativo à Cena se estiver dentro de uma) */
+export const Efeito: React.FC<EfeitoProps> = ({som, em, volume}) =>
+  <Sequence from={Math.max(0, Math.round(em))} durationInFrames={90} layout="none">
+    <Audio src={SONS[som]} volume={volume ?? VOLUME[som]} />
+  </Sequence>;
+
+export type TrilhaProps = {volume?: number; /** quadros de fade no fim */ saida?: number};
+/** a trilha do kit, do quadro 0 ao fim, com fade de saída */
+export const Trilha: React.FC<TrilhaProps> = ({volume = 0.55, saida = 20}) => {
+  const {durationInFrames} = useVideoConfig();
+  return <Audio src={trilha} volume={(f) => volume * interpolate(f, [durationInFrames - saida, durationInFrames], [1, 0], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'})} />;
+};

package/kits/synthwave/elementos/TituloNeon.tsx

@@ -0,0 +1,30 @@
+// TituloNeon: título Orbitron 900 inclinado −8° em duas camadas: atrás o brilho (magenta, `0 0 16px` e `0 0 44px`) e uma sombra
+// ciano a −4 px; na frente o degradê `#FFD23F → #FF2A6D` com contorno branco de 2 px. Entra de −900 px com sobra, scale 1,3 → 1
+// e pisca 3 vezes nos 6 primeiros quadros.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, eb} from './base';
+
+export type TituloNeonProps = {linhas: string[]; inicio?: number; intervalo?: number; y?: number; tamanho?: number; fim?: number};
+
+export const TituloNeon: React.FC<TituloNeonProps> = ({linhas, inicio = 0, intervalo = 9, y = 680, tamanho = 200, fim}) => {
+  const f = useCurrentFrame();
+  if (fim !== undefined && f >= fim) return null;
+  const txt = linhas.map((l) => l.toUpperCase());
+  const tam = Math.min(...txt.map((l) => caber(l, tamanho, LARGURA_UTIL - 40, 900, 0.02)));
+  const alt = tam * 1.2;
+  const topo = y - (txt.length * alt) / 2;
+  return <div style={{position: 'absolute', inset: 0}}>
+    {txt.map((l, i) => {
+      const t = f - (inicio + i * intervalo);
+      if (t < 0) return null;
+      const p = eb(t / 16, 1.7);
+      const pisca = t < 6 && [1, 3, 5].includes(t) ? 0.15 : 1;
+      const base: React.CSSProperties = {position: 'absolute', left: SEGURA.lado, width: LARGURA_UTIL, top: topo + i * alt, height: alt, lineHeight: `${alt}px`, textAlign: 'center', fontFamily: FONTE.titulo, fontWeight: 900, fontSize: tam, letterSpacing: '0.02em', whiteSpace: 'nowrap'};
+      return <div key={i} style={{position: 'absolute', inset: 0, opacity: pisca, transform: `translateX(${(1 - p) * -900}px) scale(${1.3 - 0.3 * Math.min(p, 1.05)}) skewX(-8deg)`, transformOrigin: `50% ${topo + i * alt + alt / 2}px`}}>
+        <div style={{...base, color: COR.magenta, textShadow: `0 0 16px ${COR.magenta}, 0 0 44px ${COR.magenta}, -4px 0 0 ${COR.ciano}`}}>{l}</div>
+        <div style={{...base, color: 'transparent', backgroundImage: `linear-gradient(180deg, ${COR.sol} 10%, ${COR.rosa} 90%)`, WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextStroke: `2px ${COR.branco}`}}>{l}</div>
+      </div>;
+    })}
+  </div>;
+};