# Editorial de moda (v1)

O vídeo parece uma revista de moda folheada em câmera lenta: serifa enorme e fina contra rótulos
pequenos em caixa alta, papel creme alternando com preto quente, um vermelho batom que aparece pouco
e por isso pesa, e cada assunto apresentado como um look numerado de desfile. Referências de olhar:
capas e aberturas da Vogue, Harper's Bazaar e i-D, cartelas de desfile da Semana de Moda de Paris,
lookbooks de grife com fundo liso.

## Quando usar

- Anunciar tendências, previsões ou "o que vem aí" (as tendências de 2027, a coleção da estação).
- Listas curtas de 3 itens que ganham com a ideia de "look 01, 02, 03".
- Lançamento de produto, curso ou edição de evento que precisa parecer sofisticado e autoral.
- Abertura de série ou de quadro fixo ("Edição de outubro", "A seleção da semana").
- Vídeos de 10 a 20 s, verticais, com uma frase forte por cena.

## Quando não usar

- Explicar um processo passo a passo ou um conceito que pede diagrama (use o explainer desenhado ou o
  canvas geométrico).
- Demonstrar interface de software (use o canvas geométrico ou o vídeo de apresentação de software).
- Notícia urgente, humor ou polêmica: o ritmo é calmo e decidido, sem urgência.
- Listas com mais de 4 itens ou muito texto por tela: o estilo vive de espaço vazio.

## Tokens

| Token | Valor | Uso |
| --- | --- | --- |
| Papel | `#F2EDE4` | fundo das cenas claras (nunca branco puro) |
| Tinta | `#111010` | texto no papel e fundo das cenas escuras (nunca preto puro) |
| Acento (vermelho batom) | `#B3122E` | UMA palavra por cena, o número do look, uma cena inteira por vídeo |
| Areia | `#C9B8A0` | fios finos, rótulos no escuro, tecido |
| Areia escura | `#8C7A62` | rótulos sobre o papel (contraste) |
| Cetim claro | `#E8DCC8 → #A8957A` | tecido dentro da moldura nas cenas escuras |
| Cetim escuro | `#3A3532 → #111010` | tecido nas cenas claras |
| Cetim vermelho | `#7A0A1E → #D23A4F` | tecido na cena de fundo vermelho |
| Fonte de título | Bodoni Moda (variável, `opsz` e `wght`) | títulos, números, índice |
| Fonte de destaque | Bodoni Moda Italic | a palavra que carrega o sentido |
| Fonte de rótulo | Inter 500 | cabeçalho, rodapé, subtítulo em caixa alta |
| Alternativas | Playfair Display / Instrument Serif Italic | quando não houver Bodoni Moda |
| Curva de entrada | `easeOutExpo` (`1 - 2^(-10p)`) | toda revelação por máscara |
| Curva de cortina | `easeInOutCubic` | transição entre cenas |
| Duração de revelação | 0,6 a 0,9 s | cada linha de título |
| Duração de cortina | 0,35 a 0,4 s | troca de cena |
| Zoom de câmera | escala 1,00 → 1,04 na cena inteira, linear | sempre ligado |

Escala de texto, no quadro de 1080x1920:

| Papel | Tamanho | Peso | Espaçamento | Entrelinha |
| --- | --- | --- | --- | --- |
| Número do look (cortado na borda) | 520 a 600 px | 400 | -0.04em | 0.85 |
| Ano ou número de capa | 400 a 430 px | 400 | -0.04em | 0.9 |
| Título de capa | 140 a 160 px | 400 a 500 | -0.02em | 1.0 |
| Título de cena | 110 a 130 px | 400 a 500 | -0.02em | 1.02 |
| Item de índice | 60 a 64 px | 400 | 0 | 1.1 |
| Subtítulo em caixa alta | 26 a 30 px | Inter 500 | 0.3em | 1 |
| Rótulo de cabeçalho e rodapé | 22 a 24 px | Inter 500 | 0.4 a 0.5em | 1 |

```json
{
  "estilo": "editorial-de-moda",
  "quadro": { "largura": 1080, "altura": 1920, "fps": 30 },
  "cor": {
    "papel": "#F2EDE4", "tinta": "#111010", "acento": "#B3122E",
    "areia": "#C9B8A0", "areia_escura": "#8C7A62",
    "cetim": { "claro": ["#E8DCC8", "#A8957A"], "escuro": ["#3A3532", "#111010"], "vermelho": ["#7A0A1E", "#D23A4F"] }
  },
  "fonte": {
    "titulo": "Bodoni Moda (variável wght 400-900, opsz 6-96)",
    "destaque": "Bodoni Moda Italic",
    "rotulo": "Inter 500, caixa alta, letter-spacing 0.3-0.5em",
    "origem": "github.com/google/fonts/ofl/bodonimoda"
  },
  "tempo": {
    "revelacao_s": [0.6, 0.9], "cortina_s": [0.35, 0.4], "respiro_minimo_s": 0.8,
    "zoom_camera": [1.0, 1.04], "tecido_rad_por_s": 0.5
  },
  "curva": { "entrada": "easeOutExpo", "cortina": "easeInOutCubic", "camera": "linear" },
  "grade": {
    "margem_lateral": 90,
    "cabecalho_y": [120, 150], "rodape_y": [1790, 1820],
    "moldura": { "x": [330, 990], "y": [520, 1240], "forma": "arco (topo semicircular)" },
    "titulo_y": [1330, 1650]
  },
  "acabamento": { "granulado": 0.04, "vinheta": "radial suave", "fio": "2 px" }
}
```

## Regras

1. **Toda peça é uma edição de revista.** O vídeo ganha um nome de edição ("Edição 2027", "A coleção
   da estação") e cada item vira um look numerado: `Nº 01`, `Nº 02`, `Nº 03`. A abertura tem cara de
   capa e o fim tem cara de contracapa, com um índice "nesta edição" e a assinatura.
2. **Serifa enorme contra rótulo pequeno.** Títulos em Bodoni Moda de 110 a 160 px, rótulos em Inter
   de 22 a 30 px em caixa alta bem espaçada. Nada de tamanho médio: o contraste entre os dois extremos
   é o estilo.
3. **Uma palavra em itálico vermelho por título**, a que carrega o sentido ("tendências", "sozinhos",
   "celular"). Na cena de fundo vermelho, essa palavra vai em tinta.
4. **Três cores por quadro, no máximo.** Alterne cenas de papel e de tinta, e reserve UMA cena com o
   fundo inteiro no vermelho. O vermelho aparece pouco no resto do vídeo.
5. **Grade fixa de revista.** Margens laterais de 90 px. Cabeçalho no topo com rótulo à esquerda,
   edição à direita e um fio fino de margem a margem. Rodapé com rótulo pequeno ("LOOK 01 / 03") e fio.
6. **Assimetria e corte de propósito.** O número do look é gigante e sai pela borda do quadro (cerca de
   15% para fora), alternando o lado a cada cena. O título fica alinhado ao lado oposto ao da moldura.
7. **Moldura de lookbook.** A imagem ou ilustração fica dentro de uma moldura alta em arco (topo
   semicircular) com fio fino em volta. Sem foto, a moldura recebe um tecido de cetim feito em código,
   ondulando devagar, e por cima um objeto simples em traço fino de 3 px (lista, celular, quadro de
   filme, fita métrica de alfaiate).
8. **Revelação por máscara em toda linha de título.** A linha sobe de trás de uma linha de corte, como
   se saísse de dentro do papel, em 0,6 a 0,9 s com `easeOutExpo`, começando junto com a palavra falada.
9. **Fio antes do texto.** Os fios finos se desenham da esquerda para a direita na entrada da cena, e
   só depois o texto aparece. Os rótulos entram com o espaçamento das letras abrindo devagar.
10. **A câmera nunca para.** Cada cena escala de 1,00 a 1,04 do começo ao fim. Depois que a última linha
    entra, a cena segura pelo menos 0,8 s só com o zoom, o tecido e o granulado mexendo.
11. **Um corte por frase falada.** A troca de cena é uma cortina na cor da cena seguinte subindo da base
    ao topo em 0,35 s, ou um corte seco.
12. **Granulado e vinheta em tudo.** Ruído de filme de 3 a 5% que muda a cada quadro (determinístico,
    semeado) e vinheta radial suave. É o que tira a cara de slide.
13. **Objeto ilustrado ganha um trocadilho de moda quando dá.** "Sob medida" vira fita métrica de
    alfaiate, "coleção" vira cabide, "estação" vira etiqueta de roupa.

## Proibições

- Branco puro, preto puro, gradiente colorido de fundo, neon, brilho de IA.
- Peso 800/900, fonte arredondada (Nunito), fonte condensada de impacto (Bebas), fonte manuscrita.
- Mais de uma palavra em vermelho por cena (fora a cena de fundo vermelho).
- Quique, overshoot, mola, giro, partícula, glitch, tremor, emoji, ícone colorido, mascote.
- Legenda karaokê de rede social com palavra pulando. O texto da tela é o título diagramado da cena.
- Texto encostando na borda (só o número do look sai do quadro, e sai claramente de propósito).
- Lista com mais de 4 itens na mesma tela.

## Som

- **Narração** na frente, sempre. O título aparece junto com a palavra falada.
- **Música (opcional):** batida de passarela, house minimalista ou deep house a 118 a 124 BPM, bumbo
  seco, baixo grave arredondado, um estalo de palma no contratempo e nada de vocal. Com narração, 18 a
  20 dB abaixo da voz.
- **Efeitos (opcionais e raros):** clique de obturador de câmera analógica no corte para cada look e um
  farfalhar de página de revista na cortina. Um efeito a cada 2 cortes, no máximo.
- **Proibido:** riser, impacto cinematográfico, whoosh digital, som de teclado.

## Prompts dos assets

O exemplo 07 foi feito 100% em código (canvas), sem imagem gerada. Quando o vídeo pedir foto de
verdade dentro da moldura (gpt-image-2, `quality: high`, retrato 2:3):

**Retrato editorial em estúdio**
```
High-fashion editorial photograph, a model in a structured cream wool coat standing against a
seamless warm off-white backdrop (#F2EDE4), soft directional window light from the left, deep but
soft shadows, minimal styling, a single lipstick-red accent (#B3122E) on a scarf, shot on medium
format film, subtle grain, calm confident expression, no text, no logo, vertical 2:3.
```

**Natureza-morta de objeto (para tema de tecnologia)**
```
Luxury fashion still life: a matte black smartphone lying on folded ivory silk satin, lit by a single
hard light from the top right, long elegant shadow, warm cream background, a thin lipstick-red ribbon
crossing the frame, editorial magazine style, medium format film grain, no text, no logo, vertical 2:3.
```

**Tecido para fundo de moldura**
```
Close-up of draped silk satin fabric with soft deep folds, warm sand and ivory tones, gentle
highlights, shallow depth of field, editorial fashion texture, no objects, no text, vertical 2:3.
```

## Componente de referência

Canvas puro, quadro 1080x1920, `window.render(t)` determinístico (o quadro depende só de `t`).
Revelação por máscara de uma linha de título:

```js
const easeOutExpo = p => p >= 1 ? 1 : 1 - Math.pow(2, -10 * p);
function maskLine(ctx, txt, x, y, size, t0, t, { italic = false, color = '#111010', align = 'left', dur = 0.75 } = {}) {
  const p = Math.min(1, Math.max(0, (t - t0) / dur)); if (p <= 0) return;
  ctx.save();
  ctx.font = `${italic ? 'italic ' : ''}400 ${size}px ${italic ? 'BodoniI' : 'Bodoni'}`;
  ctx.textAlign = align; ctx.textBaseline = 'alphabetic';
  const top = y - size * 0.92, h = size * 1.15;              // caixa da linha = máscara
  ctx.beginPath(); ctx.rect(0, top, 1080, h); ctx.clip();
  ctx.fillStyle = color;
  ctx.fillText(txt, x, y + h * (1 - easeOutExpo(p)));        // sobe de trás da linha de corte
  ctx.restore();
}
```

Cetim em faixas verticais dentro de uma moldura em arco:

```js
function arch(ctx, x0, y0, x1, y1) {                          // retângulo alto com topo semicircular
  const r = (x1 - x0) / 2; ctx.beginPath();
  ctx.moveTo(x0, y1); ctx.lineTo(x0, y0 + r); ctx.arc(x0 + r, y0 + r, r, Math.PI, 0); ctx.lineTo(x1, y1); ctx.closePath();
}
function satin(ctx, x0, y0, x1, y1, t, [claro, escuro]) {
  ctx.save(); arch(ctx, x0, y0, x1, y1); ctx.clip();
  for (let x = x0; x < x1; x += 3) {
    const u = (x - x0) / (x1 - x0);
    const g = ctx.createLinearGradient(0, y0, 0, y1);
    for (const v of [0, 0.5, 1]) {                            // a dobra entorta com a altura
      const k = 0.5 + 0.30 * Math.sin(u * 9 + v * 2.2 + t * 0.5) + 0.20 * Math.sin(u * 23 - v * 3 + t * 0.35);
      g.addColorStop(v, mix(escuro, claro, Math.min(1, Math.max(0, k))));
    }
    ctx.fillStyle = g; ctx.fillRect(x, y0, 3, y1 - y0);
  }
  ctx.restore();
}
```

## De onde vem

- **Nasceu para o exemplo 7 do curso Vídeos a Jato** (as três tendências de IA para 2027), a partir das
  convenções de capa, abertura e lookbook das revistas de moda. Aula 7: biblioteca de estilos prontos.
- **Como produzir:** use a skill `video-a-jato` (um `index.html` de canvas com `render(t)`, narração com a
  voz clonada e timing por palavra) aplicando esta ficha no lugar da identidade CPDF.
- **Pedido de exemplo:** "Faz um vídeo de uns 18 segundos no estilo editorial de moda anunciando as três
  tendências de IA que vão dominar 2027. Vertical, narração na minha voz."