Juicy Motion

Que fait Juicy Motion ?

Pense comme un motion designer : utilise l'anticipation, l'impact et la dissipation pour rendre chaque événement expressif et lisible. La référence appréciée par l'utilisateur est la proposition Quinas 03 · Le salaire est arrivé : une enveloppe prend vie et révèle la récompense en couches. Le principe réutilisable est le langage de mouvement ; l'objet, la marque et l'intensité dépendent du produit.

Choisir la famille

Garder le noyau commun dans cette skill et ne consulter que les recettes nécessaires :

• Récompenses et révélations : coffres, enveloppes, succès, objets et pièces. Consulter recettes de récompense et timing.
• Impacts et combat : coups, arcs d'épée, tirs et réaction de la cible. Consulter impacts et VFX.
• Magie et éléments : charge, projectiles, éclairs et glace. Consulter également impacts et VFX, dans la recette correspondante.

Les sept vidéos de qutsune/EgorV se trouvent dans le catalogue de références, avec ce qui a été observé et l'application suggérée. Le consulter pour choisir une référence ou approcher un effet demandé. Le coffre était déjà l'origine visuelle de la recette du Quinas ; les autres élargissent le répertoire aux impacts et VFX. Séparer une autre skill lorsqu'il y a un flux de travail propre et substantiel, par exemple les shaders et l'intégration de VFX dans un moteur spécifique ; un élément visuel différent suffit comme recette dans cette skill.

Concevoir l'événement

• Identifier le déclencheur, l'origine de l'action, le contenu révélé ou la cible atteinte et le résultat final. Pour un gain monétaire, la destination peut être le portefeuille ; pour un déblocage, la nouvelle option disponible ; pour une attaque, le contact et la réaction de la cible.
• Choisir la préparation adaptée : wobble et compression lors d'une ouverture, recul d'un coup ou charge avant d'émettre de l'énergie. Coordonner stretch avec la sortie, overshoot avec l'arrivée et assaut avec la lecture lorsqu'ils ont du sens. Éviter un ensemble d'éléments qui ne font que fade-in ensemble.
• Séparer les couches dans le temps. Pour une récompense : ouvrir → émettre de la lumière → révéler l'objet/valeur → marquer l'impact → disperser les étoiles → prolonger avec de la poussière. Pour une attaque : préparer → lancer/frapper → contacter → réagir → dissiper. La narration prime sur le nombre de particules ou la quantité de couches.
• Adapter l'intensité à la fréquence. Une célébration rare peut avoir plus de présence ; un avertissement fréquent nécessite moins d'attente et moins d'occupation. Localiser l'impact sur l'objet/carte, sans secouer l'application entière par choix automatique.
• Pour un effet fréquent ou de combat, préserver la lisibilité de l'action, de la cible et des commandes. Le temps cérémoniel d'une récompense ne convient pas au timing d'une attaque.
• L'ordre de construction d'un tutoriel ne détermine pas les délais de l'effet. Ancrer les couches sur le même événement : éclair, réaction et son peuvent coïncider au contact, tandis que la traînée et les résidus ont leurs propres durées. La durée de la vidéo n'est pas non plus la durée de l'action démontrée.

Construction et aperçu

Préférer HTML/CSS/SVG et l'API Web Animations pour les objets et effets d'interface. Utiliser les ressources et l'architecture du projet ; ne pas générer un bitmap pour un effet qui dépend de déformation, d'ouverture et de trajectoires réglables. Dans les jeux, utiliser le renderer et le cycle de mise à jour existants pour les effets dans le monde ; un aperçu web peut étudier le timing sans imposer DOM/CSS à l'intégration.

Pour démarrer une expérience indépendante de récompense, copier et adapter assets/reward-envelope.html. C'est un exemple autosuffisant, sans bibliothèques, images ou réseau : enveloppe, medallion générique, lumière, étoiles, poussière, gain et portefeuille simulé, avec replay, scrubber, vitesse, couches et mouvement réduit. Modifier CONFIG, la composition et les trajectoires selon la demande ; l'exemple ne remplace pas la conception spécifique du produit.

L'aperçu doit permettre de ressentir le résultat et d'inspecter le timing : replay, play/pause, ralenti et ligne de temps. Les toggles de couches aident à comprendre la contribution de l'anticipation, de la lumière et des particules. En explorant, comparer l'action de base avec les couches ajoutées et identifier le problème que chacune résout : origine peu claire, contact faible, cible sans réponse ou conséquence illisible. Afficher la taille d'utilisation et le contexte, pas seulement un objet grand isolé. Le nombre de variantes suit la demande et les règles locales ; en affinant une approuvée, préserver l'exemple et se concentrer sur l'affinage plutôt que de rouvrir l'exploration.

Une capture est un support ; elle ne prouve pas le mouvement. Revoir la reproduction et aussi arrêter la ligne de temps en préparation, action/contact, réponse et conclusion. Livrer un lien direct vers l'exemple interactif. Distinguer les valeurs simulées des événements et paiements réels.

Invariants utiles

• Utiliser une ligne de temps partagée pour les couches. Replay/seek doit produire le même état et éviter la duplication de particules, temporisateurs ou écouteurs. Lorsqu'il y a variation procédurale, conserver la graine pour reproduire et comparer.
• En UI, animer surtout transform et opacity. Utiliser des wrappers pour séparer déformation, déplacement et sortie lorsque plusieurs effets se disputeraient la même propriété.
• Une sortie retardée ne doit pas superposer l'état initial : en WAAPI, utiliser fill: 'forwards' dans cette sortie, ou composer les phases dans une seule animation. Revoir l'état à t=0 et après avoir traîné la barre en arrière.
• Calculer la destination des pièces à partir de la position réelle du portefeuille dans la scène et recalculer lors du redimensionnement. Ne pas fixer la trajectoire à l'écran de l'auteur.
• En mouvement réduit, maintenir le contenu et le résultat directement lisibles et retirer wobble, squash, particules, vol, secousses et flashs. Un aperçu peut offrir une commande explicite pour expérimenter le mouvement ; conserver le choix manuel de l'utilisateur.
• Le son est une couche optionnelle, initiée par l'interaction et avec contrôle. Préserver les réglages existants et éviter deux sons pour le même gain.
• Lors de l'intégration, respecter les événements et contrats du domaine. Une récompense part d'un événement confirmé ; l'animation n'attribue pas d'argent, ne modifie pas les inventaires ni n'infère le gain par différence de solde ou fin de temporisateur. En combat, distinguer lancement, contact et dégâts confirmés ; respecter la prévision visuelle existante sans transformer la fin de l'effet en preuve de touche.

Conserver et réutiliser

Dans Quinas, consulter docs/Identity/MOTION.md et docs/Identity/motion/recompensas-03/ dans le dépôt. C'est la source canonique du choix, des ressources T01/Q et de l'exemple approuvé. Suivre également les règles locales d'aperçus, S2/T2, thèmes et stockage d'artefacts.

Dans d'autres projets, conserver la méthode et utiliser l'identité de ce produit. Ne pas transporter automatiquement la marque, la monnaie ou les contrôles de Quinas.

Lorsque l'utilisateur approuve et demande la conservation, sauvegarder le code reproductible, les ressources, le timing et le périmètre du choix dans un endroit durable de l'identité, en plus d'un lien dans les index de design. Distinguer référence approuvée d'intégration réelle. Une tâche d'aperçu ou de conservation reste dans ce périmètre ; une demande d'implémentation suit l'autorisation déjà existante, sans inventer une nouvelle barrière.

Vérifier le plus petit périmètre pertinent : reproduction, seek arrière, replay, changement de contenu, thèmes, petit écran, destination des trajectoires, ressources et console. Exécuter les vérifications d'intégration exigées par le projet lors de la modification du produit.