galleries

Estante de insignias con empaquetado por filas

Estante de insignias de tamaños mezclados que se colocan sin solapes con un empaquetado propio por filas de altura variable: cada pieza entra en la primera fila donde cabe y solo se abre fila nueva cuando ninguna la admite, así las pequeñas rellenan el hueco que dejan las grandes. Al mover el control de ancho o al cambiar el tamaño real del contenedor (ResizeObserver) se recalcula el empaquetado entero y las insignias viajan a su nueva posición con FLIP, y un conmutador enseña la envoltura simple con el porcentaje de espacio aprovechado en cada modo.

Verlo en vivo y copiar su prompt

Qué se puede ajustar

Ancho del estantenumber · de 240 a 360px
Separación entre insigniasnumber · de 2 a 20px
Color de acentocolor
Color de la insignia destacadacolor
Radio de la insignianumber · de 0 a 26px
Tamaño base de la insignianumber · de 38 a 64px
Mostrar aprovechamientoselect
Velocidad de recolocaciónnumber · de 120 a 1200ms

Cómo funciona este catálogo

Cada componente trae su prompt de reproducción: el texto que se pega en un constructor con inteligencia artificial para obtener exactamente esta pieza. Los valores que ves arriba son editables, y el prompt que copias lleva dentro los que hayas elegido, así que lo que se genera es lo que estabas mirando.