- Maven · AI Prototyping for Designers
- Tudo
- Projeto pessoal
- v0 · Next.js · CSS
- Publicado · 2026
Está no ar: olha antes de ler
Este case é sobre uma coisa que existe, não sobre a maquete de uma. As capturas abaixo seguram o layout, mas o flicker, as scanlines e o letreiro só existem em movimento. Abre, e depois volta.
homepage-christofer.vercel.appPor que isso existe
Nove anos desenhando produtos usados por milhões, e eu nunca tinha publicado nada em que fosse dono de todas as decisões, incluindo as que eu não estava qualificado para tomar.
O curso deu a desculpa. O briefing que dei a mim mesmo era estreito de propósito: uma página, uma estética, publicada. Não um portfólio, não um produto. Algo sem stakeholder para alinhar.
Sou do tipo que mantém o Figma e o terminal abertos na mesma tela. Essa página é o que acontece quando ninguém me obriga a escolher.
O que eu estava de fato testando
Consigo dirigir uma IA para uma estética específica, ou só para a genérica?
Ferramenta generativa puxa para o meio seguro. Chegar no retro-futurismo (scanline de CRT, brilho cromático, barra de status monoespaçada) exigiu descrever o visual com precisão suficiente para não ser achatado em mais uma landing de gradiente.
Onde o prompt para e a edição começa?
O v0 subiu a estrutura rápido. O caráter veio de entrar no CSS depois e ajustar tempo, opacidade e modo de mesclagem na mão. Saber qual dos dois cada problema pede acabou sendo a habilidade de verdade.
Uma página cheia de efeito ainda pode ser legível?
Brilho, flicker e scanline brigam com legibilidade por natureza. Cada efeito teve que recuar até o texto ganhar, a mesma contenção que o trabalho do dia a dia exige, só que sem ninguém cobrando.
O card da bio com os colchetes de canto, e o carrossel que corre sozinho: Manaus, Japão e Coreia atrás de um banho ciano.
É tudo CSS
Sem WebGL, sem shader, sem runtime de animação.
A estética inteira roda em gradientes sobrepostos, um repeating-linear-gradient para as scanlines, text-shadow para o neon, e um keyframe de tempo irregular para o flicker. 224 linhas de CSS.
Foi restrição deliberada. Uma cena 3D soaria mais impressionante de descrever e seria menos honesta sobre o que era o exercício: a questão era ver até onde vai a plataforma pura quando empurrada com intenção.
O keyframe do flicker é o detalhe que eu defendo: os passos são propositalmente desiguais, porque pulso regular lê como carregamento e pulso irregular lê como tubo falhando.
NEO-MANAUS
neon rain · irregular by design
O keyframe exato da página publicada, valores copiados como estão. Os passos são desiguais de propósito: pulso regular lê como carregamento, pulso irregular lê como tubo falhando. Desliga sob reduced motion.
O letreiro, a fileira de tags, e um bloco de contato que segue no personagem até a última linha.
O que eu cortei
Fundo em WebGL
Tentador, e teria cara de coisa. Também transformaria um experimento de uma página num projeto com orçamento de dependência, e deixaria a página mais lenta sem ganho no que estava sendo testado.
Som
A estética pede. Áudio automático em página pessoal é hostil, e esconder atrás de um botão significaria que quase ninguém ouviria. Não valia o código.
Virar minha homepage de verdade
É a porta de entrada errada para quem se candidata a vaga sênior fora do país. Fica como projeto paralelo de propósito: este portfólio é a porta de entrada, e essa separação já é a decisão.
Quem fez o quê
- Conceito, direção de arte e cada palavra da página
- Direção dos prompts para a estética, e a decisão de quando parar de promptar
- Ajuste manual do CSS: curva do brilho, densidade da scanline, tempo do flicker
- Deploy e a decisão de manter separado do portfólio
- Nenhum time. Era esse o ponto.
- O v0 gerou a primeira passada estrutural, que eu reescrevi em partes
Reflexões
O achado útil não foi sobre a ferramenta.
A IA me levou a uma página funcionando numa tarde que teria me tomado uma semana. Ela também produziu, por padrão, exatamente o resultado genérico contra o qual o curso avisava. A distância entre esses dois fatos é onde o trabalho mora agora.
O que voltou para o trabalho do dia a dia é calibragem, e não técnica: perceber mais cedo quando a versão gerada está perto o suficiente para editar, e quando sai mais barato jogar fora e descrever de novo.