Sobre esta plantilla
Sparkform resuelve el problema de cada landing page de una agencia o un estudio con un solo brief capturado. La paleta se queda en naranja brillante #EC612C de base, blanco #FFFFFF para la tipografía y turquesa #89CFF0 para los acentos, y el tipo es Inter. La ficha nombra el stack que produjo la página (React y Tailwind CSS) en lugar de esconderlo. El brief gasta su presupuesto de movimiento en transiciones de 0.05s y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 6.724 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Cita un marco de 1460x1080 en la nota de traspaso para que la siguiente implementación no tenga que volver a deducir nada de la página.
- Pensado para agencias que facturan por ronda y quieren acordar secciones de 120vh y pasos de espaciado de 12px antes de la primera.
- Profesionales del marketing de producto que necesitan que cada landing page siga leyéndose con 7,6s de vídeo en bucle detrás del texto.
Qué incluye
- Una fila, sin desplegables. La fila superior reúne la marca, cuatro o cinco enlaces y una sola acción teñida de #89CFF0, dimensionada para no destacar frente al resto de la página. Los enlaces se componen a un tamaño menor que la marca, y la acción en #89CFF0 es el único elemento de la barra con peso. No des a la marca más espacio que el que pide su tipografía.
- Medido contra el viewport. Aquí nada se mide a ojo. La especificación fija secciones de 120vh, pasos de espaciado de 12px y transiciones de 0.05s, y el resto de la maquetación se deriva de esos valores. El valor más pequeño y el más grande de esa lista marcan el rango en el que trabaja la composición.
- El bucle es el fondo. Un único clip silenciado y en bucle llena el marco a 1460x1080 y 7,6s, recortado para cubrir, con el texto apilado encima. El brief mantiene las superposiciones fuera del vídeo para que nada le reste color. Un fotograma de póster a 1460x1080 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- El tipo hace el estilo. Con Inter haciendo el trabajo, los tamaños bajan de golpe del titular al texto de apoyo y el interletraje se cierra a medida que crece el tamaño, así que la jerarquía la lleva el tipo y no el color. Los pasos de tamaño son valores fijos, y por eso un cambio de tipografía puede conservar la misma jerarquía. Una sola familia con papeles claros gana a dos que compiten.
Movimiento e interacción
Movimiento ambiente sin librería de scroll
El movimiento ambiente es un clip de 7,6s en 1460x1080, en bucle discreto detrás del texto y sin reaccionar al puntero. El clip es lo bastante corto para girar sin costura visible, y eso importa más que su resolución.
Hover, pero con moderación
La capa interactiva es pequeña a propósito: un elemento fijo que mantiene la posición mientras el contenido pasa por debajo. La respuesta se limita a los controles, así que la composición se queda quieta a su alrededor.
Hacer tuyo este tipo de landing page
Compara esto con empezar de una página en blanco. Aquí el marco (1460x1080) y las cifras (secciones de 120vh y pasos de espaciado de 12px) ya están decididos, así que el trabajo es sustituir y no componer. El tema es la parte que debería cambiar.
Cómo ordena Sparkform la primera lectura
La página tiene un orden deliberado. La navegación presenta el producto y le da al visitante que vuelve una forma de moverse que ya reconoce. El titular ocupa el tamaño de display, la línea de apoyo explica la oferta y el acento turquesa #89CFF0 marca la acción principal, así que el siguiente paso nunca está en duda. Nada más compite: no hay una cuadrícula de tarjetas antes de la primera decisión, y eso es lo que evita que este tipo de landing page resulte pesado en un trabajo de agencia. Quien busca agencia recibe la oferta antes que las opciones.
El argumento de landing page
Donde una plantilla llena la primera pantalla de módulos, este tipo de landing page usa navegación, la fila de cifras y la lista de funciones y se detiene. La diferencia se ve en secciones de 120vh y pasos de espaciado de 12px: nada se rellena para ocupar espacio. Sparkform enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Sparkform?
El brief capturado ocupa 6.724 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.
¿Puedo reconstruir este diseño de landing page de Sparkform con otro stack?
Sparkform 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.
¿Qué gobierna el movimiento en Sparkform?
Las entradas y los cambios de estado se quedan en 0.05s. Los dispara un cambio de estado, no una biblioteca de scroll, y nunca retrasan el contenido.
