Hoy apps/mobile-client tiene un AnimatedSplash que hace aparecer el isotipo y ya. La app nueva hace otra cosa: las cinco letras del wordmark son cinco paths distintos en tools/logo-source.mjs, y eso permite animarlas una por una desde el vector real, sin redibujar nada y sin que check-logo.mjs tenga de qué quejarse.

Cada letra entra desde fuera del marco, en su propia dirección y con su propio giro de entrada, y converge con ease-spring y stagger de 60 ms. Cuando las cinco aterrizan, un destello celeste marca el golpe; cae el punto rojo desde arriba, se dibuja la regla --grad-marca con scaleX y aparece «Importamos futuro» en Oswald. Es la marca hecha movimiento: traer cosas de lejos y que lleguen a su sitio.

Izquierda: el splash corriendo (recarga la página para verlo otra vez). Derecha: la pantalla de carga, que es el mismo fotograma final con la barra abajo — congelada aquí a 2,60 s para poder mirarla.

La coreografía, fotograma a fotograma

Una animación se mira, no se asume: seis instantes del mismo --T, congelados con un delay negativo.

El copy es el de la cantera, literal (ONBOARDING_SLIDES, con sus tramos en negrita). Lo que cambia es la ilustración: en vez de las cuatro fotos de stock de apps/mobile-client, cada slide lleva una escena construida con los tokens sobre la noche de marca — el avión que hace la ruta Cantón → Caracas, el riel de estados con el nodo vivo, la estantería del almacén, las burbujas del acompañamiento. Cuatro JPG no son un sistema; cuatro escenas sí, y se pueden animar.

Al deslizar, la escena viaja a 0,4× del gesto y el texto a 1×: el parallax es lo que hace que cuatro pantallas se sientan un recorrido y no cuatro pantallas. Los puntos de paso se estiran a pastilla en el activo (260 ms). Omitir está arriba a la derecha con área de toque de 44 px desde el primer slide — nadie queda encerrado en el recorrido.

1. El avión hace la ruta, no la ilustra

   El avión viaja por el mismo arco que dibuja la línea punteada: la curva es su recorrido, no un adorno detrás. Con offset-rotate:auto se inclina solo — sale de Cantón mirando arriba, cruza el ápice horizontal y entra a Caracas mirando abajo, sin un keyframe de rotación. Ciclo de 5,4 s, entra y sale con un fade para que el bucle no salte. En nativo: getPointAtLength() del path con react-native-svg + Reanimated, o Path.getPosTan() de Skia; la cadena de la curva es la misma.

2. La regla degradada abre cada slide

   42 × 3 px de --grad-marca sobre el título. Es la firma de la casa: la misma que abre los correos, la placa y las cabeceras de auth. Cuatro slides sin ella serían cuatro pantallas cualesquiera.

3. El último slide no ofrece Omitir

   En el cuarto el botón se reserva el espacio pero se apaga: no hay nada que saltar, y la única acción es Comenzar. Se conserva el hueco para que el título no salte de posición entre slides.

4. Se ve una sola vez, y se puede volver

   La bandera vive en expo-secure-store (MMKV para lo no sensible). El gate de index.tsx decide onboarding → login → app. Se corrige de paso la deuda de la cantera: RESET_ONBOARDING = true quedó encendido en mobile-client.

5. Contraste medido sobre la escena

   El texto va sobre --marino-deep, no sobre la foto: el cuerpo en rgba(255,255,255,.84) da 12,4:1 y el título en blanco 16,7:1. Era el problema real de la versión con fotografía, donde el contraste dependía de qué imagen tocara.

La spec Aurora ya decía qué pasa en móvil: «el panel del client colapsa y la aurora queda como acento del header». Aquí está, medido para 390: cabecera de 300 px con --grad-hero, los dos glows a la deriva (celeste 12 s, lima 16 s, en alternate) y el barco del manual al 7 %; debajo, una hoja clara de radio 14 que muerde la aurora 20 px y sostiene los campos del producto tal cual los definió MF-01. En las pantallas de trabajo largo (registro, OTP, perfil) la cabecera baja a 148 px: la marca sigue presente, pero manda el formulario.

El clic en Iniciar sesión dispara a la vez la petición y la placa. La placa tiene piso de 1,4 s: la latencia se esconde detrás de la marca y el tiempo percibido es uno, no dos. Si falla, la placa se retira en 240 ms, el error aparece bajo el campo y el foco vuelve al correo — nunca queda una celebración colgada sobre un login que no ocurrió.

1. La hoja muerde la aurora

   Radio 14 arriba y una sombra 0 −12px 32px rgba(1,18,58,.28) — marino, no negro, como el resto de superficies elevadas de la capa de marca. Esos 20 px de solape son lo que hace que la pantalla se lea como una sola cosa y no como dos bloques apilados.

2. Un solo proveedor

   La puerta ofrece correo y contraseña y Continuar con Google. Nada más: no hay Sign in with Apple (decisión de Fabrizio, sección 12). Con un único botón de OAuth, el separador «o» separa dos caminos de verdad y la misma pantalla sirve igual en iOS y en Android — sin condicionales de plataforma.

3. El clic en OAuth atenúa, no anima

   La hoja nativa de Google se traga la pantalla: cualquier coreografía que empiece ahí se pierde. El formulario baja a .42 de opacidad con saturación .7 y el botón queda ocupado. La placa espera en /auth/continue, que es donde de verdad se abre la sesión.

4. El estado real no es la placa

   La placa es aria-hidden y decorativa. Lo que lee el lector de pantalla es un aria-live="polite": «Iniciando sesión…», y el mensaje de error si falla. Con reduced motion no hay placa: el botón conserva su spinner y se navega directo.

La placa del centro está congelada a 1,50 s — la coreografía completa, que es lo que se ve mientras la sesión termina de abrirse. En vivo se ve entera cada vez que se recarga la sección 01.

El reparto real de la web (no el del brief): el paso 1 pide nombre, apellido, correo, país + teléfono, términos y notificaciones; el paso 2 es solo la contraseña con su checklist de seis reglas. Se replica así, con la cabecera corta de 148 px y el paso en la esquina — Paso 1 de 2, cifras tabulares.

El banner de referido se resuelve con ?code= o con el deep link mogosapp://register?code=, consulta promotions/by-code y se queda en first-touch. Va encima del formulario, en marino con el halo de lima: es la única mancha de lima en un formulario de toda la familia, y por eso se ve.

1. El paso vive en la aurora, no en el formulario

   Flecha de vuelta de 36 px (con hitSlop de 8 → 52 px de área real) sobre un lavado blanco al 8 %, wordmark reducido a 86 px y Paso 1 de 2 a la derecha. La hoja clara empieza directamente con el título: cero chrome repetido dentro del área de trabajo.

2. La checklist es la validación, no un adorno

   Las seis reglas de lib/password-validation.ts se marcan en vivo mientras se escribe, en verde de producto. Es la misma lista que usa reset-password y activate: una sola fuente para las tres pantallas.

3. El país es un bottom sheet, no un dropdown

   MF-01 ya lo decidió: Select abre en hoja inferior con las filas de SelectItem. Con bandera, prefijo y buscador — 200+ países no caben en un menú flotante de 390 px.

4. La placa aparece al final del paso 2

   Crear la cuenta abre sesión, así que ahí sí va la coreografía (spec Aurora §2). En el paso 1 no: ahí el botón mantiene su spinner y ya. Evento user_signed_up al volver.

El OTP de auth es el que fijó MF-01: 44 × 48, radio 11, tinta marino, foco celeste-deep con anillo al 18 % y la caja levantada 1 px, cursor parpadeante. Inválido en rojo con anillo al 14 % y sacudida de 160 ms. Nada de eso es el InputOTP agrupado de shadcn: ese queda para códigos fuera de auth.

Lo único que cambia entre correo y WhatsApp es la pastilla de canal —dónde llegó el código y a qué dirección o número— y el texto del reenvío. El cooldown va en cifras tabulares para que el número no baile mientras baja.

1. Autorrelleno del sistema

   En iOS textContentType="oneTimeCode" y en Android el SMS Retriever / lectura de portapapeles: el código entra solo desde la notificación de WhatsApp o del correo, y las seis cajas se llenan de una. Si eso pasa, se verifica sin tocar Continuar.

2. El teclado no tapa las cajas

   El bloque OTP queda por encima del pliegue del teclado numérico (≈ 291 px en iPhone 15) y el botón sube con KeyboardAvoidingView. Es la razón de que la cabecera aquí sea de 148 px y no de 300.

3. Reenvío con cooldown visible

   Se muestra el contador, no un botón apagado sin explicación: «Reenviar en 42 s» en cifras tabulares y, al llegar a cero, «Reenviar código» en enlace. Al reenviar, las cajas se vacían y el foco vuelve a la primera.

4. El error no borra lo escrito

   Las seis cajas se ponen en rojo con el mensaje debajo, pero el código sigue ahí: casi siempre es un dígito mal leído, no el código entero. Sacudida de 160 ms y haptic notificationError.

El enlace de recuperación que manda Supabase apunta a la web, no a la app: los universal links llegan en MF-14. Hasta entonces el camino principal es el código inline — se pide el correo, llega un OTP y la contraseña se cambia sin abrir el navegador. El enlace sigue existiendo y funciona, pero no es el camino que la pantalla propone.

Los tres estados de reset-password que la web ya tiene —«Verificando el enlace…», «Enlace no válido» con Solicitar un enlace nuevo, y el formulario— se heredan tal cual: el primero es un Skeleton sobre la hoja clara, el segundo un Alert destructivo con un solo botón.

Quien ya era cliente de Mogos v1 no se registra: activa. Tres pantallas —bienvenida, código, contraseña nueva— con la cabecera larga de 300 px, porque aquí la marca sí tiene que hablar: la persona ya conoce Mogos y lo que necesita es entender por qué le piden algo. El correo llega enmascarado desde auth/migration-status, y si no es el suyo hay una salida a soporte por WhatsApp con el mensaje ya escrito.

Correo, teléfono, cédula y dirección. El stepper vive arriba de la hoja clara con la barra de progreso de la web, y cada paso tiene su Saltar: se puede entrar a la app con el perfil a medias y volver después. Entre paso y paso hay una StepSuccessTransition de 640 ms —un anillo celeste con el check— que da la sensación de avance sin cambiar de pantalla.

En modo migration los campos llegan pre-cargados de la cuenta v1 y cada uno lleva la pastilla «De tu cuenta anterior» en celeste: se ve de un vistazo qué escribió la persona y qué trajo el sistema. El paso 4 —la dirección— tiene sección propia, porque tiene mapa.

1. Saltar es un botón, no una letra chica

   ghost a ancho completo debajo del primario. Si la persona no tiene la cédula a mano, la salida está a la vista y con 44 px de alto: esconderla no consigue el dato, consigue abandonos.

2. El stepper no permite saltar hacia adelante

   Los pasos hechos quedan en azul con el check y se puede volver a ellos; los pendientes están en gris y no responden. El label accesible es «Progreso de registro» y cada paso anuncia completado / paso actual / pendiente.

3. «De tu cuenta anterior» es informativa, no bloqueante

   Pastilla en celeste-soft con tinta celeste-ink (AA sobre ese fondo). El campo sigue siendo editable: el dato viejo es una sugerencia, no un candado.

4. La transición cubre la hoja, no la aurora

   El velo blanco al 96 % vive dentro de la hoja clara; la cabecera de marca y el stepper se siguen viendo. Así el avance se lee sin que la pantalla parezca haber cambiado de sitio.

En la web, capturar una dirección es un modal con el mapa dentro. En un teléfono eso es al revés: el mapa es la pantalla —a sangre, de borde a borde— y el formulario es una hoja inferior en tres alturas (colapsada 132 px → media 420 → completa). Así el mapa nunca queda del tamaño de un sello, que es lo que pasa cuando se porta el diálogo tal cual.

El pin no se arrastra: está clavado en el centro de la pantalla y lo que se mueve es el mapa debajo, con su sombra en el suelo. Es el gesto que la gente ya conoce de cualquier app de entrega, se hace con el pulgar y no exige puntería. Al soltar, geocoding/reverse devuelve la dirección y la hoja se actualiza; mientras tanto dice «Actualizando ubicación…», y si no hay resultado, «Ubicación seleccionada (sin detalle)» con el camino manual a mano.

1. La teja es de Google, y se dice

   El mapa no es superficie de marca y no hay token para él: se representa con los grises del producto (tierra gray-100, manzanas gray-50, vías blancas), el agua en celeste-soft y los parques en lima-soft. Es on-system y se lee como el mapa que va a salir con PROVIDER_GOOGLE. Las miniaturas —la de la tarjeta de confirmación— son Static Maps por expo-image, no un mapa montado.

2. Tres alturas, no un modal

   132 px para leer la dirección y seguir; 420 px para el kit completo; completa cuando el teclado sube. La hoja arrastra con el pulgar y el mapa sigue vivo detrás — en un modal, no.

3. Los campos cambian con el tipo de lugar

   Casa pide «N° o nombre de la casa»; apartamento pide edificio, torre, piso y apto; oficina, centro empresarial y local; almacén, nombre del galpón y n° de portón. El alias se sugiere solo según el tipo y se puede cambiar. Es el mismo mapa de campos de la web, sin recortar.

4. Sin mapa no se guarda

   Si Google Maps no carga, la web ya lo dice: «No es posible guardar una dirección sin mapa». En nativo igual — con Reintentar y, si el permiso de ubicación está denegado, un atajo a los ajustes del sistema. Nunca se guarda una dirección sin coordenadas.

Tres pantallas que cierran la familia. /auth/continue es donde la placa cobra sentido en OAuth: la sesión se abre al volver de Google, no al tocar el botón. El modal de bienvenida usa los cuatro slides de la web (onboarding.slides.*) — que no son los mismos del recorrido pre-sesión: uno enseña la marca, el otro enseña el producto, y los dos se conservan. Y access-denied no es un error del producto: es la última pantalla de la puerta, con dos salidas reales.

1. La placa de OAuth dice de quién es la sesión

   Bajo la coreografía, la cuenta que volvió de Google en una pastilla de vidrio y «Abriendo tu sesión…». Es el único sitio donde la placa lleva texto además del tag: en OAuth la persona acaba de elegir entre varias cuentas y necesita ver cuál entró.

2. La bienvenida se ve una vez, y es del producto

   Hoja alta sobre el velo rgba(2,27,84,.70) con el dashboard atenuado detrás: se entiende que ya se está dentro. Cuatro slides, Omitir arriba a la derecha, y la escena en marino dentro de una tarjeta — la marca visita el producto, no lo repinta.

3. Access-denied dice el porqué y da dos salidas

   Nombra la cuenta que falló y el motivo (cuenta de operaciones, no de cliente). Salir a otra cuenta, o escribirnos con el mensaje ya redactado. Nunca un «no tienes permiso» sin nombre ni salida.

4. La única full-noche de la familia

   Aquí la aurora ocupa las 844 px: es la pantalla donde no hay formulario que sostener y donde el tono tiene que cambiar. El mismo recurso que la spec Aurora reserva para la puerta de admin.

Todo lo que se ve en esta página es CSS porque el estudio es HTML; en la app es Moti sobre Reanimated, que es el stack cerrado en MF-01. Esta tabla es el puente: cada coreografía con su duración, su curva y la forma que toma en nativo. Las duraciones salen de la escala del estudio (80 / 160 / 260 / 420 / 640) que MF-01 dejó como pregunta abierta; si Fabrizio prefiere los ms literales de la web, se cambia el token y esta tabla se recalcula sola.

Con AccessibilityInfo.isReduceMotionEnabled se apagan las cuatro primeras filas y el parallax; la marca aparece con un fade de 260 ms, los glows quedan quietos y el piso de la placa baja a 600 ms. Nada de esto cambia lo que se puede hacer, solo cómo llega.

• Splash

  Convergencia, no aparición

  Las cinco letras entran desde fuera del marco y convergen con ease-spring y stagger de 60 ms. Se descarta el ascenso escalonado del link-in-bio (correcto pero ya visto) y el trazo dibujado (los paths son formas rellenas: el stroke se ve grueso y falso).

• Duraciones

  Una coreografía, dos tiempos

  Los keyframes van en porcentaje sobre --T: 4600 ms el splash de arranque, 3500 ms la placa —con lo que el piso cae exacto en 1,4 s, el que fija la spec Aurora. Un solo bloque de código para las dos.

• Shell

  Noche arriba, día abajo

  Aurora de 300 px en las puertas (login, OAuth, activate, confirmación), 148 px en el trabajo largo y 844 px solo en access-denied. La hoja clara muerde 20 px, radio 14, sombra a marino.

• Campos

  Los del producto, sin excepción

  Dentro de la hoja todo es Contexto B verbatim de MF-01. Cero campos de vidrio sobre la noche: sería un segundo sistema de formulario que mantener, y la web no lo tiene.

• Onboarding

  Escenas vectoriales

  Cuatro escenas con los tokens en vez de las cuatro fotos de stock de la cantera. Copy literal de onboarding-data.ts; parallax a 0,4× del gesto. Contraste medido sobre la noche, no sobre una foto que cambia.

• Bienvenida

  Dos onboardings, a propósito

  El recorrido pre-sesión (4 slides de la cantera, marca) y el modal post-registro (4 slides de la web, producto) son piezas distintas y las dos se conservan. Mismo lenguaje visual, distinto trabajo.

• OAuth

  El clic atenúa, el regreso celebra

  signInWithIdToken con @react-native-google-signin (DECISIONS #14, sin la parte de Apple). La hoja del sistema se traga la pantalla: la placa vive en /auth/continue, con la cuenta que volvió a la vista.

• Mapa

  El mapa es la pantalla

  react-native-maps + PROVIDER_GOOGLE a sangre, pin fijo al centro con el mapa moviéndose debajo, hoja inferior en tres alturas. Miniaturas por Static Maps con expo-image. Sin mapa no se guarda dirección.

• Registro

  El reparto real, no el del brief

  Paso 1: nombre, apellido, correo, país + teléfono, términos, notificaciones. Paso 2: solo la contraseña con su checklist. Es lo que renderiza register-step1.tsx / step2.tsx hoy, que es la verdad (DECISIONS #3).

• Recuperación

  Código inline como camino principal

  El enlace de Supabase apunta a la web hasta MF-14. La pantalla propone el OTP; el enlace sigue funcionando pero no es lo que se ofrece.

• Proveedores

  Sin Sign in with Apple

  Decisión de Fabrizio (2026-09-01): la app no ofrece Apple. Ni botón, ni flag, ni el botón apagado que la web arrastra en register/page.tsx. OAuth es solo Google. La cláusula 4.8 de la App Store se revisa cuando la app vaya a salir (MF-15), no aquí: en MF-02 no hay nada que esconder detrás de una condición.

• Pregunta · fotos

  ¿Qué pasa con las 4 fotos del onboarding viejo?

  onboarding-1..4.jpg de apps/mobile-client quedan sin uso con las escenas vectoriales. ¿Se van en MF-17 con el resto de la cantera, o alguna se recicla (tutoriales, landing, correos)?

Las dos preguntas que dejó MF-01 ya están cerradas: Fabrizio eligió el 2026-08-30 las sombras tintadas a marino —con el FAB en su índigo— y la escala de duraciones del estudio (80/160/260/420/640). Esta pieza usa las dos, así que por ese lado no queda nada abierto.