Interactive · Game UI
Design an ad, then watch it hijack a neon city.
A cinematic, game-style creative experience built around the Unlayer React Image Editor.
Outcomes
- A full mission flow: brief, studio, a cinematic takeover, then a shareable result
- Artwork is perspective-mapped onto 8 spots, from a highway mega-board to a banner plane and taxi topper
- All music and sound effects are synthesized live with the Web Audio API, with no sample files
- Exports a 1080×1350 share card for stories and feeds, and every screen works on mobile
The problem
Image editors are useful but flat. The brief was to show off the Unlayer React Image Editor in a way people would actually want to play with and share, instead of another plain upload-edit-download demo.
What I built
A React and TypeScript app on Vite, framed as a game. Players pick a hustle and a spot, edit their art in the embedded Unlayer editor with the right aspect ratio for that sign, then watch a six-beat takeover: a rival ad glitches, a hack panel runs to ACCESS GRANTED, their art flickers on, and a crowd pushes up a HYPE score. It includes three original synthwave radio stations, a radio wheel, a minimap and a phone-feed result screen, with Playwright scripts that capture every screen.
Built with
- React
- TypeScript
- Vite
- Unlayer Image Editor
- Web Audio API
- Playwright