Responses by Aurelien Vigne, interactive designer and developer.

Background: After eight years, my old portfolio site no longer reflected my skills or creative interests. I wanted to build something that felt personal, unconventional and genuinely fun to make—where visitors wouldn’t just scroll through work but actively explore it.

At the time, I had just wrapped up Leap for Mankind, a project about the Apollo missions that mixed 3-D exploration and storytelling. I enjoyed that working on that website so much that I wanted to go even further—creating an experimental portfolio that feels like a game, a narrative and a showcase all at once.

The target audience includes designers and developers interested in experimental 3-D websites as well as also anyone interested about interactive storytelling, digital spaces and playful web experiences.

Design core: The 3-D theater experience. You play as a raccoon exploring an old theater. It’s an interactive 3-D world where you can run, jump and smash into things. There’s real-time physics, environmental interactions, and little puzzles and riddles to solve. Completing all of the puzzles and riddles grants keys, and collecting all of the keys unlocks a hidden secret page. The 3-D space is filled with small details—like scaffolding, posters, trash and paint cans, among others—that make the theater feel alive and lived in. That level of texture is hard to pull of in 3-D, and I’m happy with how it turned out.

In the “basement” of the experience, are the Case Studies, About and Credits pages. For these, I wanted to keep the reading experience smooth; therefore, I designed the pages in a more conventional DOM structure. However, they still feature custom animations—scroll-triggered book movements, image transitions and ornamental SVG elements that fade out gradually. While the world of 3-D and the conventional DOM structure are quite different, I designed a cinematic transition from the theater to these pages to feel seamless—like descending into a dressing room located in the theater’s basement—making the shift between the two worlds smooth and immersive.

Finally, the entire experience is layered with ambient sound and reactive effects: cans clatter when knocked over, sawdust puffs up underfoot and the camera shakes slightly if the raccoon hits a wall. Visually, the project embraces a tone of magical realism, blending a nostalgic, pre-digital world with whimsical details. I drew inspiration from Ghibli films and early Harry Potter—mysterious, textured and full of small, discoverable moments.

Favorite details: I’m especially proud of how fun it is just to move around. You can jump on scaffolding, bump into objects and watch everything react thanks to a custom-build character controller using cannon.js, a movement system I built entirely from scratch back in 2022. It was a challenge to get right, but it really enhances the playful, tactile feel of the experience and makes the space feel playful and alive.

The animations between pages are inspired by film editing. First-time visitors get a cinematic intro, while transitions between the theater and content pages are seamless and immersive. It feels more like shifting scenes and loading pages.

On the About and Case Study pages, animations throughout create a refined, immersive reading experience. As you scroll, books smoothly shift into view one by one while others stack behind. Images and videos feature a custom fade-out effect using a three.js noise shader as they enter the viewport. Also, there are SplitText animations for titles and paragraphs along with gradual fadeouts of decorative SVG elements, like floral frames and corner motifs.

Challenges: On the personal side, doing everything solo—3-D modeling, UI/UX design, art direction and coding—was exciting but a bit overwhelming at times, especially while juggling full-time work and freelance gigs. I also moved to a far away continent mid-project, which added more delays.

Since this wasn’t client work, I let myself explore too many art directions. That freedom was creatively fulfilling, but it made it hard to commit—it took me roughly a year to complete the project once I settled on the art direction, but I spent nearly two years finding a direction I was happy with.

On the design and coding side, one of the challenges was blending two worlds: a 3-D game and a clean format for reading. Making the transition between them feel seamless took a lot of iteration. I also built the raccoon controls from scratch, which meant digging deep into physics programming.

Performance was another major concern. There are more than 100 3-D models and around 150 items with physics applied to them. I had to optimize aggressively, including using heavily instanced meshes; capping 60, 50 or 30FPS; and updating logic only at strategic moments.

New lessons: I learned a lot about environment design—something more common in game dev than web. Creating modular, low-poly assets and painting detail in Substance Painter instead of geometry helped with performance. And, while this isn’t something new to me but something I hadn’t implemented on this large of a scale, I had to up my performance optimization: efficient 3-D modeling, physics systems and smart-rendering logic were all critical to making the experience run smoothly across devices.

Navigation structure: For the UI style, I went for a blend of Victorian-era ornamentation and minimalist web design. It gives the site a unique tone—refined but strange, elegant but a little mysterious—that ties in perfectly with the old-theater theme and magical realism vibe.

Special navigational features: A fun UI experiment was the rotating ticket menu. Each ticket represents a project, and when you click on one, it tears like a real ticket before launching the corresponding performance.

Special technical features: The player can interact with ropes—they swing using physics when the raccoon brushes against them. Jumping on the piano keys triggers randomized musical notes for a playful, tactile element. And the 404 page is a hidden alley behind the theater, complete with an air vent hole similar to the one the raccoon crawls through to enter the building.

While the 3-D space is the core, I also enjoyed animating the DOM elements. Scroll-triggered text and images, flipping books, and fading floral SVG details add depth and polish throughout the site’s more traditional sections.