Karthic1981/hoodini-ai-agents-skills.gitni-ai-agents-skills

Vídeo → Página de Destino com Rolagem de Quadro

Crie uma página de destino cinematográfica onde o herói é um vídeo que toca na rolagem em vez do tempo — como as páginas de produto da Apple ou a página inicial do GitHub Copilot. Os quadros são extraídos do vídeo de origem e trocados conforme o usuário rola; abaixo do herói fixo, seções de rolagem normal contêm o texto e a chamada para ação.

Quando invocar

• O usuário fornece um vídeo e pede uma página de destino, site com rolagem, herói de rolagem de quadro ou site a partir de um vídeo
• Menções a "rolagem estilo Apple", "página inicial do GitHub Copilot", "avanço na rolagem", "quadro na rolagem"
• Equivalentes em hebraico: "דף נחיתה מסרטון", "אתר עם גלילה", "סרטון בגלילה"

Local de salvamento

Padrão: ~/Documents/yuv-projects/landings/<slug>/ — salve sempre as páginas de destino aqui para que você possa encontrá-las novamente. Crie o diretório pai se estiver faltando.

mkdir -p ~/Documents/yuv-projects/landings
cd ~/Documents/yuv-projects/landings
# Construa <slug>/ aqui.

Caminho final: ~/Documents/yuv-projects/landings/<slug>/. Informe ao usuário onde a página de destino está no final de cada construção.

---

Fluxo de trabalho (8 etapas)

1. Analisar a fonte — ffprobe para duração, fps, dimensões, áudio.
2. Escolher a quantidade de quadros — padrão 80. Mínimo 40 (irregular se menor), máximo 160 (página pesada). Escolha por duração: ≤10s → 50, 10–30s → 80, 30–60s → 120, >60s → 160.
3. Decidir o diretório de saída — padrão ~/Documents/yuv-projects/landings/<slug>/. O <slug> é curto, derivado do nome do vídeo ou do tópico. Substitua apenas sob solicitação explícita.
4. Extrair quadros — execute references/extract-frames.py <video-fonte> <diretorio-saida> [quantidade]. Produz diretorio-saida/frames/f_0001.jpg… com qualidade JPG consistente 82 e largura máxima de 1920 (redimensionado se a fonte for maior).
5. Copiar e personalizar references/landing-template.html para diretorio-saida/index.html:
   • Substitua o espaço reservado __FRAMES__ por tags <img> para cada quadro (o script de construção faz isso automaticamente quando você passa --build-html).
   • Preencha __HEADLINE__, __TAGLINE__, __CTA_TEXT__, __CTA_HREF__, seções.
   • Para conteúdo em hebraico: defina <html lang="he" dir="rtl"> e troque as fontes para Rubik/Assistant (veja references/design-notes.md).
6. Otimizar quadros — o script de construção já redimensiona para largura máxima de 1920px. Se o peso total da página for > 12 MB, reduza a qualidade para 75 ou diminua a quantidade de quadros.
7. Pré-visualizar — python -m http.server dentro do diretório de saída e abra http://localhost:8000. A rolagem fica suave em uma máquina decente.
8. Implantar — solte a pasta no Vercel/Netlify/Cloudflare Pages. Nenhuma etapa de construção necessária.

O mecanismo de rolagem

• Rolador externo .scroll-stage com altura definida em unidades de viewport (padrão 600vh = rolar 5 telas para percorrer todos os quadros).
• Herói fixo position: sticky; top: 0; height: 100vh contendo todos os quadros posicionados absolutamente e ocultos, exceto o ativo.
• Listener de rolagem calcula progresso = roladoDentroDoStage / alturaRolavel fixado entre 0 e 1.
• idx = floor(progresso * (N - 1)) — troca a classe .active para aquele quadro.
• Envolva o listener em requestAnimationFrame para manter 60fps.

Regras de design

• Se o projeto for marcado como YUV.AI (Yuval pessoalmente, seu portfólio, sua marca): chame yuv-design-system e bloqueie-o para um modo por meio —
  • Modo Neon (PADRÃO para web YUV.AI): rosa choque (#FF1464) + ciano neon (#00E5FF) + branco ou preto rico. Anton + Inter (Inglês) / Rubik + Assistant (Hebraico). Raio 0px ou 999px.
  • Modo Editorial Quente: apenas para Hope, Marcus, bigcats.ai, practical.yuv.ai — rosa + amarelo + osso, off-white nunca #fff puro.
  • Nunca use o modo Decks (roxo/amarelo Fly High) para uma página de destino — essa paleta é reservada apenas para apresentações de slides.
• Se o projeto não for marcado como YUV.AI: não aplique yuv-design-system. Escolha uma paleta que se adapte ao clima do vídeo de origem. Anton + Inter continuam sendo padrões razoáveis, mas não são obrigatórios.
• As sobreposições do herói devem ser sutis — uma vinheta e uma única manchete grande; não sobrecarregue o quadro.
• Seções abaixo do herói: canvas claro (branco no modo Neon, off-white no modo Editorial Quente, osso se for genérico-quente), título grande em Anton, corpo em Inter a 18–22px, CTA como uma pílula afiada (border-radius: 999px) — preenchimento rosa no modo Neon, cor apropriada à marca caso contrário.
• Para hebraico: respeite RTL, use Rubik 900 para títulos, Assistant 400/500 para corpo.

Referências de arquivos

Arquivo	Propósito
references/extract-frames.py	Extrator de quadros baseado em ffmpeg; opcionalmente constrói o HTML completo de uma só vez
references/landing-template.html	Esqueleto de página de destino autossuficiente com o mecanismo de rolagem
references/design-notes.md	Tipografia, paleta e padrões de movimento