After sharing my interactive portfolio, I wanted to continue exploring the same idea: what happens when we start combining traditional websites with concepts borrowed from game development?
That first experiment focused on bringing game-like mechanics and interactions into a portfolio experience.
This time, I wanted to push the concept further.
The goal wasn't to create a game inside a website, but to explore a hybrid experience where a website feels more alive and memorable.
For my professional website, I replaced the previous static hero section with an interactive 2.5D scene built with Three.js.
Demo video
Since this project is highly visual, I recommend watching the short demo video to see the interactions in action:
LinkedIn post:
https://www.linkedin.com/feed/update/urn:li:ugcPost:7486726590236717056/
You can also try the experience directly:
https://matteosantoro.dev
From a static hero section to an interactive environment
Until recently, my homepage hero section was much simpler.
It was a static composition where the only interaction was changing the image on the right side when hovering over the CTA buttons.
I wanted to completely change this approach.
The new hero section became an interactive 2.5D scene inspired by retro gaming.
The character in the scene is not a playable game, but a small autonomous environment living inside the website.
The avatar does not simply move in the background: it reacts to user interactions.
When the user hovers over the CTA buttons, the character receives an input and moves toward a specific point in the scene, such as reaching a chest placed inside the environment.
The system also includes:
- autonomous random movement
- collision handling
- environmental interactions
- dynamic weather
- day/night cycle
The goal was to create something that is not just a decorative animation, but an active part of the user experience.
Creating a living website
The idea behind this experiment is to move away from the traditional concept of a static landing page.
Instead of creating a page that looks exactly the same every time someone visits, I wanted to build a small digital environment that can change over time.
The roadmap includes new behaviors and events based on:
- time of day
- weather conditions
- user interactions
- environmental states
For example, visiting the website in the evening could trigger completely different behaviors compared to a daytime visit.
The avatar could be sitting near a campfire, playing video games, or performing other activities depending on the current state of the world.
The performance challenge
One of the biggest challenges was keeping the experience performant.
Adding real-time rendering, animations and autonomous behaviors can easily impact loading times and user experience, especially on mobile devices.
The scene was optimized to maintain strong Core Web Vitals and Lighthouse scores, losing only a few points compared to the previous version despite the increased complexity.
The experience is also fully responsive and optimized for mobile devices.
What's next?
This is only the foundation.
The goal is to continue exploring the boundary between websites and interactive experiences.
Can a website become something more than a collection of pages?
Maybe the future of web experiences will not only be about faster websites and better interfaces, but also about creating digital environments that users can remember.
I would love to hear your thoughts:
Could this approach become a bigger part of future web experiences?
SOCIAL SHARE CARD GENERATOR