# TELA — design gráfico

No lugar de Photoshop, Figma e Canva. Modelo `cena` com `layout: "livre"`:
você controla cada `x`, `y`, `l`, `a` em pixels da tela.

## Tamanhos

| Peça | largura × altura |
|---|---|
| Post quadrado | 1080 × 1080 |
| Story / Reels capa | 1080 × 1920 |
| Capa e thumbnail | 1920 × 1080 |
| Banner de topo | 1600 × 600 |
| Apresentação de perfil | 1200 × 630 |

## Como compor sem ficar feio

- **Margem viva:** nada encosta na borda. Reserve ~8% de cada lado (86 px em 1080).
- **Conte as linhas antes de definir `a`.** Em texto, `a` é altura mínima — o bloco
  cresce se precisar, então deixe folga abaixo dele. Uma linha ocupa ~1,15 × `tamanho`.
- **Um foco só.** Um elemento manda; o resto apoia.
- **Escala com folga:** título 110–160 px em 1080, apoio 34–44 px. Meio-termo some.
- **Camadas de fundo primeiro:** forma grande → foto → texto por cima. `z` resolve empates.
- **Cor:** duas do tema, uma de destaque. `preenchimento` com `opacidade: 0.15` cria
  fundo sem brigar com o texto.

## Exemplo — post 1080×1080

```json
{
  "ferramenta": "tela",
  "titulo": "Post — lançamento",
  "doc": {
    "tema": "brasa",
    "largura": 1080, "altura": 1080,
    "cenas": [{
      "layout": "livre",
      "fundo": { "tipo": "gradiente", "de": "#1b0a04", "para": "#0a0506", "angulo": 155 },
      "elementos": [
        { "tipo": "forma", "forma": "circulo", "x": 640, "y": -140, "l": 620, "a": 620,
          "preenchimento": "#ff5a36", "opacidade": 0.16 },
        { "tipo": "icone", "nome": "foguete", "x": 86, "y": 140, "tamanho": 88, "cor": "#ffb03a" },
        { "tipo": "texto", "x": 86, "y": 292, "l": 900, "a": 44,
          "texto": "LANÇAMENTO", "tamanho": 30, "peso": 700, "espacamento": 0.2, "cor": "#ffb03a" },
        { "tipo": "texto", "x": 86, "y": 372, "l": 908, "a": 460,
          "texto": "A primeira versão\nestá no ar", "tamanho": 118, "peso": 750 },
        { "tipo": "forma", "forma": "linha", "x": 86, "y": 880, "l": 180, "a": 8,
          "preenchimento": "#ff5a36", "espessura": 8 },
        { "tipo": "texto", "x": 86, "y": 926, "l": 800, "a": 60,
          "texto": "primocode.studio", "tamanho": 36, "cor": "#bf9c8a" }
      ]
    }]
  }
}
```

## Ícones disponíveis

`raio` `alvo` `foguete` `escudo` `relogio` `usuario` `pessoas` `coracao` `estrela`
`nuvem` `engrenagem` `lampada` `cadeado` `casa` `email` `telefone` `camera` `fogo`
`globo` `chave` `presente` `sino` `mapa` `dinheiro` `crescimento` `grafico` `balao`
`pasta` `livro` `play2` `check` `imagem` `codigo` `tabela` `lista`

## Vidro e ícone-objeto

`"material": "vidro"` em qualquer elemento é o liquid glass: painel
translúcido que **desfoca o que está atrás**, com bisel de luz em cima e
reflexo diagonal. Precisa de algo atrás (gradiente, forma colorida, foto) para
aparecer. Na forma, `preenchimento` vira a tinta do vidro.

```json
{ "tipo": "forma", "forma": "retangulo", "material": "vidro", "raio": 32,
  "x": 86, "y": 300, "l": 908, "a": 380, "preenchimento": "#ff5a36" }
```

`"estilo": "app"` no ícone faz o azulejo de aplicativo (gradiente da cor,
brilho, sombra, traço branco); `"estilo": "vidro"` faz o mesmo azulejo em
vidro. `fundo` pinta o azulejo. É o ícone de produto para capa e post de
lançamento:

```json
{ "tipo": "icone", "nome": "foguete", "estilo": "app", "x": 86, "y": 120, "tamanho": 200, "fundo": "#8b5cf6" }
```

## Várias artes no mesmo arquivo

Cada item de `cenas` é uma prancha independente. Um carrossel de Instagram é um
arquivo com 5 cenas de 1080×1080 — o modo Abrir passa uma a uma com `→`.

## Export

`GET /api/arquivos/<id>/export` devolve um `.html` autônomo. Para PNG, abra em
`/v/<id>` e use a captura de tela do sistema, ou `P` para gerar PDF em escala real.