OVO Energy - Path to Zero

Project snapspot

The GRID by OVO website was built as an extension of an interactive experience originally designed for the Wired Impact expo. It featured the "Grid of the Future" game, an interactive platform where players could engage with a dynamic looping animation displayed on large touchscreens. Our goal was to translate this experience into a fully interactive web version while maintaining the fluidity, responsiveness, and engagement of the original.

Technical Approach

React.js for Interactive Hotspots The background animation provided was repurposed as a foundational visual layer, with interactive hotspots added using React.js. These hotspots allowed users to interact with specific elements of the animation, mimicking the expo experience on the web.

Next.js for Performance & Scalability The project was built on Next.js, leveraging its server-side rendering (SSR) and static generation capabilities for improved performance, SEO, and scalability.

Key Challenges & Solutions

Looping Video with Interactive Overlays

• The animation was a continuous video loop, requiring precise synchronization of hotspots over key elements.
• We implemented a JavaScript-based timing mechanism to ensure that hotspots appeared and remained interactive at the correct moments in the loop.

Dynamic Scaling Across Devices

• Since the animation had to work across different screen sizes and resolutions, including varying browser window dimensions, the hotspots needed to dynamically adjust their positions.
• We utilized CSS transforms, viewport-relative units, and JavaScript-based recalculations to ensure that the interactive elements aligned correctly regardless of screen size.

Cross-Browser & Performance Considerations

• Ensured smooth performance by optimizing event listeners and leveraging hardware acceleration (GPU rendering) for animations.
• Used lazy loading for assets and optimised Next.js features to reduce the initial page load time.

What we did

Bringing the big screen to the small

The result was an engaging, interactive, and scalable web experience that successfully brought the expo game to a wider audience online.

The project maintained the visual impact of the original while introducing seamless interactivity that worked across all devices and browsers.