Elysium Website

Front-End Web Development (Next.js, React)
Duration: 7 months

Process:

After receiving the theme pitch, our team first began with ideation. There are four sections of the show: Emergence, Blossom, Hubris, and Embrace. I was curious as to how to bring the narrative structure of the show into the website.

How can we combine elements of the natural world and man-made technology into a cohesive narrative? In my Figma Moodboard, I drew inspiration from nature photos, the Art Nouveau art movement, 90s anime, and sci-fi films.

I noticed the similarities of the Elysium storyline and the sensibilities of the Art Nouveau movement which took place from the late 1800s until the start of World War I. During this movement, people had a sense of optimism with recent technology advancements. Artists combined elements of nature with man-made equations such as French Curves, which were originally created for the sake of mechanical linkages.

To bring these ideas to life without hindering the website's performance, I used p5.js to create a dynamic background.

The devil is in the details–gradient blur is not natively supported in CSS. To create a frosted glass look that gradually changes in opacity and blur-strength, we had to make use of some practical effects.

Archive:

This year, Kaitlyn Ng and I worked on a new feature, an archive index that showcases the other creative departments' work.

This site serves as an index for the years to come, allowing future generations of Lunar Gala to preserve iterations that might not make it to final launch.

For the 2025 site, we wanted to use this unique opportunity to reintegrate elements of Asian culture into Lunar Gala.

2025archive.lunargala.org

In contrast to the sleek look of the main page, the playful look of the archive acknowledges the number of iterations that didn't make it to the final show–drawing from Kaitlyn's and my shared experiences growing up as Asian American women, we initially took inspiration from our vivid lexicon of diasporic iconography.

However, Lunar New Year is celebrated in countries beyond China–we decided that it would be more effective to uplift the voices of other students, highlighting their interpretations of the holiday. So, we turned the landing page into an open call, inviting Pan-Asian creators to design multiple landing pages.

The following are the chosen artists' working drafts–they will be updated with final versions soon.

Designing with modularity in mind, we also wrote documentation on how to add image or video entries to the website.

Takeaways:

I had been part of Lunar Gala Creative Team for two years; Photo Member in my freshman year and Head of Photography in my sophomore year. My main reason for switching to web team this year was to learn the best practices of making a website for a client from start from finish. Also, much of my coding experience at CMU so far has consisted of solo-projects to gain technical competency at a systems level, so I wanted an opportunity to collaborate with other developers to achieve a common goal.

Also, as a third year student, I found the feedback from my peers to feel a bit redundant, which inspired me to seek critique from web developers outside of CMU–thank you, Ryan Yan! By doing so, I gained fresh perspectives and valuable insights.

Furthermore, working on this project has taught me that the integration of art and technology must be thought out carefully. My experience in Computer Graphics offered insight as to what was computationally feasible and what was not, but through collaborating with designers, I learned that the Lunar Gala website should support the content, not "show-off" the power of the fanciest library out there.

A successful website for a large organization such as LG should serve as a palette cleanser, not an experimental art piece. Coming from a fine arts background, I had to put my selfish ambitions aside, but I did not forget them; those ideas are precious seeds that will motivate future projects.

You may also like