[ hero image ]

overview

Glitch It! is an image editor built around deliberate image corruption. It started on macOS and grew an iOS companion that shares the same effects engine, so the same twenty-two effects behave identically on a Mac and on a phone. I designed and built all of it.

I'd been making glitch art by hand for years, and that process is slow and unrepeatable: you corrupt a file, you get one result, and you can't nudge it. I wanted to see what the practice felt like once the damage became adjustable.

the effects

Twenty-two effects run on the GPU through Metal, grouped by the kind of failure they imitate: transmission damage like Packet Loss and Screen Tear, codec damage like JPEG Compression and Datamosh, analog damage like VHS and CRT Screen, and structural sorting like Pixel Sorting and Slice Displacement. Each one previews live against an intensity slider and commits to a stack, so order of operations becomes part of the composition, and a visual history lets you revert to any earlier state by thumbnail.

[ effect grid, live preview, effect stack ]

FIG_01 — Effect library and the stacking editor

paint mode

Instead of applying an effect to the whole frame, you can paint intensity onto the image with a finger and the strokes become a mask. Brush size and opacity behave as you'd expect. The third control, hardness, is the interesting one: at 0% it falls off like an airbrush, and turning it up quantizes the falloff into concentric steps so the brush edge itself goes pixelated. A soft control that makes a hard, digital artifact.

Three selection modes decide where an effect can land: freeform, rectangle, and a magic wand running a flood fill with an adjustable colour tolerance.

[ paint mode, brush hardness comparison, magic wand selection ]

FIG_02 — Paint Mode and the hardness control

design system

Being both the designer and the developer meant the design system had somewhere to actually live. Tokens are defined once in code and mirrored into a Figma UI Kit with matching names, so spacing/md means the same sixteen points in both places. The palette is a neon green on a near-black green, with one red reserved for Paint Mode so the destructive mode never gets mistaken for the normal one.

[ token tables, figma ui kit, ios / macos side by side ]

FIG_03 — Shared tokens across code and Figma

accessibility and privacy

The app ships high contrast and colour-blind modes, VoiceOver labels that describe what each effect actually does, enlarged touch targets, a reduce-motion path, four levels of haptics and Siri Shortcuts for applying effects hands-free, against WCAG 2.1. There's also no network code in it at all: every image is processed on-device and the app works in airplane mode.

outcome

Beyond the editor there's a home screen widget that cycles your recent pieces, a share extension for sending an image in straight from Photos, and animated GIF export with progress on the Lock Screen and in the Dynamic Island. Building the tool changed how I make the artwork: I prototype compositions in the app now and finish them elsewhere.