The brief: sell and tell
Talisker was launching a whisky made with sea water, and pledged 15% of the revenue of every bottle to Parley, to help save Scotland’s seas. So the page had a double job: launch a product, and tell the Parley story. We at Amazon BIL designed it: a designer did the visual side, and the 3D choices and all the animations were mine.
The technical challenge: don’t block the page
Three.js and shaders take time to start, not so much to download as to compile and run on the CPU. On a page on Amazon, I didn’t want any of that to block the Largest Contentful Paint. So React Suspense and custom CSS animations carry the first seconds, and the transitions hide the moment the 3D scene comes to life.
Accessible and responsive
With this many animations, a reduced-motion version was a must: the same story, without the animated transitions.
And everything is responsive, down to the phone.
