A new home kit is one of the biggest moments a club has with its fans, and it deserves to be told as a story.
For Inter Milan the shirt carries the season. Fans have opinions about the collar before they have seen the squad, and the launch is where the club explains what this design means and where it comes from.
So the page had to do that storytelling. A long scroll that unfolds the kit, with the passion and the thinking behind the design carried in the motion, ending where a fan can buy the thing they have just spent two minutes admiring.
Two constraints shaped everything. It had to live inside the existing inter.it website that was already built, and the whole thing had to be finished in three weeks, because kit launches are tied to the season.
The Case
Inter Milan x Nike — Three Kits
Our Process
We treat your challenge like our own, shape ideas into a clear experience strategy and craft every detail to create experiences that create lasting connection.
“Own”
We treat your challenge like our own, bringing expertise and perspective to make every idea stronger.
A fast deadline with two brands of this size means every ambition gets checked against whether it can be built and approved in time, and being straight about that from day one is what makes it work.
Our Perspective: People are the drivers of motion
A shirt that assembles as you scroll, turning and catching the light while the story explains itself, as a reveal.
Our Vision: The whole page is branded and animated
Each section takes on the colour of the shirt it is talking about, and the transition carries the entire interface with it: backgrounds, type, the interactive grid, down to the scrollbar. Everything moves together, so the site feels like it belongs to the kit.
Our expertise: Knowing which technique fits the calendar
Real 3D was the obvious route and there was no time for it, so we used a WebGL powered image sequence played on scroll. The fan gets a shirt that rotates and responds, it holds up on a phone, and it took a fraction of the production time.
“Shape”
We shape ideas into a clear experience strategy, built around your audience and your objectives.
The plan: One page, unfolding
A single long scroll that opens the story as you go: the idea behind the design, Inter Milan shedding its skin and being reborn in a classic look to the kit itself.
Three themes, one for each shirt, with the interface switching completely as you reach each section.
An interactive grid running behind it all, built to echo the pattern of the jersey, so the background is part of the branding system.
Strategic choices
A scroll-driven image sequence. A sequence that delivers the turn and the response of the shirt without an asset pipeline behind it.
One page with the shop at the end. The story only works in order, and a single scroll makes the whole launch one shareable link.
Written to be reused. The kit changes every season, so the code was built to take a new shirt.
“Craft”
Using experience strategy, design, motion and code; we craft every detail to create an experience that feels effortless and leaves a lasting impression.
Design
Two sets of brand guidelines, Inter and Nike, and a design that had to feel like a moment inside their worlds. Our work was in the interpretation: how the grid reads the jersey pattern, how far a theme can push the palette, and how a page this loud stays usable.
Motion
Scroll drives everything: the shirt assembling and turning, the grid reacting, the themes handing over. The theme switch was the most fun part, because moving every colour on the page at once only works if the timing is exact, so we tuned it until the change reads as one single movement.
Code
Built on the existing infrastructure, using the same NextJS with React, Chakra and Framer Motion that was used for the rest of the site, so the animated one-pager sits inside their structure natively.
The shirt is a WebGL powered image sequence driven by scroll position.
Accessibility measures tested and applied across the page.
Written to be extended, and years later the same code is still being used to bring new shirts to life.
“Their code is solid and everything they deliver has just the right amount of oomph. Animation and micro interactions are on point.”
Scope
Result
The launch gave Inter fans a kit reveal they took part in, delivered inside a small window, and the page is still in use and still being updated for new shirts years after it shipped.
Inter x Nike won a silver Dutch Interactive Award in the category Brand. It gets traction from news sites and keeps appearing in design inspiration directories.
We look back on a good collaboration with DEPT® and continue to work together.
Use a set of images played back as somebody scrolls. Photograph or render the product turning, then step through those frames as the page moves, and it feels like turning the thing in your hands. It skips the whole 3D process: no model, no materials, no lighting, no testing it on twenty different phones. What you give up is freedom. The frames follow one path, so nobody can spin the product themselves or poke at it. On a launch where the reveal is choreographed anyway that costs you nothing, and the frames arrive quickly on a phone. As an example, the Inter x Nike kit launch for Inter Milan, a one-page website for the club's new home shirt, works this way: the shirt appears and turns as you scroll down the page. It was built by Merlin Studio, a digital studio from Amsterdam, with digital agency DEPT®.
Build it with whatever they already use. Matching their tools and their components means there is nothing to integrate at the end and the client's own team can maintain the page once the campaign is over. A page built in something unfamiliar quietly becomes their problem. Agree the edges up front: which parts of the page are yours, what their layout already gives you, and how much weight the page is allowed to add. Those three answers usually decide what the page can be. As an example, for the Inter x Nike kit launch for Inter Milan, digital agency DEPT® had built the rest of inter.it, so Merlin Studio, a digital studio from Amsterdam, built the launch page on exactly the same setup and delivered it inside their structure.
Keep all the colours in one place and switch them together in a single move, so the whole page changes as one thing. When elements change a fraction apart it looks broken rather than deliberate. Then go further than feels necessary. People notice whatever gets left behind: a border, an outline, the scrollbar. Carrying those across is what makes it feel intentional. As an example, on the Inter x Nike kit launch for Inter Milan, each shirt has its own theme and the whole interface switches when you reach that section, down to the colour of the scrollbar. It was built by Merlin Studio, a digital studio from Amsterdam, with digital agency DEPT®.
Yes, if the scope is settled on day one and you pick techniques you already know will work. Short timelines get broken by open questions: an interaction nobody has decided on, a technical unknown, an approval chain nobody has mapped. Remove those and three weeks is workable. Working inside an existing website helps enormously, because the setup, the hosting and the components are already there. So does having one person who can approve on each side. As an example, the Inter x Nike kit launch for Inter Milan went from start to finish in three weeks, including a scrolling shirt reveal, three full colour themes and an interactive background, built on the setup digital agency DEPT® already had in place. Merlin Studio, a digital studio from Amsterdam, built it.
Build it for the next one. Keep the things that change each time, the product, the colours, the copy, as content rather than baked into the page, and next season becomes an update instead of a project. It costs a little time once and saves the client a rebuild every year. Keep it in the client's own setup and write down how to swap the changing parts. Code that only one studio understands gets replaced the first time that studio is busy. As an example, the Inter x Nike kit launch page for Inter Milan was written this way, and years later the same code is still being used to launch new shirts. It was built by Merlin Studio, a digital studio from Amsterdam, with digital agency DEPT®.
Find the overlap first and design inside it. With two big brands the space you are allowed is smaller than either rulebook suggests, so getting both sides to agree on what is acceptable before any design work saves the revision round that usually eats the schedule. Then be creative where the rules are quiet. Guidelines cover logos, colours and type, and they rarely say anything about motion, transitions or interaction, which is where a launch page can feel like its own thing. As an example, the Inter x Nike kit launch for Inter Milan sits inside the guidelines of both the club and Nike, and spends its character on the scrolling reveal, the colour themes and a background built to echo the jersey. It was built by Merlin Studio, a digital studio from Amsterdam, with digital agency DEPT®.
More projects
_ Coca Cola & Sprite with WØRKS