Creative Code 02 · Tool · Creative code

Grid Mess

A tool that turns any image into a typographic composition ready for the feed.

Client: Personal project
Year: 2026
Role: Design and development
Services: Interface design
Creative code
Web tool
Tools: HTML
CSS
JavaScript
Canvas

Grid Mess tool interface: a control panel on the left and, on the right, a black star with irregular points cut into stretched blocks, with uppercase labels.

The tool

The image is divided by an irregular grid. Each block gets a label and is stretched horizontally or vertically, creating a graphic composition from any photo or illustration. It works best with a transparent-background PNG.

Full screen of the Grid Mess tool with the sample star loaded: a panel with image operations, output format, annotation mode, grid parameters and stretch options. — The interface: everything in one panel, with the preview next to it.

Controls

Image: Upload, drag, paste (⌘/Ctrl+V) or use the sample; rotate 90°
Format: Original, Feed 4:5, Feed 1:1, Landscape feed 1.91:1 and Stories 9:16
Background: White, black or transparent (PNG)
Labels: Local analysis by color and texture, custom text or numbers only; Portuguese, English and Chinese
Grid: Complexity, coverage and generating new grids
Stretch: Intensity and balance between horizontal and vertical
Export: PNG or JPG at the exact dimensions of the chosen format

Sample output from the tool: a black star split into stretched blocks, with a visible grid outline, the uppercase labels BADERNISMO and COURO and the word leather in Chinese characters, each one numbered. — Sample output with custom labels: BADERNISMO, COURO (leather) and “leather” in Chinese (皮 and 革).

Privacy

Everything happens in the browser. The image isn't sent to any server and the site doesn't store anything.

Open the tool