Sobre esta plantilla
Stillmind es una referencia de trabajo para un producto de salud o bienestar: el desglose de sección hero, con la maquetación medida y lista para recrear. El esquema de color es rojo intenso #48292F de base y azul intenso #182C41 para los acentos, y la página está compuesta en Instrument Serif. Se entrega como React y Tailwind CSS, y la captura se fija a 1472x1080 antes de escribir código. El movimiento se limita a transiciones de 1000ms, cubic-bezier(0.4,0,0.2,1) y un vídeo en bucle de fondo, lo bastante discreto para que el texto siga mandando. Es la referencia adecuada para este tipo de sección hero en un producto de salud o bienestar, que tiene que transmitir intención desde la primera pantalla.
Pensado para
- Este diseño de sección hero sirve a fundadores que necesitan una pantalla de prueba de que los textos de salud aguantan 6,2s de vídeo en bucle.
- Quien le pase el brief de sección hero a un modelo usará el prompt de 6.025 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 Stillmind.
Qué incluye
- Enlaces antes de la acción. La barra reúne la marca, los enlaces de la sección y un botón en #182C41, medida en transiciones de 1000ms y easing cubic-bezier(0.4,0,0.2,1), así nunca acaba convertida en una segunda cabecera. Los enlaces se componen a un tamaño menor que la marca, y la acción en #182C41 es el único elemento de la barra con peso.
- Un clip hace todo el trabajo. El fondo es un único bucle de 6,2s a 1472x1080, recortado para cubrir y sin teñir. Todo lo demás flota encima, en una capa superior. Exporta a 1472x1080 o más ancho y el recorte de cobertura sigue funcionando. Exporta a 1472x1080 o más ancho para que el recorte siga siendo honesto.
- La escala baja de golpe. Los pasos de tamaño y el interletraje del brief son los que dan el tono: Instrument Serif a un tamaño display cerrado y una caída clara hasta el texto de apoyo. La fuente va con tamaños fijos, y eso es lo que mantiene relacionadas la línea display y el texto de interfaz.
- Navegación sin fondo propio. La fila gasta el contraste en un solo punto: la acción #182C41, con la marca y los enlaces retenidos sobre el color del texto. Una superposición móvil toma el relevo por debajo del breakpoint de tableta.
Movimiento e interacción
La interacción está en los controles
El trabajo de puntero es pequeño y está especificado: estados hover en los botones y los enlaces y no en todas las tarjetas, aplicado a los elementos que ya parecen interactivos. Los estados salen de la paleta de la propia página y no de un valor por defecto de componente. Unos pocos estados fiables valen más que una lista larga de efectos.
Duraciones cortas y nombradas
El presupuesto de animación es pequeño y explícito: 1000ms con la curva cubic-bezier(0.4,0,0.2,1), aplicado a cambios de estado y no a entradas. Los estados de foco usan el mismo tiempo que el hover, así que la respuesta de teclado y de puntero coincide.
Leer Stillmind como especificación
El tipo es la primera cifra: transiciones de 1000ms y easing cubic-bezier(0.4,0,0.2,1). El espaciado se deriva de ahí, y todo lo demás en la página se coloca en relación con esos dos valores. Nada de este tipo de sección hero depende de un valor por defecto.
El orden detrás de sección hero
Este tipo de sección hero tiene un recorrido de lectura declarado. La navegación presenta el producto y le da al visitante que vuelve una forma de moverse que ya reconoce. A partir de ahí la mirada recorre navegación, la insignia de anuncio, la fila de cifras, la lista de funciones y el clip de fondo en secuencia, y eso es lo que impide que una sola pantalla se lea como una lista. Quien busca salud recibe la oferta antes que las opciones.
Los tiempos detrás de sección hero
Un paquete de animaciones predefinidas habría sido más rápido de publicar. El brief especifica transiciones de 1000ms, un bucle de 6,2s y estados hover y pulsados, y por eso la página se lee como algo compuesto y no como algo montado. Nada se anima por gusto en este tipo de sección hero.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Stillmind?
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 1472x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo reconstruir este diseño de sección hero de Stillmind con otro stack?
Stillmind 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 trato los medios de Stillmind 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 1472x1080.
