ORVELLE

Overview

ORVELLE is a concept build for a fictional luxury footwear house. Luxury product sites usually lean on dark backgrounds and gold type, and show a shoe as a still. This one treats the shoe as a story: the page opens on a pair of tan wingtips and then follows the leather from hide to cut to stitch to finish, ending on a shop with a working bag.

Challenge

A finished shoe photograph says nothing about craft, and a first attempt at the site — a hand-drawn vector shoe that took itself apart on scroll — read as illustration rather than product. The brief became: use real photography, keep it warm and light instead of the usual dark-and-gold, and still make scrolling feel like watching something being made.

Approach

One pinned timeline, scrubbed by scroll. Four photographic chapters — the hide, the cut, the stitch, the finish — wipe up over one another while each image eases from a deep zoom to rest, and a progress strip keeps the visitor oriented. A bone-coloured finale frames the finished shoe with two smaller photographs drifting at different speeds, then hands over to a lookbook of real people and a six-shoe shop.

Design

Bone, oxblood, ink and tan — a light, warm palette picked on purpose to avoid the dark-and-gold look common to luxury templates. A large editorial serif carries the headlines and a quiet grotesque carries everything else, with the photography doing the heavy lifting.

Development

Next.js 16 and React 19 with TypeScript. GSAP ScrollTrigger drives the pinned timeline and Lenis smooths the scroll; both are wired together so scrub values stay in sync. Photography is served through next/image for responsive sizes. The bag lives in React context persisted to localStorage, with a slide-out drawer and a demo checkout that takes no payment.

Responsive Experience

The story reflows for phones rather than shrinking: text clears the progress strip, photographs re-crop to portrait, and the header flips colour as the page moves between dark and light sections. Checked at phone and desktop widths with no overflow, and the bag and checkout were exercised end to end.

Final Result

Live at orvelle-vert.vercel.app as a portfolio piece on photographic scroll storytelling. ORVELLE is fictional, the photography is from Unsplash contributors, and no orders are taken.

Key Features

• Pinned, scroll-scrubbed film across four photographic chapters
• Loader, wordmark reveal and a finale that changes the whole screen
• Lookbook with scroll-linked parallax on real photography
• Six-product shop with size selection and a persistent bag
• Cart drawer and demo checkout with order confirmation