System Requirements Document for imagen-video

1. Introduction

imagen-video es una herramienta de creación para consumidores hispanohablantes que convierte una fotografía de su galería en un video. El producto existe para producir un único resultado: un video generado a partir de la imagen de origen que el usuario elige.

La intención del producto, derivada de la fuente autoritativa, es doble:

1. Convertir una imagen en un video. El producto toma una imagen de origen y produce un video a partir de ella.
2. Permitir que el usuario acceda a su galería para seleccionar la imagen de origen de esa conversión.

La audiencia es el Creador de videos a partir de imágenes: una persona que quiere convertir una foto en un video, que accede a su galería para elegir la imagen de origen y cuyo resultado exitoso es un video generado desde la imagen seleccionada de su galería.

El registro emocional del producto no es "hype tecnológico" sino asombro tranquilo: el momento en que algo quieto empieza a moverse. La interfaz debe sentirse como una mesa de trabajo en silencio, no como un panel de control.

2. System Overview

imagen-video es una aplicación web con identidad propia de la aplicación, interfaz personalizada y estado durable. El usuario se autentica para acceder a sus conversiones guardadas, concede acceso a la galería de su dispositivo para elegir la imagen de origen, y obtiene un video generado a partir de esa imagen.

Actores:

• Creador de videos a partir de imágenes (persona humana activa, conjunto cerrado): inicia la conversión, elige la imagen de origen desde su galería, espera el resultado y reproduce el video generado.
• Servicio de generación de video (actor no-persona, sistema/proveedor): ejecuta la conversión de imagen a video a partir de la imagen de origen seleccionada y produce el resultado reproducible.
• Galería del dispositivo (superficie de proveedor externo): fuente de la imagen de origen; el usuario concede acceso a ella para seleccionar la imagen.

Comportamiento aceptado actual:

• Conversión de imagen a video ("Imagen a video").
• Acceso del usuario a su galería para seleccionar la imagen de origen.
• Autenticación del usuario para acceder a sus conversiones guardadas.
• Concesión de acceso a la galería del dispositivo para seleccionar la imagen de origen.

Exclusiones y límites estrechos:

• El acceso a la galería es una capacidad del usuario para elegir la imagen de origen; no se especificó ningún otro límite de acceso, participación o entrega. No se añaden capacidades adyacentes de gestión de cuenta, edición de video, bibliotecas sociales, ni módulos convencionales no solicitados.

2a. Product Interpretation and Delivery Boundary

Titularidad de la entrega y del acceso. El producto se entrega como una aplicación web de primera parte con interfaz personalizada y estado durable. La identidad es propiedad de la aplicación: el usuario debe autenticarse para acceder a sus conversiones guardadas, de modo que el trabajo de conversión quede ligado al participante correcto y pueda retomarse. La entrada pública es anónima y explica el producto antes de cualquier trabajo protegido; el acceso a la galería del dispositivo es una capacidad del usuario para elegir la imagen de origen, no un límite de acceso adicional.

Frontera actual / futuro. Todo el comportamiento descrito en este documento es actual: la conversión de imagen a video, el acceso a la galería para seleccionar la imagen de origen, la autenticación para acceder a las conversiones guardadas y la concesión de acceso a la galería del dispositivo. No se ha aceptado ningún requisito futuro. Cualquier capacidad no listada aquí queda fuera del alcance actual.

Trabajo de proveedor y de sistema. La galería del dispositivo es una superficie de proveedor externo que el usuario abre para elegir la imagen; la generación del video es trabajo de sistema/proveedor que produce el resultado que el usuario reproduce. Ninguno de estos actores sustituye la interacción humana: el usuario inicia, elige, espera, recibe y reproduce.

2c. Page Content and Component Coverage

Landing

• Información y estado: entrada pública anónima que explica el producto de conversión de imagen a video, su propósito y su audiencia antes de cualquier trabajo protegido. Titular de una sola línea "De una imagen, un movimiento." en Zen Kaku Gothic New peso 300, con subtítulo a 18px y un único botón de marco fino con relleno bermellón al hover, anclado justo debajo del titular. Composición editorial asimétrica en dos tercios: a la izquierda 5 de 12 columnas alineadas al borde inferior del viewport; a la derecha 7 columnas, una imagen en blanco y negro dentro de un marco de papel blanco de radio 2px, ligeramente desplazada hacia abajo y sangrando por el borde derecho del viewport, con un paneo interno lentísimo en bucle. Fondo papel #F4F1EA en toda la pantalla, sin degradado.
• Acciones primarias: iniciar el acceso para comenzar a convertir (botón de marco fino con relleno bermellón al hover).
• Acciones de soporte: ninguna; la navegación es una barra superior mínima con wordmark a la izquierda y un único enlace de acceso a la derecha, sin menú desplegable.
• Entidades de dominio: producto (imagen-video), audiencia (Creador de videos a partir de imágenes).
• Responsabilidades de componentes: barra superior mínima (wordmark + enlace de acceso); composición editorial de dos tercios; marco de papel blanco con margen interior de 24px alrededor de la imagen; reglas horizontales de 1px en #8C877C que separan bloques, con etiquetas de 13px en versalitas espaciadas +0.12em alineadas a la izquierda sobre la regla.

• Estados: carga — la imagen de archivo en blanco y negro aparece con fundido de 600–900ms con easing lineal; vacío — no aplica (contenido estático de portada); éxito — la portada se muestra completa con el titular, el subtítulo y el botón; error — si la imagen de archivo no carga, el marco de papel blanco permanece como campo vacío y el titular, subtítulo y botón siguen legibles y operables; recuperación — el usuario puede continuar al acceso sin depender de la imagen.
• Accesibilidad de viewport: en 375px la imagen pasa debajo del texto a ancho completo y el titular baja a 40px; el botón nunca se solapa con la imagen. Titular, wordmark, etiquetas y controles permanecen enteros dentro del viewport y su contenedor en 375px, 768px y 1280px.

Login

• Información y estado: superficie de acceso para que el creador verifique su identidad al volver y acceda a sus conversiones guardadas. Página de una sola columna centrada con márgenes laterales enormes (mínimo 96px en 1280px, 24px en 375px), un único objeto protagonista y reglas de 1px en gris piedra para separar secciones.
• Acciones primarias: verificar la identidad para acceder a las conversiones guardadas.
• Acciones de soporte: volver a la Landing mediante el wordmark o el enlace de la barra superior mínima.
• Entidades de dominio: identidad de la aplicación, conversiones guardadas del usuario.
• Responsabilidades de componentes: barra superior mínima; formulario de acceso enmarcado con controles de marco fino que se rellenan de tinta al activarse; etiquetas de 13px en versalitas espaciadas +0.12em; reglas horizontales de 1px en #8C877C.
• Estados: carga — los controles se muestran con fundido de 600–900ms con easing lineal; vacío — campos de acceso sin completar; éxito — la identidad queda verificada y el usuario continúa a Seleccionar imagen; error — credenciales no válidas: mensaje legible en carbón #1C1B18 sobre papel, sin cubrir ni recortar los controles; recuperación — el usuario corrige los datos y vuelve a intentar el acceso.
• Accesibilidad de viewport: etiquetas, campos y controles permanecen enteros dentro del viewport y su contenedor en 375px, 768px y 1280px.

Seleccionar imagen

• Información y estado: página protegida (requiere login) donde el usuario accede a su galería y elige la imagen de origen para la conversión. El objeto protagonista es la cuadrícula de la galería: aireada, con cada imagen respirando, sin rejillas densas de miniaturas con metadatos superpuestos. Cada imagen se muestra dentro de un marco de papel blanco con margen interior de 24px, de modo que la interfaz nunca toca la fotografía: el vacío es el marco.
• Acciones primarias: conceder acceso a la galería del dispositivo; elegir la imagen de origen; confirmar la imagen para iniciar la conversión.
• Acciones de soporte: volver a la Landing o al acceso mediante la barra superior mínima.
• Entidades de dominio: imagen de origen, galería del dispositivo, conversión en curso.
• Responsabilidades de componentes: barra superior mínima; cuadrícula aireada de la galería con marcos de papel blanco de radio 2px; control de concesión de acceso a la galería; control de confirmación de la imagen; punto bermellón #B4472E de 8px que respira (escala 1→1.15, 2s) mientras la conversión está en curso, acompañado de la línea de progreso de 1px que se rellena de izquierda a derecha; reglas horizontales de 1px en #8C877C con etiquetas de 13px en versalitas espaciadas +0.12em.
• Estados: carga — la cuadrícula de la galería aparece con fundido de 600–900ms con easing lineal; vacío — la galería no contiene imágenes o el acceso a la galería no se ha concedido: se muestra el estado vacío con la acción de conceder acceso; éxito — la imagen de origen queda seleccionada y confirmada, y la conversión comienza; error — el acceso a la galería es denegado o la imagen no puede leerse: mensaje legible en carbón #1C1B18 sobre papel, sin cubrir ni recortar controles; recuperación — el usuario puede volver a conceder el acceso a la galería o elegir otra imagen y reintentar.
• Accesibilidad de viewport: las imágenes pueden recortarse o sangrar según la dirección creativa, pero etiquetas, números y controles permanecen enteros dentro del viewport y su contenedor en 375px, 768px y 1280px.

Resultado

• Información y estado: página protegida (requiere login) donde el usuario ve o reproduce el video generado a partir de la imagen seleccionada. El objeto protagonista es el video, mostrado dentro de un marco de papel blanco con margen interior generoso, nunca a sangre completa salvo en el hero de resultado. La transición desde Seleccionar imagen es un fundido blanco de 800ms, como papel que se levanta, y se retira sobre esta página.
• Acciones primarias: reproducir el video generado.
• Acciones de soporte: volver a Seleccionar imagen para elegir otra imagen; volver a la Landing mediante la barra superior mínima.
• Entidades de dominio: video generado, imagen de origen, conversión guardada.
• Responsabilidades de componentes: barra superior mínima; marco de papel blanco con margen interior generoso alrededor del video; control de reproducción (el punto bermellón se convierte en el botón de reproducción al terminar); reglas horizontales de 1px en #8C877C con etiquetas de 13px en versalitas espaciadas +0.12em.
• Estados: carga — el video aparece con fundido de 600–900ms con easing lineal; vacío — no aplica mientras la conversión está en curso (el punto bermellón respira y la línea de progreso se rellena); éxito — el video generado se reproduce; error — la conversión falla: mensaje legible en carbón #1C1B18 sobre papel, sin cubrir ni recortar controles, con la opción de volver a Seleccionar imagen; recuperación — el usuario vuelve a Seleccionar imagen, elige otra imagen y reintenta la conversión.
• Accesibilidad de viewport: el video puede mostrarse a sangre completa en el hero de resultado según la dirección creativa, pero etiquetas, números y controles permanecen enteros dentro del viewport y su contenedor en 375px, 768px y 1280px.

3. Functional Requirements

FR-1 — Conversión de imagen a video. (explicit) Como Creador de videos a partir de imágenes, debo convertir una imagen de origen en un video.

• Actor: Creador de videos a partir de imágenes.
• Disparador/entrada: una imagen de origen seleccionada desde la galería.
• Resultado observable: un video generado a partir de la imagen seleccionada, reproducible en la página Resultado.
• Estado de acceso: requiere login (página protegida).
• Fallo material/recuperación: si la conversión falla, el usuario ve un mensaje legible y puede volver a Seleccionar imagen para reintentar.
• Continuación: el usuario reproduce el video generado o elige otra imagen.
• Aceptación: dado un usuario autenticado con una imagen de origen confirmada, cuando confirma la imagen, entonces se produce un video generado a partir de esa imagen y queda disponible para reproducirse.

FR-2 — Acceso a la galería para seleccionar la imagen de origen. (explicit) Como Creador de videos a partir de imágenes, debo acceder a mi galería para seleccionar la imagen de origen.

• Actor: Creador de videos a partir de imágenes.
• Disparador/entrada: el usuario abre la galería desde la página Seleccionar imagen.
• Resultado observable: la galería se muestra y el usuario puede elegir una imagen de origen.
• Estado de acceso: requiere login (página protegida).
• Fallo material/recuperación: si el acceso a la galería es denegado o la imagen no puede leerse, el usuario ve un mensaje legible y puede volver a conceder el acceso o elegir otra imagen.
• Continuación: el usuario confirma la imagen elegida e inicia la conversión.
• Aceptación: dado un usuario autenticado, cuando accede a su galería, entonces puede ver sus imágenes y seleccionar una como imagen de origen.

FR-3 — Autenticación para acceder a las conversiones guardadas. (required_inference) Como Creador de videos a partir de imágenes, debo autenticarme para acceder a mis conversiones guardadas.

• Actor: Creador de videos a partir de imágenes.
• Disparador/entrada: el usuario inicia el acceso desde la Landing o desde la barra superior mínima.
• Resultado observable: la identidad queda verificada y el usuario accede a sus conversiones guardadas.
• Estado de acceso: entrada anónima en Login; las páginas Seleccionar imagen y Resultado quedan protegidas.
• Fallo material/recuperación: si las credenciales no son válidas, el usuario ve un mensaje legible y puede corregir los datos y reintentar.
• Continuación: el usuario continúa a Seleccionar imagen.
• Aceptación: dado un usuario con conversiones guardadas, cuando verifica su identidad, entonces accede a sus conversiones guardadas.

FR-4 — Concesión de acceso a la galería del dispositivo. (required_inference) Como Creador de videos a partir de imágenes, debo conceder acceso a la galería de mi dispositivo para seleccionar la imagen de origen.

• Actor: Creador de videos a partir de imágenes.
• Disparador/entrada: el usuario abre la galería desde la página Seleccionar imagen.
• Resultado observable: el acceso a la galería del dispositivo queda concedido y las imágenes están disponibles para elegir.
• Estado de acceso: requiere login (página protegida).
• Fallo material/recuperación: si el usuario deniega el acceso, ve el estado vacío con la acción de conceder acceso y puede volver a intentarlo.
• Continuación: el usuario elige la imagen de origen.
• Aceptación: dado un usuario autenticado, cuando concede acceso a la galería de su dispositivo, entonces sus imágenes quedan disponibles para seleccionar la imagen de origen.

FR-5 — Reproducción del video generado. (required_inference) Como Creador de videos a partir de imágenes, debo ver o reproducir el video generado a partir de la imagen seleccionada.

• Actor: Creador de videos a partir de imágenes.
• Disparador/entrada: la conversión finaliza y la página Resultado se muestra.
• Resultado observable: el video generado se reproduce dentro de su marco de papel blanco.
• Estado de acceso: requiere login (página protegida).
• Fallo material/recuperación: si el video no puede reproducirse, el usuario ve un mensaje legible y puede volver a Seleccionar imagen.
• Continuación: el usuario vuelve a Seleccionar imagen para elegir otra imagen.
• Aceptación: dado un usuario autenticado con una conversión completada, cuando abre la página Resultado, entonces ve o reproduce el video generado a partir de la imagen seleccionada.

4. User Personas

Creador de videos a partir de imágenes

Contexto de producto. Es una persona hispanohablante que quiere convertir una foto en un video. Abre la aplicación, accede a su galería, elige una imagen y espera. Su registro emocional es de asombro tranquilo: el momento en que algo quieto empieza a moverse. La interfaz debe sentirse como una mesa de trabajo en silencio, no como un panel de control.

Objetivo principal. Obtener un video generado a partir de la imagen seleccionada de su galería.

Responsabilidades aceptadas y distintas.

• Iniciar la conversión de imagen a video.
• Acceder a su galería para seleccionar la imagen de origen.
• Autenticarse para acceder a sus conversiones guardadas.
• Conceder acceso a la galería de su dispositivo para seleccionar la imagen de origen.
• Ver o reproducir el video generado a partir de la imagen seleccionada.

Entradas y decisiones relevantes. La elección de la imagen de origen desde su galería; la concesión del acceso a la galería del dispositivo; la confirmación de la imagen para iniciar la conversión; la decisión de reproducir el video o volver a elegir otra imagen.

Interacciones con otros participantes aceptados. Con la galería del dispositivo (superficie de proveedor externo) para elegir la imagen de origen; con el servicio de generación de video (sistema/proveedor) que produce el video a partir de la imagen seleccionada.

Éxito observable. Un video generado desde la imagen seleccionada de su galería, reproducible en la página Resultado.

Qué hace diferente a este rol. No es un espectador pasivo ni un administrador de contenido: es el único actor humano que inicia, elige, espera, recibe y reproduce. Su trabajo es un acto contemplativo de una sola imagen que cobra vida, no la gestión de una biblioteca ni la edición de un video.

5. Core User Flows

Flujo 1 — Convertir una imagen de la galería en un video

1. Contexto de inicio: el Creador de videos a partir de imágenes llega a la página Landing de forma anónima.
2. Acción: en la Landing, el usuario lee el titular "De una imagen, un movimiento." y el subtítulo, y activa el botón de marco fino (relleno bermellón al hover) para comenzar.
3. Resultado observable: el usuario es llevado a la página Login.
4. Acción: en Login, el usuario verifica su identidad para acceder a sus conversiones guardadas.
5. Resultado observable: la identidad queda verificada y el usuario continúa a Seleccionar imagen.
6. Acción: en Seleccionar imagen, el usuario concede acceso a la galería de su dispositivo.
7. Resultado observable: la galería se muestra en una cuadrícula aireada, con cada imagen dentro de su marco de papel blanco.
8. Acción: el usuario elige la imagen de origen y confirma la imagen para iniciar la conversión.
9. Resultado observable: el punto bermellón #B4472E de 8px respira (escala 1→1.15, 2s) y la línea de progreso de 1px se rellena de izquierda a derecha mientras la conversión está en curso.
10. Resultado observable: al confirmar la imagen, un velo blanco #F4F1EA cubre la pantalla en 800ms y se retira sobre la página Resultado, sin deslizamientos ni cortinas de color.
11. Resultado observable: en Resultado, el video generado a partir de la imagen seleccionada aparece con un fundido de 600–900ms con easing lineal y el punto bermellón se convierte en el botón de reproducción.
12. Acción: el usuario reproduce el video generado.
13. Continuación: el usuario puede volver a Seleccionar imagen para elegir otra imagen y repetir la conversión.

Fallo y recuperación: si el acceso a la galería es denegado o la imagen no puede leerse, el usuario ve un mensaje legible en carbón #1C1B18 sobre papel, sin cubrir ni recortar controles, y puede volver a conceder el acceso o elegir otra imagen. Si la conversión falla, el usuario ve un mensaje legible y puede volver a Seleccionar imagen para reintentar.

Flujo 2 — Verificar la identidad al volver para acceder a las conversiones guardadas

1. Contexto de inicio: el Creador de videos a partir de imágenes vuelve a la aplicación y llega a la página Landing de forma anónima.
2. Acción: el usuario activa el enlace de acceso de la barra superior mínima.
3. Resultado observable: el usuario es llevado a la página Login.
4. Acción: el usuario verifica su identidad.
5. Resultado observable: la identidad queda verificada y el usuario accede a sus conversiones guardadas.
6. Continuación: el usuario continúa a Seleccionar imagen para elegir una imagen de origen.

Fallo y recuperación: si las credenciales no son válidas, el usuario ve un mensaje legible en carbón #1C1B18 sobre papel, sin cubrir ni recortar los controles, y puede corregir los datos y reintentar el acceso.

Flujo 3 — Reproducir el video generado

1. Contexto de inicio: el Creador de videos a partir de imágenes está autenticado y ha completado una conversión.
2. Acción: el usuario abre la página Resultado.
3. Resultado observable: el video generado a partir de la imagen seleccionada se muestra dentro de su marco de papel blanco con margen interior generoso, con un fundido de 600–900ms con easing lineal.
4. Acción: el usuario reproduce el video generado.
5. Resultado observable: el video se reproduce.
6. Continuación: el usuario puede volver a Seleccionar imagen para elegir otra imagen.

Fallo y recuperación: si el video no puede reproducirse, el usuario ve un mensaje legible y puede volver a Seleccionar imagen.

6. Visuals Colors and Theme

Musa: Kenya Hara. Titular: "De una imagen, un movimiento."

El lenguaje visual completo está construido sobre "una sola cosa, rodeada de vacío": la estética de "blanco" —papel, márgenes enormes, tipografía que susurra, movimiento casi nulo— convierte el proceso de conversión en un acto contemplativo. La foto seleccionada es el único objeto en la página, y el video resultante aparece como si el papel mismo hubiera empezado a moverse. No compite con la imagen del usuario, la enmarca.

Paleta (modo claro):

Sin sombras de color, sin degradados; la jerarquía viene del espacio, no del color.

Tipografía:

• Headings: Zen Kaku Gothic New — peso 300–400, tracking amplio (+0.06em), tamaños grandes pero nunca gritados; titulares en minúscula con inicial capital, jamás mayúsculas sostenidas. El titular de portada es una sola línea que respira: clamp(40px, 9vw, 112px).
• Body: Shippori Mincho.
• Escala modular 1.333: 112 / 84 / 63 / 47 / 35 / 26 / 20 / 16.
• Cuerpo de texto: 18px con line-height 1.9 (lectura de papel).
• Etiquetas: 13px con tracking +0.12em en versalitas espaciadas.

Lenguaje de forma: rectángulos de proporción cuadrada y 4:3 con esquinas de radio 2px (casi rectas, como una hoja cortada). Reglas de 1px en gris piedra para separar secciones. Ningún blob, ningún pill, ningún borde grueso. Los controles son marcos finos que se rellenan de tinta al activarse. La imagen y el video se muestran siempre dentro de un marco de papel blanco con margen interior generoso, nunca a sangre completa salvo en el hero de resultado.

Ritmo de espaciado: composición centrada de una sola columna con márgenes laterales enormes (mínimo 96px en 1280px, 24px en 375px). Cada página tiene un único objeto protagonista: en Landing es la frase y una imagen en movimiento; en Seleccionar imagen es la cuadrícula de la galería; en Resultado es el video. Nada compite en la misma pantalla. Las secciones se separan con reglas horizontales de 1px y mucho aire vertical (mínimo 120px entre bloques). La navegación es una barra superior mínima: wordmark a la izquierda, un único enlace de acceso a la derecha, sin menú desplegable.

Estilo de imagen: la propia imagen del usuario es la única fotografía de la aplicación; se presenta enmarcada sobre papel blanco, con sombra de contacto apenas perceptible. En Landing, una imagen de archivo en blanco y negro de un objeto cotidiano (una taza, una rama, una tela) que se mueve muy lentamente, tratada como still-life sobre fondo liso. Cero ilustración, cero iconos de color, cero mockups de dispositivo. Los iconos del sistema son trazos de 1px en carbón.

Evitar: cualquier degradado, blob o resplandor de color; el fondo es papel plano. Azul, índigo o violeta como color de interfaz o de botón (nada de #2563EB ni vecinos). Tarjetas con hover-lift, sombras de color o esquinas muy redondeadas tipo pill. Rejillas densas de miniaturas con metadatos superpuestos; la galería es aireada y cada imagen respira. Tipografías Inter, Roboto, Arial, Helvetica, Poppins o system-ui para titulares o cuerpo. Animaciones rebotantes, partículas, marquesinas o kinetismo tipográfico. Iconos ilustrados a color, emojis o mockups de teléfono flotando. Texto legible o controles que se recorten, se cubran o salgan del viewport en cualquier tamaño.

7. Signature Design Concept

Portada sin titular centrado sobre degradado. En su lugar, una composición editorial asimétrica en dos tercios:

• A la izquierda, ocupando 5 de 12 columnas y alineada al borde inferior del viewport, el titular de una sola línea "De una imagen, un movimiento." a clamp(40px, 9vw, 112px) en Zen Kaku Gothic New peso 300, con el subtítulo a 18px y un único botón de marco fino con relleno bermellón al hover, anclado justo debajo del titular.
• A la derecha, 7 columnas, una imagen en blanco y negro dentro de un marco de papel blanco de radio 2px, ligeramente desplazada hacia abajo y sangrando por el borde derecho del viewport, con un paneo interno lentísimo en bucle.
• El fondo es papel #F4F1EA en toda la pantalla, sin degradado.
• En 375px, la imagen pasa debajo del texto a ancho completo y el titular baja a 40px; el botón nunca se solapa con la imagen.

Movimientos de firma:

1. Titular de portada de una sola línea en peso 300 con tracking amplio, anclado al borde inferior de la composición en lugar de centrado, con el CTA inmediatamente debajo como una firma.
2. La imagen del usuario siempre enmarcada dentro de un marco de papel blanco con margen interior de 24px, de modo que la interfaz nunca toca la fotografía: el vacío es el marco.
3. Un único punto bermellón #B4472E de 8px que respira (escala 1→1.15, 2s) mientras la conversión está en curso, acompañado de la línea de progreso de 1px que se rellena de izquierda a derecha; al terminar, el punto se convierte en el botón de reproducción.
4. Transición de página como fundido de papel: al confirmar la imagen, un velo blanco #F4F1EA cubre la pantalla en 800ms y se retira sobre la página de Resultado, sin deslizamientos ni cortinas de color.
5. Reglas horizontales de 1px en #8C877C que separan cada bloque, con etiquetas de 13px en versalitas espaciadas +0.12em alineadas a la izquierda sobre la regla, como anotaciones de un catálogo.

8. Interaction Model & Motion Direction

Interaction Model: Static (direction) Motion Tempo: still Hero Dimensionality: flat

Landing Hero Motion Brief

• Sujeto focal: una imagen de archivo en blanco y negro de un objeto cotidiano (una taza, una rama, una tela), tratada como still-life sobre fondo liso, dentro de un marco de papel blanco de radio 2px, ligeramente desplazada hacia abajo y sangrando por el borde derecho del viewport.
• Tesis de entrada → transformación → resultado: el usuario llega a la portada anónima → la imagen en blanco y negro se abre lentamente en un paneo de 20s, en bucle, con opacidad reducida → el titular "De una imagen, un movimiento." y el botón de marco fino quedan legibles y operables, y el usuario puede iniciar el acceso.
• Vocabulario de movimiento: casi nada. Fundidos de 600–900ms con easing lineal para la aparición del video; un único bucle sutil en el hero (la imagen que se abre lentamente en un paneo de 20s, en bucle, con opacidad reducida). Sin rebotes, sin partículas, sin parallax.
• Primer fotograma compuesto: fondo papel #F4F1EA en toda la pantalla, sin degradado; a la izquierda 5 de 12 columnas alineadas al borde inferior del viewport con el titular de una sola línea a clamp(40px, 9vw, 112px) en Zen Kaku Gothic New peso 300, subtítulo a 18px y botón de marco fino justo debajo; a la derecha 7 columnas con la imagen en blanco y negro dentro de su marco de papel blanco.
• Estado con prefers-reduced-motion: el paneo se detiene en un fotograma fijo y los fundidos se vuelven instantáneos.

9. Non-Functional Requirements

NFR-1 — Estado durable. (required_inference) El producto mantiene estado durable: las conversiones del usuario quedan guardadas y accesibles tras la autenticación. Razón: el usuario debe autenticarse para acceder a sus conversiones guardadas, lo que exige que esas conversiones persistan ligadas a su identidad.

NFR-2 — Identidad propiedad de la aplicación. (required_inference) La identidad es propiedad de la aplicación: el usuario verifica su identidad para acceder a sus conversiones guardadas. La entrada pública (Landing) es anónima; las páginas Seleccionar imagen y Resultado quedan protegidas. Razón: el trabajo de conversión debe quedar ligado al participante correcto y poder retomarse.

NFR-3 — Acceso a la galería del dispositivo. (explicit) El acceso a la galería es una capacidad del usuario para elegir la imagen de origen; no se especificó ningún otro límite de acceso, participación o entrega. Razón: restricción dura explícita de la fuente autoritativa.

NFR-4 — Legibilidad y controles enteros en todo viewport. (explicit) Titulares, wordmarks, etiquetas, números, textos de tarjetas y controles permanecen enteros dentro del viewport y su contenedor en 375px, 768px y 1280px, ajustándose con wrapping o escalado (por ejemplo font-size: clamp(...) con su tamaño móvil), y ningún otro elemento cubre parte de ellos. La imaginería, la decoración y el movimiento pueden recortarse, sangrar por un borde, rotarse, solaparse o cortarse exactamente como pide la dirección creativa, siempre que no cubran texto legible ni controles. Razón: restricción dura explícita de la dirección creativa.

NFR-5 — Movimiento reducido. (explicit) Con prefers-reduced-motion, el paneo se detiene en un fotograma fijo y los fundidos se vuelven instantáneos. Razón: restricción dura explícita de la dirección creativa.

NFR-6 — Sin la plantilla genérica índigo/azul sobre blanco. (explicit) La plantilla genérica de SaaS índigo/azul sobre blanco está prohibida para este proyecto. Razón: restricción dura explícita de la dirección creativa.

10. Tech Stack

• Frontend: React (aplicación web de una sola columna, composición editorial, animación CSS de fundidos y paneo).
• Backend: Python / FastAPI (API de conversión de imagen a video, autenticación, estado durable de las conversiones guardadas).
• Almacenamiento: almacenamiento persistente para las conversiones guardadas y las imágenes de origen asociadas.
• Contenedores: Docker / docker-compose para el servicio de backend y sus dependencias.
• Generación de video: servicio de generación de video (sistema/proveedor) que ejecuta la conversión de imagen a video a partir de la imagen de origen seleccionada.

11. Assumptions and Constraints

Supuestos:

• A-1 (required_inference): El usuario debe autenticarse para acceder a sus conversiones guardadas; la identidad es propiedad de la aplicación.
• A-2 (required_inference): El usuario debe conceder acceso a la galería del dispositivo para seleccionar la imagen de origen.
• A-3 (required_inference): Las conversiones del usuario persisten como estado durable ligado a su identidad.
• A-4 (required_inference): La generación del video es trabajo de sistema/proveedor que produce el resultado reproducible por el usuario.

Restricciones:

• C-1 (explicit): El acceso a la galería es una capacidad del usuario para elegir la imagen de origen; no se especificó ningún otro límite de acceso, participación o entrega.
• C-2 (explicit): Titulares, wordmarks, etiquetas, números, textos de tarjetas y controles permanecen enteros dentro del viewport y su contenedor en 375px, 768px y 1280px; ningún otro elemento cubre parte de ellos.
• C-3 (explicit): Con prefers-reduced-motion, el paneo se detiene en un fotograma fijo y los fundidos se vuelven instantáneos.
• C-4 (explicit): La plantilla genérica de SaaS índigo/azul sobre blanco está prohibida para este proyecto.
• C-5 (explicit): Sin degradados, blobs o resplandores de color; el fondo es papel plano. Sin azul, índigo o violeta como color de interfaz o de botón. Sin tarjetas con hover-lift, sombras de color o esquinas tipo pill. Sin rejillas densas de miniaturas con metadatos superpuestos. Sin tipografías Inter, Roboto, Arial, Helvetica, Poppins o system-ui para titulares o cuerpo. Sin animaciones rebotantes, partículas, marquesinas o kinetismo tipográfico. Sin iconos ilustrados a color, emojis o mockups de teléfono flotando.

12. Glossary

• Imagen de origen: la fotografía de la galería del usuario que se convierte en video.
• Galería: la colección de imágenes del dispositivo del usuario, accesible mediante la concesión de acceso correspondiente.
• Conversión: el proceso que transforma una imagen de origen en un video.
• Video generado: el resultado reproducible de la conversión de una imagen de origen.
• Conversiones guardadas: las conversiones del usuario que persisten ligadas a su identidad y a las que accede tras autenticarse.
• Creador de videos a partir de imágenes: la persona humana activa que convierte una foto de su galería en un video.
• Punto bermellón: el punto #B4472E de 8px que respira (escala 1→1.15, 2s) mientras la conversión está en curso y que se convierte en el botón de reproducción al terminar.
• Fundido de papel: la transición de página en la que un velo blanco #F4F1EA cubre la pantalla en 800ms y se retira sobre la página de Resultado.