Convenções do Host de Design Aberto

Estas são as habilidades funcionais na tarefa atual. Mantenha o tipo de tarefa, marca, stack de tecnologia, estágio atual e formato de entrega selecionados pelo usuário; não altere para um projeto de vídeo devido à seleção de @. Planeje apenas no estágio de planejamento, escreva código apenas no estágio de implementação. Verificação, renderização e exportação só serão executadas quando permitidas pelo estágio atual do host e as ferramentas estiverem realmente disponíveis; as habilidades não podem iniciar Agentes independentes adicionais, forçar aprovações ou contornar os limites de entrega do host.

Arquivos anexos são lidos em relação ao diretório raiz do pacote de habilidades atual, lidos de acordo com o problema atual, sem colar todos os documentos de referência nas instruções. Não leia a configuração global de outros Agentes. Materiais devem priorizar arquivos já existentes do usuário; ao precisar de novas imagens, vídeos ou áudios, use as ferramentas reais fornecidas pelo host atual e permitidas pelo usuário. Ao faltar capacidade de geração, medição ou exportação, descreva a lacuna específica, entregue partes verificáveis e não afirme ter concluído etapas não executadas. Siga o caminho de saída da tarefa atual, sem sobrescrever entradas ou artefatos históricos.

Motion.Lab Biblioteca de Casos de Animação

Passos de Uso

1. Primeiro, defina o estado ou ação que o usuário deseja expressar e consulte os componentes e o stack de tecnologia existentes. Use references/index.md para pesquisar por nome em chinês/inglês, ID, categoria ou tag. Selecione o caso que melhor atende aos objetivos do usuário, sem sobrecarregar com efeitos especiais apenas para exibir a biblioteca.
2. Leia a seção do ID correspondente no arquivo da categoria apropriada: references/basic.md (Básico), references/text.md (Texto), references/interaction.md (Interativo), references/advanced.md (Avançado). Cada item inclui definição de parâmetros, exemplos originais de HTML/CSS/JS, sem necessidade de baixar o site inteiro pela internet.
3. Adapte o código ao DOM e ao ciclo de vida do componente atual, mantendo o conteúdo e a marca do usuário. Parâmetros CSS devem ter unidades corretas; verifique se as variáveis e o código JS realmente usam os parâmetros, não apenas altere os controles de exibição. Seletores globais devem ser alterados para escopo dentro do componente, e múltiplas instâncias não devem compartilhar estado.
4. Confirme as dependências de execução com base no código real: Three.js, GSAP, etc., não são instalados com esta habilidade. Priorize a reutilização de versões existentes em projetos existentes, sem adicionar vários frameworks de animação arbitrariamente. Canvas/WebGL devem ser ajustados de acordo com o tamanho do contêiner e DPR, explicando as compensações de desempenho.
5. Limpe requestAnimationFrame, timers, listeners de scroll/pointer e recursos de renderização; React usa cleanup de ciclo de vida. Listeners de scroll devem usar agendamento de frames quando for necessário throttling; não deixe animações bloquearem cliques ou feedback do teclado.
6. Respeite prefers-reduced-motion, fornecendo estados estáticos ou simplificados; interações devem suportar teclado, toque e foco simultaneamente. Verifique dimensões codificadas, textos de placeholder e caminhos de recursos no código; exemplos não devem ser usados como produto final sem modificação.
7. Quando permitido pelo estágio atual, verifique a execução real, gatilho, parada, desinstalação e múltiplas entradas; relate os resultados observados. Especifique claramente quando for apenas verificação de código fonte estático, não afirme que todos os 160 casos foram aceitos pelo navegador.

Requisitos Comuns

• Ondulação de clique de botão: click-ripple-material.
• Digitação de título: text-typewriter; versão com múltiplas linhas text-typewriter-multi.
• Virada de cartão: hover-flip-card.
• Entrada por scroll: scroll-reveal.
• Fundo de partículas: Selecione entre particle-fountain, canvas-starfield, flow-field e particle-galaxy com base no objetivo.

Os casos são usados para implementar funcionalidades locais, este pacote não cria o site Motion.Lab, não inclui sua interface de aplicativo ou site de pré-visualização, nem divide os 160 casos em 160 itens de lista @.

Licença Mantida com o Pacote

references/license.md A licença de origem é mantida com o pacote de sessão. Ao copiar o código de referência para o projeto de entrega, mantenha a atribuição upstream e o texto da licença.