Science as an Interactive Scrolling Experience

This project was created during my girlfriend’s Erasmus semester in Brussels as part of her graphic design studies. The assignment was to design a website that presents its content through a scroll-based animation. While she developed the visual concept and the initial design, I was responsible for the technical implementation of the website.

The application explores the formation and propagation of gravitational waves. As users scroll through the page, it gradually illustrates how two black holes collide, how the resulting waves travel through space, and how scientists can determine the direction from which such a signal originated.

Although the university assignment primarily focused on visual design and scroll animation, scientific accuracy also played an important role. A physics student from Leuven reviewed the website and provided feedback on whether the physical processes were represented accurately and communicated clearly.

From Design to an Interactive Website

My role extended beyond translating a finished design into code. I also contributed to adapting the design, developing the animation concept, and planning the technical implementation. Together, we refined the individual scenes to ensure that the visuals, content, and motion worked as one coherent narrative.

The website was developed using React, while Framer Motion was used to create the animations. Several elements respond directly to the user’s scroll progress: the Earth moves through space, the black holes are animated, and gravitational waves spread across the screen. Scrolling therefore controls not only the navigation but also the timing and progression of the story.

Performance as a Key Challenge

One of the main challenges was ensuring that the numerous animations remained smooth and stable. During development, the website repeatedly suffered from stuttering animations, and the cause was initially difficult to identify. Eventually, I discovered that the animated background was generating an extremely large number of stars, consuming a significant amount of processing power and slowing down the entire website.

After optimising the background and the animations, the website ran much more smoothly. Since the impact of the project depends heavily on fluid motion and precise timing, improving its performance was essential.

Through this project, I was able to expand my knowledge of web animation and learn how to create more complex scroll-based sequences with Framer Motion. It was also an interesting collaboration between graphic design, web development, and scientific communication. The result is an interactive website that presents a complex physical phenomenon as a visual and guided experience.