Sobre esta plantilla
Cyber Ronin es una referencia de trabajo para una marca de 3D, videojuegos o entretenimiento: el desglose de landing page, con la maquetación medida y lista para recrear. El titular dice “Cyber Ronin // Neural Edges”, y el orden de landing page gira alrededor de esa línea. La paleta se queda en naranja #C45A18 de base y crema #FBDBAF para la tipografía, y el tipo es Inter. La referencia está construida con un único archivo HTML autocontenido, y las decisiones de maquetación se documentan aparte. El brief gasta su presupuesto de movimiento en transiciones de 0.25s, cubic-bezier(0.25,0.46,0.45,0.94) y un vídeo en bucle de fondo. Es más útil cuando cada landing page de 3D y videojuegos tiene que sobrevivir a un cambio de texto sin rediseño.
Pensado para
- Este diseño de landing page está pensado para agencias que necesitan que el marco de 1920x1420 sobreviva a tres rondas de cambios del cliente.
- Si la maquetación parte de un único archivo HTML autocontenido, llévate primero secciones de 100vh y pasos de espaciado de 28px y no toques la paleta hasta que se asiente la cuadrícula.
- La página sirve a desarrolladores front-end que rehacen su landing page de una marca de 3D, videojuegos o entretenimiento en un único archivo HTML autocontenido y buscan los números que hay detrás del aspecto.
Qué incluye
- Números que llegan al montaje. Aquí nada se mide a ojo. La especificación fija secciones de 100vh, pasos de espaciado de 28px, transiciones de 0.25s y easing cubic-bezier(0.25,0.46,0.45,0.94), y el resto de la maquetación se deriva de esos valores. El brief declara valores y no proporciones, así la composición conserva sus relaciones cuando el texto cambia de longitud.
- Vídeo en la capa inferior. Un clip de 6s a 1920x1420 hace el trabajo atmosférico; el brief fija su recorte y deja el tipo intacto por encima. Exporta a 1920x1420 o más ancho y el recorte de cobertura sigue funcionando.
- Pesos nombrados por papel. Los pasos de tamaño y el interletraje del brief son los que dan el tono: Inter a un tamaño display cerrado y una caída clara hasta el texto de apoyo. Los pesos se especifican por papel, así que la jerarquía no depende de la improvisación al montar.
- Una escala para tipo y marco. El espaciado se cita igual (secciones de 100vh, pasos de espaciado de 28px, transiciones de 0.25s y easing cubic-bezier(0.25,0.46,0.45,0.94)), no como una escala que crece sola.
Movimiento e interacción
Movimiento ambiente sin librería de scroll
El movimiento ambiente viene del bucle de 6s en 1920x1420 y no de efectos de scroll, lo que mantiene la página tranquila y el texto legible. El clip está silenciado y en línea, así que el primer fotograma está disponible sin ninguna interacción. Graba o exporta a 1920x1420 o más ancho.
La página se arma al cargar
La maquetación de debajo está completa sin la entrada, y eso convierte el movimiento en un añadido y no en estructura. Con movimiento reducido, el elemento simplemente aparece y la maquetación no cambia. Si el texto cambia de longitud, la entrada sigue leyéndose porque trabaja línea a línea. La captura de la referencia es de 1920x1420.
Las cifras detrás de landing page
Compara esto con una plantilla que llama preferencia a su espaciado. Aquí los mismos valores tienen nombre (secciones de 100vh, pasos de espaciado de 28px, transiciones de 0.25s y easing cubic-bezier(0.25,0.46,0.45,0.94)), así que un cambio o los respeta o rompe la composición a la vista. Nada de este tipo de landing page depende de un valor por defecto.
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 escala es fluida en lugar de escalonada, la maquetación cambia a 360px y la sección se mantiene a 100vh) y mantiene el orden intacto. No se elimina nada importante en anchos estrechos.
Cómo ordena Cyber Ronin la primera lectura
Cuando alguien que busca 3D aterriza en una sola pantalla, escanea antes de leer. La maquetación responde a eso: la fila de cifras, la cuadrícula de tarjetas y la lista de funciones se dimensionan para el escaneo, con secciones de 100vh y pasos de espaciado de 28px manteniendo cada parada distinta. Quien busca 3D recibe la oferta antes que las opciones.
Preguntas frecuentes
¿El prompt de Cyber Ronin es una especificación cerrada o un punto de partida?
El brief capturado ocupa 10.993 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 un único archivo HTML autocontenido para recrear Cyber Ronin?
Cyber Ronin se construyó en un único archivo HTML autocontenido, 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.
¿El brief de Cyber Ronin es lo mismo que el prompt que escribiría yo?
Todo lo que se cita en la página procede del brief capturado de 10.993 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
