SPIRALIS

SPIRALIS is a product-showcase site I built end to end — design direction, front-end implementation and deployment — for a skincare brand aimed at combination to oily skin.

It is a full marketing surface rather than a single page: products, the range, routines, refills, active ingredients, an about section and contact, all sharing one consistent visual language.

The centrepiece is an interactive 3D experience route where the product can be explored in three dimensions — the kind of moment that only works when the surrounding pages stay restrained.

Everything is built with Next.js, TypeScript and Tailwind CSS, with Framer Motion handling the micro-interactions, then deployed on Vercel.

• Designed and built a complete product-showcase site with 8 routes from scratch.
• Implemented an interactive 3D product experience page.
• Established a consistent typographic and motion system with Tailwind CSS and Framer Motion.
• Built mobile-first and responsive across all breakpoints.
• Shipped and deployed the production build on Vercel.

Product showcase

The range, routines and refills are presented as a guided narrative — typography and spacing do the work rather than decoration.

3D experience

A dedicated route lets visitors explore the product in three dimensions, with the rest of the site kept deliberately calm so the moment lands.