empro-labs-animations

Animação Empro Labs

Projeta e constrói uma nova mecânica de animação por página. Cada página é uma demonstração local e autossuficiente com texto de marca fictício, para que possa ser adaptada a qualquer negócio, incluindo imobiliário.

Solicitação

A solicitação do usuário vinda do comando de barra:

$ARGUMENTS

Se a solicitação acima estiver vazia, faça uma pergunta: qual mecânica ou seção devemos construir, ou de qual referência devemos aprender? Em seguida, inicie o fluxo de trabalho.

Base de conhecimento (leia-a, não adivinhe)

Arquivo	Leia quando
references/thinking-process.md	Sempre, antes de escolher uma mecânica. Como inventar uma e justificá-la
references/used-designs.md	Sempre. Famílias, fontes e paletas já usadas, para não repeti-las
references/mechanic-library.md	Sempre. 25 famílias construídas e cerca de 26 ideias testadas ainda não construídas
references/design-language.md	Passo 3. Combinação de tipos, paleta, layout e regras de texto, e o que evitar
references/technique-recipes.md	Passo 4. Blocos de construção funcionais: tilt, FLIP, partículas, física, WebGL, áudio e mais
references/real-estate-applications.md	Quando o briefing for para uma seção imobiliária ou de propriedades
references/premium-quality-bar.md	Passo 6. A lista de itens obrigatórios e recomendados, e o modelo de relatório
references/build-and-test-process.md	Passos 5 e 6. Regras de nomenclatura, checklist de teste, bugs já vistos
references/mechanics-catalogue.md	Quando você precisar dos detalhes de um exemplo existente
references/layered-stack-hyperframe.md	A solicitação é um efeito 3D de hover em camadas ou empilhado

Regras

1. Inove, não repita. Escolha uma família de mecânicas que não esteja em used-designs.md, ou altere a entrada e a ideia visual o suficiente para passar no teste de novidade em thinking-process.md.
2. Recrie, não copie. Quando o usuário apontar para um site de referência, estude seu comportamento e técnica, depois escreva novo código, texto e layout. Nunca copie código, texto, logotipo, fontes ou imagens de outro site.
3. Marca fictícia. Use texto de marca inventado, a menos que o usuário forneça uma marca. Não adicione e-mails, números de telefone, nomes de clientes ou valores reais. Rotule cada demonstração como um conceito.
4. Apenas local. Sirva páginas em localhost. Não se conecte ao GitHub, Vercel ou qualquer outro host, a menos que o usuário peça.
5. Um momento marcante por página. Todo o resto permanece calmo.
6. Teste antes de relatar. Sem erros no console, a interação funciona, uma tela de 375 px não tem rolagem lateral, o movimento reduzido é tratado e o conteúdo é legível sem movimento. Diga o que você não testou.
7. IDs únicos e nomes de classe prefixados. Nomes genéricos como .top ou .unit span quebram as páginas.

Fluxo de trabalho

1. Leia a base de conhecimento para a solicitação: thinking-process.md, used-designs.md, mechanic-library.md.
2. Esboce a página na resposta: visitante e objetivo, primitiva, entrada, momento marcante, movimento de suporte, fallbacks. Use a seção 4 de thinking-process.md.
3. Escolha a linguagem de design: uma fonte de exibição não usada nas últimas três linhas de used-designs.md, uma cor de destaque, uma paleta com contraste de texto de 4,5:1. Use design-language.md.
4. Crie a pasta <mechanic>-site/. Copie templates/starter-site/ para dentro dela, em seguida substitua o texto, a paleta, as fontes e o momento marcante. Construa a mecânica a partir de technique-recipes.md.
5. Sirva e teste com python -m http.server <port> dentro da pasta. Use a próxima porta livre a partir de 8000. Execute o checklist em build-and-test-process.md em 1440 px e 375 px.
6. Avalie em relação a premium-quality-bar.md. Corrija qualquer item obrigatório com falha antes de relatar.
7. Relate com o modelo em premium-quality-bar.md.
8. Registre: se o usuário mantiver a página, adicione uma linha a used-designs.md e, se for uma nova família, marque-a como construída em mechanic-library.md.

Exemplos

examples/ contém 25 demonstrações executáveis, incluindo o exemplo neutro de camadas empilhadas. Para testá-las, execute python -m http.server 8000 dentro de examples/, em seguida abra uma pasta, por exemplo http://localhost:8000/layered-stack-hyperframe/.

Modelos

Pasta	Uso
templates/starter-site/	Ponto de partida para cada nova página. Layout, tokens, revelações, tilt e movimento reduzido já configurados

Cadeia de fallback

• O usuário nomeia uma referência, mas não fornece uma página para estudo → peça a URL ou uma gravação de tela. Não adivinhe a mecânica a partir do nome.
• Uma mecânica precisa de um recurso que o navegador não possui (WebGL, Web Audio, CSS com rolagem) → construa o fallback primeiro, depois o recurso, e diga quais navegadores foram testados.
• Nenhuma solicitação → proponha duas famílias de mechanic-library.md que ainda não foram construídas e pergunte qual delas.
• A solicitação é para uma propriedade real (listagens reais, preços reais, fotos reais) → use dados fictícios, avise e peça o conteúdo real antes de entrar no ar.