The illustrative objects along the edges are like tiny fidget toys. Messages are literally bubbling into the air. And the drone is a bit mischievous if you try to interact with it. Did you notice how the background color transitions as you scroll? It's both a (non-linear) gradient and a color transition at the same time — how cool is that!
The New Industrials
INFO
The times are changing, and the new wave of innovative companies is taking the lead in American innovation. It's no longer just about Silicon Valley tech startups. They are The New Industrials.
Client
Raw Materials
Scope
Development, Animations, QA, DevOps
Technologies
React/Next.js, Payload CMS, React Three Fiber, WebGL
Design
Raw Materials
Year
2025
See online
thenewindustrials.com
Collaboration Unleashed
Pushing Creative Boundaries Together
Starting a strategic partnership with Raw Materials — one of the most unique creative agencies in the US, we marked the moment by rolling out a site that manifests their bold approach to designing for the future frontier of American industrials.
Our teams cooperated closely from the early stages of the project, challenging each other with creative ideas and pushing the boundaries of what we are capable of. And it paid off. We not only created a unique project, but also learned new techniques from one another and built strong relationships between our teams — connections that now help us collaborate even better on future projects.
Animations
Content-heavy pages are boring no more.
Let's face it — the site is, at its core, just an illustrated article. Some say websites are getting boring and generic nowadays. So we took it as a challenge. Keeping in mind readability and accessibility, we set out on a mission to make it fun and interactive.
Performance
One canvas to
render them all
To achieve a deep integration between 2D layout and 3D objects, we've built a custom rig on top of React Three Fiber, Lenis Scroll, and GSAP.
It allows us to synchronize the positioning of Three.js-based objects with scrolling and placement within the site's grid system, clip them, and interact with them — all while rendering on a single canvas. And yes — we care about keeping the site accessible. Even text processed with a custom GLSL shader remains selectable and accessible, just like plain text.
Technology Stack
We believe that when building a website — whether huge or tiny — the editing experience is as important as performance and maintainability. To build the site, we picked a battle-tested set of tools that work beautifully together. We chose Payload CMS, which blends seamlessly with React and Next.js, allowing for customization and easy deployment on Vercel. On top of that, we used React Three Fiber, providing a stable, performant, and easy-to-use setup for integrating 3D interactions.
Let us turn your
vision into reality
GET IN TOUCH
Whatever your ideas are we would love to help take it to the next level.