juicy-motion

Juicy Motion

Pensa como um motion designer: usa antecipação, impacto e dissipação para tornar cada acontecimento expressivo e legível. A referência apreciada pelo utilizador é a proposta Quinas 03 · O ordenado chegou: um envelope ganha vida e revela a recompensa em camadas. O princípio reutilizável é a linguagem de movimento; o objeto, a marca e a intensidade dependem do produto.

Escolher a família

Manter o núcleo comum nesta skill e consultar apenas as receitas necessárias:

• Recompensas e revelações: baús, envelopes, conquistas, itens e moedas. Consultar receitas de recompensa e timing.
• Impactos e combate: golpes, arcos de espada, disparos e reação do alvo. Consultar impactos e VFX.
• Magia e elementos: carga, projéteis, relâmpagos e gelo. Consultar também impactos e VFX, na receita correspondente.

Os sete vídeos de qutsune/EgorV estão no catálogo de referências, com o que foi observado e a aplicação sugerida. Consultá-lo para escolher uma referência ou aproximar um efeito pedido. O baú já era a origem visual da receita do Quinas; os restantes alargam o repertório a impactos e VFX. Separar outra skill quando houver um fluxo de trabalho próprio e substancial, por exemplo shaders e integração de VFX num motor específico; um elemento visual diferente basta como receita dentro desta skill.

Desenhar o acontecimento

• Identificar o gatilho, a origem da ação, o conteúdo revelado ou alvo atingido e o resultado final. Num ganho monetário, o destino pode ser a carteira; num desbloqueio, a nova opção disponível; num ataque, o contacto e a reação do alvo.
• Escolher a preparação adequada: wobble e compressão numa abertura, recuo de um golpe ou carga antes de emitir energia. Coordenar stretch com a saída, overshoot com a chegada e assentamento com a leitura quando fizerem sentido. Evitar um conjunto de elementos que só fazem fade-in juntos.
• Separar as camadas no tempo. Numa recompensa: abrir → emitir luz → revelar objeto/valor → marcar impacto → dispersar estrelas → prolongar com poeira. Num ataque: preparar → lançar/golpear → contactar → reagir → dissipar. A narrativa prevalece sobre o número de partículas ou a quantidade de camadas.
• Adequar a intensidade à frequência. Uma celebração rara pode ter mais presença; um aviso frequente precisa de menos espera e menor ocupação. Localizar o impacto no objeto/cartão, sem abanar a aplicação inteira como escolha automática.
• Num efeito frequente ou de combate, preservar a leitura da ação, do alvo e dos comandos. O tempo cerimonial de uma recompensa não serve de timing de ataque.
• A ordem de construção de um tutorial não determina os delays do efeito. Ancorar as camadas no mesmo acontecimento: clarão, reação e som podem coincidir no contacto, enquanto rasto e resíduos têm durações próprias. A duração do vídeo também não é a duração da ação demonstrada.

Construção e preview

Preferir HTML/CSS/SVG e Web Animations API para objetos e efeitos de interface. Usar os recursos e a arquitetura do projeto; não gerar um bitmap para um efeito que depende de deformação, abertura e trajetórias ajustáveis. Em jogos, usar o renderer e o ciclo de atualização existentes para efeitos no mundo; uma preview web pode estudar o timing sem impor DOM/CSS à integração.

Para iniciar uma experiência independente de recompensa, copiar e adaptar assets/reward-envelope.html. É um exemplo autossuficiente, sem bibliotecas, imagens ou rede: envelope, medallion genérico, luz, estrelas, poeira, ganho e carteira simulada, com replay, scrubber, velocidade, camadas e movimento reduzido. Alterar CONFIG, a composição e as trajetórias conforme o pedido; o exemplo não substitui o desenho específico do produto.

A preview deve permitir sentir o resultado e inspecionar o timing: replay, play/pause, câmara lenta e linha do tempo. Toggles de camadas ajudam a perceber o contributo de antecipação, luz e partículas. Ao explorar, comparar a ação base com as camadas adicionadas e identificar o problema que cada uma resolve: origem pouco clara, contacto fraco, alvo sem resposta ou consequência ilegível. Mostrar tamanho de utilização e contexto, não apenas um objeto grande isolado. A quantidade de variantes segue o pedido e as regras locais; ao refinar uma aprovada, preservar o exemplo e focar o refinamento em vez de reabrir a exploração.

Uma captura é um apoio; não comprova movimento. Rever a reprodução e também parar a linha do tempo em preparação, ação/contacto, resposta e conclusão. Entregar uma ligação direta ao exemplo interativo. Distinguir valores simulados de eventos e pagamentos reais.

Invariantes úteis

• Usar uma linha do tempo partilhada para as camadas. Replay/seek deve produzir o mesmo estado e evitar duplicação de partículas, temporizadores ou listeners. Quando houver variação procedural, conservar a seed para reproduzir e comparar.
• Em UI, animar sobretudo transform e opacity. Usar wrappers para separar deformação, deslocamento e saída quando vários efeitos disputariam a mesma propriedade.
• Uma saída atrasada não deve sobrepor o estado inicial: em WAAPI, usar fill: 'forwards' nessa saída, ou compor as fases numa única animação. Rever o estado em t=0 e após arrastar a barra para trás.
• Calcular o destino das moedas a partir da posição real da carteira dentro da cena e recalcular ao redimensionar. Não fixar a trajetória ao monitor do autor.
• Em movimento reduzido, manter conteúdo e resultado diretamente legíveis e retirar wobble, squash, partículas, voo, shake e flashes. Uma preview pode oferecer um comando explícito para experimentar o motion; manter a escolha manual do utilizador.
• Som é uma camada opcional, iniciada por interação e com controlo. Preservar as definições existentes e evitar dois sons para o mesmo ganho.
• Na integração, respeitar os eventos e contratos do domínio. Uma recompensa parte de um evento confirmado; a animação não atribui dinheiro, altera inventários nem infere o ganho por diferença de saldo ou fim do temporizador. Em combate, distinguir lançamento, contacto e dano confirmado; respeitar a previsão visual existente sem transformar o fim do efeito em prova de acerto.

Conservar e reutilizar

No Quinas, consultar docs/Identity/MOTION.md e docs/Identity/motion/recompensas-03/ dentro do repositório. Esta é a fonte canónica da escolha, dos recursos T01/Q e do exemplo aprovado. Seguir também as regras locais de previews, S2/T2, temas e armazenamento de artefactos.

Noutros projetos, conservar o método e usar a identidade desse produto. Não transportar automaticamente a marca, a moeda ou os controlos do Quinas.

Quando o utilizador aprovar e pedir conservação, guardar código reproduzível, recursos, timing e âmbito da escolha num local durável da identidade, além de uma ligação nos índices de design. Distinguir referência aprovada de integração real. Uma tarefa de preview ou de conservação fica nesse âmbito; um pedido de implementação segue a autorização já existente, sem inventar um novo gate.

Verificar o menor âmbito relevante: reprodução, seek para trás, replay, troca de conteúdo, temas, ecrã pequeno, destino das trajetórias, recursos e consola. Executar as verificações de integração exigidas pelo projeto quando alterar o produto.