Vincent Villanueva
Turning brands into unforgettable 3D web experiences
New to Contra
Vincent is building their profile!
LUMÉA is a premium skincare store designed to feel like a printed beauty editorial come to life. I designed and built it from start to finish, from the brand look and motion to a fully working checkout and admin dashboard.
Design: Ivory and bone neutrals, espresso ink, deep moss and champagne-gold accents. The headlines are set in Fraunces with italic accents, and the body text in clean Manrope. Every section reads like a magazine spread: the hero campaign, ritual steps, ingredient cards, curated sets and a journal.
Motion: The hero photo is redrawn in a custom WebGL shader, with a liquid ripple that follows the cursor, drifting "sunlight through leaves" light and floating pollen. Scrolling is smooth and inertial. Headlines rise in line by line, photos move with parallax depth, and product previews follow the cursor.
The store: The shop has category filters, search, price filtering and sorting. Product pages have Benefits / Ingredients / How to Use tabs, and a slide-out bag updates in real time. Checkout is secure through Stripe, with card, Apple Pay and Link payments in more than one currency.
Behind the scenes: Firebase handles sign-in and data, and a role-protected admin dashboard covers products, inventory, orders, customers, content and sales analytics.
Built with: Next.js, React, TypeScript, Tailwind CSS, Firebase, Stripe, SQLite, WebGL, Render
1
1
27
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.
1
32