The Future is Clear
An interactive and informative timeline following the history of HPFS Glass
- Online experience celebrating the rich history of Corning Glass
- Coincide with launch of promotional video
- Using latest technologies and performance techniques for the web that align with already used coding languages
Experience it herecorning.com/hpfs
For nearly 170 years, Corning has combined its unparalleled expertise in glass science, ceramics science, and optical physics with deep manufacturing and engineering capabilities to develop life-changing innovations and products.
Corning wanted to showcase their vibrant history of HPFS (High Purity Fused Silica) through the decades.
We teamed up with NXT Level Studios to create an immersive experience using the latest technologies.
Corning already use React in various other aspects of their digital portfolio so we opted to lean into that however React is not SEO compatible and given the importance of this Next was the obvious choice, a server-side rendered React framework where we could not only modularise the application but also pre-render it to static HTML and make it fully visible for search engines to index.
A key feature to the website making it feel engaging is the use of parallax. We opted to use the React Parallax library to help us achieve multi-layered parallax scrolling.
Existing content that is seen in the promotional video was rototscoped into multiple layers which we could manipulate as the user scrolled and create a sense of depth and immersion.
Lottie is a piece of technology which enables animations created in After Effects to be controlled on a website. It uses lightweight JSON files to keep performance optimal and download time down.
We used Lottie to play through CGI clips that were also used for the promotional video.
It was imperative that performance of the website should not sacrifice, so given the heavy demand of the website through imagery, parallax, Lottie animation and even videos, we spent a significant amount of time getting the best performance.
We looked into every aspect of media and got the file size as low as possible in order to get the best performance from the site in the shortest amount of time.