---
slug: saas-linear
nome: SaaS · produto em ação
descricao: o produto funcionando num monitor creme e calmo; saudação em serifa, cursor que clica e faz acontecer, conectores que ligam, agenda que se enche, marca no fim
familia: SaaS e tecnologia
versao: 2
quando:
  - "vídeo de lançamento de SaaS ou app de IA"
  - "demo de produto mostrando a interface funcionando"
  - "mostrar integrações, conectores ou automação acontecendo"
  - "anúncio de assistente, agenda ou ferramenta de produtividade"
  - "quero aquele estilo calmo de produto, tipo vídeo da Anthropic/Claude"
nao_serve:
  - "vídeo divertido, retrô ou feito à mão"
  - "estética escura de dev/terminal (use outro kit de tecnologia)"
  - "muita foto ou pessoa na tela"
---

# SaaS · produto em ação

O produto **mostrado em uso**, dentro de um monitor em 3/4 numa sala quente e escura (parede `#3B1E19`).
A tela é **creme `#F4F1EA`**, mínima, com muito respiro: uma saudação em **serifa calma** (Newsreader 400)
com uma pequena flor coral `#D46F4D` ao lado, uma caixa de pedido branca, um menu que abre, cartões de
conector com chave que liga em azul `#3D7BF0`, uma agenda que se enche de blocos coloridos. Entre as telas,
**uma frase em serifa** assenta palavra por palavra. Sombra macia, cantos redondos, UI em Inter 400/600.
A câmera começa no monitor inteiro, entra na tela e **mira** pedaços da interface (zoom até 1,3); um **cursor**
clica e cada clique causa a próxima coisa. Fecha recuando pro monitor com a marca no centro.

## Como montar um vídeo com este kit

1. **Leia o pedido e o roteiro.** Corte em frases curtas. Cada frase vira uma ação na interface ou uma frase em serifa.
2. **Escolha as batidas** em `receita.json`: `gancho` (saudação + caixa + menu), `conectar`, `virada` (frase), `prova` (agenda), `marca`.
3. **Escreva o plano** (`exemplos/plano.json`): `camera` (chaves de zoom e foco), `cenas` com `camadas` em **px da tela** (0..1500 × 0..940; conteúdo entre x 290 e 1210) e `sons`. O `Cursor` usa as mesmas coordenadas dos botões: confira o centro da chave/botão antes de pôr o clique.
4. **Renderize** com `<Montagem plano={...} />`. `moldura: false` tira o monitor (tela creme em tela cheia).
5. **Confira** um quadro por cena: nada cortado no foco, clique 2 quadros antes do efeito, câmera nunca parada.

## Elementos

| elemento | o que faz | batidas |
|---|---|---|
| `Monitor` | o aparelho: borda fina, pé, a tela creme com luz caindo do canto | todas (via `moldura`) |
| `Camera` | do plano aberto (z 0) ao fechado (z 1) e mira (z até 1,3, foco x/y), com deriva constante | todas (via `camera`) |
| `Saudacao` | flor coral + "Bom dia, Nome" em serifa, palavra a palavra | gancho |
| `CaixaPrompt` | caixa branca com placeholder, botão "+", enviar coral, atalhos em pílula; digitação opcional | gancho |
| `Menu` | popover que abre do "+", faixa de seleção desce pelos itens | gancho |
| `CartoesIntegracao` | cartões de conector; a chave liga no quadro pedido | conectar |
| `Agenda` | semana que se enche de blocos coloridos, check verde num deles | prova |
| `FraseSerifa` | a frase calma, palavra a palavra, cinza → tinta | virada |
| `Cursor` | mão que anda suave e clica (afunda + anel azul) | gancho, conectar |
| `Marca`, `MarcaFinal` | a flor; o fecho com a flor + nome revelado da esquerda pra direita | marca (sempre a última) |
| `Fundo`, `Cena`, `Efeito`, `Trilha` | a sala, a troca de tela (desfoque suave), sons e trilha | todas |

## Proibido

- Fundo de tela escuro, neon, degradê roxo-azul, glow em letra. A tela é creme e calma.
- Logo, nome ou ícone de marca real (Gmail, Google, Claude…): ícones são desenhados no kit, produto fictício.
- Clique que não causa nada, ou efeito sem clique quando há cursor na cena.
- Mais de 1 herói na tela: saudação **ou** cartões **ou** agenda **ou** frase. Frase em serifa sempre sozinha.
- Corte seco entre telas: a troca é `suave` (desfoque 10 px + escala 0,97, 14 quadros).
- Texto fora da área segura (y 168–1330 do vídeo) no plano fechado; câmera parada.