From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
Background
First up, it’s been a long time coming. Our previous site, seemingly loved by many, had been around since 2016. We went through about four complete redesigns from 2018 onward, each time getting closer to releasing a new version, only to stop. Why? Well, we often got sidetracked with paying work, prioritizing that above all else. This resulted in us neglecting our own needs and pulling the plug because we either felt it didn’t look as fresh as it once did, or felt we needed to head in another direction.
But needs must, and it reached a point where we had to get something done. After all, we’ve been busy with client work for the past eight years without sharing much. So, in 2024, we embarked on a rebrand and created a new site. This article is a snapshot of our process and how we developed the Unmistakably Original Studio site.
Trapped in Design Purgatory
Our main goal throughout this process has always been to enjoy the possibilities and create something that reflects our excitement for design and our eagerness to innovate and disrupt.
We spent countless weeks, days, and hours on design concepts and themes. We explored everything from our very own ToyFight.TV, featuring a series of channels with an infomercial/community TV vibe, to more mature, grown-up versions of us, where you could explore our agency culture and get to know us better.
None of these felt right. Too crazy might make potential clients walk away, but revealing too much also felt wrong; we liked being slightly aloof. We knew people had a fondness for our brand and site (pro tip: use “/” to access TOS and type “Old”), and we were mindful of how we would be perceived. Ultimately, we sought a balance that felt authentically us, without losing the playful spirit that defines ToyFight.
Designing for the Senses
It was important for us to create a design rooted in our playful nature. Our original site had explored action figures, so for the next version, we chose another genre of toy: gaming. We quickly began mixing old design technology with new, combining utilitarian design with bright colors, quirky textures, and odd mechanisms.
We wanted to make something people could have fun with and play.
Jonny – ToyFight
To do this we introduced more 3D, sound, motion, bags of video, and a sprinkling of subversive magic through our very own terminal (TOS).
I think it’s really clear that we had fun making some of the components of the site. Whether it’s leaving us a message on our answering machine (keep it clean), our parody store selling “designer” goodies, or our unconventional 404 page—hell, we even have a techno mode for when you need a pick-me-up—it’s all part of the fun.
Development Approach: Setting the Foundations of Fun (Seriously)
Like with the majority of our site builds, we started off with our bespoke Next.js starter project ToyBox®. We use Styled Components for CSS, which we enhance with a few purpose-built utilities for grid layout and responsive size handling. Being able to drop in <GridItem> wrapping components with column props per breakpoint, and setting your margins and padding using a multi-stage clamp function so that it perfectly matches the designers vision for mobile, tablet, and desktop, and scales gradually between, makes layout a breeze.
That said, we couldn’t really call ourselves “Unmistakably Original” if our starter was full of predefined styles, so it’s not. It’s completely bare-bones when it comes to what you actually see on the screen. So like any other site, we spend a lot of time making sure everything is pixel-perfect.
Bringing the Site to Life
GSAP, basically. Shout out to Lenis for our smooth scroll and Spline for our 3D models, but GSAP is the super power behind most of the site animations. Special appreciation has to go to their ScrollTrigger and SplitText plugins and matchMedia method, some combination of which is present on every page of the site.
Video, and Lots of It
We decided to use Cloudinary to host our video assets. Case studies tend to be some of the higher traffic pages and are prone to spikes in viewers once a new one is published, and we like to use a lot of video in ours!
Cloudinary enables us to organise all our video assets in one place and have them automatically transform and optimise for our front end, all while handling much higher bandwidth for our buck compared to any CMS.
TOS (ToyFight OS)
We always had a need to put something into the site that that allowed us to enhance it or manipulate it in some way, with new features and, more importantly, easter eggs and secrets, as time goes by. The ToyFight Operating System (TOS) gave us that opportunity. We created a terminal-inspired, text-prompt-powered site editor that lets users navigate through and modify the site as they please. There’s no particularly unique development behind this feature – we just wanted to mention it.
Leave a Message
The things developers will do to avoid handling form validation. We built a functioning answer machine; complete with a pre-recorded intro, upload (thanks again, Cloudinary), Slack notifications for our team to listen to any new messages, and a 3D pull-cord answer machine.
Our recorder’s audio visualiser was built using AudioContext and Canvas, and messages are sent to Cloudinary through their Upload API. We use another API request to fetch the approved audio tracks to feed into the device. The approval process was a late addition, but has proved essential. You lot are strange. This is also fed into our internal slack where members of the team can review messages and approve via this.
3D Retro Love
Typically we would build out custom WebGL from scratch, but as time was of the essence we decided to utilise Spline to bring the 3D elements of the site to life. We used the <Spline> component from splinetool/react-spline with a URL kindly provided by our 3D designers, sprinkled a little lazy loading suspense in there for good measure, and boom, interactive handheld console.
There was a little extra work required for the interactive buttons on the answer machine to interact with other elements on the site, but it was still surprisingly straightforward (not accounting for the design hours spent bringing the model to life).
Conclusion
The project has been a joy (mostly); our ideas were ambitious and we needed tons of creativity and technical know-how from the team to make it happen. We’re so happy to finally get a site out there that we can keep playing with and tweaking as we go as this is something we felt very strongly about.
We’ve also been so happy to feel the love and support from the design community. Our journey has been a long one, and full of learning experiences, ups and downs, pushing ideas, killing ideas, designing, then redesigning, but finally it’s been a privilege to see it all come together in the end.
We’re excited for what’s next!
Our Stack
- Next.js Framework
- GSAP for animation
- React Three Fiber + drei for WebGL
- Prismic for CMS
