Arena Embroidery Inc
Website and IT setup for an NYC/LA embroidery studio: UI inspired by embroidery machine interfaces, a custom CSS stitch animation on the homepage, and Google Workspace plus collaboration tools so the team could scale beyond a whiteboard.
Arena Embroidery Inc is an embroidery studio with locations in New York City and Los Angeles. They started as a small workshop, but quickly grew by getting attention from Zohran Mamdani. When I came on, the studio had only a "coming soon" site and ran scheduling on a whiteboard. I helped design and develop their website from scratch and set up their IT environment so they could operate and grow without outgrowing their tools.
Mamdani discovered Arena and asked them to make his custom jacket; that work gained attention from some of the world’s largest media companies. Coverage included:
- GQ: https://www.gq.com/story/zohran-mamdani-carhartt-jacket-nyc-snowstorm
- The New York Times: https://www.nytimes.com/2026/02/02/style/mamdani-carhartt-jacket-rama-duwaji.html
- Fast Company: https://www.fastcompany.com/91481344/zohran-mamdani-jacket-typography-comes-from-city-history
- NY1 news station: https://ny1.com/nyc/all-boroughs/news/2026/02/02/fashion--mayor-mamdani--brooklyn
- NHK in Japan: https://www.youtube.com/watch?v=lr4ohWSAbfI
Rocco, the owner, had a clear creative direction: he wanted the site to feel like the interface of embroidery machines — industrial, precise, and tied to the craft. He also wanted animations that echoed how embroidery software renders work: gradual stitching patterns that reveal the design over time, so visitors get a sense of how embroidery is built stitch by stitch.
The hardest part was the homepage animation. Rocco screen-recorded his embroidery software playing back a stitch animation. My first approach was to turn that recording into a GIF and render it on the homepage. The result looked great, but the file size was huge. GIFs are inefficient for this kind of content, and during development my Vercel blob storage hit its limit and maxed out while I was testing — a clear sign that we needed a different approach.
Instead of serving a heavy asset, I recreated the effect in code. I took the Arena logo and, in Illustrator, split it into two parts: the main mark (text/foreground) and the background, using a mask so the two sections could animate independently. I made sure both exported assets were in the kilobyte range, not megabytes. Then I built custom CSS animations that mimicked the original GIF: the "stitching" order and timing, so the logo appears to be embroidered gradually, just like in his software. The result is a lightweight, scalable animation that fits the brand and doesn’t depend on blob storage or large media.
Beyond the site, I helped stand up their IT environment: Google Workspace for email and collaboration, and we evaluated and integrated tools like Slack, Airtable, Firebase, and Firestore so the team could manage projects, assets, and operations in one place. The goal was a foundation that could grow with the studio as they moved from whiteboard scheduling to a real web presence and structured workflows.
Design direction: embroidery machine interface
Rocco wanted the site to feel like the interface of embroidery machines: industrial, precise, and clearly tied to the craft. The visual language and layout were guided by that — controls, readouts, and the sense that you're looking at a professional tool, not a generic marketing site.
The animation challenge: from screen recording to GIF
Rocco wanted animations that mirrored how embroidery software renders work — gradual stitching that reveals the design over time. I had him screen-record his software's animation and tried to turn it into a GIF for the homepage. The result looked good, but the file size was too large; GIFs are inefficient for this kind of content. During development, Vercel blob storage maxed out in the test environment, which made it clear we couldn't rely on a single heavy asset.
Solution: split logo, custom CSS animation
I recreated the effect in code instead of serving a big file. In Illustrator I split the Arena logo into text/foreground and background using a mask, exported both as small assets (kilobytes, not megabytes). Then I built custom CSS animations that replicate the stitch order and timing of the original — so the logo appears to be embroidered gradually on the homepage, without touching blob storage or loading a multi-megabyte GIF.
