Sorrel & Vane

How it was made

The original is the site of an aesthetic medicine clinic in Australia. It has 6 screens: home, treatments, concerns, about, privacy policy and terms of use, with no detail pages for treatments or concerns.

The home hero stacks 2 photos over 1,800px and pins a center band with the logo, menu and booking link. The 12-column grid keeps the original 107.5px columns, 10px gap and 20px side margins.

The preloader holds for about 1.4s, then fades over 1s, and the 4 menu items appear at 100ms intervals. Photo fade-in at 500ms and WHY transitions at 300ms use the original easing values.

The 5 treatment and 3 concern accordions pin the list on the left. As the photos on the right scroll by 100vh each, the visible item expands.

Eight videos became stock still photos and the Lenis smooth scroll was dropped. Inactive text is at opacity 0.7 and the preloader colour is #7b7370 to reach a 4.5:1 contrast.

Type was changed to Newsreader and Hanken Grotesk. The name, staff, address, phone and hours are all made up, and no original copy was carried over.

Key features

• Preloader · pinned hero band
• WHY 4-item auto-advance · progress bar
• Scroll accordion for 5 treatments · 3 concerns
• Menu preview panel · idle screen · local time

Where and how to use it

Suits aesthetic medicine and dermatology clinics with a small treatment list. Home, treatments, concerns, about and the 2 legal pages share one header bar and footer.

Points to check

Booking links are mailto only, with no booking form, prices or treatment durations. Video slots hold still photos, so the look of the original footage is not reproduced.