---
slug: vidro-ios
nome: Vidro iOS
descricao: cartões de vidro fosco com desfoque sobre manchas de cor, mola de iPhone, ilha dinâmica, widgets e central de controle
familia: SaaS e tecnologia
versao: 1
quando:
  - "vídeo de app mobile, rotina, saúde, delivery ou finanças pessoais"
  - "mostrar notificações, widgets ou a ilha dinâmica do iPhone"
  - "anúncio moderno com cara de iOS e vidro fosco"
  - "quero movimento de iPhone, com mola e desfoque"
  - "lançamento de app com botão de baixar"
nao_serve:
  - "vídeo B2B sério ou técnico (use saas-linear ou vercel-mono)"
  - "estilo editorial, papel ou retrô"
---

# Vidro iOS

Um **papel de parede vivo**: verde-azulado profundo `#06303A` com 4 manchas enormes (**lima `#C6F432`, água `#3BE8D0`, coral `#FF7A59`, amarelo**) que flutuam e se cruzam para o vidro ter o que desfocar. Os heróis são **painéis de vidro fosco** (`backdrop-filter: blur(36px) saturate(1.6)`, fundo branco a 17%, borda de 2 px a 38%, realce interno no topo): **pilha de notificações** que cai do alto, **ilha dinâmica** que se estica de pílula a painel preto, **widgets** de início e **central de controle** com blocos que ligam. **Todo movimento usa mola de iPhone** (sobe, passa ~12%, assenta; função `mola`) e o título entra **grande e desfocado e assenta** como na tela de bloqueio. Inter 800 branca. Uma cena = um herói, margens de 96 px.

## Como montar um vídeo com este kit

1. **Leia o pedido e o roteiro.** Corte cada fala em frases curtas. Uma frase = um plano.
2. **Escolha as batidas** em `receita.json`. Cada batida diz quanto dura e quais elementos servem.
3. **Escreva o plano de cenas** (`plano.json`, mesmo formato de `exemplos/plano.json`): `de`/`ate` em quadros, `entrada`, `camadas` (elemento + props) e `sons`. Os cortes seguem a voz ou a batida da trilha (1 batida = 15.0 quadros).
4. **Renderize** com `<Montagem plano={...} arquivos={...} />`.
5. **Confira** um quadro por cena contra `regras/`: área segura, herói grande, nada parado, nada cortado.

## Elementos

| elemento | o que faz | batidas |
|---|---|---|
| `TituloVidro` | título branco que entra maior e desfocado e assenta com mola; `*palavra*` em degradê lima→água | gancho |
| `PilhaNotificacoes` | 3–4 notificações de vidro que caem do alto e se empilham | notificacoes |
| `IlhaDinamica` | pílula preta que se estica até um painel com número grande e barra de progresso | ilha |
| `WidgetsGrade` | widget largo + rosca de progresso + mini gráfico, pulando com mola | widgets |
| `PainelControle` | 4 blocos de ligar/desligar que acendem em branco + barra de brilho | controle |
| `AssinaturaMarca` | ícone do app que cai com mola + nome + botão de vidro "Baixar" + endereço | marca (última) |
| `vidro (material)` | `VIDRO` (estilo do painel) e `Icone` (quadrado arredondado com glifo): monte novos cartões | base de qualquer cartão |
| `Fundo`, `Camera`, `Cena` | o chão, a deriva da câmera e a janela de cada plano | todas |
| `Efeito`, `Trilha` | sons e trilha do kit | todas |

## Proibido

- Vidro sem manchas de cor atrás: o fundo precisa se mexer para o desfoque aparecer.
- Movimento linear ou `ease` seco: tudo entra com a mola.
- Cartão opaco (exceto o painel preto da ilha dinâmica).
- Sombra difusa clara ou brilho em letra; só sombra funda azul-petróleo.
- Mais de um herói por cena; elemento a menos de 96 px da borda.
- Mais de 4 cores de mancha; lima é o destaque.
- Texto fora da área segura (168–1330 px, 96 px nas laterais).