quiczz/motionsite

O que motionsite faz?

Constrói o visual de "site com movimento": um vídeo de herói em tela cheia e loop, uma sobreposição gradiente escura para texto legível, cartões com efeito vidro, palavras que animam ao entrar, botões que reagem e seções que revelam ao rolar. A diferença entre um bom e um lento e inacessível está na checklist abaixo; por isso, esta skill constrói a página e a audita.

Não é afiliado a motionsites.ai. Esta skill não contém prompts ou ativos de terceiros.

Executa por conta própria: quando você pede uma landing page, herói ou site animado, Claude escolhe esta skill, constrói a partir do template e executa a auditoria antes de reportar.

Procedimento

1. Capture o briefing em uma só passada. Nome da marca, promessa de uma linha, principal chamada para ação, 3 a 6 seções (funcionalidades, prova, preços, FAQ), tom (calmo, ousado, divertido, luxuoso) e qualquer logotipo, cores ou fontes que já possuam. Se o usuário não forneceu nada, escolha uma direção por conta própria e informe qual.
2. Escolha a stack do projeto. Projeto existente com React/Next/Vue/Svelte: construa componentes nessa stack. Pasta vazia sem preferência: use o templates/site.html (arquivo único, sem etapa de build, abre com duplo clique). Se pedirem React, Vite, TypeScript e Tailwind, use templates/Hero.tsx e templates/useReveal.ts.
3. Consiga o vídeo honesto e leve. Veja references/assets.md. Use a própria filmagem do usuário ou um clipe gerado ou licenciado; nunca faça hotlink de CDN de terceiros. Até que a filmagem real exista, envie o fundo gradiente animado em CSS que o template inclui, para que a página já pareça finalizada. A filmagem real é ativada preenchendo três atributos de dados no .hero-media (data-video-mp4, data-video-webm, data-poster). Crie versões web com scripts/make_video_assets.sh (mp4 + webm + poster).
4. Construa a página a partir do template. Mantenha estas partes: herói (vídeo + sobreposição + título + CTA), uma barra de navegação de vidro, 3 a 6 seções de conteúdo com animações de revelação, rodapé. Aplique as receitas de design em references/design-recipes.md (escala tipográfica, espaçamento, paleta, cartões de vidro, estados de botão, temporização).
5. Aplique as regras de performance e acessibilidade (abaixo). Elas não são extras opcionais; são o que torna a página utilizável em um celular.
6. Audite. Execute python3 <skill-dir>/scripts/check_motion.py <site-folder> e corrija cada FALHA. Depois veja a página em um navegador: largura de desktop e celular, movimento reduzido ativado, JavaScript desabilitado para a primeira pintura. Detalhes em references/performance-accessibility.md.
7. Relate os arquivos criados, como substituir o vídeo placeholder, o que a auditoria disse e algo para observar.

Regras que definem a qualidade

• Vídeo: muted, loop, playsinline (sem isso navegadores móveis se recusam a reproduzi-lo na página), poster definido, preload="metadata", sem trilha de áudio. Inicie a reprodução a partir do script após verificar movimento reduzido e economia de dados, como o template faz, para que esses visitantes nunca baixem o vídeo. Alvo de 2 a 4 MB para o clipe do herói, no máximo 1080p, 6 a 12 segundos que façam loop limpo.
• Poster é a primeira pintura. A imagem de poster (ou o gradiente) é o que o visitante vê e o que a métrica Largest Contentful Paint mede. Dê a ela fetchpriority="high" e dimensões exatas.
• Respeite o visitante. Sob prefers-reduced-motion: reduce, ou quando a economia de dados está ativada, mostre o poster em vez de reproduzir vídeo e desligue animações. Pause o vídeo quando ele estiver fora da tela.
• Anime apenas transform e opacity. Nunca anime top, left, width, height ou margin; eles forçam layout e travamentos em celulares.
• Texto permanece legível sobre o vídeo. Coloque uma sobreposição gradiente entre o vídeo e o texto, mantenha o texto do corpo com pelo menos contraste 4.5:1 contra o quadro mais escuro e o mais claro, e nunca coloque texto pequeno diretamente sobre uma filmagem em movimento.
• Uma ideia por seção, um movimento por elemento. Espaçamento entre 60 e 100 ms, durações de 400 a 800 ms, ease-out. Se tudo se move, nada guia o olhar.
• Mobile first. Herói usa 100svh, não 100vh. Teste na largura de 375 px; sem rolagem horizontal. Considere um herói mais leve ou estático em telas pequenas.
• Estrutura de conteúdo real. Um h1, landmarks (header, main, footer), botões são <button> ou <a>, links têm texto, imagens têm alt.
• Seja dono dos seus ativos. Nenhum vídeo de CDN de terceiros, fontes auto-hospedadas ou de um provedor de fontes, licenças registradas em assets/README.md.

Arquivos

Arquivo	Propósito
templates/site.html	Landing page completa em um único arquivo: herói de vídeo (ativado com atributos de dados) com fallback gradiente CSS, navegação de vidro, título animado, revelação ao rolar, cartões, CTA, rodapé
templates/Hero.tsx, templates/useReveal.ts	Versões React do herói e do hook de revelação ao rolar
references/design-recipes.md	Tipografia, cor, espaçamento, vidro, botões, temporização de movimento, padrões de seção
references/performance-accessibility.md	Orçamentos, movimento reduzido, comportamento do vídeo, etapas de teste
references/assets.md	De onde vem o vídeo, licenciamento, geração de um clipe, codificação
scripts/make_video_assets.sh	ffmpeg: clipe de entrada para web mp4, webm, poster
scripts/check_motion.py	Auditoria de uma pasta de site para os problemas acima