FA Start a Project Enquire
← Back to all work

Orient Collection

Client
Personal project — concept
Industry
Luxury watches
Built

A sales concept for a limited Orient watch collection, built as practice on sites whose entire narrative moves with the scroll.

View the live site ↗

A VPN may be needed to open the site.

The challenge — Orient Collection
01

The challenge

Everything was fine locally, but once it was published to a host the scroll animation lagged badly and frames arrived late — the exact part meant to be the site's main draw had become its weakest.

02

What I built

First I added a loading screen to give the frames more time to arrive. It helped, but it did not fix it — the problem was not timing, it was weight. So I went to the sequence images themselves and optimised them.

A reconstruction of the behaviour before optimisation: frames fall behind, then jump forward all at once.

Technologies used

What the project was actually built with.

  • HTML and CSS
  • JavaScript
  • Scroll-driven frame sequence
  • Image optimisation (WebP)
  • Netlify

Screenshots

Desktop and mobile, from the built version.

Home page — desktop — Orient Collection
Home page — desktop
The same page on mobile — Orient Collection
The same page on mobile
The craft section — macro of the dial — Orient Collection
The craft section — macro of the dial
Exploded view of the movement — Orient Collection
Exploded view of the movement
Oceanus — ocean blue — Orient Collection
Oceanus — ocean blue
Sylva — emerald green — Orient Collection
Sylva — emerald green
Ignis — volcanic red — Orient Collection
Ignis — volcanic red
Contact form — Orient Collection
Contact form
The same form on mobile — Orient Collection
The same form on mobile
A full scroll through the site, from the opening to the contact form, recorded from the published version — no sound. Use the player's fullscreen button to see it larger.
03

Result

With lighter frames, the sequence runs without lag and without jumps. What only worked on my own machine at first now runs smoothly on mobile too.

The same shot after optimisation — recorded from the published version.

The scroll animation now runs identically and smoothly on mobile and desktop.

Next project

Cryptocurrency and blockchain Practice project — WordPress Ethereum, rebuilt in Persian A Persian rebuild of the Ethereum site in WordPress and Elementor, followed step by s… The site renders correctly and cleanly on both mobile and desktop. Read the case study →

Start a project

Is the next one yours?

Fill in the project form. I review every enquiry and get back to you within two working days.

Start a project →