Sobre esta plantilla
Wellbeing OS da a un producto de salud o bienestar una primera pantalla terminada y las cifras que la produjeron. El color se limita a naranja intenso #2C221C de base y naranja #BF9423 para los acentos y la página se compone en Helvetica, Segoe UI, Roboto. Se entrega como React y Tailwind CSS, y la captura se fija a 1460x1080 antes de escribir código. El presupuesto de movimiento se agota en transiciones de 400ms, cubic-bezier(0.16,1,0.3,1) y un vídeo en bucle de fondo. Sirve de referencia cuando construyas este tipo de sección hero para un producto de salud o bienestar y quieras una composición terminada en lugar de un punto de partida.
Pensado para
- Profesionales del marketing de producto que necesitan que cada sección hero siga leyéndose con 5,8s de vídeo en bucle detrás del texto.
- Quien le pase el brief de sección hero a un modelo usará el prompt de 5.051 caracteres como punto de partida.
- Pensado para responsables de contenidos que reescriben un diseño de sección hero cuyo titular tiene que seguir siendo tan largo como el de Wellbeing OS.
Qué incluye
- Enlaces antes de la acción. La barra es la parte más callada de la composición: marca, una fila corta de enlaces y una acción en #BF9423, todo al paso de tipo más pequeño del brief. Los enlaces se componen a un tamaño menor que la marca, y la acción en #BF9423 es el único elemento de la barra con peso.
- Tamaños fijados en el brief. El brief declara sus tamaños en la captura (pasos de espaciado de 160px, transiciones de 400ms y easing cubic-bezier(0.16,1,0.3,1)), así que un remontaje se puede verificar en lugar de aproximar. No hay ningún valor intermedio inventado entre los citados; la lista de medidas es todo el sistema.
- Medios detrás del texto. La primera pantalla es un único clip a 1460x1080, y todo lo demás se dispone encima. El bucle es lo bastante corto (5,8s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Una familia, dos papeles. Las fuentes tienen papeles asignados y no se mezclan: Helvetica, Segoe UI, Roboto sostiene a la vez la línea display y la interfaz. Las cifras comparten la tipografía de interfaz, así estadísticas y etiquetas pertenecen al mismo sistema.
Movimiento e interacción
Movimiento ambiente sin librería de scroll
El clip de fondo se reproduce 5,8s en 1460x1080 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. Un fotograma de portada hace de suplente cuando la reproducción automática está bloqueada, así que el movimiento suma y no es obligatorio.
Duraciones del brief
Una sola duración cubre las interacciones (400ms usando cubic-bezier(0.16,1,0.3,1)), y eso hace que hover y pulsación se lean como un mismo sistema. Un mismo valor se reutiliza en todos los controles, así que sus tiempos no se separan. Aplica el tiempo exacto a la respuesta.
Cómo ordena Wellbeing OS la primera lectura
Podrías reordenar estos bloques y la página seguiría cargando. Pero dejaría de leerse como un argumento: navegación, la fila de cifras, el clip de fondo y el pie de página son una secuencia, y pasos de espaciado de 160px y transiciones de 400ms solo funcionan en ese orden. Quien busca salud recibe la oferta antes que las opciones.
Los tiempos detrás de sección hero
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 400ms, un bucle de 5,8s y estados hover y pulsados y gasta ahí el presupuesto. Nada se anima por gusto en este tipo de sección hero.
Qué cambiar primero en Wellbeing OS
El brief nombra Helvetica, Segoe UI, Roboto y la escala que la acompaña. Sustituye por una fuente con las mismas proporciones y la composición aguanta. El tema es la parte que debería cambiar.
Preguntas frecuentes
¿El prompt de Wellbeing OS es una especificación cerrada o un punto de partida?
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 1460x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Necesito React y Tailwind CSS para recrear Wellbeing OS?
Wellbeing OS 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 Wellbeing OS 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 1460x1080.
