Sobre esta plantilla
Animated Cards se capturó a 640x464 y se conserva como especificación, no como imagen de galería. La paleta se queda en negro #000000 de base y naranja brillante #FF9500 para los acentos, y el tipo es JetBrains Mono. Se entrega como React y Tailwind CSS, y la captura se fija a 640x464 antes de escribir código. Tómalo como el brief de sección de funciones para un producto fintech que tiene que aguantar una reconstrucción, no solo un primer vistazo.
Pensado para
- Agencias que llevan su sección de funciones de un producto fintech a una propuesta y quieren citar un tamaño de display fijo de 12px y pasos de espaciado de 16px en la presentación para que el presupuesto siga en pie tras el kickoff.
- Quien le pase el brief de sección de funciones a un modelo usará el prompt de 36.212 caracteres como punto de partida.
- Pensado para responsables de contenidos que reescriben un diseño de sección de funciones cuyo titular tiene que seguir siendo tan largo como el de Animated Cards.
Qué incluye
- Medido contra el viewport. La lista se mantiene corta (un tamaño de display fijo de 12px y pasos de espaciado de 16px), y por eso todo el sistema se puede comprobar a mano. Cada valor responde a una función: un paso de tipo, un hueco, un radio o una transición.
- La base sostiene el resto. Todo lo que no es #FF9500 se apoya en negro #000000, y eso es lo que hace que el acento se lea como señal y no como adorno. El contraste entre #FF9500 y negro #000000 es lo que hace legible el acento en tamaños pequeños.
- Las tarjetas estructuran. La cuadrícula es la estructura: paneles del mismo tamaño, compuestos en JetBrains Mono, dispuestos para que el ojo avance en horizontal y no en vertical. El espaciado entre paneles es un único valor, y eso es lo que evita que una cuadrícula densa parezca apretada.
- Estructura en una sola pantalla. La composición está completa en 640x464: el texto, los medios y los controles están nombrados en el brief. La página es una sola composición a 640x464, y por eso se sostiene cuando cambia el texto.
Movimiento e interacción
Hover, pero con moderación
La capa interactiva es pequeña a propósito: un carrusel que pasa páginas de contenido a demanda. Los estados interactivos no mueven la maquetación, así que nada salta bajo el puntero. Unos pocos estados fiables valen más que una lista larga de efectos.
La escena es todo lo visual
La pieza central se renderiza en vivo (una transformación 3D en el elemento principal) en vez de entregarse como imagen, así que la composición de 640x464 responde al viewport en lugar de quedarse detrás. Como es un render y no una imagen fija, el elemento focal aguanta a cualquier tamaño. Deja que la escena cargue sola con la profundidad.
Las cifras detrás de sección de funciones
La mayoría de las referencias muestra el resultado y se guarda las cifras. Esta lo invierte: publica un tamaño de display fijo de 12px y pasos de espaciado de 16px junto a la página, para que el resultado se pueda reproducir y no aproximar. Nada de este tipo de sección de funciones depende de un valor por defecto.
El acierto de sección de funciones
La contrapartida es la densidad: este tipo de sección de funciones dice menos en la primera pantalla de lo que diría una maquetación centrada en funciones. Lo que conserva es el orden de lectura, y la fila de cifras, la cuadrícula de tarjetas, la lista de funciones y el clip de fondo hacen el trabajo que una página más larga repartiría. Da a quien lee páginas de fintech el camino más corto y honesto hasta la oferta.
El orden detrás de sección de funciones
Un orden estricto te cuesta flexibilidad después. Añade una sección por encima y habrá que recortar de nuevo las cifras (un tamaño de display fijo de 12px y pasos de espaciado de 16px), porque la secuencia sostiene la página y no es decorativa. Quien busca fintech recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Animated Cards?
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 640x464. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Necesito React y Tailwind CSS para recrear Animated Cards?
Animated Cards 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.
¿De dónde sale el diseño de Animated Cards?
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 640x464.
