Responses by Martin Laxenaire, developer.

Background: The Mirage Festival is an annual event about digital technology and art in Lyon, France. Each year, it needs a new visual identity and a website based on its renewed branding.

The main goal of the website is, of course, to provide all the information and the program of the event’s yearly edition. But given the “art and code” philosophy of the festival, it has to stand out by being bold, innovative, original and playful.

Design core: Each year, Cécile + Roger is in charge of the visual identity of the Mirage Festival, starting by the event poster. So, each year, we work together hand in hand to turn that poster into an animated homepage for the website.

Following this year’s “cosmogony” theme, the event main design features an M-shaped rocket that I had to completely animate. The design also includes a colorful background, big fonts and old-school marquees, giving the website an overall brutalist feeling.

Challenges: As usual, the back end is always the hidden part of the iceberg. I had to structure all the data, handle all the extra fields and exceptions rules for each article, and translate.

The website had also to stand out in its use of fancy animations and interactions. However, the most important thing is that the users could navigate through it on every device. I worked a lot on the overall performance, like using an offscreen canvas for the homepage animation, and disabling WebGL effects on text and images for low-end devices.

Navigation structure: We’ve worked a lot on the website’s architecture since the first festival edition to be sure users can easily find the information they’re looking for. This year, the team also wanted to have a fully bilingual website, and I had to come up with a seamless way to switch languages on the fly. Therefore, I had to cache the translated version of each page on every page change so the user can quickly switch languages without triggering unnecessary transitions.

On top of that, we added a lot of small animations and microinteractions, always keeping in mind the main “cosmogony” theme: The marquee's influence comes mainly from the image that we have of futuristic signalings, like the type of traffic sign floating in space that you see in retrofuturistic sci-fi movies like Back To The Future II or anime like Cowboy Bebop. Elements translating animations come from spaceship interfaces seen in movies like Star Trek or Star Wars. However, the main purpose was mostly to enhance feedback as the user scrolls down. Eventually, we also added text- and image-warping effects to complete the overall galactic feeling.

Technology: The website uses WordPress as a back-end technology since the festival team is already familiar with that solution and can update content on their own.

As for the front end, I’m always trying to use as few libraries as possible. The smooth scroll is done with locomotive-scroll, and the animations are either done in CSS or with GSAP v3. I’m also using my own stack of libraries: the navigation is handled by my PJAX library and the WebGL effects are powered by curtains.js with tailored shaders.

Everything else is written in vanilla JavaScript and uses features such as offscreen canvas, intersection observers and even smartphone gyroscope on the custom 404 page!