07 / 09
MOS Studio
A boutique movement studio, rebuilt from a WordPress backup into an editorial site.
- Role
- Design & build
- Context
- MOS Studio, Madrid, 2026
- Stack
- Next.js, React, Tailwind, GSAP, TypeScript, bsport, Playwright, Vercel
MOS — the new website, in motion
- 30commits in 4 days
- 9routes
- 32sreel rendered in code
The problem
The old WordPress/Elementor site lived on an agency server: most ‘Reserva’ buttons hit a 404, the hero slideshow never displayed, and MOS's assets were mixed with other clients' in 3,000 uploads. The founders wanted something black, clean and editorial that ‘doesn't feel loaded’.
What I did
- 1Recovered the site from an 887 MB backup and a 313 MB SQL dump, extracted the Elementor pages and separated MOS's assets from other clients'.
- 2Rebuilt it in Next.js, then redesigned it end to end: black and beige, one accent colour per page, letter-by-letter headline reveals, scroll motion and rolling button text with GSAP.
- 3Embedded the bsport booking calendar and client login with a custom dark theme, and routed every booking button to a working flow.
- 4Turned the founder's video feedback into transcribed change lists — 3+ rounds and 30 commits in four days.
- 5Rendered the 32-second Instagram launch reel as an HTML/GSAP timeline captured frame by frame with Playwright and encoded with ffmpeg.
Outcome
- ‘Honestly, so much better.’ — the founder, on the redesign.
- Every booking path works; pricing is wired for direct checkout.
- A launch kit — reel, carousel and cover — produced from the same codebase as the site.