Build a masonry layout for a fictional textile printer, Loomhouse, on off-white (#f5f2ec) with ink (#1d1b19) and madder red (#c4452b): a striped logo, a "Swatches ordered 0" pill, the serif headline "The print library, 20 patterns for linen" and 44px filter chips (All, Stripes, Florals, Geometric, Marks) with counts. Below, a rounded frame (#ebe6dc, 22px corners) that scrolls inside itself with a fade at the bottom. Fill it with twenty tiles 0.8 to 1.45 times as tall as wide, each an SVG pattern fill: ticking, Breton stripe, ikat, gingham, buffalo check, florals, ditsy flowers, sprigs, tulips, harlequin, scallops, rainbow arches, houndstooth, waves, terrazzo, shibori rings, brush dashes, polka dots and cross stitch in indigo #273a6b, ochre #d39b2a, sage and rose. In JavaScript place each tile in the shortest of 5, 4, 3 or 2 columns and move tiles with CSS transforms over 750ms on cubic-bezier(.2,.8,.2,1), staggered 28ms; on load they rise 80px into place. Filtering fades the others and reflows the rest. Hover lifts a tile and slides up a dark caption, always shown on touch. Clicking opens a dialog with a large swatch, colour dots, an "Order a free swatch" toggle, prev, next, Escape and a focus trap. Mouse drag scrolls with momentum; arrow keys move between tiles. Phones get two columns and a sideways chip row.
Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.
Use it in three steps
- Copy the prompt with the button above.
- Paste it into your tool, such as v0, Lovable, Bolt or Claude.
- Make it yours by replacing the patterns with thumbnails of your own work.
About this masonry layout
A masonry layout suits pictures of different shapes, because each one drops into whichever column is shortest instead of lining up in rows. This one is built for a pattern library. Twenty prints, from ticking stripes to shibori rings, are drawn as SVG pattern fills, so every tile is sharp at any size and the page loads no images at all.
The columns are worked out in JavaScript and every tile moves with a CSS transform, which is why filtering looks so calm. Choose Florals and the other tiles fade while the five flowers glide into new places one after another. The grid lives inside its own scrolling frame, so it fits a phone screen, and a mouse can drag it like a sheet of paper. Each tile opens a dialog with a large swatch, its colours and a button to order a sample.
Why the prompt works
- It explains the shortest column rule, the whole idea of masonry, in one line.
- It moves tiles with transforms and a stagger, so reflowing never jumps.
- It lists the patterns and colours, which keeps the grid looking like one collection.
- It covers touch and keyboard, captions that always show and arrow keys between tiles.
Where to use it
Portfolios, pattern and wallpaper shops, recipe collections, mood boards and any gallery where pictures come in mixed shapes.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
