5 min read
|
Saved February 14, 2026
|
Copied!
Do you care about this?
This article details the development of INK Games' website using Next.js and React Three Fiber. It covers the integration of 3D elements, animation techniques, and the use of a headless CMS to manage content. The focus is on optimizing performance and creating engaging user interactions.
If you do, here's more
INK Games' new website exemplifies a bold digital presence, built primarily on a Next.js starter project called ToyBox. The site employs Styled Components for CSS and incorporates numerous animations, including scroll-triggered effects and interactive cursor movements, facilitated by GSAP. For smooth scrolling, Lenis is integrated, and React Three Fiber (R3F) manages 3D elements. A self-hosted headless CMS, Strapi, underpins content management.
The design balances 3D and non-3D elements effectively. While some sections use videos or images that respond to cursor movement, a key challenge was optimizing performance by using a single canvas for multiple 3D sections. R3F's View component allows rendering within specific canvas areas, enabling efficient management of 3D scenes. Visibility detection for 3D elements employs ScrollTrigger, ensuring smooth transitions and performance.
The portal cards section showcases a blend of 3D and HTML text, with added complexity like masked and clipped 3D elements. This is achieved through techniques such as the R3F Mask component and clipping planes, allowing certain parts of the scene to be selectively visible. Animation for the cards is handled using GSAP, with a focus on cursor interaction and scroll-triggered reveals. The combination of these tools and techniques results in a visually engaging experience that highlights INK Games' ambitious projects.
Questions about this article
No questions yet.