Highlighting a Revolutionary Product
Role:
UX/UI,Front-end,Backend
Technology:
NextJs,ReactJS,Sanity.io
Introduction:
Simulating the multiple lighting possibilities of a new two-tone gradient effect light fixture using WebGL technology.
Visit Project

Simulating the multiple lighting possibilities of a new two-tone gradient effect light fixture using WebGL technology. Prior
Prior to launching Flame, an outdoor light fixture used in architectural lighting projects, Hydrel’s division of Acuity Brands aimed to elevate its sales experience to the next level. The product’s dual light beam, which creates a unique flame-like appearance, inspired its name.

The Making of the Simulator
From Product Engineering to Interactive Experience
Wishing to accurately represent the color combinations and degree of architectural projection, our digital department worked closely with the engineering team responsible for developing the product at Hydrel. Many tests were conducted to cover the full spectrum of the product’s technical capabilities and offer a realistic WebGL rendering, facilitating the integration of high-performing interactive 3D graphics.
Ultimately, the simulator allows us to explore three lighting configurations (thin, wide, lotus), a range of preset color combinations (interior and exterior of the “flame”) and 4 options of wall styles on which the lighting is projected. It’s also possible to select the camera distance (close, medium, far) to visualize the effects and their ratio on the selected wall.


UX & UI Design
A Seamless and Immersive Experience You Ever Imagine
As part of a broader vision for the product’s promotion, the simulator is accessible through a dedicated page created by our team on Hydrel’s website.
Colorful and dynamic, it provides a glimpse of the technological experience offered by Flame, in addition to facilitating demonstrating the product’s capabilities and features at trade shows.
With incorporated parallax animations and an inspiring narrative journey, the product page creates the desired ambiance to contextualize the light fixture by emphasizing the architectural elements, large-scale real estate or structural scenes it illuminates.
