Sobre esta plantilla
Lee Rare Gallery como especificación de página de portafolio: los valores se escribieron antes de construir la página. “A carefully curated collection beyond compare” es la línea que la maquetación está pensada para sostener. La paleta es lima intenso #222518 de base, con la tipografía Instrument Serif. Se entrega como React y Tailwind CSS, y la captura se fija a 1920x1414 antes de escribir código. El movimiento se limita a transiciones de 400ms, cubic-bezier(0.16, 1, 0.3, 1) y un vídeo en bucle de fondo. Parte del brief capturado y ajusta la composición de página de portafolio en lugar de empezar de cero.
Pensado para
- Este diseño de portafolio sirve a fundadores que necesitan una pantalla de prueba de que los textos de agencia aguantan 6,9s de vídeo en bucle.
- Pensado para un fundador en solitario que saca un único diseño de página de portafolio para una agencia o un estudio y no tiene ningún sistema de diseño detrás.
- Quien le pase el brief de página de portafolio a un modelo usará el prompt de 4.964 caracteres como punto de partida.
Qué incluye
- Una barra de navegación que no estorba. La marca ocupa el borde izquierdo y los enlaces corren a su derecha, todo compuesto en Instrument Serif, para que la barra pertenezca a la página de abajo y no a un sistema aparte. La acción es el único elemento de la fila que lleva relleno, y así los enlaces siguen leyéndose como texto.
- Medido, no estimado a ojo. Aquí nada se mide a ojo. La especificación fija pasos de espaciado de 64px, transiciones de 400ms y easing cubic-bezier(0.16, 1, 0.3, 1), 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. Mide antes de ajustar.
- Un clip hace todo el trabajo. Un clip de 6,9s a 1920x1414 hace el trabajo atmosférico; el brief fija su recorte y deja el tipo intacto por encima. Exporta a 1920x1414 o más ancho y el recorte de cobertura sigue funcionando. Exporta a 1920x1414 o más ancho para que el recorte siga siendo honesto.
- Un campo, una acción. Aquí solo hay una decisión: rellenar el formulario o marcharse. Todo lo demás de la pantalla sostiene esa decisión. Los campos se apilan en una sola columna, así el orden de tabulación coincide con el de lectura. Mantén las etiquetas visibles; no uses campos solo con placeholder.
Movimiento e interacción
Movimiento ambiente sin librería de scroll
El clip de fondo se reproduce 6,9s en 1920x1414 en bucle infinito, silenciado y en línea, así que la página sigue moviéndose mientras la atención del lector está en el texto. No hace falta ninguna librería de scroll, porque el único movimiento ambiente es el propio medio. El bucle se recorta a cubrir, lo que significa que la composición no depende de un tamaño de fotograma concreto.
Hover solo donde aporta
La capa interactiva es pequeña y predecible: estados hover en los botones y los enlaces y no en todas las tarjetas. Todo lo demás se queda quieto, lo que mantiene el énfasis en la composición. El hover y el foco están especificados juntos, así que el puntero y el teclado reciben la misma información. Mantén los efectos de puntero en los controles.
Qué cambiar primero en Rare Gallery
El brief nombra Instrument Serif y la escala que la acompaña. Sustituye por una fuente con las mismas proporciones y la composición aguanta. El tema es la parte que debería cambiar.
Qué se mueve en Rare Gallery
Un paquete de animaciones predefinidas habría sido más rápido de publicar. El brief especifica transiciones de 400ms, un bucle de 6,9s y estados hover y pulsados, y por eso la página se lee como algo compuesto y no como algo montado. Nada se anima por gusto en este tipo de página de portafolio.
Cómo ordena Rare Gallery la primera lectura
Si pones tu propio texto en este tipo de página de portafolio, la secuencia se mantiene, porque los elementos no son intercambiables: navegación, el titular, la insignia de anuncio, el formulario y el clip de fondo cumplen una función propia. Quien busca agencia recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Rare Gallery?
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 1920x1414. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Por qué la ficha nombra React y Tailwind CSS?
Rare Gallery 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.
¿Cómo trato los medios de Rare Gallery en un proyecto de cliente?
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 1920x1414.
