primocode 10.17.1 → 10.19.0

package/kits/mapa/assets/fontes/OFL-DMMono.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The DM Mono Project Authors (https://fonts.google.com/specimen/DM+Mono)
+
+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/mapa/assets/fontes/OFL-DMSans.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The DM Sans Project Authors (https://fonts.google.com/specimen/DM+Sans)
+
+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/mapa/elementos/Camera.tsx

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

@@ -0,0 +1,40 @@
+// CartaoEndereco: o cartão do lugar (branco, canto 56 px): pino magenta, nome grande, endereço em mono, uma linha de detalhe
+// (horário, tempo) e o botão "Como chegar" que aperta e solta um anel. Sobe de baixo com overshoot. Herói da cena de endereço.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, MONO, caber, e5, ov, seg} from './base';
+
+export type CartaoEnderecoProps = {
+  nome: string;
+  endereco: string;
+  detalhe: string;
+  botao: string;
+  inicio?: number;
+  /** quadro (na cena) em que o botão aperta */
+  clica?: number;
+  /** centro vertical, px */
+  y: number;
+  fim?: number;
+};
+
+export const CartaoEndereco: React.FC<CartaoEnderecoProps> = ({nome, endereco, detalhe, botao, inicio = 0, clica, y, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 12) return null;
+  const quando = clica ?? inicio + 26;
+  const t = ov(seg(f, inicio, inicio + 18)), sai = e5(seg(f, fim, fim + 10));
+  const aperta = f >= quando && f < quando + 8 ? 1 - Math.abs(f - quando - 3) / 5 : 0, anel = seg(f, quando, quando + 16);
+  const tam = caber(nome, 118, 780, 800, -0.03, 'MP DM Sans');
+  return <div style={{position: 'absolute', left: 100, top: y - 360, width: 880, height: 720, borderRadius: 56, background: '#fff', boxShadow: '0 60px 100px rgba(80,0,30,.45)', padding: '54px 56px', boxSizing: 'border-box', transform: `translateY(${(1 - t) * 1200 - sai * 1200}px) rotate(${(1 - t) * -4}deg)`}}>
+    <svg width={96} height={120} viewBox="-50 -100 100 110" style={{display: 'block'}}><path d="M0 0 C -4 -10, -42 -52, -42 -78 A 42 42 0 0 1 42 -78 C 42 -52, 4 -10, 0 0 Z" fill={COR.magenta} /><circle cx={0} cy={-78} r={17} fill="#fff" /></svg>
+    <div style={{marginTop: 24, fontFamily: FONTE, fontWeight: 800, fontSize: tam, lineHeight: 1.05, color: COR.tinta, letterSpacing: '-0.03em', whiteSpace: 'nowrap'}}>{nome}</div>
+    <div style={{marginTop: 14, fontFamily: MONO, fontWeight: 500, fontSize: 42, color: COR.tinta, opacity: 0.7}}>{endereco}</div>
+    <div style={{marginTop: 22, display: 'inline-block', fontFamily: FONTE, fontWeight: 700, fontSize: 40, color: COR.magentaEscuro, background: '#FFE3EC', borderRadius: 30, padding: '10px 28px'}}>{detalhe}</div>
+    <div style={{position: 'absolute', left: 56, bottom: 54, width: 768, height: 130}}>
+      {f >= quando && <div style={{position: 'absolute', left: -60 * anel, top: -60 * anel, right: -60 * anel, bottom: -60 * anel, borderRadius: 65 + 60 * anel, border: `${8 * (1 - anel)}px solid ${COR.magenta}`, opacity: 1 - anel}} />}
+      <div style={{position: 'absolute', inset: 0, borderRadius: 65, background: COR.magenta, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 22, fontFamily: FONTE, fontWeight: 800, fontSize: 56, color: '#fff', transform: `scale(${1 - aperta * 0.04}) translateY(${aperta * 8}px)`, boxShadow: '0 14px 0 #C70E47'}}>
+        {botao}
+        <svg width={56} height={44} viewBox="0 0 64 50"><path d="M4 25 H54 M34 5 L56 25 L34 45" stroke="#fff" strokeWidth={9} fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
+      </div>
+    </div>
+  </div>;
+};

package/kits/mapa/elementos/Cena.tsx

@@ -0,0 +1,41 @@
+// Cena: janela de tempo de um plano (troca "deslizar"). Dentro dela, useCurrentFrame() começa em 0.
+// A saída da cena cruza 9 quadros com a entrada da próxima.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {e5, seg} from './base';
+
+export type Entrada = 'direita' | 'esquerda' | 'subir' | 'zoom' | 'nenhuma';
+export const SOBREPOE = 9; // 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 estilo = (f: number, duracao: number, entrada: Entrada, ultima: boolean): React.CSSProperties => {
+  const en = entrada === 'nenhuma' ? 0 : 1 - e5(seg(f, 0, 10));
+  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
+  let tf = '';
+  if (entrada === 'direita') tf += `translateX(${en * 1080}px) `;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 1080}px) `;
+  if (entrada === 'subir') tf += `translateY(${en * 900}px) `;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.6}) `;
+  tf += `translateX(${-xo * 460}px) scale(${1 - xo * 0.06})`;
+  const blur = en * 10 + xo * 8;
+  return {transform: tf, opacity: 1 - xo * 0.9, filter: blur > 0.3 ? `blur(${blur}px)` : undefined};
+};
+
+const Janela: React.FC<{duracao: number; entrada: Entrada; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, ultima, children}) => {
+  const f = useCurrentFrame();
+  return <AbsoluteFill style={estilo(f, duracao, entrada, ultima)}>{children}</AbsoluteFill>;
+};
+
+export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'direita', 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/mapa/elementos/ChipTempo.tsx

@@ -0,0 +1,29 @@
+// ChipTempo: pílula escura com o tempo do trajeto ("6 min a pé") presa a um ponto do mapa, que pula com overshoot.
+// Dentro do MapaBase usa coordenadas do mapa e mantém o tamanho na tela; solta, usa coordenadas da tela.
+import React, {useContext} from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, MapaCtx, ov, seg} from './base';
+
+export type ChipTempoProps = {
+  texto: string;
+  x: number;
+  y: number;
+  inicio?: number;
+  fim?: number;
+};
+
+export const ChipGrupo: React.FC<ChipTempoProps> = ({texto, x, y, inicio = 0, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  const ctx = useContext(MapaCtx);
+  if (f < inicio - 1 || f > fim + 10) return null;
+  const k = ctx ? 1 / ctx.s : 1, t = ov(seg(f, inicio, inicio + 14));
+  const w = texto.length * 36 + 90;
+  return <g transform={`translate(${x} ${y}) scale(${k * Math.max(0, t)})`}>
+    <rect x={-w / 2} y={-62} width={w} height={104} rx={52} fill={COR.tinta} stroke="#fff" strokeWidth={8} />
+    <path d="M-14 42 L0 66 L14 42 Z" fill={COR.tinta} />
+    <foreignObject x={-w / 2} y={-62} width={w} height={104}><div style={{width: w, height: 104, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONTE, fontWeight: 800, fontSize: 54, color: '#fff', letterSpacing: '-0.02em', whiteSpace: 'nowrap'}}>{texto}</div></foreignObject>
+  </g>;
+};
+
+/** Chip solto na tela (coordenadas da tela). */
+export const ChipTempo: React.FC<ChipTempoProps> = (p) => <svg width={1080} height={1920} style={{position: 'absolute', inset: 0, overflow: 'visible'}}><ChipGrupo {...p} /></svg>;

package/kits/mapa/elementos/Fundo.tsx

@@ -0,0 +1,25 @@
+// Fundo: magenta chapado com curvas de nível (anéis tortos, brancos a 9%) que se expandem devagar do canto, como relevo de mapa.
+// Fica FORA da Camera; quem se mexe é o que está em cima.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR} from './base';
+
+export type FundoProps = {
+  /** cor do chão */
+  cor?: string;
+  /** velocidade das curvas (1 = a do preview) */
+  velocidade?: number;
+};
+
+export const Fundo: React.FC<FundoProps> = ({cor = COR.magenta, velocidade = 1}) => {
+  const f = useCurrentFrame() * velocidade;
+  return <AbsoluteFill style={{background: `linear-gradient(180deg, ${cor} 0%, ${COR.magentaEscuro} 100%)`}}>
+    <svg width={1080} height={1920} style={{position: 'absolute', inset: 0}}>
+      {Array.from({length: 14}, (_, i) => {
+        const r = 120 + ((i * 90 + f * 1.4) % 1260), a = 0.1 * (1 - r / 1400);
+        const w = Math.sin(i * 1.7 + f / 40) * 26;
+        return <ellipse key={i} cx={980 + Math.sin(f / 90) * 20} cy={1700} rx={r + w} ry={r * 0.82 - w} transform={`rotate(${-18 + i * 3} 980 1700)`} fill="none" stroke="#fff" strokeOpacity={Math.max(0, a)} strokeWidth={i % 4 === 0 ? 8 : 4} />;
+      })}
+    </svg>
+  </AbsoluteFill>;
+};

package/kits/mapa/elementos/MapaBase.tsx

@@ -0,0 +1,63 @@
+// MapaBase: o mapa da cidade desenhado pelo kit (rio, parques, quadras, ruas brancas, avenidas amarelas, nomes de rua),
+// numa janela de 880 px com borda branca. A câmera do mapa anda por chaves `foco` [quadro, cx, cy, zoom, giro]; os pinos, as
+// rotas e os chips entram por props e ficam do mesmo tamanho na tela, qualquer que seja o zoom. Herói das cenas de mapa.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, MONO, MapaCtx, chavesN, e5, ov, seg} from './base';
+import {PinoGrupo, PinoProps} from './Pino';
+import {RotaGrupo, RotaAnimadaProps} from './RotaAnimada';
+import {ChipGrupo, ChipTempoProps} from './ChipTempo';
+
+export type MapaBaseProps = {
+  /** chaves da câmera: [quadro, cx, cy, zoom, giro°] em coordenadas do mapa (2000 × 2400); zoom 1 mostra o mapa quase todo */
+  foco: number[][];
+  pinos?: PinoProps[];
+  rotas?: RotaAnimadaProps[];
+  chips?: ChipTempoProps[];
+  inicio?: number;
+  /** centro vertical da janela, px */
+  y: number;
+  altura?: number;
+  fim?: number;
+};
+
+const W = 2000, H = 2400, JW = 880;
+const VERT = Array.from({length: 8}, (_, k) => 150 + k * 260), HORZ = Array.from({length: 9}, (_, j) => 120 + j * 240);
+const NOMES = [['Av. das Flores', 150, 1330, 0], ['R. do Sol', 150 + 260 * 3 - 30, 520, 90], ['R. da Lagoa', 700, 1090, 0], ['Av. Central', 1560, 1900, 90]] as const;
+
+const Cidade: React.FC = React.memo(() => <g>
+  <rect x={-200} y={-200} width={W + 400} height={H + 400} fill={COR.terra} />
+  {VERT.slice(0, -1).flatMap((x, k) => HORZ.slice(0, -1).map((y, j) => ((k * 7 + j * 3) % 5 === 0) ? null : <rect key={`${k}-${j}`} x={x + 30} y={y + 30} width={200} height={180} rx={18} fill={(k + j) % 2 ? '#EAE3D3' : '#EDE6D6'} />))}
+  <path d="M-200 520 C 400 980, 880 420, 1300 1040 S 2100 1500, 2300 2000" fill="none" stroke={COR.agua} strokeWidth={170} strokeLinecap="round" />
+  <path d="M-200 520 C 400 980, 880 420, 1300 1040 S 2100 1500, 2300 2000" fill="none" stroke="#fff" strokeOpacity={0.5} strokeWidth={10} strokeDasharray="30 50" />
+  <rect x={1040} y={1710} width={440} height={400} rx={60} fill={COR.parque} />
+  <rect x={180} y={1800} width={380} height={330} rx={60} fill={COR.parque} />
+  <rect x={1480} y={170} width={360} height={320} rx={60} fill={COR.parque} />
+  {[[1180, 1860], [1300, 1980], [1380, 1790], [310, 1930], [410, 2030], [1620, 300], [1700, 400]].map(([x, y], i) => <circle key={i} cx={x} cy={y} r={34} fill="#B7D9A0" />)}
+  {[...VERT.map((x) => ({x1: x, y1: -200, x2: x, y2: H + 200})), ...HORZ.map((y) => ({x1: -200, y1: y, x2: W + 200, y2: y}))].map((l, i) => <line key={`b${i}`} {...l} stroke={COR.ruaBorda} strokeWidth={42} />)}
+  <line x1={-200} y1={-200} x2={W + 200} y2={H + 200} stroke={COR.avenidaBorda} strokeWidth={70} opacity={0} />
+  {[...VERT.map((x) => ({x1: x, y1: -200, x2: x, y2: H + 200, a: false})), ...HORZ.map((y) => ({x1: -200, y1: y, x2: W + 200, y2: y, a: false}))].map((l, i) => <line key={`r${i}`} x1={l.x1} y1={l.y1} x2={l.x2} y2={l.y2} stroke={COR.rua} strokeWidth={30} />)}
+  {[1330, 1090].map((y) => <line key={y} x1={-200} y1={y} x2={W + 200} y2={y} stroke={COR.avenidaBorda} strokeWidth={66} />)}
+  {[1330, 1090].map((y) => <line key={`a${y}`} x1={-200} y1={y} x2={W + 200} y2={y} stroke={COR.avenida} strokeWidth={50} />)}
+  {NOMES.map(([n, x, y, r]) => <text key={n} x={x} y={y + 9} transform={`rotate(${r} ${x} ${y})`} fontFamily={MONO} fontWeight={500} fontSize={30} fill={COR.tinta} fillOpacity={0.55}>{n}</text>)}
+</g>);
+
+export const MapaBase: React.FC<MapaBaseProps> = ({foco, pinos = [], rotas = [], chips = [], inicio = 0, y, altura = 1100, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 14) return null;
+  const t = ov(seg(f, inicio, inicio + 18)), sai = e5(seg(f, fim, fim + 12));
+  const [cx, cy, z, giro = 0] = chavesN(f - inicio, foco);
+  const s = 0.5 * z;
+  return <div style={{position: 'absolute', left: 100, top: y - altura / 2, width: JW, height: altura, borderRadius: 48, overflow: 'hidden', border: '12px solid #fff', boxSizing: 'border-box', boxShadow: '0 50px 90px rgba(80,0,30,.4)', background: COR.terra, transform: `translateY(${(1 - t) * 1100 - sai * 1100}px) rotate(${(1 - t) * 5}deg) scale(${0.92 + 0.08 * t})`}}>
+    <svg width={JW - 24} height={altura - 24} style={{display: 'block'}}>
+      <g transform={`translate(${(JW - 24) / 2} ${(altura - 24) / 2}) rotate(${giro}) scale(${s}) translate(${-cx} ${-cy})`}>
+        <MapaCtx.Provider value={{s}}>
+          <Cidade />
+          {rotas.map((r, i) => <RotaGrupo key={i} {...r} inicio={(r.inicio ?? 0) + inicio} />)}
+          {pinos.map((p, i) => <PinoGrupo key={i} {...p} inicio={(p.inicio ?? 0) + inicio} />)}
+          {chips.map((c, i) => <ChipGrupo key={i} {...c} inicio={(c.inicio ?? 0) + inicio} />)}
+        </MapaCtx.Provider>
+      </g>
+    </svg>
+  </div>;
+};

package/kits/mapa/elementos/Montagem.tsx

@@ -0,0 +1,59 @@
+// Montagem: transforma um plano de cenas (JSON escrito pela IA) em vídeo, usando só os elementos do kit.
+// Ela NÃO decide nada de estética: só põe Fundo + Camera + Cenas + sons onde o plano mandou.
+// Formato do plano: ver exemplos/plano.json e KITS.md (seção "plano de cenas").
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {COR} from './base';
+import {Fundo} from './Fundo';
+import {Camera} from './Camera';
+import {Cena, Entrada} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {MapaBase} from './MapaBase';
+import {Pino} from './Pino';
+import {RotaAnimada} from './RotaAnimada';
+import {ChipTempo} from './ChipTempo';
+import {CartaoEndereco} from './CartaoEndereco';
+import {TituloLocal} from './TituloLocal';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {
+  MapaBase, Pino, RotaAnimada, ChipTempo, CartaoEndereco, TituloLocal,
+};
+
+export type Camada = {elemento: string; props: Record<string, unknown>};
+export type CenaPlano = {
+  batida: string; de: number; ate: number; entrada?: Entrada;
+  camadas: Camada[];
+  /** sons relativos ao início da cena */
+  sons?: {som: NomeSom; em: number; volume?: number}[];
+  /** socos de câmera extras, relativos ao início da cena (o início já é um soco) */
+  socos?: number[];
+};
+export type Plano = {kit: string; duracao: number; fundo?: Record<string, unknown>; trilha?: {volume?: number} | false; cenas: CenaPlano[]};
+
+/** troca "fotos/foto-01.jpg" pela URL importada, em qualquer prop (texto, lista ou objeto) */
+const resolver = (v: unknown, arquivos: Record<string, string>): unknown => {
+  if (typeof v === 'string') return arquivos[v] ?? v;
+  if (Array.isArray(v)) return v.map((x) => resolver(x, arquivos));
+  if (v && typeof v === 'object') return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, resolver(x, arquivos)]));
+  return v;
+};
+
+export const Montagem: React.FC<{plano: Plano; arquivos?: Record<string, string>}> = ({plano, arquivos = {}}) => {
+  const socos = plano.cenas.flatMap((c) => [c.de, ...(c.socos ?? []).map((s) => c.de + s)]);
+  const ultima = plano.cenas.length - 1;
+  return <AbsoluteFill style={{background: COR.magenta}}>
+    <Fundo {...(plano.fundo as object)} />
+    <Camera batidas={socos}>
+      {plano.cenas.map((c, i) => <Cena key={i} de={c.de} ate={c.ate} entrada={c.entrada} ultima={i === ultima}>
+        {c.camadas.map((k, j) => {
+          const El = ELEMENTOS[k.elemento];
+          if (!El) throw new Error(`mapa: 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/mapa/elementos/Pino.tsx

@@ -0,0 +1,38 @@
+// Pino: o marcador do lugar. Cai de cima, quica com overshoot, deixa uma sombra no chão e solta dois anéis de onda.
+// Dentro do MapaBase usa coordenadas do mapa e mantém o tamanho na tela (`tamanho` em px); solto, usa coordenadas da tela.
+import React, {useContext} from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, MapaCtx, e5, ov, seg} from './base';
+
+export type PinoProps = {
+  x: number;
+  y: number;
+  /** altura do pino na tela, px (herói: 170–220) */
+  tamanho?: number;
+  inicio?: number;
+  cor?: string;
+  /** letra ou número no miolo */
+  miolo?: string;
+  fim?: number;
+};
+
+export const PinoGrupo: React.FC<PinoProps> = ({x, y, tamanho = 190, inicio = 0, cor = COR.magenta, miolo = '', fim = 1e9}) => {
+  const f = useCurrentFrame();
+  const ctx = useContext(MapaCtx);
+  if (f < inicio - 1 || f > fim + 10) return null;
+  const k = (ctx ? 1 / ctx.s : 1), t = ov(seg(f, inicio, inicio + 18)), sombra = e5(seg(f, inicio + 8, inicio + 18));
+  const onda = (d: number) => e5(seg(f, inicio + 14 + d, inicio + 40 + d));
+  const h = tamanho * k;
+  return <g transform={`translate(${x} ${y})`}>
+    {[0, 8].map((d) => <ellipse key={d} cx={0} cy={0} rx={h * 0.9 * onda(d)} ry={h * 0.34 * onda(d)} fill="none" stroke={cor} strokeWidth={h * 0.04} strokeOpacity={f >= inicio + 14 + d ? 1 - onda(d) : 0} />)}
+    <ellipse cx={0} cy={0} rx={h * 0.2 * sombra} ry={h * 0.07 * sombra} fill="rgba(27,31,42,0.3)" />
+    <g transform={`translate(0 ${(t - 1) * -h * 5}) scale(${h / 100})`}>
+      <path d="M0 0 C -4 -10, -42 -52, -42 -78 A 42 42 0 0 1 42 -78 C 42 -52, 4 -10, 0 0 Z" transform="translate(0 0) scale(1 1)" fill={cor} stroke={COR.creme} strokeWidth={7} strokeLinejoin="round" />
+      <circle cx={0} cy={-78} r={17} fill={COR.creme} />
+      {miolo && <foreignObject x={-20} y={-100} width={40} height={44}><div style={{width: 40, height: 44, textAlign: 'center', fontFamily: 'sans-serif', fontWeight: 800, fontSize: 28, lineHeight: '44px', color: cor}}>{miolo}</div></foreignObject>}
+    </g>
+  </g>;
+};
+
+/** Pino solto na tela (coordenadas da tela). */
+export const Pino: React.FC<PinoProps> = (p) => <svg width={1080} height={1920} style={{position: 'absolute', inset: 0, overflow: 'visible'}}><PinoGrupo {...p} /></svg>;

package/kits/mapa/elementos/RotaAnimada.tsx

@@ -0,0 +1,38 @@
+// RotaAnimada: a rota traçada ponto a ponto (borda branca + linha magenta de 22 px na tela) com uma bolinha que corre na frente.
+// Dentro do MapaBase usa coordenadas do mapa; solta, usa coordenadas da tela. `pontos` é a lista de [x, y] das esquinas.
+import React, {useContext} from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, MapaCtx, e5, seg} from './base';
+
+export type RotaAnimadaProps = {
+  pontos: [number, number][];
+  inicio?: number;
+  /** quadros para percorrer a rota inteira */
+  duracao?: number;
+  cor?: string;
+  fim?: number;
+};
+
+export const RotaGrupo: React.FC<RotaAnimadaProps> = ({pontos, inicio = 0, duracao = 40, cor = COR.magenta, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  const ctx = useContext(MapaCtx);
+  if (f < inicio - 1 || f > fim + 10) return null;
+  const k = ctx ? 1 / ctx.s : 1, p = e5(seg(f, inicio, inicio + duracao));
+  const seg_ = pontos.slice(1).map((b, i) => Math.hypot(b[0] - pontos[i][0], b[1] - pontos[i][1]));
+  const total = seg_.reduce((a, b) => a + b, 0);
+  let alvo = total * p, ponto: [number, number] = pontos[0];
+  const feitos: [number, number][] = [pontos[0]];
+  for (let i = 0; i < seg_.length; i++) {
+    if (alvo >= seg_[i]) {alvo -= seg_[i]; feitos.push(pontos[i + 1]); ponto = pontos[i + 1];}
+    else {const t = alvo / seg_[i]; ponto = [pontos[i][0] + (pontos[i + 1][0] - pontos[i][0]) * t, pontos[i][1] + (pontos[i + 1][1] - pontos[i][1]) * t]; feitos.push(ponto); break;}
+  }
+  const d = feitos.map((q, i) => `${i ? 'L' : 'M'}${q[0]} ${q[1]}`).join(' ');
+  return <g>
+    <path d={d} fill="none" stroke="#fff" strokeWidth={34 * k} strokeLinecap="round" strokeLinejoin="round" />
+    <path d={d} fill="none" stroke={cor} strokeWidth={20 * k} strokeLinecap="round" strokeLinejoin="round" />
+    <circle cx={ponto[0]} cy={ponto[1]} r={26 * k} fill="#fff" stroke={cor} strokeWidth={10 * k} />
+    <circle cx={pontos[0][0]} cy={pontos[0][1]} r={20 * k} fill="#fff" stroke={COR.tinta} strokeWidth={9 * k} />
+  </g>;
+};
+
+export const RotaAnimada: React.FC<RotaAnimadaProps> = (p) => <svg width={1080} height={1920} style={{position: 'absolute', inset: 0, overflow: 'visible'}}><RotaGrupo {...p} /></svg>;

package/kits/mapa/elementos/Som.tsx

@@ -0,0 +1,41 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`, pacote organic-wood); trilha de 8.6 s
+// (MotionCraft `music make`, preset lofi-desk, 100 bpm, tom Bb). Ver assets/ASSETS.md.
+// 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 traco from '../assets/sons/traco.mp3';
+import quique from '../assets/sons/quique.mp3';
+import trilha from '../assets/trilha/rota-100bpm.mp3';
+
+export const SONS = {
+  'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao, clique, impacto, subida, assinatura, traco, quique,
+} as const;
+export type NomeSom = keyof typeof SONS;
+
+// volume de cada efeito (0..1) já calibrado contra a trilha a 0.45
+const VOLUME: Record<NomeSom, number> = {
+  'whoosh-entra': 0.8, 'whoosh-sai': 0.65, swoosh: 0.85, 'pop-palavra': 0.9, 'pop-cartao': 0.95, clique: 0.85, impacto: 0.8, subida: 0.65, assinatura: 0.85, traco: 0.55, quique: 0.8,
+};
+
+export type EfeitoProps = {som: NomeSom; em: number; volume?: number};
+/** um efeito no quadro `em` (relativo à Cena se estiver dentro de uma, absoluto no resto) */
+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.45, saida = 20}) => {
+  const {durationInFrames} = useVideoConfig();
+  return <Audio src={trilha} volume={(f) => volume * interpolate(f, [durationInFrames - saida, durationInFrames], [1, 0], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'})} />;
+};