Captura do site publicado, rodando no navegador. O flicker e as scanlines só existem em movimento, no link ao vivo.
Em 30 segundos
- Nove anos desenhando produtos, e nenhuma página publicada em que eu fosse dono de todas as decisões. O curso de prototipagem com IA do Maven virou a desculpa para testar até onde eu chegava sozinho.
- Fiz conceito, direção de arte, texto e deploy de uma página cyberpunk. O v0 gerou a primeira estrutura, e o caráter veio do CSS ajustado na mão: 224 linhas, sem WebGL nem runtime de animação.
- A página está no ar, separada deste portfólio de propósito. O que voltou para o dia a dia foi calibragem: perceber mais cedo quando editar o que a IA gerou e quando descrever de novo.
- 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 página que está no ar. As capturas daqui 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. Nada de portfólio ou produto, e nenhum 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.
NEO-MANAUS
neon rain · irregular by design
O keyframe exato da página publicada, com os valores copiados como estão. Desliga sob reduced motion.
O letreiro, a fileira de tags, e um bloco de contato que segue no personagem até a última linha.
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.
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 que voltou para o trabalho do dia a dia.
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. O trabalho, agora, é aproveitar a primeira sem aceitar a segunda.
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.