✦ Felipe Tâmbara · @felipetambara.ia

Central de Material

Todo material que eu entrego nos meus conteúdos, num lugar só. Escolhe o tema e resgata o passo a passo.

Style Lab: o Claude Code montando o estilo visual dos seus vídeos
Resgatar material →

Style Lab: o Claude Code montando o estilo visual dos seus vídeos

O template que transforma o Claude Code num laboratório de estilo: ele gera rodadas de títulos, legendas, transições e sons, você marca Keep, Maybe ou Drop, e o que você aprova vira regra escrita pra todo vídeo.

Filee: o conversor grátis que abre no seu cursor e converte mais de 180 formatos offline
Resgatar material →

Filee: o conversor grátis que abre no seu cursor e converte mais de 180 formatos offline

Como baixar e instalar o Filee no Windows, no Mac ou no Linux, usar o anel de formatos que abre no cursor e os comandos prontos pra converter em lote, tudo sem subir arquivo pra internet.

Hairline: a skill que faz o Claude Code desenhar ilustrações animadas no estilo da Linear
Resgatar material →

Hairline: a skill que faz o Claude Code desenhar ilustrações animadas no estilo da Linear

Como instalar a skill Hairline, criar a sua primeira ilustração animada com uma frase, as 10 regras que deixam ela com cara de estúdio e como colocar no seu site.

A skill que faz o Claude criar o seu logo do zero, com favicon e ícone de app
Resgatar material →

A skill que faz o Claude criar o seu logo do zero, com favicon e ícone de app

Instalação em dois minutos, o briefing certo pra colar e o que esperar em cada etapa da Logo Design Skill, a skill gratuita que transforma o Claude num designer de identidade.

Hypit: o repositório que clona o formato de qualquer vídeo viral com o Claude Code
Resgatar material →

Hypit: o repositório que clona o formato de qualquer vídeo viral com o Claude Code

Como instalar o Hypit, pedir pro seu agente transformar um reel que viralizou num template 1:1 e renderizar a sua versão, com os prompts prontos.

Tudo que você salvou vira um setup só no Claude
Resgatar material →

Tudo que você salvou vira um setup só no Claude

Seus reels salvos e todo material que chegou na sua DM juntos num projeto do Claude, comparados entre si e empilhados em skills que rodam o trabalho inteiro com um pedido só.

Obscura: o navegador anti-detecção que liga no Claude Code com 1 comando
Resgatar material →

Obscura: o navegador anti-detecção que liga no Claude Code com 1 comando

O setup completo do Obscura, o navegador headless open source feito pra agentes de IA, e o comando exato pra ligar ele no Claude Code com o modo stealth.

A skill do Claude que acha a skill certa pra qualquer coisa
Resgatar material →

A skill do Claude que acha a skill certa pra qualquer coisa

O passo a passo pra instalar a find-skills no Claude Code: você pede em português o que quer fazer, ele busca no diretório aberto de skills, filtra as confiáveis e instala pra você.

Como criar o seu influencer de IA na Higgsfield
Resgatar material →

Como criar o seu influencer de IA na Higgsfield

O passo a passo pra criar um personagem de IA do zero na Higgsfield, dar vida a ele com o Genjutsu e postar na Launchpoint, a plataforma que paga por visualização.

Como resetar seus créditos da Higgsfield pelo ChatGPT
Resgatar material →

Como resetar seus créditos da Higgsfield pelo ChatGPT

O comando exato que eu mandei no ChatGPT pra Higgsfield devolver créditos pra minha conta, e o passo a passo pra você fazer o mesmo enquanto a campanha tá no ar.

O Claude editando seu vídeo sozinho, do bruto aos efeitos sonoros
Resgatar material →

O Claude editando seu vídeo sozinho, do bruto aos efeitos sonoros

Como instalar o HyperFrames da HeyGen no Claude Code e treinar um editor de IA que pega seu vídeo bruto e devolve cortado, com motion, legenda, efeito sonoro e música, em 8 etapas.

Os 250 dólares grátis de Claude Code (resgate até 7 de outubro)
Resgatar material →

Os 250 dólares grátis de Claude Code (resgate até 7 de outubro)

Quem assina o Claude Pro ou Max ganha crédito extra pra usar o Claude Code na nuvem. O passo a passo pra resgatar, configurar o GitHub e gastar tudo antes de vencer.

Claude Code rodando com 600+ modelos de graça
Resgatar material →

Claude Code rodando com 600+ modelos de graça

O FreeLLMAPI junta o plano gratuito de 34 provedores de IA num endpoint só e liga no seu Claude Code. Quando um modelo bate o limite, ele troca sozinho pro próximo.

Conecta o Claude Code no DaVinci Resolve e edita conversando
Resgatar material →

Conecta o Claude Code no DaVinci Resolve e edita conversando

Um servidor MCP da comunidade que dá ao Claude Code (ou ao Codex) acesso à timeline, à cor, às legendas e ao render do DaVinci Resolve. Funciona até na versão gratuita.

Claudex: o Claude Code e o Codex revisando o trabalho um do outro
Resgatar material →

Claudex: o Claude Code e o Codex revisando o trabalho um do outro

A skill que coloca o Claude Code e o Codex no mesmo projeto: quem você abriu planeja e constrói, o outro revisa o plano antes de uma linha de código e inspeciona o resultado no fim. Como instalar, o que você precisa ter e os comandos pra rodar.

Os 4 prompts pra lançar seu app com IA
Resgatar material →

Os 4 prompts pra lançar seu app com IA

Vídeo de demonstração, anúncio, fotos da landing page e vídeo viral: os 4 prompts que eu uso na Higgsfield (Seedance, Kling, Soul e Genjutsu) pra lançar um app.

Como pegar 100% de cashback na API da Higgsfield
Resgatar material →

Como pegar 100% de cashback na API da Higgsfield

O passo a passo pra criar sua conta na API da Higgsfield, gerar vídeo e imagem com Seedance, Kling, Soul e Genjutsu, e receber de volta 100% do que gastar enquanto a campanha durar.

/brag: o comando que transforma o seu projeto num vídeo de lançamento
Resgatar material →

/brag: o comando que transforma o seu projeto num vídeo de lançamento

Como instalar o /brag no Claude Code e, com um comando dentro do projeto, sair com um vídeo curto de lançamento (15 a 25 segundos) com música, motion e o texto de divulgação pronto pra postar.

Agent Reach: o Claude Code lendo YouTube, Twitter, Reddit, LinkedIn e Instagram de graça
Resgatar material →

Agent Reach: o Claude Code lendo YouTube, Twitter, Reddit, LinkedIn e Instagram de graça

Como instalar o Agent Reach (open source, MIT) no seu Claude Code com um único prompt, o que funciona de cara, o que precisa do seu login pra destravar e os prompts pra você já sair pesquisando.

12 skills que escrevem, revisam e publicam o seu LinkedIn pelo Claude Code
Resgatar material →

12 skills que escrevem, revisam e publicam o seu LinkedIn pelo Claude Code

O passo a passo pra instalar o pacote open source linkedin-skills no Claude Code (ou no Claude Desktop, ou no Codex) e a ordem certa de uso pra quem nunca postou: entrevista, perfil, calendário, post, revisão e publicação com a sua aprovação.

Os 4 plugins pra instalar antes de fazer vibe coding no Claude Code
Resgatar material →

Os 4 plugins pra instalar antes de fazer vibe coding no Claude Code

Um que faz o Claude escrever menos código, um que segura a sessão quando a cota acaba, um que transforma o projeto num mapa que ele consulta em vez de sair lendo tudo e um pacote de 24 skills de engenheiro sênior. Com o comando de instalação de cada um, na ordem certa.

6 trocas de URL que fazem qualquer repositório do GitHub se explicar sozinho
Resgatar material →

6 trocas de URL que fazem qualquer repositório do GitHub se explicar sozinho

Você troca uma palavra no endereço do repositório e ele vira diagrama, resumo pra colar na IA, explicação em linguagem clara ou editor no navegador. Sem instalar nada, sem criar conta.

Os 6 documentos pra criar antes de fazer vibe coding de qualquer app
Resgatar material →

Os 6 documentos pra criar antes de fazer vibe coding de qualquer app

Os modelos prontos de PRD, TRD, fluxo do app, briefing de UI/UX, schema do backend e plano de implementação. Você preenche, entrega os 6 pro Claude ou pro ChatGPT e ele constrói em cima de um plano, não de chute.

O sistema de WhatsApp que marca consulta, lembra o paciente e puxa o retorno
Resgatar material →

O sistema de WhatsApp que marca consulta, lembra o paciente e puxa o retorno

Os 4 prompts que eu usei na Emergent pra construir um sistema de clínica: o paciente marca conversando no WhatsApp, recebe lembrete 1 hora antes e, 7 dias depois, o próprio sistema chama pra marcar o retorno.

prompts.chat: a maior biblioteca de prompts do mundo dentro do Claude Code
Resgatar material →

prompts.chat: a maior biblioteca de prompts do mundo dentro do Claude Code

Como plugar o prompts.chat (biblioteca de prompts grátis e open source) no seu Claude Code com o plugin oficial, os comandos pra buscar prompt e skill sem sair do terminal e 3 prompts prontos pra ele escolher sozinho o melhor prompt pra cada tarefa.

Conecta o Claude Code em qualquer programa, mesmo sem MCP oficial
Resgatar material →

Conecta o Claude Code em qualquer programa, mesmo sem MCP oficial

O CLI-Anything faz o seu agente construir uma linha de comando para qualquer software que você usa, incluindo os que estão instalados na sua máquina agora. Ele lê o código, escreve os próprios comandos e instala tudo sozinho.

Pare de pagar duas vezes por cada PDF que você joga no Claude
Resgatar material →

Pare de pagar duas vezes por cada PDF que você joga no Claude

Todo PDF que entra no Claude vira imagem de página e texto extraído, e você é cobrado pelos dois. O MarkItDown, da Microsoft e de graça, converte o arquivo em markdown limpo antes: some a imagem, sobra a palavra.

A skill grátis que escreve o prompt certo antes do Claude queimar crédito
Resgatar material →

A skill grátis que escreve o prompt certo antes do Claude queimar crédito

Você não bate o limite do Claude por volume, bate por retentativa. O Prompt Master pega a sua frase bagunçada e devolve o prompt pronto: qual é a saída, em quais arquivos ele pode mexer e quando parar.

O ManyChat open source que manda a DM sozinho
Resgatar material →

O ManyChat open source que manda a DM sozinho

Alguém comenta a sua palavra-chave no reel e recebe o link na DM um segundo depois. Mesma função que o ManyChat cobra de 15 a 60 dólares por mês, rodando na sua própria infraestrutura por alguns dólares de hospedagem.

O ranking das 10 IAs, posição por posição
Resgatar material →

O ranking das 10 IAs, posição por posição

A lista fechada do vídeo: as 12 ferramentas que entraram no ranking, o que cada uma resolve de verdade, em que momento ela entra, quanto custa e o link. Mais a ordem certa de montar a sua stack sem assinar tudo.

O efeito 3D com scroll, sem escrever código
Resgatar material →

O efeito 3D com scroll, sem escrever código

O passo a passo do vídeo: foto do produto, vista explodida no Google Flow, clipe de 8 segundos, 240 quadros no Ezgif e o Claude devolvendo o site pronto. Com os três prompts completos, o que trocar em cada um e o que nunca tirar.

Os 50 projetos pra construir no Claude
Resgatar material →

Os 50 projetos pra construir no Claude

A lista completa dos 50 projetos, dividida por área, com o prompt que faz o Claude te entrevistar antes de construir e o critério pra escolher o certo pra sua rotina.

Os 5 plugins pro Claude Code parar de entregar tela feia
Resgatar material →

Os 5 plugins pro Claude Code parar de entregar tela feia

O guia de instalação dos 5 plugins do vídeo (mais o 21st MCP de bônus): o que cada um faz, o comando exato pra instalar no Claude Code, conferido no repositório oficial, e a ordem em que eles trabalham juntos num projeto de front.

As 6 da semana em IA (e por que a China é o assunto)
Resgatar material →

As 6 da semana em IA (e por que a China é o assunto)

As 6 coisas que saíram essa semana e valem seu tempo, na mesma ordem do vídeo: 3 modelos abertos que rodam na sua máquina, um time de agentes com computador próprio e 2 skills open source pra usar no Claude Code hoje. Com o link de cada uma.

A lista de leads que o Claude monta sozinho
Resgatar material →

A lista de leads que o Claude monta sozinho

O scraper open source que deixa o Claude varrer a web, puxar o contato público das empresas do seu nicho e devolver tudo numa planilha limpa. Roda na sua máquina, com modelo local, sem assinatura de scraper.

✦ Felipe Tâmbara

Os 5 plugins que o Claude Code deveria já vir instalado

Resgatar material →

Os 5 plugins que o Claude Code deveria já vir instalado

Limite de uso que não trava, memória entre sessões, metade do gasto de token, setup auditado pela própria Anthropic e uma skill que melhora as suas outras skills sozinha. Com o comando de instalação de cada um, na ordem.

A alternativa grátis ao ElevenLabs que clona sua voz com 3 segundos
Resgatar material →

A alternativa grátis ao ElevenLabs que clona sua voz com 3 segundos

Clone de voz, dublagem de vídeo, ditado e audiolivro em 646 idiomas, rodando na sua máquina, sem conta, sem API key e sem mensalidade. Com servidor MCP pra plugar no Claude Code.

Os 5 cursos com certificado grátis
Resgatar material →

Os 5 cursos com certificado grátis

Os links diretos dos 5 cursos do carrossel, quanto tempo cada um leva de verdade, e como sair com o certificado sem pagar nos dois que parecem pagos.

A skill que tira a cara de IA de qualquer texto
Resgatar material →

A skill que tira a cara de IA de qualquer texto

33 padrões de escrita de IA catalogados pela Wikipedia, virados numa skill que funciona em qualquer agente. Como instalar, como calibrar com a sua própria voz, e a lista completa do que ela caça.

Um modelo de 2,78 trilhões de parâmetros rodando num CPU com 8 GB de RAM
Resgatar material →

Um modelo de 2,78 trilhões de parâmetros rodando num CPU com 8 GB de RAM

O motor de inferência em C que roda o Kimi K3 sem GPU, sem framework e sem CUDA, num binário de 176 KB. Aqui está como ele faz isso, o teste que você roda em um minuto sem baixar nada, e o caminho completo se quiser ir até o fim.

O modelo de 550B da NVIDIA rodando de graça no seu terminal
Resgatar material →

O modelo de 550B da NVIDIA rodando de graça no seu terminal

Como conectar a API hospedada da NVIDIA ao OpenCode e usar o Nemotron 3 Ultra como agente de código, sem GPU nenhuma. Passo a passo, o arquivo de configuração completo, e o que muda quando o endpoint gratuito acabar.

As 15 ferramentas de IA, categoria por categoria
Resgatar material →

As 15 ferramentas de IA, categoria por categoria

A lista fechada do vídeo: 15 ferramentas em 12 categorias, o que cada uma resolve de verdade, em que momento ela entra e o link de todas. Com a fonte original aberta no fim, incluindo o PDF e as 47 do site.

As 15 IAs de graça do Google
Resgatar material →

As 15 IAs de graça do Google

A lista completa com o link de todas as 15, o que cada uma faz de verdade, quais valem o seu tempo e por qual começar dependendo do que você faz.

O estúdio de vídeo e imagem com IA que roda no seu PC
Resgatar material →

O estúdio de vídeo e imagem com IA que roda no seu PC

Open Generative AI: um repositório open source que junta mais de 400 modelos de imagem, vídeo, áudio e lip sync numa interface só. Instala em um clique e tem um caminho que roda sem chave de API nenhuma.

As aulas de IA que o Google liberou de graça
Resgatar material →

As aulas de IA que o Google liberou de graça

O mapa das 17 aulas do AI Boost Bites: o que cada uma ensina, por onde começar e os prompts pra aplicar no mesmo dia. Direto do Google Skills, com badge oficial no fim de cada uma.

As regras de design da Apple viraram uma skill do Claude Code
Resgatar material →

As regras de design da Apple viraram uma skill do Claude Code

A skill apple-design destila as talks de design da Apple e traduz pra web. Aqui está como instalar, o prompt que audita o site que você já tem, e os números concretos que ela carrega dentro.

As 25 trocas: ferramenta paga que tem versão grátis
Resgatar material →

As 25 trocas: ferramenta paga que tem versão grátis

A lista completa do carrossel, com o link direto de cada alternativa gratuita e o que ela entrega de verdade. Mais o teste de uma semana que decide o que você cancela e o que continua valendo a pena pagar.

Os servidores MCP que valem instalar (e o que evitar)
Resgatar material →

Os servidores MCP que valem instalar (e o que evitar)

MCP é o USB-C da IA: um padrão só que pluga o Claude em qualquer ferramenta. Separei os que valem instalar primeiro, por perfil, com o comando de instalação de cada um.

O Prompt da Verdade
Resgatar material →

O Prompt da Verdade

Uma instrução que você cola uma vez nas configurações do Claude, ChatGPT ou Gemini e força a IA a separar fato de chute, e avisar quando não sabe.

As 5 skills de animação pro Claude Code
Resgatar material →

As 5 skills de animação pro Claude Code

Os repositórios que dão pro Claude Code o contexto certo de cena 3D, timeline, motion design e acabamento visual. Links diretos, é só clonar e usar.

O repositório com 100+ agentes de IA prontos pra copiar
Resgatar material →

O repositório com 100+ agentes de IA prontos pra copiar

128 mil estrelas, licença Apache 2.0 e mais de 100 agentes, skills e apps de RAG testados de ponta a ponta. Você clona, roda em 4 comandos e pode usar comercialmente, sem construir nada do zero.

O router grátis que acaba com o rate limit do seu Claude Code
Resgatar material →

O router grátis que acaba com o rate limit do seu Claude Code

Um gateway open source que conecta Claude Code, Cursor, Codex e Cline a mais de 60 provedores de IA com fallback automático: sua assinatura acaba, ele troca sozinho pro plano barato ou de graça e você nunca para de codar.

O plugin que audita seu Claude Code e recomenda o setup certo
Resgatar material →

O plugin que audita seu Claude Code e recomenda o setup certo

Plugin oficial da Anthropic que lê o seu projeto e devolve as automações (hooks, skills, subagents, MCPs) que fazem sentido pro SEU código. Só análise, não mexe em nada.

As 3 camadas do CLAUDE.md
Resgatar material →

As 3 camadas do CLAUDE.md

Computer, Project e Folder: os arquivos que fazem o Claude parar de esquecer como você trabalha, sessão após sessão. Com os 3 templates reais pra copiar e o prompt que preenche sozinho.

O loop que economiza o Fable 5
Resgatar material →

O loop que economiza o Fable 5

Como usar o modelo mais forte do Claude (Fable 5 ou Opus 4.8) só pra planejar e revisar, enquanto um subagente barato faz o trabalho pesado, sem estourar o limite de uso.

O playbook de segurança com IA
Resgatar material →

O playbook de segurança com IA

3 prompts prontos pra vetar skills antes de instalar, travar suas chaves de API e criar guardrails antes de conectar qualquer ferramenta na sua IA.

5 usos insanos do Fable 5
Resgatar material →

5 usos insanos do Fable 5

Os 5 usos do Fable 5 (o modelo mais forte do Claude) que eu já testei essa semana, com os prompts prontos pra copiar e colar.

As 5 skills que transformam o Claude Code numa máquina
Resgatar material →

As 5 skills que transformam o Claude Code numa máquina

O Claude Code tem mais de 100 mil skills, mas são essas 5 que fazem a diferença de verdade. Com o repositório oficial e o comando de instalação de cada uma.

O estúdio de voz com IA que roda de graça na sua máquina
Resgatar material →

O estúdio de voz com IA que roda de graça na sua máquina

Clona qualquer voz, gera fala em 23 idiomas e dita em qualquer app, tudo rodando local e open source. Substitui o ElevenLabs e o Whisperflow sem mensalidade.

As 42 skills que consertam o design do Claude
Resgatar material →

As 42 skills que consertam o design do Claude

Por padrão o Claude entrega design genérico. Pluga as skills certas e ele vira uma máquina de UI impecável. Aqui estão as 42, em 6 camadas, com o comando de instalação de cada uma.

A planta do seu segundo cérebro
Resgatar material →

A planta do seu segundo cérebro

Junta a inteligência do Claude com o vault conectado do Obsidian: pensa mais fundo, conecta melhor e executa mais rápido.

✕ Fechar

✦ Felipe Tâmbara · IA na prática

O efeito 3D da Apple no seu site, sem escrever uma linha de código

1

O que você vai construir

Uma pilha de fotos e a sua barra de rolagem decidindo qual delas aparece

A ideia: Não é 3D de verdade e não é vídeo. É uma sequência de imagens paradas desenhada dentro de um <canvas>, e a posição do scroll decide qual imagem aparece. Rolou pra baixo, o produto se desmonta peça por peça. Rolou pra cima, ele se monta de volta. É exatamente a técnica das páginas de produto da Apple, e é por isso que dá a sensação de que a pessoa está controlando a animação com o dedo.
Por que isso importa: Vídeo roda sozinho e a pessoa assiste. Sequência de quadros roda no ritmo dela. Uma coisa é decoração, a outra é interação. O visitante para de rolar rápido porque descobre que o scroll dele está movendo alguma coisa.
  1. AGoogle Imagens ou o próprio Flow: a imagem inicial do produto, montado.
  2. BGoogle Flow (labs.google/fx/tools/flow): gera a vista explodida a partir dessa imagem e transforma ela num clipe de 8 segundos.
  3. CEzgif (ezgif.com/video-to-jpg): fatia o clipe em 240 imagens numeradas e entrega em ZIP.
  4. DClaude: recebe o ZIP e devolve um index.html único, sem biblioteca externa.
Custo: Zero. As quatro ferramentas têm camada gratuita. O que gasta é tentativa: você vai gerar a vista explodida mais de uma vez até ela ficar alinhada.
2

A imagem base

Tudo que vem depois é refém dessa primeira imagem

Rota A, produto que existe: Não gere a foto inicial. Procure uma foto real. No Google Imagens, busque [seu produto] side view ou [seu produto] product photo white background. No vídeo a busca foi f1 car side view e a escolhida foi uma foto oficial de 2880 x 1565 pixels, o carro de perfil num fundo cinza liso.
  1. AFundo liso, de cor única, sem textura e sem cenário.
  2. BProduto inteiro, montado, nada cortado pela borda.
  3. CResolução alta: procure algo acima de 2000px de largura.
  4. DSem texto, sem marca d'água, sem mão, sem gente.
  5. EFolga em volta: o produto explodido ocupa mais espaço que o montado.
Rota B, produto que ainda não existe: Se o produto é seu, é um conceito ou não tem foto boa em lugar nenhum, gere a imagem inicial no próprio Flow com o prompt abaixo. O resto do passo a passo é idêntico: essa imagem gerada passa a ser a sua referência.
Prompt 0 · imagem inicial (só na rota B)
High-end studio product photograph of [SEU PRODUTO], fully assembled and intact, floating dead center against a seamless matte light-grey studio background.
Straight-on side view, perfectly level camera, eye-level, no perspective tilt.
Soft even studio lighting, one subtle soft shadow directly beneath the product.
Photorealistic, ultra sharp, high detail.
Keep the product small enough in frame that there is generous empty space on every side.
No text, no watermark, no hands, no props, no brand logos, no reflections on the floor.
Landscape 16:9.
Salve essa imagem no computador. Ela é a referência de tudo que vem depois. Se você trocar de imagem no meio do caminho, recomece do passo 3.
3

A vista explodida no Flow

O produto aberto em peças, sem sair do centro do quadro

Anexe a imagem antes de mandar o prompt. Isso não é detalhe, é o passo inteiro. É o anexo que faz a peça explodida continuar sendo o mesmo produto, com a mesma cor, a mesma luz e o mesmo fundo. Sem ele, o modelo desenha outro objeto e a animação vira um borrão. Abra o labs.google/fx/tools/flow, crie um projeto novo, anexe a imagem e mande:
Prompt 1 · vista explodida
Photorealistic straight-on side exploded view of [SEU PRODUTO] - [CORES E ACABAMENTO] - suspended perfectly centered in a seamless [COR DO FUNDO] studio environment identical to the reference image.

The entire product is exploded symmetrically outward along a vertical axis, with every major component hovering at a precisely calculated distance from the central chassis spine. The outer body panels, the internal structure, the fixings and the accessory parts are separated into clean, evenly spaced layers, each one floating parallel to the others, in the exact orientation it would have when assembled. Nothing overlaps, nothing is cropped, nothing touches the edges of the frame.

Same camera as the reference image: same angle, same focal length, same distance, same eye level, no perspective tilt. Same soft even studio lighting, same shadow direction, same color temperature. The central body stays at the exact same size and position as in the reference image, with the parts spreading outward around it. Generous empty space on every side.

Photorealistic, ultra sharp, high detail, technical teardown render.
No text, no labels, no arrows, no watermark, no hands, no props, no reflections on the floor.
Landscape 16:9.
Sobre esse prompt: A primeira metade é transcrição literal da tela do vídeo. A caixa de texto de lá tem barra de rolagem própria e o autor nunca rola até o fim, então a segunda metade eu reconstruí a partir das travas que aparecem no que dá pra ler. Ela cumpre o mesmo papel: separar as peças em camadas e proibir o modelo de mexer na câmera.
Produto[SEU PRODUTO] vira o nome exato do seu produto, com modelo e material se você tiver.
Cores[CORES E ACABAMENTO] vira a cor real do que aparece na sua imagem.
Fundo[COR DO FUNDO] tem que ser a cor do fundo da SUA imagem, não a do vídeo.
Ângulostraight-on side se sua imagem é de perfil. Se for de cima, troque por top-down aerial.
MarcaSe seu produto tem logo visível, cite. Se não tem, apague a menção.
O que nunca mexer: identical to the reference image, suspended perfectly centered, exploded symmetrically outward along a vertical axis e at a precisely calculated distance from the central chassis spine. São esses quatro pedaços que travam o produto no centro do quadro. Sem eles a IA move o objeto e a animação desliza em vez de abrir.
Gere quantas vezes precisar. O critério de aprovação não é beleza, é alinhamento: o corpo do produto tem que estar do mesmo tamanho e no mesmo lugar das duas imagens. Uma explodida linda mas deslocada estraga a animação inteira.
4

O clipe de 8 segundos

A imagem explodida vira movimento, com a câmera parada

Caminho curto (o do vídeo): Ainda no Flow, passe o mouse na imagem explodida, clique nos três pontinhos (More) e escolha Animate, que é o primeiro item do menu. Configurações usadas no vídeo: modelo Omni Flash, duração 8 segundos, proporção 16:9.
Prompt 2 · movimento
A high-end 3D product animation of [SEU PRODUTO] in [CORES E ACABAMENTO], filmed from a locked-off camera.

The components separate apart from the assembled body in one smooth continuous motion, each part moving outward along its own axis until it reaches the exploded arrangement, and then holding still.

Absolutely no camera movement: no zoom, no pan, no tilt, no orbit, no parallax, no handheld shake. The product stays dead centered and at exactly the same scale for the entire clip. Constant linear speed, no easing, no cuts, no flicker, no lighting change, no background change.

Seamless [COR DO FUNDO] studio background, same lighting as the source image. Photorealistic. 8 seconds. Landscape 16:9.
Sobre esse prompt: No vídeo ele só aparece no histórico lateral do Flow, em fonte minúscula e cortado em filmed from a locked to.... O começo é transcrição; o resto eu reconstruí seguindo o que a frase cortada já anunciava: câmera travada e descrição do produto repetida.
Câmera travada não é gosto, é requisito. Se a câmera se mexer, cada quadro sai com um enquadramento diferente. Aí, quando a pessoa rolar a página, a cena inteira balança junto. Veio com movimento? Gere de novo, não tente consertar depois.
Caminho alternativo (start + end frame): Se o seu Flow tiver o modo frames to video, dá pra controlar melhor: suba a imagem montada no campo Start, a explodida no campo End, e no texto descreva só o movimento, nunca o produto. Costuma sair mais estável que o Animate, porque os dois extremos estão travados.
Prompt 2b · movimento (modo start + end frame)
Smooth continuous motion of the internal components separating apart from the assembled product.
Locked-off camera: absolutely no camera movement, no zoom, no pan, no rotation, no parallax.
The product stays centered and at the same scale the entire time.
Constant linear speed, no easing, no cuts, no flicker.
Baixe o mp4. O arquivo sai com o nome do projeto, tipo Audi_F1_car_exploded_diagram_202607070753.mp4. Guarde a duração real dele, você vai precisar no próximo passo.
5

Fatiar o clipe em imagens

8 segundos a 30 quadros por segundo dão 240 imagens numeradas

Ezgif · Video to JPGgrátisezgif.com/video-to-jpg ↗
  1. AChoose file, escolha o mp4 do passo 4 e clique em Upload video!
  2. BStart time: 0. End time: a duração real do seu clipe (no vídeo, 8).
  3. CSize: Original (up to 1920px).
  4. DFrame rate (FPS): 30. É o que dá o scroll liso; abaixo disso a animação fica seca.
  5. EMarque Don't display the images, I just want a ZIP file e clique em Convert to JPG!
  6. FClique no botão vermelho Download frames as ZIP.
Não descompacte, não renomeie, não reordene. O ZIP inteiro vai pro próximo passo do jeito que baixou. A ordem numérica dos arquivos é a linha do tempo da animação: renomeou, embaralhou.
Quadros8 segundos a 30 fps = 240 imagens. Se a página ficar pesada, refaça com 20 fps.
LimiteUpload máximo de 200MB. Passou disso, corte a duração do clipe antes de subir.
PrazoO Ezgif apaga os arquivos 1 hora depois. Baixe o ZIP na hora.
TempoEnd time diferente da duração real faz o Ezgif cortar ou repetir quadro.
6

O Claude monta o site

Um arquivo só, sem biblioteca externa, pronto pra abrir no navegador

Anexe o ZIP inteiro no Claude e cole o prompt. No vídeo o arquivo aparece como ezgif-30be732ef5299838-jpg.zip. A resposta é um único `index.html`: salve na mesma pasta em que as imagens estão e abra no navegador.
Prompt 3 · o site inteiro
Act as a frontend web developer. I need you to write a single index.html file containing HTML, CSS, and vanilla JavaScript to create an Apple-style scroll-triggered image sequence for a website. Do not use any external libraries. My assets: I have attached the zip file containing the images.

Technical Requirements:

1. Layout & Styling: Use a [COR DO FUNDO] background. Create a scrollable container that is 800vh tall. Inside that, use a position: sticky container to hold a <canvas> element.

2. Canvas Scaling: The canvas must fill the entire screen perfectly without letterboxing. Use CSS width: 100vw; height: 100vh; and object-fit: cover;. Do not use JavaScript to calculate the canvas size.

3. Scroll Logic: Write a scroll listener that maps the scroll percentage precisely to my frames. Use requestAnimationFrame and context.drawImage.

4. Optimization: This is critical. Do not load all images at once. Preload only the first 20 frames and start rendering as soon as frame 1 is ready. Then use requestIdleCallback to load the remaining frames in the background in chunks of 10 to prevent blocking the main thread. Store every loaded frame in an array indexed by frame number, and if the frame for the current scroll position has not loaded yet, draw the closest frame already loaded instead of leaving the canvas blank.

5. UI Elements & Content: generate the text copy based on Apple product pages and match the vibe of the website. Two or three short blocks of text that fade in and fade out at fixed scroll positions on top of the canvas, each one with a one-word label and a single short line under it. Not too much text, something premium, not too wordy.

Output the complete, production-ready code in a single block.
Sobre esse prompt: Os itens 1, 2 e 3 são transcrição palavra por palavra da tela. Nos itens 4 e 5 o vídeo corta a borda direita da caixa de texto e as últimas linhas somem, então eu completei os dois com a regra que eles já estavam anunciando: carregar os primeiros quadros na hora e o resto em segundo plano de 10 em 10, e gerar pouca copy, no estilo das páginas de produto da Apple.
O que nunca tirar: Do not use any external libraries, position: sticky, object-fit: cover, Do not use JavaScript to calculate the canvas size, requestAnimationFrame, requestIdleCallback e in chunks of 10. Esses sete pedaços separam um arquivo que abre liso de um que trava. Sem o carregamento em blocos, o navegador tenta baixar as 240 fotos de uma vez e a página fica parada.
Altura800vh é o padrão. Mais alto deixa a animação mais lenta e controlada, mais baixo deixa mais rápida.
Fundo[COR DO FUNDO] tem que ser a cor do fundo das suas imagens, senão aparece uma borda em volta.
CopyDescreva o SEU produto no item 5, senão o texto vem genérico.
Se você usa Claude Code, Cursor ou Antigravity: Aí vale a versão com GSAP. Descompacte os quadros numa pasta com nome limpo (tipo frames-scroll), abra a pasta no editor e mande o prompt abaixo. Sai mais robusto no celular, com o custo de depender de uma biblioteca externa.
Prompt 3b · versão GSAP + ScrollTrigger
Usando essa pasta de quadros, monte uma sequencia de imagem ligada ao scroll dentro de um canvas HTML.

Pre-carregue os primeiros quadros antes de comecar e depois mapeie a posicao do scroll para o indice do quadro, de forma que a animacao avance quadro a quadro conforme o usuario rola a pagina. E a mesma tecnica que a Apple usa nas paginas de produto.

Use GSAP com ScrollTrigger. Fixe (pin) o canvas enquanto a sequencia roda, com scrub suave para nao engasgar. Ordene os arquivos numericamente, nunca em ordem alfabetica. Mantenha a imagem nitida e centralizada tambem no celular, e adicione um estado de carregamento elegante enquanto os quadros ainda estao baixando.

Me entregue um unico arquivo autocontido que eu possa jogar direto no meu site.
Como o resultado se parece: A página abre com o produto montado ocupando a tela inteira. Conforme a pessoa rola, ele se desmonta peça por peça, sempre no centro, e frases curtas entram por cima. No vídeo saíram assim: FORM / "Shaped by hand. Refined by machine.", DETAIL / "Nothing here is accidental.", "Made to be held. Built to last." Duas ou três palavras por bloco. É o not too wordy fazendo efeito.
7

Quando dá errado

Os nove problemas que aparecem, e onde cada um nasceu

OutroA peça explodida virou outro produto: a imagem de referência não foi anexada no Flow. Anexe antes de mandar o prompt e mantenha identical to the reference image.
DeslizaO produto salta ou desliza no meio: o prompt perdeu a âncora de centro. Reponha suspended perfectly centered e at a precisely calculated distance from the central chassis spine.
BalançaA cena inteira treme ao rolar: o clipe veio com movimento de câmera. Gere de novo exigindo câmera travada, sem zoom e sem giro.
PiscaAs bordas piscam ou o fundo chia: fundo com gradiente, textura ou granulado. Use fundo liso, de uma cor só.
BordaBorda branca em volta da animação: o prompt do site pediu fundo branco e suas imagens têm fundo cinza. Iguale as duas cores.
EngasgaEngasga no primeiro scroll: o carregamento em blocos foi removido. Reponha requestIdleCallback e in chunks of 10.
LentoA página demora demais pra abrir: quadros demais ou grandes demais. Refaça o Ezgif com menos FPS ou tamanho menor.
OrdemOs quadros embaralharam: arquivos renomeados, ou o código ordenou por nome em vez de número. Mande o ZIP como veio e exija ordenação numérica.
SumiuO ZIP sumiu do Ezgif: o site apaga tudo 1 hora depois do upload. Baixe na mesma hora.
8

Onde isso vira dinheiro

O mesmo efeito, cobrado como página e não como enfeite

É isso que separa uma página comum de uma que parece de marca grande. Serve pra landing page de produto físico, página de lançamento, seção de "como funciona" de um app, apresentação de hardware e capa de proposta. Você entrega o tipo de experiência das páginas da Apple usando quatro ferramentas gratuitas e nenhuma linha de código escrita à mão.
  1. AFaça primeiro com um produto que você admira, só pra ter o arquivo rodando na sua máquina.
  2. BDepois refaça com o produto de um cliente e mande o link pra ele sem cobrar nada.
  3. CA conversa muda: você para de vender site e passa a vender a página que ninguém no nicho dele tem.
Isso aqui é uma técnica. O que eu mostro por dentro é o resto: como essa página entra num funil que vende, como o produto certo é escolhido antes de qualquer prompt, e como você monta isso pra cliente sem virar refém de ferramenta. A técnica é a parte fácil.

✦ Material parado não muda nada

Pegou o passo a passo. E agora?

Material salvo que você nunca executa não muda nada. O que falta não é conteúdo, é gente construindo do seu lado. Na Core, a comunidade de builders, você aplica isso junto com quem tá fazendo o mesmo, com as aulas e o suporte pra destravar de verdade.

Conhecer comunidade →