Mockup · Modal de geração de mídia

Mockup do modal de geração card 3 · ORG · IG Reels · 9:16

estado

viewport

O que olhar pra aprovar

Layout: split-panel em desktop (galeria 320px à esquerda, forja fluida à direita) — contexto SEMPRE visível durante iteração. No mobile vira bottom-sheet 92dvh com drag-handle, ordem forja→galeria. Toggle "Mobile (sheet)" no topo simula.
5 estados navegáveis (chips no topo): galeria cheia, galeria vazia (mostra empty-state ilustrado em vez de void), gerando (skeleton + texto rotativo + progress bar no footer), resultado pronto (prompt colapsa pra topo, mídia grande + 4 ações inline), erro (card âmbar com tentar/trocar modelo).
Galeria com 3 estados de thumb: "em uso" (verde sólido, mídia atual do card), "ref ativa" (anel sage, sendo usada como referência da próxima geração), e padrão. Hover revela overlay com mini-ações.
Chips de prompt: 5 sugestões parametrizadas pelo gancho do card #3 ("POV: você abriu o PDF do exame de novo"). Scroll horizontal com fade-out à direita indicando overflow. Clique preenche textarea, não dispara geração.
Estilo de marca: 3 radio-cards com swatch real de cada modo (cream→sage para Livro, ink→teal para App, holográfico para Future). Tooltip on-hover mostra o que cada um adiciona ao prompt. Default = Livro (escopo desta página).
Referência: drop-zone 80×80 OU clique em mídia da galeria à esquerda OU paste Cmd+V. Mobile: vira 2 botões lado a lado.
Footer sticky: custo estimado (com aria-live="polite" pra screen-reader) + acumulado da sessão + CTA Gerar. Durante loading vira progress + Cancelar com aviso "não reembolsa".
Microcopy verbatim do verdict do sênior: placeholder "Conte pra um fotógrafo. Ex: …", loading "Renderizando · costuma levar 10 a 20 segundos", erro "Não rolou desta vez. Pode ser o modelo sobrecarregado". CTA simplificado pra "Gerar" (sem seta — geração é in-modal, não externa).
A11y (não visível mas declarado no HTML): role="dialog", aria-modal, aria-labelledby no modal; role="listbox" + role="option" na galeria; role="radiogroup"/role="radio" com aria-checked nos estilos; aria-pressed nos chips de prompt; aria-live="polite" no custo e loading; foco visível por tab; ESC fecha (com confirm se loading); foco retorna pro botão "Gerar mídia" do card original ao fechar.
Riscos identificados: (1) galeria com 50+ itens precisa de busca textual desde a v1 (campo "🔎 buscar por prompt" já visível no topo da galeria); (2) custo acumulado da sessão visível embaixo do custo estimado pra evitar surpresa na fatura; (3) localStorage estoura com base64 — vai usar IndexedDB com blob URLs na implementação real; (4) estado do modal precisa ser objeto único observável (não derivado do DOM) pra sobreviver redimensionamento da janela.
O que NÃO está no mockup ainda (vai pra v2 do mockup se quiser): (a) modo "gerar 4 variações" tipo Midjourney, (b) busca textual funcional, (c) histórico de prompts separado das mídias, (d) confirmação de substituição quando o card já tem mídia aplicada, (e) banner offline.

← Voltar pra página de mídias ← Voltar pro mapa do funil