Skip to content
Back to all projects

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
Shopping Vila Bella

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.