Carta Carinhosa

Uma carta interativa com resposta divertida e final afetuoso.

Carta Carinhosa é uma página web responsiva, feita em HTML, CSS e JavaScript puro, para exibir uma pergunta central com duas respostas possíveis e um resultado acolhedor. O produto é para qualquer pessoa que queira uma experiência leve, fofa e compartilhável em celulares e computadores, sem depender de frameworks ou bibliotecas externas.

Business Goals

Concluir um MVP funcional em 1 entrega única, com 100% do comportamento principal implementado no primeiro release.
Atingir tempo de carregamento inicial abaixo de 1.5s em conexões móveis medianas em 90% das sessões até o lançamento.
Garantir taxa de falha de interação de 0% nos fluxos Sim e Não em testes internos antes da publicação.
Manter compatibilidade com 95% dos navegadores móveis e de desktop modernos suportados pelo mercado-alvo.
Obter pelo menos 80% de avaliações positivas em feedback de uso compartilhado nas primeiras 2 semanas.

User Goals

Fazer a pergunta aparecer de forma bonita e centralizada em qualquer tamanho de tela.
Permitir que a pessoa responda com botões grandes e fáceis de tocar.
Exibir uma reação engraçada e imediata ao clicar em Não, sem prender o usuário.
Exibir uma mensagem carinhosa e memorável ao clicar em Sim.
Garantir que a página volte automaticamente ao estado inicial depois da resposta Não.

Non-Goals

Não é um aplicativo com login, cadastro ou persistência de histórico.
Não é necessário suporte a edição dinâmica do texto da pergunta pelo usuário final.
Não inclui backend, banco de dados ou qualquer dependência de API externa.
Não inclui compartilhamento social, áudio, nem notificações push.

Usuário Casual Lucas, 22 - Lucas quer abrir a página no celular e fazer uma brincadeira rápida com a família ou com amigos. Ele espera uma experiência instantânea, bonita e sem atrito.

Usuário Casual Lucas, 22

Como um usuário casual, quero tocar em Sim ou Não com facilidade, para responder sem pensar demais.
Como um usuário casual, quero que a tela fique bonita no celular, para que a experiência pareça caprichada.
Como um usuário casual, quero que o Não não me deixe preso, para que eu possa voltar à pergunta rapidamente.

Pessoa que compartilha Ana, 31 - Ana quer enviar um link simples para alguém específico e causar uma reação divertida. Ela valoriza um resultado claro, com boa apresentação visual e comportamento previsível.

Pessoa que compartilha Ana, 31

Como uma pessoa que compartilha, quero que a página funcione igual no celular e no computador, para que ninguém tenha problemas ao abrir.
Como uma pessoa que compartilha, quero uma resposta engraçada ao clicar em Não, para tornar a interação mais memorável.
Como uma pessoa que compartilha, quero uma resposta carinhosa ao clicar em Sim, para criar um momento afetivo.

Visitante não técnico Rita, 58 - Rita pode abrir o link sem familiaridade com tecnologia. Ela precisa entender tudo em segundos e não deve se perder em telas extras.

Visitante não técnico Rita, 58

Como uma visitante não técnica, quero ver apenas a pergunta e os botões principais, para não ficar confusa.
Como uma visitante não técnica, quero textos grandes e legíveis, para conseguir usar sem esforço.
Como uma visitante não técnica, quero uma animação leve e nada agressiva, para que a experiência seja agradável.

Tela principal da carta · High priority

Exibir uma carta centralizada com aparência de bilhete carinhoso, contendo exatamente a pergunta definida e dois botões de resposta.
Centralizar vertical e horizontalmente o cartão em viewport mobile e desktop.
Mostrar exatamente a frase: Deixa eu ir pra casa da tua vó quando tu for?
Apresentar os botões SIM e NÃO abaixo da pergunta, com tamanho de toque confortável.
Aplicar bordas arredondadas, sombra leve e fundo suave com decoração discreta.
Garantir que o layout se adapte a telas entre 320px e 1440px sem quebrar a composição.

Ação do botão NÃO · High priority

Quando o usuário tocar em Não, a interface deve trocar para uma mensagem engraçada e depois retornar automaticamente ao estado inicial.
Exibir a mensagem grande: CALA A BOCA, com destaque visual imediato.
Bloquear cliques repetidos durante o intervalo de retorno para evitar estados inconsistentes.
Após um curto intervalo, reiniciar a página ou restaurar o estado inicial sem exigir ação do usuário.
Garantir que o usuário nunca fique preso em uma tela intermediária.
Manter o comportamento previsível em iOS, Android, Chrome, Safari e Edge.

Ação do botão SIM · High priority

Quando o usuário tocar em Sim, substituir a carta por uma mensagem carinhosa e uma animação leve de celebração.
Trocar a pergunta e os botões pela mensagem: Muito obrigado vovó, gosto muito de ficar um tempo com a senhora.
Adicionar animação discreta de corações ou confetes sem sobrecarregar a tela.
Evitar rolagem desnecessária e manter a mensagem centralizada.
Garantir que a animação seja curta e não interfira na leitura.
Preservar contraste e legibilidade durante e após a animação.

Design responsivo e acessibilidade · Medium priority

Construir a interface com foco em estética suave, usabilidade por toque e legibilidade em dispositivos diversos.
Usar tipografia limpa e tamanho de fonte que permaneça legível em telas pequenas.
Garantir contraste suficiente entre texto, botões e fundo.
Adicionar estados de hover, foco e active visíveis para navegação por teclado e mouse.
Respeitar prefers-reduced-motion quando possível para reduzir animações.
Evitar elementos decorativos que cobrem o texto principal ou os botões.

Implementação em arquivo único · Medium priority

Entregar tudo em um único index.html com HTML, CSS e JavaScript puros, sem dependências externas.
Não usar frameworks, bibliotecas ou assets remotos.
Estruturar o código de forma legível dentro do mesmo arquivo.
Separar estilos e scripts em blocos claros para manutenção futura.
Garantir que o arquivo funcione ao abrir diretamente no navegador.
Não depender de build step, bundler ou servidor para uso básico.

Primeira abertura da carta

Abrir o arquivo index.html diretamente no navegador.
Carregar imediatamente a carta centralizada com fundo suave e elementos discretos.
Mostrar a pergunta e os botões SIM e NÃO sem exigir cadastro ou instruções.
Atingir tempo até interação principal em menos de 1 segundo em desktop e menos de 2 segundos em celular.
Permitir que o usuário decida em um único toque, sem navegação extra.

1. Chegada à carta

O usuário vê um cartão bonito e centralizado com a pergunta principal logo no centro da tela.
A carta deve permanecer visível sem rolagem na maioria das telas.
A composição precisa sobreviver a mudanças de orientação e redimensionamento.
Elementos decorativos devem ser sutis e não competir com o texto.

2. Escolha entre SIM e NÃO

Os botões ficam abaixo da pergunta, com área de toque ampla e comportamento visual claro.
Botões devem ser suficientemente grandes para toque com o polegar.
Estados de hover, focus e active devem ser distintos.
Se o usuário usar teclado, Enter e Espaço devem acionar o botão em foco.

3. Resposta NÃO com retorno automático

Ao clicar em Não, a tela mostra uma resposta engraçada e depois volta sozinha ao estado inicial.
Mostrar imediatamente a mensagem CALA A BOCA em destaque.
Usar temporizador curto para restaurar a carta inicial.
Desativar interações durante a transição para evitar múltiplos disparos.

4. Resposta SIM com carinho

Ao clicar em Sim, a pergunta desaparece e surge uma mensagem afetuosa de agradecimento.
Substituir a UI por texto de agradecimento legível e centralizado.
Disparar uma pequena animação de coração ou confete.
Manter o efeito breve para não atrasar a leitura principal.

5. Recuperação e consistência

O estado final deve ser sempre consistente, sem travamentos, telas vazias ou rotas alternativas.
Se houver erro em animação, a interface deve continuar funcional.
O fluxo Não nunca pode deixar a tela presa fora do estado inicial.
O layout deve se manter estável mesmo após múltiplos cliques.

Recursos avançados e bordas do produto

Suporte opcional a prefers-reduced-motion para reduzir ou remover animações.
Pequena variação visual de partículas ou corações no sucesso sem adicionar dependências.
Tratamento de resize e mudança de orientação para manter o cartão centralizado.
Fallback seguro caso o navegador bloqueie animações ou timers.
Possibilidade futura de parametrizar a frase da carta sem alterar a estrutura principal.

Diretrizes visuais da interface

Estilo de bilhete ou carta, com fundo suave e tom acolhedor.
Botões grandes, arredondados e com feedback táctil imediato.
Sombra leve e bordas suaves para dar sensação de profundidade sem exagero.
Tipografia bonita, simples e de alto contraste para leitura rápida.
Animações curtas, fluidas e não distrativas, com atenção a acessibilidade.
Performance de primeira renderização priorizada por CSS leve e JavaScript mínimo.

Mariana abre o link no celular para fazer uma brincadeira rápida com a família. Em menos de um segundo, ela vê a carta centralizada, a pergunta clara e dois botões enormes, sem distrações ou menus extras.

Ela toca em Não e a resposta engraçada aparece instantaneamente, mas a página se recupera sozinha logo depois, voltando ao estado inicial sem travar. Quando ela tenta de novo e toca em Sim, surge uma mensagem carinhosa com uma pequena animação de corações, criando um momento afetuoso e fácil de compartilhar.

Para o negócio, isso significa uma experiência memorável, simples de usar e confiável em qualquer dispositivo. O resultado é uma página leve que gera engajamento imediato, reduz atrito e aumenta a chance de a pessoa repetir ou enviar para outras pessoas.

User-Centric Metrics

90% dos usuários entendem a interação principal em até 5 segundos.
95% conseguem tocar em um dos botões sem erro em telas móveis.
Menos de 1% relatam estado travado após clicar em Não.
Pelo menos 80% descrevem a experiência como divertida ou fofa em feedback rápido.
Tempo médio até a primeira interação abaixo de 10 segundos após o carregamento.

Business Metrics

Taxa de abertura e uso em sessões compartilhadas acima de 70% no primeiro mês.
Taxa de retorno ao estado inicial após Não em 100% das interações.
Taxa de conclusão do fluxo Sim acima de 85% nas sessões iniciadas.
Crescimento orgânico por compartilhamento medido por pelo menos 20% de novas sessões vindas de links enviados pelos usuários.

Technical Metrics

Disponibilidade de 99.9% no conteúdo estático hospedado.
Primeira renderização em menos de 1.5s no desktop e 2.5s no mobile médio.
Zero erros fatais de JavaScript no fluxo principal em monitoramento básico.
Tempo de resposta de interação visual abaixo de 100ms para feedback dos botões.

Tracking Plan

page_view para medir abertura da carta.
button_click_yes para registrar escolhas positivas.
button_click_no para registrar escolhas negativas.
no_state_shown para medir exibição da mensagem engraçada.
auto_reset_completed para confirmar retorno ao estado inicial.
yes_state_shown para medir conclusão do fluxo carinhoso.
ui_error_detected para capturar falhas de renderização ou animação.

Technical Needs

HTML semântico para estrutura da carta e acessibilidade.
CSS responsivo com flexbox ou grid para centralização total.
JavaScript puro para troca de estado, timers e animações.
Uso opcional de Canvas ou apenas elementos DOM para confetes e corações.
Tratamento de eventos de clique, toque e teclado sem dependências externas.
Código em arquivo único index.html com estilos e scripts embutidos.
Compatibilidade com navegação direta via arquivo local e hospedagem estática.

Integration Points

Hospedagem estática em GitHub Pages ou Netlify.
Google Analytics 4 ou Plausible para eventos simples, se desejado.
Sentry para captura opcional de erros de front-end.
Serviço de CDN não é necessário, mas pode ser usado para distribuição do arquivo estático.

Data Storage & Privacy

Não coletar dados pessoais por padrão.
Se analytics forem adicionados, usar consentimento e política de privacidade compatíveis com LGPD, GDPR e CCPA.
Não persistir respostas localmente a menos que uma futura versão especifique isso.
Evitar cookies desnecessários e armazenamento de identificadores permanentes.
Garantir que qualquer telemetria seja agregada e mínima.

Scalability & Performance

Manter o bundle efetivo praticamente zero, já que tudo vive em um arquivo único.
Usar animações leves para evitar queda de FPS em celulares de entrada.
Evitar imagens pesadas e fontes externas para reduzir latência.
Garantir que timers e reinicialização do estado não criem vazamentos de memória.

Potential Challenges

Risco de o botão Não gerar múltiplos cliques e estados inconsistentes; mitigação: desabilitar interações durante o intervalo de retorno.
Risco de quebrar em telas muito pequenas; mitigação: testar em 320px e ajustar espaçamentos com unidades responsivas.
Risco de animações causarem enjoo ou distração; mitigação: manter movimentos curtos e respeitar prefers-reduced-motion.
Risco de texto ficar pequeno demais em mobile; mitigação: usar medidas relativas e limites mínimos de fonte.
Risco de diferenças entre navegadores no tratamento de timers; mitigação: implementar fallback simples de restauração por estado.

Team & resourcing - Time pequeno - 1 engenheiro front-end, 1 designer com apoio leve de produto, PM parcial.

Phase 1: MVP visual e fluxo base · Dias 1–2

index.html único com carta centralizada, pergunta, botões SIM e NÃO.
Layout responsivo básico com fundo suave, sombras e tipografia legível.
Fluxo SIM com troca para a mensagem carinhosa.
Fluxo NÃO com mensagem engraçada e retorno automático ao estado inicial.

Phase 2: Polimento de interação · Dias 3–4

Animações leves de hover, active e transição entre estados.
Pequena animação de corações ou confetes no fluxo SIM.
Tratamento de foco por teclado e melhorias de acessibilidade.
Ajustes finais para mobile, tablet e desktop.

Phase 3: Robustez e compatibilidade · Dias 5–6

Testes manuais em Chrome, Safari, Edge e navegadores móveis.
Validação de comportamento ao clicar repetidamente em Não.
Correções de layout em 320px, 375px, 768px e desktop amplo.
Verificação de desempenho e ausência de dependências externas.

Phase 4: Lançamento estático · Dia 7

Arquivo final pronto para hospedagem estática.
Checklist de QA final e versão congelada.
Opcionalmente instrumentação básica de analytics de eventos.
Entrega pronta para compartilhamento por link.

Paste this into Cursor, Bolt, Lovable, or v0 to start building.

Build a single-file interactive web page called Carta Carinhosa using only plain HTML, CSS, and JavaScript in one index.html file. The page must be fully responsive for mobile, tablet, and desktop, with a soft pastel background and a centered card that looks like a loving letter.

Core content:
Show exactly this question centered in the card: Deixa eu ir pra casa da tua vó quando tu for?
Below it place two large rounded buttons: SIM and NÃO.

Behavior:
When the user clicks NÃO, immediately replace the question and buttons with a large playful message: CALA A BOCA. After a short delay, automatically restore the page to the original question state. The user must never get stuck on another screen.
When the user clicks SIM, replace the question and buttons with this affectionate message: Muito obrigado vovó, gosto muito de ficar um tempo com a senhora. Add a small heart or confetti animation for delight.

Design requirements:
Use a beautiful, simple, letter-inspired visual with rounded corners, subtle shadows, soft colors, and readable typography. Keep the card centered vertically and horizontally at all viewport sizes. Buttons must be easy to tap on mobile and have smooth hover, focus, and click states. Include light decorative elements that do not interfere with the text.

Accessibility and behavior:
Support keyboard interaction, good contrast, and reduced-motion preference if possible. Ensure the NÃO flow cannot break the page, create a dead end, or require manual refresh. Avoid frameworks, libraries, images, and external assets.

Implementation notes:
Use a simple internal state model for initial, no-response, and yes-response views. Keep the code clean and self-contained. If adding confetti/hearts, generate them with DOM or lightweight CSS animations only. The result should be ready to save as index.html and open directly in a browser.

Business Idea

Crie um site interativo, divertido e responsivo usando HTML, CSS e JavaScript, funcionando perfeitamente tanto em celulares quanto em computadores. O site deve ter o visual de uma carta/pergunta carinhosa, com um design bonito, simples e agradável. A página deve centralizar uma espécie de carta na tela, com fundo suave e elementos decorativos discretos. No centro da carta, coloque exatamente a pergunta: "Deixa eu ir pra casa da tua vó quando tu for?" Abaixo da pergunta, coloque dois botões: SIM NÃO Comportamento do botão NÃO Quando a pessoa clicar em NÃO: Mostre uma mensagem grande e divertida dizendo: "CALA A BOCA" Depois de um pequeno intervalo, redirecione/reinicie a página para a pergunta inicial. A pergunta e os dois botões devem aparecer novamente normalmente. Não permita que o botão NÃO quebre a página ou deixe o usuário preso em outra tela. Comportamento do botão SIM Quando a pessoa clicar em SIM, substitua a pergunta e os botões por uma mensagem carinhosa: "Muito obrigado vovó, gosto muito de ficar um tempo com a senhora" Pode adicionar uma pequena animação de coração/confetes para deixar o resultado mais divertido. Design Visual inspirado em uma carta ou bilhete. Cores suaves e agradáveis. Bordas arredondadas. Sombras leves. Tipografia bonita e fácil de ler. Botões grandes e fáceis de tocar no celular. Animações suaves ao passar o mouse e ao clicar. Layout totalmente responsivo para telas de celular, tablet e computador. A carta deve permanecer centralizada vertical e horizontalmente. Não usar frameworks ou bibliotecas externas; faça tudo com HTML, CSS e JavaScript puro. Entrega Forneça o código completo e funcional em um único arquivo index.html, contendo HTML, CSS e JavaScript no mesmo arquivo, para que eu possa simplesmente salvar como index.html e abrir no navegador.

Design by The Resonance | Powered by GPC – The AI Transformation Company

TL;DR

Goals