Os 2 prompts que usei pra fazer o VYTAL: holofote e animação por scroll

Depois do guia de como fiz o VYTAL, a pergunta que mais recebi foi: "beleza, mas qual foi o prompt de verdade?"

Então aqui estão os dois. Não são prompts genéricos tipo "faz uma animação legal" — são os que eu realmente usei, com cada regra e cada cuidado que evita a IA quebrar no meio do caminho. E pra você não precisar confiar na minha palavra: deixei os links reais das imagens e dos frames do VYTAL logo abaixo de cada um, pra testar o efeito de verdade, com o asset de verdade, antes de usar no seu projeto.

Se você curtir o resultado, vale saber: no Promptfly Premium você tem acesso à comunidade exclusiva, a todos os meus templates completos — é só copiar o código e vender pra empresas — e a prompts como esses, todos com a seção de cuidados já pronta.

🔦 Prompt 1 — Hover com revelação (holofote)

Use quando você tem duas versões da mesma imagem e quer que uma apareça só dentro de um círculo que segue o mouse — como uma lanterna passando por cima da foto.

Quero um efeito de holofote na [SEÇÃO] do meu site.

COMPORTAMENTO:
Tenho duas versões da mesma imagem: [IMAGEM A] fica sempre visível,
e [IMAGEM B] só aparece dentro de um círculo que segue o cursor.
O círculo abre quando o mouse entra na seção e fecha quando sai.

REGRAS:
- O círculo deve ter raio de ~26% da largura do container.
- A borda do círculo precisa ser suave, não recortada: use uma
  máscara radial sólida até 52% do raio e transparente em 78%.
- O movimento NÃO pode grudar no cursor. Use interpolação (lerp)
  em requestAnimationFrame com fator ~0.2 na posição e ~0.12 no raio,
  pra ter peso e arrasto.
- No mobile: o círculo segue o dedo enquanto arrasta, mas NUNCA
  pode bloquear o scroll da página.
- Encerre o loop de animação quando o círculo fechar de vez,
  pra não gastar frame à toa.
- Respeite prefers-reduced-motion.

CUIDADOS:
- A máscara deve morar num elemento SEM transform, senão as
  coordenadas do círculo não batem com a posição real do mouse.
- Se as duas imagens tiverem enquadramentos diferentes, me ajude a
  alinhar com translate/scale, senão a imagem "pula" na troca.
- Se o mouse já estiver sobre a seção quando a página carrega,
  o pointerenter não dispara — trate esse caso.

Onde aplicar: produto/mockup, retrato antes-e-depois, mapa, print de dashboard, foto noite/dia.

Teste você mesmo, com os links reais do VYTAL

Cole o prompt acima na IA e, no lugar de [IMAGEM A] e [IMAGEM B], cole exatamente estes dois links — são as duas fotos reais do hero do VYTAL, a mesma mão com o anel em dois ângulos de luz diferentes:

IMAGEM A (sempre visível):
https://res.cloudinary.com/dwmrunhxa/image/upload/w_2880/e_sharpen:60/f_auto/q_auto/v1785437593/98ef51ed-7e2a-4ace-9e4c-f1aa28578e6f_1_g0ntjt.png

IMAGEM B (revelada dentro do círculo):
https://res.cloudinary.com/dwmrunhxa/image/upload/w_2880/e_sharpen:60/f_auto/q_auto/v1785437851/cdb76d67-dd03-4230-94f1-454395dd5ca6_1_uptxh7.png

Suba um projeto vazio, cole os dois blocos (o prompt + esses links) na IA, rode npm run dev e passe o mouse por cima da imagem. Se dentro do círculo aparecer a segunda foto com a luz diferente, o efeito saiu certo.

🎞️ Prompt 2 — Animação controlada pelo scroll

Use quando quiser que o scroll do usuário seja o próprio timeline da animação — não um gatilho que dispara um vídeo, mas algo que avança e recua junto com a rolagem.

Quero que a [SEÇÃO] seja controlada pela rolagem, usando GSAP + ScrollTrigger.

COMPORTAMENTO:
A seção deve travar na tela (pin) e, conforme eu rolo,
[DESCREVA O QUE MUDA — ex: a imagem abre / os frames avançam /
os textos se revezam / o número sobe].
Quando terminar, a página volta a rolar normal.

REGRAS:
- Use scrub (0.1 a 0.3), nunca duração fixa. O scroll é o timeline,
  não um gatilho de "play".
- Defina o curso do pin em porcentagem ('+=140%', '+=320%'),
  não em pixels — precisa funcionar em qualquer tela.
- Dentro do onUpdate use gsap.quickSetter, não crie tween novo
  a cada frame.
- Para transições entre elementos, use uma curva em S (smoothstep)
  no cruzamento, não interpolação linear — linear dá corte seco.
- Amarre a animação a um dado real quando existir (ex: se mostro
  154 bpm, a pulsação deve durar 60/154s). Isso é o que faz
  parecer intencional e não decorativo.
- Recalcule medidas no ScrollTrigger.refresh(), não só no resize:
  enquanto pinado, os valores lidos estão desatualizados.
- Respeite prefers-reduced-motion mostrando o estado final.

CUIDADOS:
- Se for sequência de frames: pré-carregue TODAS as imagens antes,
  use img.decode() e mostre um % de carregamento. Sem isso engasga.
- Se um elemento precisa ficar parado enquanto outro sobe por cima:
  position: fixed, não sticky — sticky quebra se qualquer ancestral
  tiver overflow (o overflow-x-hidden do body já basta pra quebrar).
  Controle a sobreposição com z-index.
- Não anime a mesma propriedade em dois lugares (ex: y no scroll e
  y no parallax de mouse) — eles brigam pelo transform.

Onde aplicar: revelação de produto, timeline, comparativo, apresentação de features, storytelling de marca.

Teste você mesmo, com o anel do VYTAL girando

Esse é o mesmo prompt que gerou o scrubber do anel do VYTAL — a sequência de 102 frames que gira conforme você rola, com o efeito de "stories" trocando de bloco de texto. Pra testar de verdade, preencha [SEÇÃO] e [DESCREVA O QUE MUDA] assim:

[SEÇÃO] = um painel de tela cheia
[DESCREVA O QUE MUDA] = conforme eu rolo, o scroll percorre uma sequência de
102 frames do anel girando, desenhados frame a frame num <canvas> — não é um
<video> tocando sozinho, é o scroll que escolhe qual frame aparece. Junto,
uma barra dividida em 3 segmentos no topo, cada um preenchendo enquanto um
bloco de texto correspondente aparece, e o texto trocando de bloco conforme
a rolagem avança (efeito "stories").

E os frames reais, já hospedados — os 102 arquivos seguem esse padrão, só trocando o número de 001 até 102:

https://www.promptfly.com.br/templates/vytal-anel-inteligente/ring-frames/ring-001.webp
https://www.promptfly.com.br/templates/vytal-anel-inteligente/ring-frames/ring-002.webp
...
https://www.promptfly.com.br/templates/vytal-anel-inteligente/ring-frames/ring-102.webp

Em código, isso vira um Array.from({ length: 102 }, (_, i) => ...) gerando as 102 URLs — não precisa colar as 102 na mão, só descrever o padrão pra IA (o guia completo do VYTAL tem esse trecho pronto, linha por linha).

O detalhe que muda tudo

Os dois prompts têm uma seção CUIDADOS. É ela que economiza horas.

A IA acerta o efeito na primeira tentativa — mas quebra em coisas que ninguém avisou: sticky que não gruda, imagem que pula, animação que engasga. Quando você entrega o erro antes dele acontecer, ela já nasce certa.

Prompt bom não é o que descreve o que você quer. É o que descreve o que você não quer que dê errado.

Se você quer todos os prompts assim — completos, com a seção de cuidados de cada efeito que eu já construí — mais o código de todos os templates e o grupo pra tirar dúvida direto comigo, é isso que o Premium libera.