Shopping Vila Bella
A landing page for a fictional shopping mall — a deliberate exercise in motion, hierarchy, and responsive layout.
- Year
- 2025
- Role
- Solo — design and build
- Stack
- React
- TypeScript
- Vite
- Tailwind
- Framer Motion

Why a fictional client
Most of my work is systems where the interface exists to get out of the way — an intranet, an admin panel, a list. Those are the right instincts for internal tools and the wrong ones for anything that has to sell.
So I gave myself the opposite brief: a commercial landing page for a shopping mall that does not exist, where the entire job is visual persuasion and nothing hides behind “it’s an internal tool.”
What I focused on
Motion with a purpose. Elements animate in as they enter the viewport, using an intersection observer so nothing runs off-screen. The rule I held to was that every animation had to direct attention to something — decorative motion got cut.
Hierarchy over decoration. A mall landing page has a lot to say at once: stores, hours, location, events. The work was deciding what a first-time visitor needs in the first three seconds and making everything else wait its turn.
Responsive as a starting point. Retail traffic is overwhelmingly mobile. The narrow layout was the one I designed first, not the one I squeezed down afterwards.
What I took from it
Framer Motion makes it very easy to over-animate. The version that shipped has noticeably less movement than the version I first built, and it is better for it — restraint turned out to be the actual skill being practised.