Sobre esta plantilla
Veyra Electric se capturó a 1920x1412 y se conserva como especificación, no como imagen de galería. La paleta se queda en azul apagado #6B879D de base y blanco #FFFFFF para la tipografía, y el tipo es Space Grotesk. El montaje es React y Vite; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. Todo el movimiento cabe en un vídeo en bucle de fondo. Úsalo cuando tu landing page necesite un orden decidido antes de añadir secciones nuevas.
Pensado para
- Si tres personas tienen que editar el diseño de landing page, dales a los responsables de contenidos pasos de espaciado de 12px en vez de una captura.
- Profesionales del marketing de producto que necesitan que cada landing page siga leyéndose con 6,3s de vídeo en bucle detrás del texto.
- Equipos de producto que escriben los textos de Landing page y necesitan que cada línea respete la longitud para la que se dimensionó la tipografía de display.
Qué incluye
- Una barra sin nada de más. La navegación es una sola fila, sin un segundo nivel debajo. Las etiquetas son lo bastante cortas para caber en una línea en cualquier ancho que cubra el brief. Mantén el número de enlaces en cuatro o cinco; la fila está dimensionada para eso.
- El brief nombra los pasos. Los tamaños se citan, no se heredan: pasos de espaciado de 12px. Cambia la tipografía o el texto y esas relaciones se mantienen. El espaciado se cita en las mismas unidades que el tipo, de modo que ambos se comparan directamente.
- Un clip hace todo el trabajo. Un único recurso de 6,3s sostiene toda la primera pantalla, y la página no tiene un segundo medio que mantener sincronizado. Exporta a 1920x1412 o más ancho y el recorte de cobertura sigue funcionando. Exporta a 1920x1412 o más ancho para que el recorte siga siendo honesto.
- El registro como composición. Aquí solo hay una decisión: rellenar el formulario o marcharse. Todo lo demás de la pantalla sostiene esa decisión. Los estados de error y de foco están especificados y no se dejan al navegador.
Movimiento e interacción
Profundidad generada en tiempo real
La profundidad viene del render y no de la ilustración: un lienzo WebGL. El brief no incluye ningún intercambio de imágenes, así que la escena forma parte del primer pintado.
Una superficie interactiva pequeña
La respuesta se limita a estados hover en los botones y los enlaces y no en todas las tarjetas, así que el resto de la maquetación es una composición fija. El hover y el foco están especificados juntos, así que el puntero y el teclado reciben la misma información. No animes la maquetación en el hover.
Leer Veyra Electric como especificación
Si esto se lo vas a pasar a quien programa, el brief es la pieza útil. Enuncia pasos de espaciado de 12px y no deja nada a la interpretación. Nada de este tipo de landing page depende de un valor por defecto.
El orden detrás de landing page
Aquí nada compite con la primera decisión. El material de apoyo espera por debajo, y navegación, la fila de cifras, el formulario, la cuenta atrás y el clip de fondo se bastan para sostener la parte alta de la página. Quien busca industria recibe la oferta antes que las opciones.
El argumento de landing page
Frente a un hero de plantilla, la diferencia está en lo que falta. No hay cuadrícula de tarjetas, ni carrusel, ni una segunda llamada a la acción: solo navegación, la fila de cifras, el formulario, la cuenta atrás y el clip de fondo, con pasos de espaciado de 12px como referencia. Da a quien lee páginas de industria el camino más corto y honesto hasta la oferta.
Preguntas frecuentes
¿Cómo está organizada esta ficha de Veyra Electric?
Todo lo que se cita en la página procede del brief capturado de 12.080 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Cuánto ocupa el prompt que hay detrás de Veyra Electric?
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 1920x1412. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Por qué la ficha nombra React y Vite?
No. El brief es una especificación, no una lista de dependencias. Se escribió para React y Vite, pero la misma composición se puede recrear en lo que ya uses. El stack se nombra para que sepas cómo se hizo la referencia.
