---
slug: mapa
nome: Mapa local
descricao: magenta chapado com curvas de nível, janela branca com mapa de cidade desenhado (rio, parques, avenidas amarelas), pino que quica e rota que se traça
familia: Marca e evento
versao: 1
quando:
  - "mostrar onde fica minha loja, restaurante ou evento com mapa e rota"
  - "vídeo de como chegar ao local, com tempo a pé e endereço"
  - "reels de inauguração com várias unidades marcadas no mapa"
  - "cartão de endereço com botão de rota"
nao_serve:
  - "convite sem rota (use convite-evento, que tem data e lugar gigantes)"
  - "mapa real com ruas reais (o kit desenha uma cidade genérica; para a cidade real, use captura de mapa e só os elementos de fora)"
---

# Mapa local

Um mapa de app como cartaz. O chão é **magenta** (`#F2175B` → `#C70E47`) com **curvas de nível** brancas a 9% que se
expandem do canto. O herói é a **janela do mapa**: 880 px, borda branca de 12 px, canto 48 px, com uma cidade
**desenhada pelo kit** (terra bege, **rio azul-claro**, **parques verdes**, **ruas brancas** e **avenidas amarelas**,
nomes de rua em mono). A câmera do mapa **anda por chaves** (zoom 0,95 → 1,7, giro de até −14°); o **pino** cai e
quica com ondas, a **rota magenta** se traça esquina por esquina com uma bolinha na frente, o **chip** "6 min a pé"
pula. Pinos, rota e chip **mantêm o tamanho na tela** em qualquer zoom. Fecha com **cartão branco** de endereço e
título grande. Um herói por plano; o apoio é um pino ou um chip, nunca os dois e mais um cartão.

## Como montar um vídeo com este kit

1. **Levante os dados**: nome do lugar (até 10 caracteres por linha), endereço, tempo/horário, texto do botão, e onde ficam o pino, a origem e as esquinas da rota no mapa (coordenadas 2000 × 2400; ruas verticais em x = 150 + 260·k, horizontais em y = 120 + 240·j).
2. **Escolha as batidas** em `receita.json` (mapa → rota → unidades → endereco → marca).
3. **Escreva o plano** (`plano.json`, formato de `exemplos/plano.json`); `foco` é a câmera: [quadro, cx, cy, zoom, giro].
4. **Renderize** com `<Montagem plano={...} />`.
5. **Confira** contra `regras/`: pino e rota dentro da janela em todo quadro, rota sem esconder atrás do chip, margens ≥ 96 px, 35–45% vazio.

## Elementos

| elemento | o que faz | batidas |
|---|---|---|
| `MapaBase` | janela com a cidade desenhada, câmera por chaves, recebe `pinos`, `rotas` e `chips` | mapa, rota, unidades |
| `Pino` | marcador que cai, quica, sombra e dois anéis de onda (também solto na tela) | mapa, unidades |
| `RotaAnimada` | rota esquina por esquina, borda branca + linha magenta + bolinha | rota |
| `ChipTempo` | pílula escura "6 min a pé" presa a um ponto, pula | rota |
| `CartaoEndereco` | cartão branco: pino, nome, endereço, detalhe, botão que aperta | endereco |
| `TituloLocal` | nome do lugar em branco sobre o magenta + traço de rota | marca |
| `Fundo`, `Camera`, `Cena` | curvas de nível, câmera, troca deslizante | todas |
| `Efeito`, `Trilha` | sons e trilha do kit | todas |

## Proibido

- Mais de um herói por plano; mapa colado na borda (a janela tem 100 px de margem); pino ou rota cortados pela janela.
- Pino de tamanho diferente em cada zoom (use o contra-escalonamento do `MapaBase`); rota que teleporta.
- Chão que não seja magenta; degradê roxo-azul; brilho em letra; sombra dura.
- Endereço inventado em uso real: o texto do cartão tem que ser o endereço verdadeiro.
- Texto fora da área segura (168–1330 px na vertical).