Sobre esta plantilla
Wellness Companion se capturó a 1440x1080 y se conserva como especificación, no como imagen de galería. La paleta es azul intenso #1A1A1E de base, con la tipografía Helvetica, Arial. Se entrega como React y Tailwind CSS, y la captura se fija a 1440x1080 antes de escribir código. El movimiento se queda en transiciones de 0.5s, cubic-bezier(0.22, 1, 0.36, 1) y un vídeo en bucle de fondo. Tómalo como el brief de landing page para un producto de salud o bienestar que tiene que aguantar una reconstrucción, no solo un primer vistazo.
Pensado para
- Profesionales del marketing de producto que necesitan que cada landing page siga leyéndose con 5,9s de vídeo en bucle detrás del texto.
- Quien le pase el brief de landing page a un modelo usará el prompt de 4.095 caracteres como punto de partida.
- Pensado para responsables de contenidos que reescriben un diseño de landing page cuyo titular tiene que seguir siendo tan largo como el de Wellness Companion.
Qué incluye
- Números que llegan al montaje. El brief fija pasos de espaciado de 12px, transiciones de 0.5s y easing cubic-bezier(0.22, 1, 0.36, 1) y deja el resto a la disposición, que es lo contrario de una escala que crece sola. El espaciado se cita en las mismas unidades que el tipo, de modo que ambos se comparan directamente. Conserva los valores que parecen arbitrarios.
- Un clip hace todo el trabajo. El marco de 1440x1080 lo llena un solo bucle que se reproduce detrás del texto y no pide controles. El bucle es lo bastante corto (5,9s) para que el ojo lo lea como textura y no como una línea de tiempo.
- La cuadrícula fija el orden. La cuadrícula fija el orden de lectura: paneles del mismo peso, una idea cada uno, compuestos en Helvetica, Arial a un tamaño pequeño para que la estructura siga visible. Los encabezados dentro de los paneles están un paso por encima de su propio texto y no un paso por debajo del titular de la página.
- Valores que puedes comprobar. El espaciado se cita igual (pasos de espaciado de 12px, transiciones de 0.5s y easing cubic-bezier(0.22, 1, 0.36, 1)), no como una escala que crece sola.
Movimiento e interacción
Movimiento ambiente sin librería de scroll
El clip de fondo se reproduce 5,9s en 1440x1080 en bucle infinito, silenciado y en línea, así que la página sigue moviéndose mientras la atención del lector está en el texto. No hace falta ninguna librería de scroll, porque el único movimiento ambiente es el propio medio. El clip está silenciado y en línea, así que el primer fotograma está disponible sin ninguna interacción.
Una duración para los controles
Las transiciones están fijadas en 0.5s usando cubic-bezier(0.22, 1, 0.36, 1), y ese es el tiempo que deben cumplir los controles. El easing se especifica junto a la duración (0.5s), así que una reconstrucción no puede colar otra sensación sin avisar.
Los tiempos detrás de landing page
Podrías soltar una librería de presets sobre esta composición y quedaría más cargada, no mejor. El brief se queda con transiciones de 0.5s y un bucle de 5,9s y gasta ahí el presupuesto. Nada se anima por gusto en este tipo de landing page.
Las cifras detrás de landing page
Una captura te dice cómo se ve la página; el brief te dice por qué. Con pasos de espaciado de 12px, transiciones de 0.5s y easing cubic-bezier(0.22, 1, 0.36, 1) se cierra la distancia entre las dos. Nada de este tipo de landing page depende de un valor por defecto.
Qué gana un producto de salud o bienestar aquí
Un hero genérico y este tipo de landing page usan las mismas piezas. Aquí el orden lo dan el titular, la insignia de anuncio, la fila de cifras, la cuadrícula de tarjetas y la cuenta atrás y todo se mide con pasos de espaciado de 12px, transiciones de 0.5s y easing cubic-bezier(0.22, 1, 0.36, 1), así que la pantalla se lee como una secuencia y no como un contenedor. Wellness Companion enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Wellness Companion?
Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 1440x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Cuánto de Wellness Companion depende de React y Tailwind CSS?
Wellness Companion se construyó en React y Tailwind CSS, y la ficha lo dice por procedencia. El brief describe posiciones, tamaños y tiempos, así que se puede reconstruir en cualquier framework capaz de componer tipografía y colocar elementos.
¿Puedo usar Wellness Companion en un proyecto de cliente?
El brief es una descripción, no una licencia para redistribuir los recursos de otra persona. Conserva la estructura y los números, sustituye los medios y las marcas, y acredita la procedencia si un cliente pregunta de dónde sale la maqueta. La captura de la referencia es de 1440x1080.
