La línea de base es de 1 píxel, pareja y opaca. Encima, cada molde tiene su propio gesto, elegido según su paleta y su rubro. Uno solo por página: lo que se mueve mucho no se luce.
Cómo se prueba: apretá el botón de cada molde para ver el gesto. En la web real aparece al pasar el mouse por la caja.
Filete que sube
Papel y tinta con un acento ladrillo. Un solo trazo abajo, fino, que se dibuja de izquierda a derecha. Se lee como un local de barrio bien puesto: nada grita.
Barrido de luz
Fondo petróleo casi negro con brasa. El borde no se pinta: pasa una luz diagonal, como el faro de un auto en la ruta. Es el gesto cinematográfico del molde.
Marco corrido
Papel claro y verde tranquilo. Aparece un segundo marco corrido 7 píxeles hacia afuera, como el marco de un cuadro. Da aire y precio alto.
Esquinas de visor
Negro con lima ácido y letra ancha. Cuatro esquinas en L que se encienden como el visor de una cámara. Tecnología sin ruido.
Trazo de pincel
Hueso, verde y barro. Abajo aparece un trazo de 3 píxeles que va de verde a barro y se corre apenas torcido. Parece dado con pincel, no con regla.
Muestra de color
Papel cálido, terracota y mostaza: es un muestrario. Arriba se corre una tira fina con el degradé de la casa, como una carta de colores.
Cinta de obra
Negro y amarillo, venta al pintor. Arriba aparece una cinta rayada que corre sola, como la cinta de peligro de una obra.
Góndola que se acerca
Naranja de retail sobre papel claro. El gesto no es de línea sino de altura: la caja se levanta 3 píxeles y el borde se tiñe de naranja, como una góndola.
Reglilla
Acero azul y naranja, molde de calculadora. Abajo aparece una reglilla de marcas finas: el borde se vuelve instrumento de medición.
Estante
Negro grafito y amarillo de herramienta. La caja se asienta y el ícono se levanta un poco, con el borde en amarillo: como una herramienta en su gancho.
Si querés que otro lo haga igual, o que se aplique a un molde nuevo, este es el texto completo.
Necesito cambiar el borde de las cajas de producto. Reglas: 1. La línea de base: 1 píxel, sólida, opaca y pareja. Sin halo, sin brillo, sin degradé, sin vidrio esmerilado. Las esquinas no pueden deshilacharse (nada de border transparente ni doble fondo con background-clip). 2. Un solo gesto por página, y que aparezca al pasar el mouse o al tocar. En reposo, la caja queda quieta. 3. Que el gesto use los colores de la paleta que ya tiene la página. Nada de colores nuevos. 4. Que sea liviano: sólo CSS, sin librerías ni imágenes extra. 5. Si el sistema pide menos movimiento (prefers-reduced-motion), el gesto no corre. 6. En celular, donde no hay mouse, la caja tiene que verse prolija igual: el gesto puede no aparecer, pero el borde no puede quedar cortado ni torcido. Gestos aprobados por paleta: - Papel y tinta con acento ladrillo: filete de 2px abajo que se dibuja de izquierda a derecha. - Fondo petróleo con brasa: barrido de luz diagonal, como un faro. - Papel claro con verde: segundo marco corrido 7px hacia afuera, aparece suave. - Negro con lima ácido: cuatro esquinas en L, tipo visor de cámara. - Hueso con verde y barro: trazo de 3px abajo, degradé verde a barro, apenas torcido. - Papel cálido con terracota: tira de 4px arriba con degradé terracota a mostaza. - Negro con amarillo: cinta rayada amarilla de 4px arriba que corre sola. - Naranja de retail: la caja se levanta 3px y el borde se tiñe de naranja. - Acero con naranja: reglilla de marcas finas abajo, 7px de alto. - Grafito con amarillo: la caja se asienta y el ícono se levanta y rota 3 grados.