juicy-motion

Juicy Motion

Piensa como un motion designer: usa anticipación, impacto y disipación para hacer que cada acontecimiento sea expresivo y legible. La referencia apreciada por el usuario es la propuesta Quinas 03 · El salario llegó: un sobre cobra vida y revela la recompensa en capas. El principio reutilizable es el lenguaje de movimiento; el objeto, la marca y la intensidad dependen del producto.

Elegir la familia

Mantener el núcleo común en esta skill y consultar solo las recetas necesarias:

• Recompensas y revelaciones: cofres, sobres, logros, objetos y monedas. Consultar recetas de recompensa y timing.
• Impactos y combate: golpes, arcos de espada, disparos y reacción del objetivo. Consultar impactos y VFX.
• Magia y elementos: carga, proyectiles, relámpagos y hielo. Consultar también impactos y VFX, en la receta correspondiente.

Los siete videos de qutsune/EgorV están en el catálogo de referencias, con lo observado y la aplicación sugerida. Consultarlo para elegir una referencia o acercarse a un efecto solicitado. El cofre ya era el origen visual de la receta del Quinas; los demás amplían el repertorio a impactos y VFX. Separar otra skill cuando haya un flujo de trabajo propio y sustancial, por ejemplo shaders e integración de VFX en un motor específico; un elemento visual diferente basta como receta dentro de esta skill.

Diseñar el acontecimiento

• Identificar el gatillo, el origen de la acción, el contenido revelado o el objetivo alcanzado y el resultado final. En una ganancia monetaria, el destino puede ser la billetera; en un desbloqueo, la nueva opción disponible; en un ataque, el contacto y la reacción del objetivo.
• Elegir la preparación adecuada: wobble y compresión en una apertura, retroceso de un golpe o carga antes de emitir energía. Coordinar stretch con la salida, overshoot con la llegada y asentamiento con la lectura cuando tengan sentido. Evitar un conjunto de elementos que solo hacen fade-in juntos.
• Separar las capas en el tiempo. En una recompensa: abrir → emitir luz → revelar objeto/valor → marcar impacto → dispersar estrellas → prolongar con polvo. En un ataque: preparar → lanzar/golpear → contactar → reaccionar → disipar. La narrativa prevalece sobre el número de partículas o la cantidad de capas.
• Adecuar la intensidad a la frecuencia. Una celebración rara puede tener más presencia; un aviso frecuente necesita menos espera y menor ocupación. Localizar el impacto en el objeto/tarjeta, sin agitar la aplicación entera como elección automática.
• En un efecto frecuente o de combate, preservar la lectura de la acción, del objetivo y de los comandos. El tiempo ceremonial de una recompensa no sirve como timing de ataque.
• El orden de construcción de un tutorial no determina los delays del efecto. Anclar las capas en el mismo acontecimiento: destello, reacción y sonido pueden coincidir en el contacto, mientras que estela y residuos tienen duraciones propias. La duración del video tampoco es la duración de la acción demostrada.

Construcción y preview

Preferir HTML/CSS/SVG y la Web Animations API para objetos y efectos de interfaz. Usar los recursos y la arquitectura del proyecto; no generar un bitmap para un efecto que depende de deformación, apertura y trayectorias ajustables. En juegos, usar el renderer y el ciclo de actualización existentes para efectos en el mundo; una preview web puede estudiar el timing sin imponer DOM/CSS a la integración.

Para iniciar una experiencia independiente de recompensa, copiar y adaptar assets/reward-envelope.html. Es un ejemplo autosuficiente, sin bibliotecas, imágenes ni red: sobre, medallón genérico, luz, estrellas, polvo, ganancia y billetera simulada, con replay, scrubber, velocidad, capas y movimiento reducido. Cambiar CONFIG, la composición y las trayectorias según lo solicitado; el ejemplo no reemplaza el diseño específico del producto.

La preview debe permitir sentir el resultado e inspeccionar el timing: replay, play/pause, cámara lenta y línea de tiempo. Toggles de capas ayudan a percibir la contribución de anticipación, luz y partículas. Al explorar, comparar la acción base con las capas añadidas e identificar el problema que cada una resuelve: origen poco claro, contacto débil, objetivo sin respuesta o consecuencia ilegible. Mostrar tamaño de uso y contexto, no solo un objeto grande aislado. La cantidad de variantes sigue la solicitud y las reglas locales; al refinar una aprobada, preservar el ejemplo y enfocar el refinamiento en lugar de reabrir la exploración.

Una captura es un apoyo; no comprueba movimiento. Revisar la reproducción y también detener la línea de tiempo en preparación, acción/contacto, respuesta y conclusión. Entregar un enlace directo al ejemplo interactivo. Distinguir valores simulados de eventos y pagos reales.

Invariantes útiles

• Usar una línea de tiempo compartida para las capas. Replay/seek debe producir el mismo estado y evitar duplicación de partículas, temporizadores o listeners. Cuando haya variación procedural, conservar la seed para reproducir y comparar.
• En UI, animar sobre todo transform y opacity. Usar wrappers para separar deformación, desplazamiento y salida cuando varios efectos competirían por la misma propiedad.
• Una salida retrasada no debe superponerse al estado inicial: en WAAPI, usar fill: 'forwards' en esa salida, o componer las fases en una única animación. Revisar el estado en t=0 y después de arrastrar la barra hacia atrás.
• Calcular el destino de las monedas a partir de la posición real de la billetera dentro de la escena y recalcular al redimensionar. No fijar la trayectoria al monitor del autor.
• En movimiento reducido, mantener el contenido y el resultado directamente legibles y retirar wobble, squash, partículas, vuelo, shake y destellos. Una preview puede ofrecer un comando explícito para experimentar el motion; mantener la elección manual del usuario.
• El sonido es una capa opcional, iniciada por interacción y con control. Preservar las configuraciones existentes y evitar dos sonidos para la misma ganancia.
• En la integración, respetar los eventos y contratos del dominio. Una recompensa parte de un evento confirmado; la animación no asigna dinero, altera inventarios ni infiere la ganancia por diferencia de saldo o fin del temporizador. En combate, distinguir lanzamiento, contacto y daño confirmado; respetar la previsión visual existente sin transformar el fin del efecto en prueba de acierto.

Conservar y reutilizar

En Quinas, consultar docs/Identity/MOTION.md y docs/Identity/motion/recompensas-03/ dentro del repositorio. Esta es la fuente canónica de la elección, de los recursos T01/Q y del ejemplo aprobado. Seguir también las reglas locales de previews, S2/T2, temas y almacenamiento de artefactos.

En otros proyectos, conservar el método y usar la identidad de ese producto. No transportar automáticamente la marca, la moneda o los controles del Quinas.

Cuando el usuario apruebe y pida conservación, guardar código reproducible, recursos, timing y alcance de la elección en un lugar duradero de la identidad, además de un enlace en los índices de diseño. Distinguir referencia aprobada de integración real. Una tarea de preview o de conservación queda en ese ámbito; una solicitud de implementación sigue la autorización ya existente, sin inventar un nuevo gate.

Verificar el menor ámbito relevante: reproducción, seek hacia atrás, replay, intercambio de contenido, temas, pantalla pequeña, destino de las trayectorias, recursos y consola. Ejecutar las verificaciones de integración exigidas por el proyecto cuando se modifique el producto.