Mohd Zubair
Open to work

brand website · client demo

Chai Mahel

A scroll-animated pitch website for a chai franchise brand, where a glass of chai pours as you scroll.

View the demo (opens in a new tab)
Role
Design and development
Status
Live demo
Platforms
Web, phone-first, English and Hindi
Built with
HTML, CSS & JavaScript · GSAP · Lenis
The chai palace at night, before the first scroll
The same opening on a phone

overview

A night-time palace that opens as you scroll.

A demo website I designed and built for a chai franchise brand: phone-first, with a glass of chai that pours, fills and steams as you scroll, and a franchise enquiry page.

A live demo made for a franchise pitch, not the brand’s own launched site.

  • 01A home page that tells its story as you scroll
  • 02A franchise enquiry form
  • 03An Instagram page
  • 04An English and Hindi switch

first scroll

The gate opens.

The first scroll fades the headline and opens the palace gate.

The palace gate opening on the first scroll

scroll story

The chai pours as you scroll.

Keep scrolling and a copper pot pours a glass of chai until it is full and steaming.

The leaves meet the boil.
01The leaves meet the boil.
Spices, crushed fresh.
02Spices, crushed fresh.
Poured from a height.
03Poured from a height.
The glass fills.
04The glass fills.
Served. The real taste.
05Served. The real taste.

flavours

Each glass fills as the row slides past.

A row of flavours, each glass filling
The flavours on a phone

franchise journey

From first enquiry to opening day, in five steps.

Five steps from enquiry to grand opening
The five steps on a phone

enquiry

An enquiry form, styled as ordering a chai.

A glass beside the form fills as each part is completed. Sending pours the last of it and shows a receipt with a pre-filled WhatsApp message.

The whole enquiry page, half filled in

Scroll inside the window

The enquiry page on a phone
The form on a phone, with the glass as a progress bar