Sobre esta plantilla
Celestial Renewal es un caso de landing page de salud: nace de un único brief escrito y esta página lo documenta. Abre con “Expert beauty and holistic wellness, delivered with warmth and intention” y le da el marco a esa línea en lugar de encogerla en una tarjeta. La paleta se queda en azul intenso #010A17 de base y azul #0A4267 para los acentos, y el tipo es Instrument Serif. La entrega es React y Tailwind CSS: una página, sin plugins y sin herramientas de build entre tú y el diseño. El movimiento se queda en transiciones de 75ms, cubic-bezier(0.22,1,0.36,1) y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 7.343 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Equipos de growth que retintan su landing page de un producto de salud o bienestar y quieren conservar el marco de 1464x1080 mientras cambia el texto de la oferta.
- Si tres personas tienen que editar el diseño de landing page, dales a los responsables de contenidos tipografía de 36px a 110px y pasos de espaciado de 40px en vez de una captura.
- Este diseño de landing page sirve a fundadores que necesitan una pantalla de prueba de que los textos de salud aguantan 5,9s de vídeo en bucle.
Qué incluye
- Navegación sin fondo propio. La fila superior reúne la marca, cuatro o cinco enlaces y una sola acción teñida de #0A4267, dimensionada para no destacar frente al resto de la página. Una superposición móvil toma el relevo por debajo del breakpoint de tableta. Los enlaces se componen a un tamaño menor que la marca, y la acción en #0A4267 es el único elemento de la barra con peso. La barra son unos pocos elementos, así que se reconstruye sin librería de componentes.
- Números que llegan al montaje. Los tamaños se leyeron del render en 1464x1080: tipografía de 36px a 110px, pasos de espaciado de 40px, transiciones de 75ms y easing cubic-bezier(0.22,1,0.36,1). El espaciado se cita en las mismas unidades que el tipo, de modo que ambos se comparan directamente.
- Enlaces antes de la acción. No des a la marca más espacio que el que pide su tipografía. La captura de la referencia es de 1464x1080.
- El brief nombra los pasos. El espaciado se cita igual (tipografía de 36px a 110px, pasos de espaciado de 40px, transiciones de 75ms y easing cubic-bezier(0.22,1,0.36,1)), no como una escala que crece sola.
Movimiento e interacción
Tiempos cortos y parejos
El presupuesto de animación es pequeño y explícito: 75ms con la curva cubic-bezier(0.22,1,0.36,1), aplicado a cambios de estado y no a entradas. Nada espera a una posición de scroll, así que la página responde en cuanto la tocas.
Un lienzo vivo en el centro
La profundidad viene del render y no de la ilustración: un lienzo WebGL. La interfaz de alrededor se mantiene plana, lo que deja que el render cargue con la profundidad.
Qué se sostiene para Salud
Si tu primera pantalla explica hoy tres cosas, esta es la versión que explica una. Aquí navegación, la insignia de anuncio, la fila de cifras, la lista de funciones y el clip de fondo se colocan en orden de lectura, con tipografía de 36px a 110px y pasos de espaciado de 40px marcando el ritmo. Da a quien lee páginas de salud el camino más corto y honesto hasta la oferta.
Cómo ordena Celestial Renewal la primera lectura
Si pones tu propio texto en este tipo de landing page, la secuencia se mantiene, porque los elementos no son intercambiables: navegación, la insignia de anuncio, la fila de cifras, la lista de funciones y el clip de fondo cumplen una función propia. Quien busca salud recibe la oferta antes que las opciones.
El reflujo de landing page
En ancho, la composición es densa; en estrecho, la tipografía se limita entre 36px y 110px y la navegación se pliega en un menú móvil. Los dos estados están descritos en el brief. El reflujo mantiene la acción al alcance en cualquier ancho.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Celestial Renewal?
El brief capturado ocupa 7.343 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.
¿Necesito React y Tailwind CSS para recrear Celestial Renewal?
Celestial Renewal 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 75ms en Celestial Renewal?
Las entradas y los cambios de estado se quedan en 75ms con la curva cubic-bezier(0.22,1,0.36,1). Los dispara un cambio de estado, no una biblioteca de scroll, y nunca retrasan el contenido.
