The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
An immersive 3D brand experience for the modern roadside stop.
The vision:
Make the stop the best part of the journey. ROADHUB reimagines a 24/7 convenience store as a cinematic story, where every scroll moves the visitor further down the road.
The experience:
A story that unfolds as you scroll: bold typography, tilted colour panels and floating products set the mood before the doors even open.
A golden-hour arrival: the camera glides toward a glowing storefront as day melts into dusk.
A living, breathing store: stocked shelves, glowing fridges, a heated “Hot & Ready” cabinet, a premium coffee bar and a hanging neon ring sign. The store feels fresh, full and alive.
Shopping, the cinematic way: the camera walks up to each counter as products lift off the shelf and drop gently into your basket.
A drive into the night: the sun sets, the stars come out, headlights streak past, and the ROADHUB sign glows on long after you’ve left.
Real-world features: a premium digital menu with discounted pricing, an in-page shop with an add-to-cart haul, a custom navigation menu and an atmospheric soundtrack.
Craft and technology:
Built with Astro, Three.js, GSAP and Lenis, with custom-coded 3D environments, scroll-choreographed animation, Web Audio sound design, and performance tuning for smooth playback on desktop and mobile. Deployed on Vercel.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Hero section of one my new templates. Preview it live to see the animations.
Relay is HTML or React you actually own.
Hand it to your AI assistant and it already knows how the thing is built.
Starting at $29
https://no-code.supply/templates/relay
"Code that finishes what it started" is a great headline. Love that it's real HTML/React you own and not locked into a builder.
Day 3 of working on my project for the Lovable Challenge.
And somehow, almost one full day of those three went into the intro you see when the page first opens.
Not because it was necessary — mostly because I’ve wanted to try something like this for a long time.
Web design and development are far from my main field, so I kept putting this idea off. This challenge finally gave me a reason to test it properly — and seeing it actually work is ridiculously satisfying.
The video was converted into an image sequence and tied directly to scrolling on desktop and swiping on mobile, so the animation is controlled by the user as they move through the page.
Right now the project is already at Build 4.2.3.
The backend is working properly, the main mechanics are in place, but visually… there’s still a lot to redo. The current plan is to rebuild almost the entire visual layer before the final version.
I also found out today that Lovable reduced the number of prize spots quite significantly — apparently, there will only be 3 finalists.
That definitely makes the odds a little more painful 😅
But either way, I’m already getting a new portfolio case out of this project, and I’m finally experimenting with things I’ve wanted to build for a long time.
How’s everyone else doing?
Still working on your project, or have you already submitted it?
Or did you decide not to participate at all? If so, I’m curious — what made you skip it?
I created an engaging 404 page design concept for a recent website design client work. Made with a predesigned poster mapped into 3d puzzle pieces using 3Js.
Omg this beautiful how did you do this??