ToyBoxX
Development of ToyBoxX's animated, multi‑layered recording studio website, using Gatsby, React, TypeScript, and Contentful to combine parallax, glitch effects, and CMS‑managed content into a distinctive digital experience.
In Detail
The opening brief for this project arrived directly to my phone late one evening from a client I'd worked with before. In his own unique style, it was less of an email and more of a stream of consciousness, with thoughts, ideas, and emojis interspersed throughout.
He opened by describing the venture:
“It's a Recording studio .... obviously 😀. The name is ToyBoxX. It's short / easy to remember and basically the place is like a toy box 📦 / full of amazing kit ..... big boys toys ..... it's a modern highly capable place ..... but buildings don't make records people do
He went on to describe what they needed:
“We don't have a logo .... just the name ....... we have plenty of nice pictures .... and some videos posted up on social media about the old place ..... I'd like it to be fun and vibey ..... not too serious / not corporate / but fun / with some cool twists 🙃 ....... I've found some cool pics and ideas on the internet which I could send you. So the basically we'd need a homepage where maybe you could navigate to other pages from maybe within the artwork ? ‑ Not just standard blocks at the top of the page etc ?? / cool vibey / with a great logo 🕶
And he closed with:
“Almost every studio site on the planet is basically crap ..... other than the one you did 😀 😀 😀 😎 👍
Obviously, a brief like this was always going to lead to an exciting and unusual project, and closing with a compliment like that only made me keener to be involved.
Over the following weeks, I brought in Mike Etheridge for his design and imagination, matched only by that of the client, and together we shaped a proposal for a unique, immersive website. We settled on a stack I'd already used successfully across several projects:
- Gatsby: a React‑based static site generator well suited to this kind of highly animated and interactive front end;
- Contentful: a headless CMS integrated with Gatsby via GraphQL, giving the client direct control over content and future updates.
Rather than introducing a dedicated animation library, I used Sass and combinations of CSS animation and keyframes throughout the project to create the layered, interactive experience. That approach drove the site's parallax effects, multi‑layered movement, and randomised glitches.
A Simple Walkthrough
This walkthrough gives a sense of the loading, layered parallax, glitch effects, and characterful transitions that shape the ToyBoxX experience.
The Unavoidable Loader
With so many layered assets and media elements, some form of loading experience was unavoidable. Whilst every optimisation opportunity was taken, presenting the site before those assets were ready undermined the intended experience, so I introduced a characterful loader that ensured everything was in place before revealing the page.
With asset and code optimisation, alongside CDN delivery, the loader was typically visible for under two seconds.
Animated Navigation
The navigation was treated as part of the wider visual experience rather than a purely functional overlay. A columned reveal scaled cleanly across mobile and desktop, with the same glitched text treatment used elsewhere on the site carrying through into the interaction.
Journey down the Rabbit Hole
This scroll‑driven component combines changing imagery with progressively revealed text, calculating image selection and placement as the user moves through the page. The entire experience is content‑manageable, allowing the client to control both the number of images and the length of the message through the CMS.
Captive Imagination
The ToyBoxX website was designed to capture the imagination of prospective artists, showcase the studio's state‑of‑the‑art facilities, and attract both established and emerging talent. That ambition shaped a deliberately unconventional visual and interaction style carried consistently across the site.
- "
John Kavanagh is one of the most open‑minded developers I have ever worked with. His appreciation of great creative work, his enthusiasm and 'anything is possible' attitude is always a breath of fresh air. I worked with him on several successful projects in our days at McCann Worldgroup. Since then we have collaborated on many freelance projects and he's always been super efficient and effective, combining a great work ethic with immense talent. If I ever have a creative digital project which needed bringing to life, John is the first developer I call on."
