up-homesco-hub/openclaw-storytelling-landing-page-skill

Landing Page de Narrativa (Storytelling Landing Page)

Use este skill para criar landing pages imersivas com arco narrativo cinematográfico, assets gerados por imagem e um prompt de construção pronto para desenvolvedores. O projeto de referência é o Last Rites: zoom/pull-back fixado (pinned), objeto alma que se transforma de chama a água, slider de memória arrastável, partículas, cursor personalizado, botões magnéticos, tela de carregamento, sobreposições PNG transparentes com mix-blend-mode: screen e um CTA em duas etapas após uma pausa obrigatória de 2 segundos.

A saída padrão é um planejamento mais o prompt de construção. Quando o usuário pedir para realmente construir, crie o projeto Vite, gere ou coloque assets de substituição, use o Open Design como um sidecar de design/protótipo quando útil, execute localmente e verifique rolando a página funcional de ponta a ponta. Uma construção não está completa até que a página tenha sido testada visualmente em um navegador e julgada como suficientemente cinematográfica/legal para a marca.

Roteamento com Open Design

Use o fluxo normal do skill para narrativa, planejamento de cenas, especificações de movimento, prompts e prompts de construção. Traga o Open Design quando a produção visual for o gargalo:

• Se o GPT Image 2 estiver indisponível, falhar, exceder o tempo ou produzir imagens fracas/não cinematográficas.
• Se o usuário pedir para criar o site, prototipá-lo, pré-visualizá-lo ou "fazer coisas" em vez de apenas escrever um prompt.
• Se uma direção visual rápida for necessária antes de codificar manualmente a construção final em Vite/GSAP.

Comando:

/Users/yashovrattiwari/.openclaw/tools/openclaw-design make "<solicitação completa da landing page de narrativa, incluindo respostas do intake, emoção, tipo de scroll, objeto alma, sobreposições de elementos e restrições de assets>"

Trate a saída do Open Design como material de origem: reuse a direção visual mais forte, layout, ritmo de copy e arquivos gerados, depois preserve os mecanismos de história GSAP/ScrollTrigger exigidos por este skill e a lista de verificação de verificação. Não pare porque o GPT Image 2 não está gerando imagens.

Fase 1 - Entrevista de Intake

Faça estas 5 perguntas uma de cada vez. Não as agrupe, a menos que o usuário já tenha fornecido detalhes suficientes.

1. Marca e propósito: Para que é este site - e quem chega até ele?
2. Registro emocional: ofereça luto/paz, esperança/renascimento, admiração/awe, ambição/impulso, calma/confiança, urgência/emoção, ou algo diferente.
3. Tipo de scroll: A revelação por scroll, B scroll + capítulos com arrasto, C imersão profunda, ou D zoom em cena única.
4. Objeto alma: um SVG central simples que se transforma em 2-3 estágios, com paradas de gradiente nomeadas que o GSAP pode animar.
5. Sobreposições de elementos PNG: 2-4 elementos físicos isolados em preto puro, compostos em código com mix-blend-mode: screen.

Exemplos: chama para gota para ondulação, semente para muda para copa, estrela para constelação para poeira estelar, agulha da bússola para norte verdadeiro, círculo de respiração para onda para água parada, faísca para rastro para explosão de luz.

Fase 2 - Especificação do Objeto Alma

Após o intake, defina o objeto alma com SVG inline, id="soulGrad", id="soul-stop-1/2/3", três estágios de scroll, cores de brilho, cores de gradiente, valores de morph CSS, offset de lerp do mouse, deriva senoidal do scroll, opacidade da seção e uma pulsação de respiração GSAP.

Inclua exemplos de animação de cor de parada GSAP:

gsap.to('#soul-stop-1', { attr: { 'stop-color': '#...' }, duration: 1.4 });

Fase 3 - Plano de Cenas

Defina 6-8 cenas com base no tipo de scroll. Use:

# | ID | Nome | Batida narrativa | Mecanismo GSAP | Modo de partícula | Estágio do alma | Imagem de fundo

Tipos de cena obrigatórios:

• Hero: animação de carregamento, texto escalonado, zoom de fundo sutil ao scroll
• Zoom: GSAP pin:true + scrub:true, escala de fundo 1 -> 1.55
• Transição: animação de cor de fundo, troca de modo de partícula
• Smooothy arrasto: apenas para Tipo B/C, cartões horizontais de memória/produto/linha do tempo
• Capítulo/Rio: parallax de 4 camadas, texto sobe de y:50
• Vastidão: escala de pull-back 1.38 -> 1.0, linha serifada única centralizada
• CTA: pausa fixada de 2 segundos, depois entrada escalonada

A pausa fixada de 2 segundos antes do CTA é obrigatória. Nunca a pule.

Fase 4 - Camada de Interação

Sempre inclua cursor lerp personalizado, botões magnéticos, tela de carregamento, pontos de progresso à direita, barra de progresso do scroll no topo, partículas em canvas (quentes/frias/transição), pulsação de respiração do objeto alma, morph por scroll, parallax do mouse, CTA em duas etapas, escape suave secundário e 4 chips de confiança.

Adicione para Tipo B: slider arrastável estilo Smooothy e ícones SVG de anel animados nos cartões. Adicione para Tipo C: módulos estilo StringTune: StringProgress, StringParallax, StringSplit, StringCursor3, StringMagnetic. Adicione para Tipo D: apenas pin zoom GSAP; sem slider ou módulos StringTune.

Fase 5 - Prompts GPT Image 2

Produza dois conjuntos de prompts de imagem.

Conjunto A - JPGs de Fundo

Um prompt JPG 16:9 por cena.

• Termine cada prompt exatamente com: Sem pessoas. Sem texto. Sem logotipos. Proporção 16:9. Fotorrealista. Grade de cores cinematográfica.
• Ordem de geração: Hero, CTA, Zoom, Capítulo, Vastidão, Transição por último.
• Após a imagem 1, preceda com: Mesma grade de cores cinematográfica, estilo fotográfico, faixa tonal da imagem hero -
• Diga ao usuário para enviar as imagens geradas anteriormente como referências para continuidade visual.
• Para a imagem de transição, envie tanto a Hero quanto a CTA como referências e peça para mesclar ambas as paletas.
• Padrão de nome de arquivo: scene-01-hero.jpg, scene-02-zoom.jpg, etc.

Conjunto B - Elementos PNG Transparentes

Um prompt PNG quadrado por tipo de elemento escolhido no intake.

• Fundo preto puro #000000 em todos os lugares fora do elemento é obrigatório.
• O elemento preenche 50-70% do quadro.
• Padrão de nome de arquivo: element-[nome].png.
• Termine cada prompt exatamente com: Preto puro (#000000) em todos os outros lugares. Formato quadrado 1:1. Resolução ultra-alta. Macro fotorrealista.
• No prompt de construção, cada imagem de elemento deve usar .element-overlay { mix-blend-mode: screen; }.

Fórmula do prompt:

Único [ELEMENTO] isolado em fundo preto puro. [Descrição de textura, luz, detalhe]. [Escala - preenche X% do quadro]. Sem cenário de fundo, sem contexto, sem sombra se estendendo muito além do objeto. Preto puro (#000000) em todos os outros lugares. Formato quadrado 1:1. Resolução ultra-alta. Macro fotorrealista.

Fallback de Geração de Imagem

Se o GPT Image 2 estiver indisponível, falhar ou produzir assets fracos:

1. Tente a ferramenta de geração de imagem configurada, se disponível.
2. Se a geração de imagem ainda estiver bloqueada ou os resultados não forem bons o suficiente, use o Open Design: /Users/yashovrattiwari/.openclaw/tools/openclaw-design make "<solicitação completa da landing page de narrativa>"
3. Se o Open Design retornar um projeto útil, inspecione seus arquivos gerados e portabilize a direção mais forte para a construção Vite/GSAP, em vez de substituir cegamente o sistema de movimento deste skill.
4. Se nenhuma imagem puder ser produzida, construa com gradientes CSS cinematográficos, partículas em canvas, sobreposições SVG e arquivos placeholder com nomes claros, para que o site permaneça funcional e os prompts de asset possam ser usados posteriormente.

Não pare apenas porque a geração de imagem falhou. Preserve a história, o sistema de movimento e a página executável final.

Fase 6 - Prompt de Construção Codex

Produza um prompt completo, pronto para colar, para Codex, Cursor ou outro agente de codificação. Ele deve incluir visão geral do projeto, pilha tecnológica, árvore de arquivos completa, package.json completo, vite.config.ts completo, index.html completo, src/styles.css completo, src/main.ts completo, src/soul.ts, src/particles.ts, src/cursor.ts, src/scroll.ts, src/loader.ts e src/slider.ts apenas quando for B/C.

Detalhes de construção obrigatórios: Vite 5 + TypeScript, GSAP 3 + ScrollTrigger, SVG alma inline com soul-stop-1/2/3, seções data-particle, tags de elemento PNG com class="element-overlay" e data-float-speed, nav, cursor, canvas, loader, pontos de progresso, variáveis de paleta quente/fria, ponto de interrupção responsivo em 768px, instruções de configuração de imagem para public/images/, comportamento de fallback se as imagens estiverem faltando, e npm install mais npm run dev.

O prompt de construção também deve incluir uma seção de teste final obrigatória para o agente de codificação: execute o aplicativo, abra a URL local, role de cima a baixo em larguras de desktop e mobile, interaja com o slider se presente, verifique o zoom fixado/pausa do CTA/morph do alma/partículas/botões/foco/sem sobreposição, capture screenshots hero/meio/CTA e revise até que a página pareça visualmente forte em vez de meramente funcional.

Configuração necessária do ScrollTrigger:

gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.normalizeScroll(true);
ScrollTrigger.config({ fastScrollEnd: true });
window.addEventListener('load', () => ScrollTrigger.refresh());

Tipografia: serifa distinta mais sem serifa limpa. Nunca use como padrão Inter, Roboto, Arial ou tipografia apenas do sistema para a estética final.

Formato de Saída

Sempre entregue nesta ordem após o intake estar completo:

## Resumo do Intake
## Especificação do Objeto Alma
## Plano de Cenas
## Camada de Interação
## GPT Image 2 - Prompts de Fundo (Conjunto A)
## GPT Image 2 - Prompts de Elementos PNG (Conjunto B)
## Ordem de Geração
## Prompt de Construção Codex
## Plano de Verificação Final

Lista de Verificação de Qualidade

Antes de entregar um plano ou prompt de construção, verifique se o intake está completo, o objeto alma tem 3 estágios e paradas de gradiente nomeadas, o plano de cenas tem 6-8 cenas, o Tipo B/C inclui o slider, o Tipo C inclui módulos estilo StringTune, o CTA tem a pausa fixada de 2 segundos, ambos os conjuntos de prompts de imagem estão presentes, as sobreposições PNG usam mix-blend-mode: screen, todos os arquivos estão totalmente especificados para um aplicativo Vite executável, as variáveis de paleta quente/fria existem, as regras mobile começam em 768px, os nomes de arquivo correspondem em todos os lugares, as instruções de execução incluem npm install mais npm run dev, e o prompt de construção exige explicitamente o teste final de scroll no navegador com screenshots e uma aprovação de qualidade visual.

Verificação Final da Construção

Quando você construir uma página com este skill, não a considere concluída até que a tenha testado:

1. Execute install/build ou servidor de desenvolvimento de acordo com o projeto.
2. Abra a página local em um navegador.
3. Role de cima para baixo em desktop e mobile, de preferência usando automação de navegador mais inspeção visual manual quando disponível.
4. Confirme se o hero carrega, o zoom fixado funciona, a transição muda o modo de partícula, o slider funciona se presente, o objeto alma permanece visível e se transforma, a pausa do CTA acontece, os botões/estados de foco funcionam e o texto não se sobrepõe.
5. Capture screenshots no hero, meio da história e CTA para o viewport principal de desktop e pelo menos um viewport mobile, quando prático.
6. Faça um julgamento: parece cinematográfico/legal o suficiente para a marca solicitada? Se não, ajuste o tempo do movimento, contraste, espaçamento, tratamento de imagem, copy ou direção de assets e reteste o scroll completo.
7. Relate a evidência: URL local, tamanhos de viewport, screenshots/estados observados, correções feitas após a primeira passagem visual e quaisquer bloqueios restantes.

A verificação deve ser baseada em evidências. Não entregue apenas um log de construção bem-sucedido; a resposta final deve dizer o que foi observado ao rolar a página funcional.