Sobre esta plantilla
Immersive Ocean resuelve el problema de cada sección hero de una agencia o un estudio con un solo brief capturado. Abre con “Shaping visual narratives, one pixel at a time” y le da el marco a esa línea en lugar de encogerla en una tarjeta. El esquema de color es azul intenso #000410 de base, gris #C2CFCA para la tipografía y turquesa #0E4154 para los acentos, y la página está compuesta en Geist. Se entrega como React y Tailwind CSS, y la captura se fija a 640x478 antes de escribir código. El movimiento se limita a cubic-bezier(0.16,1,0.3,1), lo bastante discreto para que el texto siga mandando. Es la referencia adecuada para este tipo de sección hero en una agencia o un estudio, que tiene que transmitir intención desde la primera pantalla.
Pensado para
- Empieza por secciones de 100vh y pasos de espaciado de 80px y deja que la paleta venga después, porque el espaciado es lo que hace legible este diseño de sección hero.
- Quien le pase el brief de sección hero a un modelo usará el prompt de 4.030 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 Immersive Ocean.
Qué incluye
- Los enlaces colapsan a un ancho. La barra es la parte más callada de la composición: marca, una fila corta de enlaces y una acción en #0E4154, 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 #0E4154 es el único elemento de la barra con peso. No des a la marca más espacio que el que pide su tipografía.
- Tamaños fijados en el brief. Aquí nada se mide a ojo. La especificación fija secciones de 100vh, pasos de espaciado de 80px y easing cubic-bezier(0.16,1,0.3,1), y el resto de la maquetación se deriva de esos valores. Las proporciones del marco se registran junto a los tamaños, así un remontaje también acierta con el formato. Verifica un remontaje contra los mismos números.
- Cada tipo con una función. Los pasos de tamaño y el interletraje del brief son los que dan el tono: Geist 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.
- La barra sigue la cuadrícula. Los estados de foco y hover están definidos para cada enlace, no heredados del navegador. Si tu propia página tiene más secciones, agrúpalas en lugar de ensanchar la barra.
Movimiento e interacción
Duraciones del brief
Las transiciones están fijadas en 0 usando cubic-bezier(0.16,1,0.3,1), y ese es el tiempo que deben cumplir los controles. Los valores son lo bastante cortos para leerse como respuesta y no como animación.
Hover solo donde aporta
La capa interactiva es pequeña y predecible: estados hover en los botones y los enlaces y no en todas las tarjetas. Todo lo demás se queda quieto, lo que mantiene el énfasis en la composición. Como los estados son simples, se portan a cualquier sistema de componentes. Unos pocos estados fiables valen más que una lista larga de efectos.
El reflujo de sección hero
Aquí responsive significa que cambia la escala y no la secuencia: la sección se mantiene a 100vh y la navegación se pliega en un menú móvil, y el orden de lectura se queda donde lo puso el brief. La jerarquía es lo que sobrevive al reflujo.
Hacer tuyo este tipo de sección hero
Una plantilla te pide que aceptes su maquetación; esta referencia te pide que la conserves y cambies todo lo de dentro. La diferencia es que secciones de 100vh, pasos de espaciado de 80px y easing cubic-bezier(0.16,1,0.3,1) se quedan fijos mientras el tema se mueve. El marco y la escala son lo que hay que dejar en paz.
El orden detrás de sección hero
Si tu página abre hoy con funciones, este es el orden que hay que copiar: navegación, la insignia de anuncio, la fila de cifras, la lista de funciones y el clip de fondo delante, el detalle de apoyo después y secciones de 100vh y pasos de espaciado de 80px marcando la distancia. Quien busca agencia recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Immersive Ocean?
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 640x478. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo reconstruir este diseño de sección hero de Immersive Ocean con otro stack?
Immersive Ocean 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 Immersive Ocean 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 640x478.
