UX/UI, Front-end, Backend
NextJs, ReactJS, Sanity.io
Simulating the multiple lighting possibilities of a new two-tone gradient effect light fixture using WebGL technology.
Visit Project
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.
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.
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.
