How it all started
we decided to revamp our company website, moving away from contemporary trends and embracing the Cyberpunk aesthetic of the 80s and 90s. Inspired by iconic movies such as Ghost in the Shell (1995), The Matrix (1999), and Akira (1988), we incorporated visual elements like bold katakana lettering and text decoding effects to evoke this genre. Our 404 page also features a nod to Ghost in the Shell.
The first iteration
While learning React, we chose it for our corporate website. Although React was an overkill for such a project, it provided a valuable learning opportunity. Create React App helped us get the site up quickly without configuration hassles. We used Styled Components, Tween.js, and React Transition Group, and experimented with early Three.js effects like the displacement sphere still present on the homepage.
This site has since become a platform for experimenting with new technologies. We have overhauled nearly every aspect of it, including replacing static mockup images with real-time rendered interactive 3D devices using models we created for the Clay Mockups 3D Figma plugin.
Challenges Faced
The migration was mostly straightforward, as our site's structure with React Router aligned well with Next.js's file-based routing. However, we encountered a few issues:
Route Transitions
Next.js immediately removes styles from the previous page when navigating to a new one. This is great for cleaning up unused styles but problematic for animating page transitions. To address this, we implemented a temporary hack from the Next.js repo's issue comments.
Scroll Restoration
We opted out of both Next.js's and the browser's native scroll restoration to prevent the browser from immediately scrolling to the top during page transitions. Additionally, Next.js does not handle focus shifts when linking to an element's ID within the page, so we added this feature for better accessibility.
Reflecting and Moving Forward
It's been rewarding to see how the site has been received and utilized by others. We appreciate how users adapt it to their own styles and modify it, aligning with our goal of making it open source for learning and improvement. Modern web practices have made it harder to inspect and learn from live sites, so open-sourcing this project felt like the best way to share our work.
We plan to continue using this site as a testbed for new ideas and technologies. Comparing future iterations with the current version will be fascinating.
Update: Feb 2024
We recently migrated the site to Remix, benefiting from its support for CSS modules, which allowed us to maintain our existing styling. This migration involved removing previously mentioned hacks, resulting in a more "web-standard" feel. We now use the CSS view transitions API for smooth crossfading during route transitions, a feature baked into React Router and Remix. We've eliminated the need for complex JavaScript hacks to set themes, instead storing the preferred theme in a session cookie, simplifying the process.
Overall, we are very satisfied with Remix and highly recommend it. We aim to eventually replace many JavaScript-triggered animations with the upcoming scroll-driven animations CSS API, once browser support improves.
We look forward to seeing how our site evolves and continues to serve as a platform for innovation and experimentation.