Site Interativo Com Claude Fable 5: Revelação de Imagem

Site Interativo Com Claude Fable 5: Revelação de Imagem

O efeito que me parou no Pinterest era estupidamente simples. Uma foto escura de uma parede de rocha. Você faz scroll e a grama cresce sobre a rocha — exceto que ela não cresce, ela é 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 o CSS eu mesmo ou tocar em uma ferramenta de design. Quarenta minutos depois eu tinha uma página que parecia ter sido feita 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 ativei 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 ele não sufoque 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: as pessoas tentam construir sites interativos dentro de um chat de IA no navegador, batem numa parede no momento 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.

Fable 5 é genuinamente capaz disso. Ele 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 próximo melhor modelo atrás por 11 pontos (segundo a análise de benchmarks da TrueFoundry). Esse raciocínio de longo horizonte é exatamente o que uma página interativa multicamada precisa. Ele precisa manter todo o DOM, o CSS, a matemática do scroll e a intenção de design na cabeça simultaneamente e mantê-los consistentes ao longo de cinco seções.

Mas ele 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 ele possa ler arquivos, escrever arquivos, ver a página completa que está construindo e iterar em um servidor de desenvolvimento em execução. Um chat no navegador te entrega um trecho e esquece que ele existiu. O terminal dá ao Fable uma memória do projeto — e com uma janela de contexto de 1M, essa memória é todo o código-fonte, não um resumo que se desvanece.

Há também uma razão de custo para trabalhar assim. 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 contexto. Você quer edições cirúrgicas em arquivos que já existem. Aprofundei essa matemática de custos na minha construção 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 valha a pena construir.

Roubando do Jeito Certo: Do Pinterest a uma Imagem Fonte em Modo Escuro

Eu não começo com um prompt em branco. Começo com uma referência, porque "me construa um hero legal" te dá a mediana de tudo que o Fable já viu, e a mediana é esquecível.

Pinterest é minha fonte. Procuro pela mecânica que quero, não pelo tema — "scroll reveal landing page," "split image hover," "minimal dark hero" — e salvo qualquer coisa onde a interação fale por si mesma. A imagem de rocha e grama era um único pin estático. A interação não estava na imagem. 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 é brilhante. Um fundo de site precisa estar em modo escuro — não porque modo escuro esteja na moda, 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. Peço ao Fable na etapa de imagem (ou a um modelo de imagem dedicado) que pegue a referência e produza uma versão mais escura e de maior contraste: "Converta isso para uma cena de modo escuro atmosférica, fundo quase preto, mantenha a textura da rocha, reduza o brilho geral em aproximadamente 40%, sem grama adicionada."

Gere duas imagens, não uma. Este é todo o truque, e vale a pena ir devagar.

A Revelação de Imagem em Camadas: Duas Fotos 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ê faz scroll. Por baixo está o "depois." Por cima está o "antes."

Para minha construção 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 enquadramento.

As duas imagens precisam coincidir perfeitamente exceto pela única coisa que muda. É aí que a geração de imagens por IA se justifica. Gerei a rocha nua primeiro, depois pedi: "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 funciona, mas para um único hero deixei o Fable fazer com CSS puro clip-path acionado por scroll — mais leve, sem biblioteca, e bordas nítidas. A técnica: a imagem superior começa totalmente visível, e conforme você faz scroll, um clip-path: inset(...) progressivamente a esconde de um lado, expondo a imagem da grama por baixo. Recortes vencem máscaras aqui porque clip paths são vetoriais e produzem bordas nítidas enquanto máscaras 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 as imagens ocupam a mesma célula do grid, centralizadas */
.reveal-stack img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
}

/* a imagem "antes" fica por cima e é recortada ao fazer scroll */
.reveal-stack .top {
  z-index: 2;
  /* --p é atualizado de 0 a 1 enquanto a seção passa pela viewport */
  clip-path: inset(0 0 calc(var(--p) * 100%) 0);
}

// acionar --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 da grama é revelada de baixo para cima conforme --p sobe de 0 a 1. Troque a direção do inset e você revela de uma borda diferente. Esse é todo o mecanismo. Todo o resto é decoração.

E aqui está o erro que prometi. Minha primeira versão ativava a revelação no hover do mouse, porque era o que o pin original do Pinterest implicava. Parecia barato — você tinha que encontrar a imagem e passar o cursor sobre ela, e no celular não fazia nada. Mudar para scroll mudou toda a sensação. Agora a revelação faz parte da narrativa da página: você faz scroll, o mundo muda, você continua fazendo scroll. O scroll é uma história que você já está lendo. O hover é um brinquedo que você tem que descobrir. Para narrativa visual, o scroll ganha sempre — e funciona em celulares, onde vive a maior parte do seu tráfego.

Eu me apoio constantemente em interação acionada por scroll; detalhei a versão mais profunda no meu artigo sobre construção de animações 3D de scroll estilo Apple com IA, e o mesmo instinto se aplica aqui — vincule o efeito à única entrada que todo visitante já usa.

Mais um movimento antes de deixarmos a revelação: pedi ao Fable para reduzir ambas as imagens em aproximadamente 20%. Em sangria total o efeito era esmagador e a costura era mais fácil de notar. Reduzido 20%, emoldurado por espaço negativo escuro, de repente parecia composto — como uma peça de galeria em vez de um protetor de tela. Esse único redimensionamento é a diferença entre "truque interessante" e "isso parece projetado."

Se você quer ajuda construindo essas interações de revelação em uma página real para clientes em vez de uma demo, este é exatamente o tipo de construção que aceito pelo meu perfil no Fiverr — feliz em fazer com você ou para você.

Agora a revelação vive num vácuo. Ela precisa de um hero ao redor.

Construindo o Hero: Como Peço ao Fable Para Parar de Adicionar Lixo

Deixado aos seus próprios instintos, o Fable vai te dar um hero "completo": um fundo de vídeo em loop, três cards de features, um gradiente mesh, um depoimento e um rodapé. Tudo compete com sua única boa ideia. A habilidade não é fazer a IA adicionar — é fazer ela se conter.

Meu prompt para o 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 e animado. Remova quaisquer seções decorativas, cards ou imagens que você normalmente adicionaria. O texto animado deve reagir ao scroll — descer e esmaecer levemente conforme o usuário rola. Preserve a família de fontes, o peso e o tamanho que você usou; quero que seja consistente em cada seção que construirmos depois."

Essa última frase faz trabalho real. A razão pela qual páginas construídas por IA parecem desarticuladas é que cada seção gerada reinventa a tipografia. Ao dizer ao Fable desde o início para travar os estilos e tamanhos de fonte e levá-los adiante, 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 golpe de dopamina na página. A revelação cuida do meio; o texto do hero cuida do topo. Conforme você faz scroll, o título desce e escurece, cedendo o palco ao efeito de rocha e grama abaixo. Dois momentos vinculados ao scroll, empilhados, para que o primeiro gesto de um visitante seja recompensado.

Verificação rápida antes de continuar: fundo preto, uma navegação, 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 inteiro sobre construção de seções hero animadas com IA se você quer o menu mais amplo de efeitos, mas para esta construção, contenção é toda a estética.

Agora estenda — sem deixar o Fable esquecer o que acabou de construir.

Estendendo a Página: 3–4 Seções Que Não Competem Entre Si

Um hero sozinho não é uma landing page. Peço ao Fable três ou 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 lugar nenhum, reutilize exatamente a mesma família de fontes e tamanhos do hero, mantenha os layouts simples e focados em texto — sem fotos de banco de imagens. Cada seção deve parecer a mesma página, não um template novo. Limpo, moderno, muito espaço negativo."

A frase "inegociáveis" importa mais do que deveria. O Fable, com contexto longo, trata restrições explícitas como guarda-corpos que defende ativamente — e com uma janela de 1M de tokens ele pode manter cada seção anterior à vista enquanto escreve a próxima, então "reutilize exatamente a fonte" não é uma esperança, é algo que ele pode verificar contra os arquivos já em disco. Orientação vaga ("faça consistente") desvia. Regras duras ("sem gradientes em lugar nenhum") 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 impacta mais forte. Contenção não é a ausência de design — é a moldura que torna sua única escolha ousada legível.

Como o Fable escreveu isso como HTML semântico real e CSS em uma pasta de projeto — não como um template bloqueado — é responsivo por padrão. Flexbox, grid, unidades relativas e algumas media queries que o modelo adiciona sem ser solicitado. Testei o meu em 375px e 1440px; a revelação escalou, o texto redistribuiu, nada quebrou. Esse é o benefício silencioso de construir em código em vez de um construtor drag-and-drop: responsividade mobile 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 vivem os testes A/B.

A página está pronta. Agora vem a parte que decide se alguém vai vê-la.

Transformando a Construção 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 foi feito para ser compartilhado — é um antes/depois em um único gesto — então a distribuição deve ser tão deliberada quanto a construção.

Isto é o que aprendi postando isso 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 da grama subindo pela rocha enquanto você faz scroll é todo o gancho. Vídeo e os primeiros três segundos de movimento são exatamente o que o algoritmo do X em 2026 recompensa, e a plataforma agora pondera respostas aproximadamente 150 vezes mais que curtidas — então um clipe que faz as pessoas perguntarem "como você fez isso" supera qualquer coisa passiva.

Lidere com a velocidade e o gesto. Meus posts que funcionam abrem com a versão sem fricção da história: "Construí essa revelação por scroll com Claude Fable 5 em um único prompt 👇" depois o clipe. As pessoas respondem para perguntar como. Essas respostas alimentam o algoritmo, que mostra para mais pessoas, que respondem para perguntar como. A mecânica é o marketing.

Personalize cada recurso para que o seu seja único. Isso importa mais do que parece. Se todo mundo posta a mesma rocha, o efeito deixa de ser novidade até terça. 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 seu 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 desde TechCrunch até o próprio blog Azure da Microsoft desde o lançamento de 9 de junho. Colocar o nome da ferramenta em tendência no post conecta com um público que já está procurando por ela. Você não está lutando por atenção; está parado onde a atenção já aponta.

Marque as pessoas que se importariam. Marque o criador cujo pin você desmontou. Marque contas de ferramentas. Não para implorar — para convidar. Metade das minhas melhores colaborações começaram como uma resposta em um post onde marquei alguém e eles responderam. Exemplos de prompts e recursos reutilizáveis circulam por comunidades como motionsites.ai; o ponto é entrar na conversa, não transmitir para ela.

O padrão mais profundo: construa algo cujo valor seja visível em três segundos de movimento, depois deixe o formato fazer a venda. Mantenho todo um fluxo de trabalho para isso — transformar construções em distribuição — nas minhas notas sobre automatizar SEO e redes sociais com Claude.

O Que Esta Abordagem Erra (A Parte Honesta)

Duas coisas, porque fingir o contrário faria disto 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 fazer scroll, é mágica. 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" é principalmente uma história de marketing. Digo "um prompt" nos meus posts porque é contundente e mais ou menos verdade para o primeiro rascunho. A realidade é que a primeira geração me levou a 70%, e os 30% restantes — consertar o gatilho hover-vs-scroll, o redimensionamento de 20%, matar os gradientes que o Fable continuava inserindo — levou uma dúzia de iterações. Qualquer um prometendo saída perfeita na primeira tentativa está te vendendo a demo, não o fluxo de trabalho. A iteração é onde vive o gosto, e o gosto ainda é seu. IA são mãos rápidas; o olho é você. Argumentei isso extensamente em por que design web com IA ainda precisa de supervisão humana.

Há também a barreira de custo. 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 um preço. O que nos leva de volta a trabalhar no terminal com edições cirúrgicas em vez de re-emissões de página inteira — não é uma preferência de estilo, é de orçamento.

Então, o que você deve realmente esperar se tentar isso?

O Que Esperar Realisticamente Quando Você Construir Isso

Um site interativo limpo, responsivo, de página única com uma revelação de scroll funcional, um hero animado e três ou quatro seções consistentes — em bem menos de uma hora depois que você já fez uma vez. A primeira vez vai demorar mais; 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 estúdio pequeno a fez, porque contenção mais um movimento ousado se lê como intenção.

O que não vou prometer: números virais. Já tive clipes de revelação que foram bem e outros que caíram na mesma semana com o mesmo efeito. Viralidade não é uma saída garantida de uma boa construção — é uma probabilidade que você aumenta postando vídeo, liderando com o gesto, nomeando a ferramenta e personalizando o recurso para que o seu se destaque. Faça essas quatro coisas consistentemente e a matemática eventualmente te favorece. Faça uma vez e torça, e você está jogando dados.

Meça a coisa certa também. Não curtidas — respostas e salvamentos. No algoritmo do X de 2026 essas são as sinais que realmente se acumulam, e uma resposta de "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 com scroll?

Empilhe duas imagens correspondentes perfeitamente centralizadas, depois recorte a de cima com CSS clip-path: inset() acionado pela posição do scroll. A imagem inferior é revelada conforme a superior é progressivamente escondida. Clip paths dão bordas nítidas e não precisam de biblioteca de animação JS para um único hero — veja a seção de imagem em camadas acima para o CSS e o handler de scroll exatos.

O Claude Fable 5 pode 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 do projeto. Seu contexto de 1M de tokens permite manter toda a página consistente. Trabalhar em uma pasta real supera um chat no navegador que esquece o contexto entre mensagens.

Um site construído com Claude Fable 5 é responsivo para mobile?

Geralmente sim, porque o Fable escreve HTML semântico real e CSS 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?

Gatilhos de scroll funcionam no mobile, onde hover não faz nada, e incorporam o efeito na narrativa natural da página. O hover exige que o visitante descubra e aponte para o elemento; o scroll recompensa um gesto que todo visitante já faz. Para narrativa visual e tráfego mobile, scroll é o gatilho 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 recursos para que o efeito pareça fresco. O algoritmo do X em 2026 pondera respostas muito acima de curtidas, então um clipe que faz as pessoas perguntarem "como?" supera uma imagem passiva toda vez.

A Verdadeira Conclusã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 desconstruir por engenharia reversa. Quarenta minutos e uma tarde teimosa depois, era uma página ao vivo, com scroll, responsiva, à qual estranhos estavam respondendo.

A lição não é "IA constrói sites agora." É que a lacuna entre ver algo e publicar 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," "acione com scroll, não com hover" — esse ainda é você. Esse ainda é todo o trabalho.

Então aqui está sua próxima hora: encontre um pin onde a interação fale por si mesma. Abra o Claude Code. Reconstrua. Depois poste o clipe e veja 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

Procurando construir sistemas de IA, automatizar fluxos de trabalho ou escalar sua infraestrutura tecnológica? Adoraria ajudar.

• Fiverr (construções personalizadas e integrações): fiverr.com/s/EgxYmWD