Sobre esta plantilla
Wellness Devicex conserva el rastro de sus decisiones: el brief que hay detrás de landing page ocupa 6.903 caracteres. La paleta es negro #0A0A0A de base y azul apagado #64748B para los acentos, con la tipografía Inter. La entrega es React y Tailwind CSS: una página, sin plugins y sin herramientas de build entre tú y el diseño. El brief gasta su presupuesto de movimiento en transiciones de 60ms, cubic-bezier(0.77, 0, 0.18, 1) y un vídeo en bucle de fondo. Es la referencia adecuada para este tipo de landing page en un producto de salud o bienestar, que tiene que transmitir intención desde la primera pantalla.
Pensado para
- Quien usa un generador con IA y quiere un brief que ya incluya un marco de 1460x1080 en vez de dejarlo todo al modelo.
- Empieza por secciones de 100vh y pasos de espaciado de 24px y deja que la paleta venga después, porque el espaciado es lo que hace legible este diseño de landing page.
- Profesionales del marketing de producto que necesitan que cada landing page siga leyéndose con 4,4s de vídeo en bucle detrás del texto.
Qué incluye
- Fila superior: marca, enlaces y acción. Los enlaces van en una sola línea y a un único tamaño, y la acción #64748B cierra la fila por la derecha, de modo que el ojo termina donde acaba la navegación. Los enlaces se componen a un tamaño menor que la marca, y la acción en #64748B es el único elemento de la barra con peso.
- Una escala para tipo y marco. En la maquetación nada queda a la intuición: el brief cita secciones de 100vh, pasos de espaciado de 24px, transiciones de 60ms y easing cubic-bezier(0.77, 0, 0.18, 1) y el montaje tiene que dar esos valores. El valor más pequeño y el más grande de esa lista marcan el rango en el que trabaja la composición.
- Clip sin márgenes tras el tipo. El vídeo de 1460x1080 se reproduce en bucle durante 4,4s detrás del texto, silenciado y en línea, sin ninguna capa de tinte entre ambos. Exporta a 1460x1080 o más ancho y el recorte de cobertura sigue funcionando. Exporta a 1460x1080 o más ancho para que el recorte siga siendo honesto.
- El tamaño display lleva la voz. Aquí el tipo es el sistema de estilo: Inter al tamaño display, la misma fuente en toda la interfaz y ningún segundo color de acento haciendo el trabajo. El paso de pie de foto es lo bastante pequeño para situarse bajo una cifra sin alterar el ritmo de la página.
Movimiento e interacción
El tiempo va en el brief
Los controles se resuelven en 60ms, lo bastante rápido para que la página responda al tocarla y no después. Los estados de foco usan el mismo tiempo que el hover, así que la respuesta de teclado y de puntero coincide. Los tiempos forman parte del diseño, no son un repaso final.
Un solo comportamiento de scroll
Aquí la coreografía la hace el scroll: las capas de fondo se mueven a distinta velocidad que el primer plano, con la maquetación estática de debajo intacta. Nada del efecto altera el orden de lectura de las secciones. No condiciones el texto a un disparador de scroll. La captura de la referencia es de 1460x1080.
El reflujo de landing page
Donde una plantilla se pliega a una sola columna y confía en la suerte, este brief dice qué pasa (la sección se mantiene a 100vh y la navegación se pliega en un menú móvil) y mantiene el orden intacto. La jerarquía es lo que sobrevive al reflujo.
Qué cambiar primero en Wellness Devicex
Cambia primero el contenido y revisa el marco después. Las cifras que hay que proteger mientras sustituyes el texto son estas: secciones de 100vh, pasos de espaciado de 24px, transiciones de 60ms y easing cubic-bezier(0.77, 0, 0.18, 1). El marco y la escala son lo que hay que dejar en paz.
Cómo ordena Wellness Devicex la primera lectura
Lee la primera pantalla de una pasada y la oferta ya está clara: navegación, la insignia de anuncio, la fila de cifras, la lista de funciones y el clip de fondo llegan en secuencia, con secciones de 100vh y pasos de espaciado de 24px de por medio en lugar de separadores decorativos. Quien busca salud recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Wellness Devicex?
El brief capturado ocupa 6.903 caracteres y describe la maqueta, la escala tipográfica, la paleta y las transiciones. Copiarlo te da ese texto; si lo mandas a Studio, la misma petición queda preparada con la página ya descrita.
¿Puedo reconstruir este diseño de landing page de Wellness Devicex con otro stack?
Wellness Devicex 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.
¿Cómo se comportan las transiciones de 60ms en Wellness Devicex?
Las transiciones van asociadas a estados de la interfaz y no a una línea de tiempo de scroll, y se resuelven en el rango de 60ms con la curva cubic-bezier(0.77, 0, 0.18, 1). El brief anota los valores para que un port no tenga que adivinarlos.
