inreal.studio3D Studio Website Development
Case study of a 3D studio website. Built a high-performance frontend with animations and an admin panel integrated via Next.js ISR
The client requested the development of a new project - a website for a 3D studio. Initially, there were only 2 pages - the homepage and the portfolio (which is divided into 4 categories), as well as several pop-up windows.
The client’s two main requirements were SEO and the ability to easily add new works to the portfolio.
Frontend
Therefore, Next.js was chosen for the frontend, as it perfectly fits the tasks. First of all, technically it is an SPA, so all page transitions are just changes within a single page. Visitors don’t notice this, but it allows, for example, making a pop-up window a separate page, which is crucial for SEO. Secondly, it supports ISR — pages will be regenerated at set intervals, reducing the load on both the server and the user’s browser.
Backend
WordPress was chosen as the CMS. Overall, it might not seem like the best idea in 2026. However, the web development landscape is shaped such that only PHP hosting costs pennies, and absolutely everyone knows how to work with WordPress. Writing a custom backend would heavily impact the development budget, and choosing a ready-made CMS on Node.js would require renting a VPS, which is also significantly more expensive than regular file hosting.
As a result, we saved both the development and hosting budgets. Meanwhile, WordPress is used as a Headless CMS, making it easy to rebuild any component at any time without much trouble.
A Node.js CMS is written in JavaScript. They are more modern and faster, but there are fewer developers available for them, and hosting requires a VPS. The industry has evolved in a way that makes this much more expensive, which doesn’t make much sense for small projects.
In a traditional CMS, the layout (the visual appearance of the site) and the admin panel live in the same place. In this case, if the client wants to completely redesign the admin panel (for example, if traffic spikes and the old one can’t cope, or its capabilities are no longer enough), the entire theme has to be rebuilt.
In a Headless CMS, they are completely isolated. If the client decides to revamp the admin panel, only minor changes will be required in the template.
Home
While working with animation, several issues arose. First, building it with pure JS was a fatal mistake — initially, I thought it would simplify the process (since the animation isn’t very complex) and speed up the site loading time. In reality, it turned out exactly the opposite. But most importantly, it had almost no impact on the final result.
Portfolio
The portfolio is divided into categories, and each project features tags. As mentioned before, it is loaded from WordPress. ISR was implemented here — the page regenerates every 10 minutes instead of on every user request as usual. This significantly cuts down loading times and reduces server load.
Thanks to the Next.js app router, each category is a separate page, while shared elements are loaded only once, rather than multiple times as it would be with other tools.
Cases (and new categories) can be created, deleted, and reordered in the WordPress admin panel, and then Next.js generates the ready page instead of making requests every single time.
Services
After some time, a need arose to add service pages. The navigation elements there are exactly the same as on the cases page. But I also anticipated a scenario where the number of services might grow
Conclusion
What conclusions did I draw from this project? Actually, quite a lot. Among the wrong decisions, as I mentioned, was the choice to handle animations using pure JS. Now I would use motion or GSAP. On the other hand, WordPress, though its integration wasn’t without hiccups, fit in perfectly in my opinion — we saved both the development and hosting budgets.
Overall, just like with any project, I learned a lot of new things from this one, and I believe even the most experienced developer can say the same after completing another project.