Sobre esta plantilla
Pixel Grid Hover es la referencia de página de portafolio para una agencia o un estudio, y el brief que hay detrás es una especificación de construcción completa, no un moodboard. El titular dice “Brand Strategy & Product Design”, y el orden de página de portafolio gira alrededor de esa línea. La paleta se queda en blanco #EBEBEB de base y negro #1A1819 para la tipografía, y el tipo es DM Sans. La entrega es React y Tailwind CSS: una página, sin plugins y sin herramientas de build entre tú y el diseño. La página reduce el movimiento a transiciones de 0.7s y cubic-bezier(0.22,1,0.36,1). Tómalo como el brief de página de portafolio para una agencia o un estudio que tiene que aguantar una reconstrucción, no solo un primer vistazo.
Pensado para
- Los responsables de producto que tengan que presupuestar la implementación leerán un marco de 640x472 como el alcance real del trabajo.
- Equipos internos que amplían su página de portafolio y necesitan que tipografía de 12px a 14px y pasos de espaciado de 12px pasen a los bloques nuevos sin tocar los valores.
- Quien le pase el brief de página de portafolio a un modelo usará el prompt de 8.672 caracteres como punto de partida.
Qué incluye
- Los pasos de espaciado van cifrados. El brief nombra las cifras: tipografía de 12px a 14px, pasos de espaciado de 12px, transiciones de 0.7s y easing cubic-bezier(0.22,1,0.36,1). Por eso la composición se sostiene, porque no hay ningún paso de espaciado inventado entre el tipo y el marco. Las proporciones del marco se registran junto a los tamaños, así un remontaje también acierta con el formato.
- La píldora de anuncio. Una insignia, un mensaje: la píldora se sitúa sobre el titular en DM Sans al paso más pequeño, y nada más compite por ese hueco. La píldora se compone en el paso más pequeño del brief, así se lee como etiqueta y no como un segundo título.
- Tarjetas sin bordes. Donde iría un bloque de texto corrido, esta página coloca un conjunto de paneles, y eso es lo que mantiene página de portafolio fácil de escanear. Los paneles se separan con espaciado y no con bordes, lo que mantiene la cuadrícula callada. El orden de los paneles es el orden de lectura. La captura de la referencia es de 640x472.
- Tamaños fijados en el brief. El espaciado se cita igual (tipografía de 12px a 14px, pasos de espaciado de 12px, transiciones de 0.7s y easing cubic-bezier(0.22,1,0.36,1)), no como una escala que crece sola.
Movimiento e interacción
El scroll marca la secuencia
Parallax se ejecuta mientras la página se mueve, así que la composición tiene un estado de reposo definido. El efecto es decorativo: apágalo y la jerarquía sigue funcionando.
Duraciones del brief
Los cambios de estado están fijados en 0.7s, así que la respuesta de los controles es un valor de diseño y no el que trae el navegador por defecto. El easing se especifica junto a la duración (0.7s), así que una reconstrucción no puede colar otra sensación sin avisar.
El reflujo de página de portafolio
La maquetación estrecha está diseñada, no heredada. En cada ancho, la tipografía se limita entre 12px y 14px, para que la jerarquía sobreviva al reflujo. La jerarquía es lo que sobrevive al reflujo.
El brief de agencia se sostiene
Un hero genérico y este tipo de página de portafolio usan las mismas piezas. Aquí el orden lo dan la insignia de anuncio, la fila de cifras, la cuadrícula de tarjetas y el pie de página y todo se mide con tipografía de 12px a 14px, pasos de espaciado de 12px, transiciones de 0.7s y easing cubic-bezier(0.22,1,0.36,1), así que la pantalla se lee como una secuencia y no como un contenedor. Da a quien lee páginas de agencia el camino más corto y honesto hasta la oferta.
Leer Pixel Grid Hover como especificación
En este tipo de página de portafolio no se mide a ojo. Las cifras vienen del brief (tipografía de 12px a 14px y pasos de espaciado de 12px) y la maquetación se ordena según esos pasos en lugar de ajustarse a empujones. Nada de este tipo de página de portafolio depende de un valor por defecto.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Pixel Grid Hover?
El brief capturado ocupa 8.672 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 página de portafolio de Pixel Grid Hover con otro stack?
Pixel Grid Hover 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 Pixel Grid Hover?
El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de 0.7s con la curva cubic-bezier(0.22,1,0.36,1). Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene.
