Principios de Motion

El movimiento de Nonova es precisión de instrumento, no espectáculo. La capa de superficie se mueve para acomodar al adulto que delegó; la prueba no se anima con drama, se resuelve con nitidez. La diagonal de la personalidad —autoridad en la sustancia, calidez en el trato— hecha tiempo.

Posición

El motion de Nonova hereda la diagonal de personality.mdx §109 ("Autoridad en la sustancia, calidez en el trato. Nunca al revés.") y la traduce a una jerarquía temporal de dos planos: la capa de superficie se mueve, la espina de la prueba no se anima — aparece. El movimiento es funcional (acomoda lectura, encadena estado, suaviza una transición), nunca decorativo; corto, sobrio, sin overshoot teatral. Confirmo los tres tiers de duración y las dos curvas que ya existen en globals.css, y los extiendo con un conjunto mínimo y nombrado: una curva simétrica para el plano de evidencia (sin rebote — un instrumento no celebra) y un tier de duración instantáneo reservado a la prueba; las demás extensiones que consideré las consolidé en lo existente por falta de delta perceptual defendible (ver Trade-offs). Documento una micro-interacción de referencia —el reveal de un sello verificado— construida deliberadamente como resolución, no como floritura: opacidad + 1px de desplazamiento, curva simétrica, cero scale-pop, cero glow, y bajo prefers-reduced-motion simplemente presente. El motion no toca el reparto de superficie/profundidad que gobierna el anti-pattern Apothecary en la superficie, performance bajo el cofre (~60/40, brand-context §4): lo confirmo intacto y defiendo por qué abajo. El motion es el último lugar donde el sistema podría traicionarse hacia el espectáculo; esta es la disciplina que lo impide.

Sustento

Frameworks aplicados.

• Diagonal de personality hecha composición temporal (personality.mdx §109, verbatim "Autoridad en la sustancia, calidez en el trato. Nunca al revés."; la regla de oro, §107–§111). La autoridad va en la sustancia → la prueba no se dramatiza con movimiento (eso sería poner la calidez/el efecto en la sustancia, exactamente lo que la diagonal prohíbe). La calidez va en el trato → el movimiento vive en la superficie: transiciones, entradas, encadenado de estado. Esta es la regla rectora de todo el doc.
• Neumeier — enemy + action test (brand-context §4, Neumeier aplicado en pillars.mdx). Cada principio nombra qué NO hace el sistema: el enemigo del motion Nonova es el efecto (la animación que se nota a sí misma). Un movimiento que llama la atención sobre el movimiento está roto.
• Denise Lee Yohn — brand-as-business (cada plano = commitment + enemy). El plano de evidencia en motion: commitment = mostrar la prueba con nitidez legible; enemy = el badge que parpadea/brilla/rebota (firma Centrum/Solgar/Carlson, anti-modelo brand-context §4). Animar el sello con drama lo degrada de prueba a adorno — y choca con el guardrail Integridad, no resultado (brand-context §4): un pop celebratorio insinúa resultado donde solo hay identidad verificada.
• Test hermano temporal de la regla F/P/L (propuesta nueva, inspirada en la forma del 3m). La regla heredada de pillars.mdx §178, §208 es espacial: legible de cerca / invisible de lejos a tres metros. Su traducción al tiempo no está escrita en pillars.mdx; propongo aquí un test hermano, inspirado en la forma del 3m (no su análogo literal — la dimensión distancia no se traslada): se siente de cerca, es invisible de lejos. Si un usuario describe la animación ("me encantó cómo aparece"), violó el techo; el motion correcto se percibe como calidad sin nombrarse. Propuesta nueva, no herencia literal.
• Logo-Swap implícito (test de pillars.mdx, tone-of-voice.mdx regla de oro). Si una curva o un reveal pudiera firmarlo Liquid Death o Magic Mind (meme-branding, motion-as-personality; anti-modelos brand-context §4), está roto. La sobriedad del movimiento es parte de la firma.

Razonamiento visible — por qué dos planos y no un sistema plano. El reframe #42 (archetype.mdx) lockeó una jerarquía: capa cálida de superficie + espina de prueba que esa superficie sostiene. El motion no puede ser un sistema único uniforme sin colapsar esa jerarquía: si la prueba se anima con la misma curva expresiva que una entrada de hero, la prueba se vuelve performance —y el sistema entero cae al anti-modelo Centrum/Solgar/Carlson (brand-context §4) con mejor tipografía. Por eso el doc parte el motion en dos registros gobernados por la misma diagonal: superficie = se mueve con calidez contenida; evidencia = aparece con nitidez fría, sin rebote, en el tier de duración más corto. La curva de la prueba es simétrica a propósito: el overshoot (ease-out con rebasamiento) es lenguaje de deleite/celebración; un instrumento de medición no rebota al mostrar una lectura.

Por qué el motion NO mueve la jerarquía del anti-pattern — que #44 ya enmendó (brand-context §4 Apothecary en la superficie hoy lee como jerarquía de superficie de trabajo y de planos con el modelo cover-then-gallery — grafito enuncia; papel trabaja — no como ratio de píxeles; el watch-item del spec del reframe §139 quedó cerrado por el decision-log #44). Mi posición defendida: el eje superficie/profundidad lo gobiernan superficie material, color, tipografía, layout y composición fotográfica — no el tiempo. El motion no es una cantidad que se reparta entre apothecary y performance; es la gramática que ejecuta lo que cada plano ya decidió. La tensión del reframe ("mostrar la evidencia empuja proof al frente") se resuelve en el plano estático: la prueba sube a primer plano por composición, color y jerarquía visual (lo deciden los docs de color, tipografía y fotografía). El motion solo determina cómo entra esa prueba ya promovida — y lo hace de forma deliberadamente sub-dramática (instant + curva simétrica) precisamente para que subir el proof al frente no lo convierta en espectáculo. Es decir: el motion es el mecanismo que permite cumplir la nueva espina (proof presente) sin violar el techo apothecary (proof no performativo). Mover la proporción con motion —animar la evidencia con más peso que la superficie— sería invertir la diagonal §109. Conclusión committed: el motion deja la proporción 60/40 intacta y la protege; no la reabre. Si un doc estático de Phase 4 decide re-balancear el reparto, estos principios siguen sirviendo sin cambio.

Coherencia con la voz. Presente sin protagonizar (personality.mdx §257; el garante "responde sin protagonizar", manifesto.mdx §152) es literalmente una instrucción de motion: presente (hay movimiento, el sistema está vivo) sin protagonizar (el movimiento no es el evento). Resuelta no opinadora (tone-of-voice.mdx Eje 1) → curvas decididas y cortas, no animaciones que "explican" con duración larga. Cálida en el trato, sobria en la sustancia → cero easing elástico, cero spring, cero bounce.

Reference sets (brand-context §4, lockeados #42). Capa de superficie (cómo se siente el movimiento): la cadencia editorial contenida de Aēsop / MUJI / COS / Monocle — transiciones que respiran, nunca performativas. Espina (de qué responde la nitidez de la prueba): precisión de instrumento — la lectura aparece nítida y estable como en un dispositivo de medición calibrado; transparencia radical tipo Patagonia Footprint como modelo de dato-duro-presentado-sin-teatro. No se mezclan las dos funciones: la transición con propósito (sombra honesta, registro Ando heredado del reference set de superficie) es de la superficie; la prueba nunca se difumina en fade poético — se muestra con filo.

El sistema

Los 5 principios

Nota de excepción (#72). El Principio 3 (restraint / invisible de lejos) tiene una sola excepción sancionada: la entrada de marca (§ La entrada de marca, abajo), un gesto describible permitido una vez por sesión, en cuarentena verificable (una vez por sessionStorage, saltable con click/Esc, omitida antes del primer paint para repetidores/reduced-motion/no-JS). Enforcement: cualquier segunda excepción al techo — otro gesto describible, en cualquier superficie — exige decision-log propio, con el mismo patrón que la excepción name-derived de logo.mdx. Sin decision-log, no hay segunda excepción: el techo gobierna. La entrada falla a propósito el test arbitral de §"El test arbitral" — por eso es excepción y no regla; el test sigue siendo la vara para TODO lo demás.

Tokens de duración

Confirmo los tres tiers existentes en globals.css (cubren micro-feedback, transición de UI y transición de superficie) y extiendo con uno solo: un tier instantáneo reservado a la prueba. No agrego el tier de "página" que consideré (ver Trade-offs): no traje delta perceptual que lo distinga de slow para una route transition web, y el riesgo de scope creep hacia el film era real.

Tokens de easing

Confirmo las dos curvas existentes y extiendo con una sola: la curva simétrica para la prueba (la pieza estratégicamente crítica). Descarté una segunda curva de "entrada" por no distinguirse perceptualmente de --ease-out-quart (ver Trade-offs).

Mapa plano → token (la regla operativa)

Micro-interacción de referencia — El reveal de un sello verificado

El caso de prueba deliberado: el estado verificado del plano de evidencia (color.mdx locked, decision-log #44: el dato en mono + Tinta, sin pigmento de espina; el tick ✓ de estado en bronce display --color-accent-display, micro-dosificado) entrando a viewport en una method card. La unidad que se anima con --ease-proof es el BLOQUE de dato completo (mono/Tinta) — la espina; el tick es sub-elemento que aparece con él, nunca el tick aislado (animar solo el marcador compartido re-cromatizaría la espina por la puerta del tiempo — exactamente lo que #44 retiró; color.mdx §"Reconocimiento honesto"). Es el punto exacto donde el sistema podría traicionarse —la tentación es hacerlo brillar/rebotar como un badge de "clinically proven" (firma Centrum, anti-modelo brand-context §4)— y donde el refusal #4 (archetype.mdx §100: Nonova no es una transformación) más el guardrail Integridad, no resultado mandan lo contrario: la prueba no se anima con drama; se muestra con nitidez.

Especificación paso a paso (con tokens):

Por qué así. Opacidad + 4px de translateY es el mínimo que registra "esto se asentó" sin que sea un evento. --duration-instant (90ms) lo pone por debajo del umbral en que el ojo lo lee como "animación" — aparece, no se desliza. --ease-proof simétrica niega el rebote: un sello que rebota es un sello que pide aplauso; la prueba no pide aplauso, demuestra. Cero scale/glow es la línea roja que separa "prueba con nitidez" de "badge clínico" — el momento en que el sello pop es el momento en que el sistema cae al anti-modelo. Y reduce-motion deja el sello presente y legible siempre: la prueba es información, nunca un premio de animación (Principio 5 + el plano de evidencia siempre presente, coherente con que el garante responde sin protagonizar, manifesto.mdx §152).

El test arbitral (heredado del análogo F/P/L, aplicado a motion). Para hacerlo operable por un diseñador que ejecuta solo, el criterio es observable, no de juicio: graba la method card y descríbela en una sola frase. Si en esa frase aparece el verbo del movimiento ("el sello aparece deslizándose", "el sello rebota"), falló el techo — el motion se hizo describible. Si la frase solo nombra el dato ("la card muestra que lo verificó un tercero"), el motion hizo su trabajo: presente sin protagonizar. La prueba operativa es binaria: ¿el movimiento sobrevive a tu descripción de una frase? Si sí, está roto.

La entrada de marca — «salida de las letras», modo fundido (#72)

Es la única excepción deliberada al techo de restraint (Principio 3). Todo el motion de UI se rige por se siente de cerca, es invisible de lejos — si lo puedes describir, está roto. La entrada de marca es lo contrario a propósito: un gesto describible, la marca presentándose una vez (el nombre completo que se resuelve en su símbolo). Se permite porque está en cuarentena: ocurre una sola vez por sesión, es saltable, y se omite antes del primer paint para quien no debe verla. Fuera de esta pieza, el techo gobierna todo.

Qué narra. El wordmark completo «nonova» aparece; n-n-v-a se disuelven en su sitio; las dos «o» viajan y quedan entrelazadas (logo.mdx §"Roles del sistema (decision-log #72)"). De todo el nombre queda el símbolo: la entrada es la derivación del símbolo desde el wordmark, hecha tiempo — forma, no narración de cara al cliente (Marco 04 interno).

Secuencia (implementada, src/components/nonova-intro.tsx + globals.css):

Total ≈ 2.77 s.

La curva de gesto es NUEVA en el sistema — y se aísla a propósito. cubic-bezier(0.45, 0, 0.55, 1) (el easeInOutQuad del prototipo) no es una cuarta curva de UI. Es una curva de gesto de marca: simétrica ease-in-out, narra un viaje (las «o» se desplazan y llegan), no una transición de estado. Se mantiene fuera de la tabla de tokens de UI (--ease-out-quart / --ease-out-quint / --ease-proof) para que ningún doc downstream la tome prestada para producto — usarla en UI reintroduciría el "movimiento que se narra" que el Principio 3 prohíbe. Vive solo en .nnv-letra y .nnv-o. Las duraciones 500/800/700/450 son beats de este gesto, no tokens: valores one-off que no ascienden a la escala (instant/fast/base/slow) ni se reusan fuera de la entrada. Lo único que la entrada reutiliza del sistema es su disolución final (out = --duration-slow + --ease-out-quart): la marca entra con su gesto propio y sale con la gramática de la casa.

Una vez por sesión. sessionStorage (nnv-intro-v1): la primera vista de la sesión la corre; las siguientes la omiten. La marca se presenta una vez, no en cada navegación — presentarse en cada clic sería el "efecto" que el sistema rechaza.

Las tres omisiones — antes del primer paint (Principio 5 intacto). La entrada es un overlay aria-hidden que se auto-retira; nada de contenido depende de ella (la portada real renderiza debajo). Se omite antes del primer paint, sin parpadeo: (1) repetidores de sesión — script inline síncrono en layout.tsx marca html[data-intro-vista]; el CSS oculta .nnv-intro antes de pintar; (2) prefers-reduced-motion: reduce — @media en globals.css: .nnv-intro { display: none }; (3) no-JS — <noscript> oculta .nnv-intro. Coherente con el Principio 5: la entrada nunca es una puerta; es un gesto que puede no ocurrir sin pérdida de información.

Saltable. Click en cualquier parte del overlay o Esc la cierra de inmediato. Un gesto de marca que no se puede saltar es un peaje; este se puede saltar siempre.

El giro = loader, no entrada. El prototipo incluía un giro 360°; no entra en la entrada — sería un segundo evento describible sobre el techo, uno de más. Queda como comportamiento de estado de carga del símbolo (.simbolo-girando, simbolo-oo.tsx): rotación 2400 ms linear infinite, congelada por el global de prefers-reduced-motion (0.01 ms). Es la única animación cíclica del sistema, y solo porque un loader es un estado que persiste — no un gesto que se narra; su lugar es la espera, nunca la bienvenida.

Guarda de superficie (Marco 04). La entrada performa la derivación del símbolo — y ahí se queda. Ningún copy adyacente a la animación (caption, subtítulo, alt de campaña, social que la reproduzca) nombra la racionalización del palíndromo: «equidistantes», «no-no-va», «se lee igual / léelo al revés» están prohibidos en cualquier superficie que la acompañe. El overlay es aria-hidden — estructural, no narrativo. De cara al cliente la entrada no se explica: se ve.

Qué cierra este doc / qué difiere

Trade-offs reconocidos

• Curva simétrica para la prueba en vez de ease-out expresiva. Rechacé reutilizar --ease-out-quint (la curva con asentamiento más rico) para el reveal del sello. Es tentador —se siente "premium"— pero un ease-out pronunciado tiene carácter de llegada celebrada, y eso pone expresividad en la sustancia, violando la diagonal personality.mdx §109. La curva simétrica --ease-proof es menos "bonita" a propósito: la prueba se beneficia de leerse como instrumento, no como deleite.
• Tier --duration-instant (90ms) en vez de animar la prueba en fast (120ms). Consideré no agregar tier y usar fast. Lo rechacé porque la diferencia conceptual importa y tiene delta perceptual: por debajo de ~100ms el movimiento se lee como aparición, no como transición — fast es feedback de superficie (hover), la prueba necesita "aparecer". Un token nombrado lo protege de que un doc downstream le suba la duración "para que se note más" — que se note más es precisamente lo prohibido.
• Consolidé las extensiones débiles en vez de inflar el vocabulario. En el draft previo había propuesto además --duration-page (480ms) y --ease-entrance (0.16,1,0.3,1). Los retiré. --ease-entrance no se distinguía perceptualmente de --ease-out-quart (0.25,1,0.5,1) lo suficiente para justificar un token aparte — habría sido vocabulario que nadie respeta, el riesgo que yo mismo nombro. --duration-page introducía dos problemas: (a) ningún delta defendible contra slow para una route transition web, y (b) su justificación cruzaba hacia el film (territorio cinemático), la línea que este doc dice mantener separada. La route transition web se cubre con slow + quint; el film se especifica aparte.
• No agregué spring/physics al sistema. El motion contemporáneo de producto premia springs (iOS-like). Los descarté en bloque: spring = overshoot = personalidad performativa del movimiento, incompatible con sobria en la sustancia y con el guardrail anti-anti-modelo (Liquid Death/Magic Mind viven de motion-as-personality, brand-context §4). El sistema usa solo cubic-bezier decididas.
• El motion no reabre la jerarquía del anti-pattern enmendado; la protege. Pude tratar la nueva espina ("subir la evidencia al frente") como permiso para darle más peso de movimiento a la prueba. Lo rechacé: eso invertiría la diagonal §109. El reparto superficie/profundidad lo deciden los planos estáticos; el motion ejecuta sub-dramáticamente para que subir el proof no lo vuelva espectáculo. Trade-off asumido: el plano de evidencia se siente "más seco" en movimiento que la superficie — correcto, es la diferencia entre instrumento y deleite.
• Reduce-motion como diseño primario, no como @media de cortesía. globals.css ya tiene el bloque prefers-reduced-motion (apaga animaciones/transiciones a 0.01ms). Lo conservo y lo elevo a principio: el estado quieto se diseña primero y la prueba nunca vive dentro de una animación. Trade-off asumido: algunos reveals de superficie se sienten más "secos" sin motion — aceptable, porque la información nunca se pierde (coherente con Integridad, no resultado).
• Tres curvas y cuatro duraciones es el mínimo, no la simplicidad fácil ni la sobre-ingeniería. Una sola curva colapsaría la prueba en la superficie; cinco serían vocabulario muerto. Tres curvas separan los tres caracteres reales que el sistema tiene (superficie corta / superficie larga / prueba). Cuatro duraciones cubren los cuatro registros temporales reales (aparición / micro / UI / superficie).

Briefs de generación

El motion final lo renderiza Rodrigo en herramienta. Estos briefs entregan dirección de movimiento lista para pegar. El descriptor instrumental es material (restrained / measured / instrument-precise), nunca premium ni plastic adjective (brand-context §4 No plastic adjectives). Señal de género explícita: ni brutal ni delicado (Género-neutral, brand-context §4). Los briefs M1/M2/M4 son del canal cinemático (film), que se especifica como unidad aparte; aquí entregan solo dirección de mood, no el spec terminado.

Brief M1 — Higgsfield Cinema Studio · Motion de superficie (mood film, sin rostro). Prompt: "Macro, slow, restrained motion study of a matte uncoated paper sachet and a rigid monthly box on a warm linen surface, raking soft directional light casting a deliberate honest shadow (wabi-sabi / Ando register), shallow depth of field. The camera move is minimal and measured — a slow lateral drift, no whip, no parallax theatrics, no orbit. Mood: composed, sober, present without performing. Editorial restraint of Aēsop / MUJI / COS / Monocle, never clinical, never lifestyle. Gender-neutral adult calm — no codified strength, no codified delicacy. Warm paper palette (warm gallery paper, bone, warm ink, one matte bronze detail, sand); no sage, no tier colors; no logos, no text, no faces, no hands. Easing reads as ease-out, settled, never elastic, never bouncy. 24fps, cinematic but quiet."

Brief M2 — Higgsfield Soul / Cinema · Fragmento humano (gesto, nunca rostro). Prompt: "Slow restrained shot of an adult hand setting the day's double sachet (one capsule sachet + one powder sachet — the real daily format) beside a cup on a warm surface, morning side light, honest matte materials. The gesture is unhurried, factual, domestic — a resolved daily act, not a ritual, not a performance, no smile, no face, no podium, no before/after framing. Camera holds, barely moves. Mood: alivio adulto — the quiet of something handled, never euphoria. Gender-neutral, sober adulthood. Warm editorial grade (Aēsop/Monocle), never stock-lifestyle, never aspirational gym dawn. No text, no metrics, no health claims."

Brief M3 — Recraft / After Effects-style spec · Reveal del sello verificado (UI motion reference). Prompt / spec a reproducir en herramienta de motion UI: "Reveal of a 'Verificado' seal inside a method card. Animate opacity 0→1 and translateY 4px→0 ONLY. Duration 90ms. Easing cubic-bezier(0.4, 0, 0.2, 1) (symmetric, no overshoot). NO scale, NO glow, NO box-shadow pulse, NO rotation, NO sound. If multiple proof items, stagger 30ms, total ≤120ms. The DATA BLOCK (mono, warm ink #26231F) is the unit that appears — the spine; the verified-state tick is a sub-element in matte bronze #927656 (--color-accent-display). No dedicated proof color — per locked color.mdx (#44). Read it as a precise instrument readout appearing, not a badge celebrating. Progressive enhancement: the block renders VISIBLE by default; the hide-then-reveal state is added only when JS confirms motion-safe. Reduced-motion: visible from first paint, no transition. Reference: Patagonia Footprint data presentation (hard data, no theatre); anti-reference: Centrum/Solgar badge pulse."

Brief M4 — Higgsfield Cinema · Transición de plano (superficie → evidencia), canal film. Prompt: "A slow restrained pull / rack-focus from the warm material surface of the box (linen, shadow, matte paper) to the printed proof block (dosage, third-party verification mark, lot code) on the same surface, same plane. The transition is one calm continuous move, ease-out, no snap. The proof block resolves sharp and legible — it does not animate dramatically, it comes into focus with clarity. Mood: the warmth holds the object, the proof is the structure inside it. Never invert: the proof never becomes the spectacle. No faces, no claims of results, no transformation imagery. (Film channel — cut rhythm and exact timing specified in the separate audiovisual production unit.)"

Open questions

• Color del estado verificado — RESUELTO por #44 (color.mdx locked): el dato en mono + Tinta; el tick de estado en Bronce display (--color-accent-display), micro-dosificado; sin pigmento de prueba dedicado. Lo único cromático vivo es el Pantone del bronce contra material/foil (packaging, Phase 5).
• Especificación cinemática completa para film/anuncio (curvas, duraciones, ritmo de corte para Higgsfield Cinema Studio como pieza terminada). Este doc da la postura y los briefs de mood (M1/M2/M4); el spec de producción audiovisual es su propia unidad de trabajo — el film es un canal con gramática propia, separado de los tokens de producto/web.
• El re-balanceo estático — cerrado por #44. El anti-pattern quedó enmendado (jerarquía de superficie de trabajo, cover-then-gallery) y color.mdx locked lo implementa; estos principios de motion sirven sin cambio bajo esa base — el motion no gobierna ese eje, lo ejecuta.
• Animación del wordmark/símbolo — RESUELTA (#72). logo.mdx clavó la geometría (símbolo de las dos «o» entrelazadas, supersede de C1). La entrada de marca queda especificada arriba (§ La entrada de marca — «salida de las letras», modo fundido): secuencia, curva de gesto aislada, regla una-vez-por-sesión, tres omisiones y saltable. El giro 360° del prototipo no entra en la entrada (techo de restraint): vive como comportamiento de estado de carga del símbolo.
• Confirmación de --duration-instant y --ease-proof contra el sitio en vivo (Phase 6). Propuestos con justificación y delta perceptual; el ajuste fino de 90ms / curva se valida en implementación real, igual que el doc de color difiere el ajuste de hex a la matriz WCAG.