Cracked

Developed in collaboration with Nessim Higson, this project explores how typography can emerge from texture instead of traditional letterforms. Using a curated collection of glass fracture assets alongside generative crack patterns, every word becomes a unique composition that mimics the appearance of a shattered display. The result is a visual illusion that balances abstraction with legibility, encouraging users to create their own cracked-screen artwork from any word they choose.

01

Setup

The first challenge was making each composition feel unique. Fortunately, Ness had created between three and six variations for every letter, allowing each character to be selected at random. From there, I generated columns with varying widths, randomized each letter's vertical position within the canvas, and introduced subtle rotation. These small variations ensured that every word felt naturally fractured rather than mechanically assembled.

Brooklyn
The letter 'A' with it's markers.

Anchor points


While the randomized letterforms worked well on their own, we felt the illusion wasn't complete—the cracks needed to continue seamlessly across the entire composition. To achieve this, Ness created an additional library of glass fracture assets, including nine vertical connectors, sixteen horizontal connectors, and dedicated corner cracks.

To align these assets, I embedded small red and blue marker pixels into every letter image. At runtime, the canvas scans each letter to locate those markers, using their coordinates as anchor points for the connecting fracture lines. Once their positions have been recorded, the marker pixels are made transparent, leaving only the finished composition visible. This approach allows the crack patterns to flow naturally between letters, making the final image feel like a single shattered screen rather than a collection of separate characters.

02

Assets

The project is built from a library of 122 handcrafted assets. Below is a small selection of the different components.

The first letters of the alphabet.
These are some of the vertical lines.
The corner pieces that give the finishing touch to the composition.
03

Demo

A quick look at the experience in action. For the full effect, visit the site and create your own compositions.