O efeito que me parou no Pinterest era estupidamente simples. Uma foto escura de uma parede de rocha. Você rola, e grama cresce sobre a rocha — exceto que não cresce, é revelada, como se a segunda imagem estivesse escondida atrás da primeira o tempo todo. Sem vídeo. Sem 3D. Duas imagens planas e um truque visual.
Fiz uma captura de tela, abri um terminal e decidi reconstruir tudo como um site interativo com Claude Fable 5 — o hero, a revelação, o texto animado, tudo — sem escrever CSS eu mesmo ou tocar em uma ferramenta de design. Quarenta minutos depois eu tinha uma página que parecia ter sido entregue por um estúdio. Então postei uma gravação de tela no X, e as respostas começaram a fazer a mesma pergunta: "espera, como."
Este é o como. Não a versão polida onde tudo funciona na primeira tentativa — a real, incluindo a parte onde disparei a revelação no evento errado e quebrei tudo, e a decisão de redimensionamento que fez tudo parecer intencional em vez de acidental. No final você será capaz de construir o mesmo efeito, direcionar o Fable para que não afogue seu design em gradientes, e transformar o resultado no tipo de post que as pessoas realmente compartilham.
Deixe-me começar com a única coisa que a maioria das pessoas erra antes mesmo de abrir uma ferramenta de IA.
Por Que Eu Construo Com Claude Fable 5 no Terminal, Não no Navegador
Este é o erro que vejo constantemente: pessoas tentam construir sites interativos dentro de um chat de IA no navegador, batem numa parede no momento em que querem duas imagens sobrepostas com posicionamento preciso ao pixel, e concluem "IA não consegue fazer design real." A ferramenta era o problema, não a IA.
O Fable 5 é genuinamente capaz disso. Foi lançado em 9 de junho de 2026 como o modelo mais poderoso publicamente disponível da Anthropic — uma janela de contexto de 1M de tokens por padrão, até 128k tokens de saída por requisição, e 80,3% no SWE-Bench Pro com o segundo melhor modelo ficando 11 pontos atrás (segundo a análise de benchmarks da TrueFoundry). Esse raciocínio de longo alcance é exatamente o que uma página interativa multicamada precisa. Ele tem que manter todo o DOM, o CSS, a matemática do scroll e a intenção de design na cabeça ao mesmo tempo e mantê-los consistentes ao longo de cinco seções.
Mas precisa de um espaço de trabalho real para fazer isso. Eu o executo através do Claude Code no terminal, apontado para uma pasta de projeto real, para que possa ler arquivos, escrever arquivos, ver a página completa que está construindo e iterar em um servidor de desenvolvimento rodando. Um chat de navegador te dá um snippet e esquece que existiu. O terminal dá ao Fable uma memória do projeto — e com uma janela de contexto de 1M tokens, essa memória é toda a base de código, não um resumo que se desvanece.
Há também uma razão de custos para trabalhar assim. O Fable cobra $10 por milhão de tokens de entrada e $50 por milhão de saída — o dobro do Opus 4.8, o modelo mais caro que a Anthropic já lançou. Foi gratuito no Pro e Max de 9 a 22 de junho de 2026, depois passou para créditos de uso nas tarifas da API. Quando cada token de saída custa dinheiro, você não quer regenerar uma página inteira porque o chat perdeu o contexto. Você quer edições cirúrgicas em arquivos que já existem. Aprofundei essa matemática de custos no meu build do Claude Fable AIOS, e a lição se aplica diretamente ao trabalho de design: estruture seu projeto para que o Fable edite, não re-emita.
Então: baixe o Claude Code, crie uma pasta e deixe o Fable trabalhar onde ele realmente pode pensar. Agora a parte divertida — encontrar algo que vale a pena construir.
Roubando do Jeito Certo: Do Pinterest a Uma Imagem Fonte em Modo Escuro
Eu não começo com um prompt vazio. Começo com uma referência, porque "me construa um hero legal" te dá a média de tudo que o Fable já viu, e a média é esquecível.
Pinterest é minha fonte. Busco o mecanismo que quero, não o tema — "scroll reveal landing page," "imagem dividida hover," "hero escuro minimalista" — e salvo tudo onde a interação faz o trabalho. A imagem de rocha e grama era um único pin estático. A interação não estava na imagem de jeito nenhum. Eu estava fazendo engenharia reversa a partir de uma vibe.
Duas coisas importam quando você pega uma referência:
Escureça primeiro. A maioria dos pins é clara. Um fundo de site precisa ser modo escuro — não porque modo escuro é tendência, mas porque fundos escuros escondem as costuras. Quando você sobrepõe duas imagens e revela uma sobre a outra, um fundo preto faz a transição parecer contraste intencional em vez de uma borda de edição visível. Eu instruo o passo de imagem do Fable (ou um modelo de imagem dedicado) para pegar a referência e produzir uma versão mais escura com contraste mais alto: "Converta isso em uma cena de modo escuro atmosférica, fundo quase preto, mantenha a textura da rocha, reduza o brilho geral em cerca de 40%, sem grama adicionada."
Gere duas imagens, não uma. Este é todo o truque, e vale a pena parar aqui.
A Revelação de Imagem em Camadas: Duas Imagens Fingindo Ser Uma
A ilusão são duas imagens empilhadas perfeitamente centralizadas, uma sobre a outra, com a de cima progressivamente recortada conforme você rola. Embaixo está o "depois." Em cima está o "antes."
Para meu build isso significou:
- Base (camada superior): a parede de rocha, nua, escura.
- Revelação (camada inferior): a mesma rocha, agora com grama — mesmo ângulo de câmera, mesma iluminação, mesmo corte.
As duas imagens precisam combinar perfeitamente exceto pela única coisa que muda. É aí que a geração de imagens com IA prova seu valor. Gerei primeiro a rocha nua, depois instruí: "Mesma cena, mesmo ângulo e iluminação, adicione grama exuberante crescendo sobre a superfície da rocha, mantenha o fundo escuro idêntico." Gerar a variação a partir do original — em vez de duas imagens independentes — é o que mantém as bordas alinhadas para que a revelação não pule.
Depois a revelação em si. A maioria dos tutoriais recorre ao GSAP ScrollTrigger, e isso funciona, mas para um único hero deixei o Fable fazer com CSS clip-path simples controlado por scroll — mais leve, sem library e bordas nítidas. A técnica: a imagem de cima começa totalmente visível, e conforme você rola, um clip-path: inset(...) a esconde progressivamente de um lado, expondo a imagem de grama embaixo. Clips vencem masks aqui porque clip paths são vetoriais e produzem bordas nítidas enquanto masks são mais pesadas em memória e computação.
Aqui está o núcleo do que o Fable escreveu, limpo:
.reveal-stack {
position: relative;
display: grid;
place-items: center;
}
/* ambas imagens ocupam a mesma célula do grid, centralizadas */
.reveal-stack img {
grid-area: 1 / 1;
width: 100%;
height: auto;
}
/* a imagem "antes" fica em cima e é recortada ao rolar */
.reveal-stack .top {
z-index: 2;
/* --p é atualizado de 0 a 1 conforme a seção passa pela vista */
clip-path: inset(0 0 calc(var(--p) * 100%) 0);
}
// controla --p a partir da posição de scroll da seção
const stack = document.querySelector('.reveal-stack');
const onScroll = () => {
const rect = stack.getBoundingClientRect();
const progress = 1 - Math.min(Math.max(rect.bottom / window.innerHeight, 0), 1);
stack.style.setProperty('--p', progress.toFixed(3));
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
A imagem de grama é revelada de baixo para cima conforme --p sobe de 0 para 1. Troque a direção do inset e você revela de outra borda. Esse é todo o mecanismo. Todo o resto é decoração.
E aqui está o erro que prometi. Minha primeira versão disparou a revelação no hover do mouse, porque isso é o que o pin original do Pinterest implicava. Pareceu barato — você tinha que encontrar a imagem e mover seu cursor até ela, e no celular não fazia absolutamente nada. Mudar para scroll transformou toda a sensação. Agora a revelação faz parte da narrativa da página: você rola, o mundo muda, você continua rolando. Scroll é uma história que você já está lendo. Hover é um brinquedo que você precisa descobrir. Para storytelling visual, scroll vence sempre — e funciona em celulares, onde a maioria do seu tráfego vive.
Eu me apoio constantemente na interação controlada por scroll; detalhei a versão mais profunda no meu artigo sobre construir animações 3D de scroll estilo Apple com IA, e o mesmo instinto se aplica aqui — vincule o efeito à única entrada que cada visitante já usa.
Mais um movimento antes de deixarmos a revelação: pedi ao Fable para reduzir ambas as imagens em cerca de 20%. Em largura total o efeito era avassalador e a costura era mais fácil de notar. Reduzido 20%, emoldurado por espaço negativo escuro, de repente pareceu composto — como uma peça de galeria em vez de um protetor de tela. Esse único redimensionamento é a diferença entre "truque legal" e "isso parece projetado."
Se você quer ajuda para incorporar essas interações de revelação em uma página real de cliente em vez de uma demo, este é exatamente o tipo de build que aceito através do meu perfil no Fiverr — fico feliz em fazer com você ou por você.
Agora a revelação vive no vácuo. Precisa de um hero ao redor.
Construindo o Hero: Como Eu Instruo o Fable a Parar de Adicionar Lixo
Deixado aos seus próprios instintos, o Fable te dará um hero "completo": um fundo de vídeo em loop, três cards de funcionalidades, uma malha de gradiente, um depoimento e um footer. Tudo isso compete com sua única boa ideia. A habilidade não é fazer a IA adicionar — é fazê-la omitir.
Meu prompt de hero é principalmente uma lista de subtrações:
"Construa uma seção hero. Fundo preto puro, sem gradientes, sem mesh, sem fundo de vídeo. Mantenha apenas: uma barra de navegação superior minimalista e uma linha de texto hero grande animado. Remova quaisquer seções decorativas, cards ou imagens que normalmente adicionaria. Texto animado deve reagir ao scroll — derivar para baixo e esmaecer levemente quando o usuário rolar além. Preserve a família tipográfica, peso e tamanho que usou; quero consistência em cada seção que construirmos depois."
Essa última frase faz trabalho real. A razão pela qual páginas construídas com IA parecem desconexas é que cada seção gerada reinventa a tipografia. Ao dizer ao Fable antecipadamente para travar os estilos e tamanhos de fonte e mantê-los, cada seção posterior herda o mesmo sistema tipográfico. Consistência é o que se lê como "um designer fez isso."
O texto reativo ao scroll é o segundo pequeno hit de dopamina na página. A revelação cuida do meio; o texto hero cuida do topo. Conforme você rola, o título deriva para baixo e escurece, entregando o palco ao efeito de rocha e grama abaixo. Dois momentos vinculados ao scroll, empilhados, para que o primeiro gesto que um visitante faz seja recompensado.
Verificação rápida antes de continuar: fundo preto, uma nav, uma linha de texto animado, nada mais. Se seu hero tem mais que isso, você tem mais que um hero — você tem bagunça vestida de hero. Escrevi um artigo completo sobre construir seções hero animadas com IA se você quer o menu mais amplo de efeitos, mas para este build, contenção é toda a estética.
Agora estender — sem deixar o Fable esquecer o que acabou de construir.
Estendendo a Página: 3–4 Seções Que Não Brigam Entre Si
Um hero sozinho não é uma landing page. Peço ao Fable três a quatro seções a mais, e o prompt é projetado para preservar tudo que já funciona:
"Adicione 3–4 seções abaixo do hero. Restrições, inegociáveis: mesmo fundo preto puro, sem gradientes em nenhum lugar, reutilize exatamente a mesma família tipográfica e tamanhos do hero, mantenha layouts simples e orientados a texto — sem bagunça de fotos de banco. Cada seção deve parecer a mesma página, não um template novo. Limpo, moderno, muito espaço negativo."
A frase "inegociável" importa mais do que deveria. O Fable, em um contexto longo, trata restrições explícitas como guardrails que defende ativamente — e com uma janela de contexto de 1M tokens pode manter cada seção anterior à vista enquanto escreve a próxima, então "reutilize exatamente a mesma fonte" não é uma esperança, é algo que pode verificar contra os arquivos já no disco. Orientação vaga ("faça consistente") desvia. Regras duras ("sem gradientes em nenhum lugar") se mantêm.
O que você obtém é uma página onde o olho nunca tropeça. Mesmo preto. Mesma tipografia. Mesmo espaçamento generoso. O efeito de revelação é o único momento de movimento, e porque tudo ao redor está calmo, esse momento acerta mais forte. Contenção não é a ausência de design — é a moldura que torna sua única escolha ousada legível.
Porque o Fable escreveu isso como HTML e CSS reais e semânticos em uma pasta de projeto — não como um template travado — é responsivo por padrão. Flexbox, grid, unidades relativas e algumas media queries que o modelo adiciona sem ser pedido. Testei o meu em 375px e 1440px; a revelação escalou, o texto refluiu, nada quebrou. Essa é a recompensa silenciosa de construir em código em vez de um construtor drag-and-drop: responsividade móvel vem de graça porque o layout nunca foi fixado em pixels absolutos. Para a camada de analytics e experimentação sobre páginas como esta, documentei meu pipeline completo de landing page com MCPs separadamente — é lá que vive o A/B testing.
A página está pronta. Agora vem a parte que decide se alguém a verá.
Transformando o Build em um Post Que as Pessoas Realmente Compartilham
Uma página bonita que ninguém vê é uma entrada de diário. O efeito de revelação é construído para ser compartilhado — é um antes/depois em um único gesto — então a distribuição deve ser tão deliberada quanto o build.
Aqui está o que aprendi postando esses no X:
Poste o vídeo, nunca a captura de tela. Todo o valor está no movimento. Uma imagem estática de uma rocha escura não é nada; o clipe de três segundos de grama varrendo a rocha para cima enquanto você rola é todo o gancho. Vídeo e os primeiros três segundos de movimento são exatamente o que o algoritmo do X de 2026 recompensa, e a plataforma agora pondera respostas aproximadamente 150x mais que curtidas — então um clipe que faz pessoas perguntarem "como você fez isso" supera qualquer coisa passiva.
Lidere com a velocidade e o gesto. Meus posts que conectam abrem com a versão sem fricção da história: "Construí este scroll reveal com Claude Fable 5 em um prompt 👇" depois o clipe. Pessoas respondem para perguntar como. Essas respostas alimentam o algoritmo, que mostra para mais pessoas, que respondem para perguntar como. O mecanismo é o marketing.
Personalize cada asset para que o seu seja único. Isso importa mais do que parece. Se todos postam a mesma rocha, o efeito deixa de ser novidade até terça-feira. Mude as imagens. Mude o título. Construa a revelação ao redor do seu próprio tema — um produto, um rosto, um horizonte urbano. Unicidade é o que mantém algo compartilhável depois que a tendência atinge o pico, porque a técnica é a tendência, e um tema fresco faz parecer novo de novo.
Nomeie a ferramenta. "Claude Fable 5" é um termo de busca ativo agora — foi coberto em todos os lugares, de TechCrunch ao próprio blog Azure da Microsoft desde o lançamento de 9 de junho. Colocar o nome da ferramenta em tendência no post alcança uma audiência que já está buscando. Você não está lutando por atenção; está parado onde a atenção já está direcionada.
Marque as pessoas que se interessariam. Marque o criador cujo pin você fez engenharia reversa. Marque contas de ferramentas. Não para mendigar — para convidar. Metade das minhas melhores colaborações começou como uma resposta em um post onde marquei alguém e a pessoa respondeu. Exemplos de prompts e assets reutilizáveis circulam em comunidades como motionsites.ai; o ponto é entrar na conversa, não transmitir para ela.
O padrão mais profundo: construa algo cujo valor é visível em três segundos de movimento, e deixe o formato fazer a venda. Mantenho um workflow completo para isso — transformar builds em distribuição — nas minhas notas sobre automatizar SEO e mídias sociais com Claude.
O Que Esta Abordagem Erra (A Parte Honesta)
Duas coisas, porque fingir o contrário faria deste mais um post de hype.
A revelação é um truque, e truques têm prazo de validade. A primeira vez que alguém vê grama crescer sobre uma rocha ao rolar, é magia. A quadragésima vez, é clichê. Não estou construindo meus produtos reais ao redor disso — estou usando como gancho para atrair pessoas para trabalho que tem substância por baixo. Se a revelação é a única ideia na sua página, você construiu um truque de mágica, não um produto. Use como porta, não como sala.
"Um prompt" é majoritariamente uma história de marketing. Digo "um prompt" nos meus posts porque é impactante e aproximadamente verdadeiro para o primeiro rascunho. A realidade é que a primeira geração me levou a 70%, e os 30% restantes — corrigir o trigger de hover vs scroll, o redimensionamento de 20%, matar os gradientes que o Fable continuava infiltrando — levou uma dúzia de iterações. Qualquer pessoa que prometa output impecável em uma única tentativa está te vendendo a demo, não o workflow. A iteração é onde vive o gosto, e gosto ainda é algo que você traz. IA são mãos rápidas; o olho é você. Desenvolvi esse argumento extensamente em por que design web com IA ainda precisa de supervisão humana.
Há também o muro de custos. Construa isso durante uma janela gratuita e parece sem fricção; construa com créditos a $50 por milhão de tokens de saída e cada regeneração tem uma etiqueta de preço. O que nos leva de volta a trabalhar no terminal com edições cirúrgicas em vez de re-emissões completas de página — não uma preferência de estilo, uma preferência de orçamento.
Então o que você deve esperar realisticamente se tentar isso?
O Que Esperar Realisticamente Quando Construir Isso
Um site interativo de página única, limpo, responsivo, com uma revelação por scroll funcionando, um hero animado e três ou quatro seções consistentes — em bem menos de uma hora depois que tiver feito uma vez. A primeira vez vai levar mais tempo; você está aprendendo onde o Fable entrega demais e onde precisa de restrições duras.
A página será responsiva sem você escrever media queries à mão, porque é código real, não um template fixo. Vai parecer que um pequeno estúdio fez, porque contenção mais um movimento ousado se lê como intenção.
O que não vou prometer: números virais. Tive clipes de revelação que foram bem e tive outros que caíram no mesmo semana com o mesmo efeito. Viralidade não é um output garantido de um bom build — é uma probabilidade que você aumenta postando vídeo, liderando com o gesto, nomeando a ferramenta e personalizando o asset para que o seu se destaque. Faça essas quatro coisas consistentemente e a matemática eventualmente joga a seu favor. Faça uma vez e torça, e está jogando dados.
Meça a coisa certa, também. Não curtidas — respostas e salvamentos. No algoritmo do X de 2026 esses são os sinais que realmente acumulam, e uma resposta "como você construiu isso" vale cem curtidas silenciosas. Se as pessoas estão perguntando como, você construiu a coisa certa.
Perguntas Frequentes
Como criar um efeito de revelação de imagem ao rolar?
Empilhe duas imagens correspondentes perfeitamente centralizadas, depois recorte a de cima com CSS clip-path: inset() controlado pela posição do scroll. A imagem de baixo é revelada conforme a de cima é progressivamente escondida. Clip paths dão bordas nítidas e não precisam de uma library de animação JS para um único hero — veja a seção de imagens em camadas acima para o CSS exato e o handler de scroll.
O Claude Fable 5 consegue construir um site interativo completo?
Sim. O Claude Fable 5 constrói sites interativos responsivos completos — hero, efeitos de scroll, múltiplas seções — especialmente quando executado através do Claude Code em um terminal onde pode ler e editar arquivos de projeto. Seu contexto de 1M tokens permite manter toda a página consistente. Trabalhar em uma pasta real supera um chat de navegador que esquece contexto entre mensagens.
Um site construído com Claude Fable 5 é responsivo em dispositivos móveis?
Geralmente sim, porque o Fable escreve HTML e CSS semântico real com flexbox, grid e unidades relativas em vez de templates de pixels fixos. A responsividade vem do método de layout, não de ajuste manual. Testei o meu em 375px e 1440px e tanto a revelação quanto a tipografia escalaram perfeitamente. Sempre verifique em um dispositivo real.
Por que usar scroll em vez de hover para o efeito de revelação?
Triggers de scroll funcionam em dispositivos móveis, onde hover não faz nada, e integram o efeito na narrativa natural da página. Hover requer que o visitante descubra e mire no elemento; scroll recompensa um gesto que cada visitante já faz. Para storytelling visual e tráfego de celulares, scroll é o trigger mais forte.
O que faz um site construído com IA viralizar no X?
Poste um vídeo da interação (não uma captura de tela), lidere com o gesto nos primeiros três segundos, nomeie a ferramenta em tendência e personalize seus assets para que o efeito pareça fresco. O algoritmo do X de 2026 pondera respostas muito acima de curtidas, então um clipe que faz pessoas perguntarem "como" supera uma imagem passiva sempre.
A Verdadeira Lição
Aquele pin do Pinterest era uma imagem estática de uma rocha. Sem código, sem interação, sem instruções — apenas uma vibe que tive que fazer engenharia reversa. Quarenta minutos e uma tarde teimosa depois, era uma página ao vivo, com scroll, responsiva, para a qual estranhos estavam respondendo.
A lição não é "IA constrói sites agora." É que a lacuna entre ver algo e lançá-lo colapsou para cerca de uma hora — se você traz o gosto. O Fable fornece infinitas mãos rápidas. O olho que diz "reduza 20%," "mate o gradiente," "dispare no scroll, não no hover" — esse ainda é você. Esse ainda é todo o trabalho.
Então aqui está sua próxima hora: encontre um pin onde a interação fala por si só. Abra o Claude Code. Reconstrua. Depois poste o clipe e observe quem pergunta como. A primeira pessoa que responder "espera, como você fez isso" é o momento em que você vai entender o que acabou de mudar.
Vamos Trabalhar Juntos
Quer construir sistemas de IA, automatizar fluxos de trabalho ou escalar sua infraestrutura tecnológica? Adoraria ajudar.
- Fiverr (builds personalizados e integrações): fiverr.com/s/EgxYmWD
- Portfólio: mejba.me
- Ramlit Limited (soluções empresariais): ramlit.com
- ColorPark (design e branding): colorpark.io
- xCyberSecurity (serviços de segurança): xcybersecurity.io
