Çağlar Mimarlık
Architecture-studio site with a real-time 3D hero built in React Three Fiber
A brand site for a Turkish architecture and construction studio, built around a live 3D hero scene — a building assembling itself from wireframe on a reflective, paper-toned backdrop — instead of a hero photo or video. The rest of the site is conventional Next.js, with the 3D scene switched off below the tablet breakpoint in favor of a lightweight fallback.
the problem
Most small studio sites either skip 3D entirely, because it's slow to build and risky on mobile, or bolt on a generic embed that doesn't match the brand. The brief called for a specific hand-drafted identity — paper background, ink, a red accent color — carried into a real-time 3D scene, without missing the site's Lighthouse and mobile-performance targets because of it.
how it is built
- Next.js 15 with React Three Fiber, drei and postprocessing for the 3D hero; GSAP and Lenis drive scroll choreography across the rest of the page.
- The hero scene procedurally assembles a wireframe building over a reflective floor material in the site's paper/ink palette, rather than playing back a pre-baked animation.
- A dedicated mobile fallback component replaces the hero animation below the 768px breakpoint instead of running the same WebGL scene at reduced quality — content renders immediately rather than waiting on a 3D scene mobile can't afford.
- A project index with hover-preview cards, each project's images and metadata (year, floor area, client) driven from one typed content file.
- Deployed on Cloudflare Workers through the same OpenNext pipeline used across this author's other Next.js sites.
- A Sharp-based placeholder-image and OG-image generation script, so the site can be built and previewed before real project photography exists, without overwriting real assets once they're added.
- robots.ts and sitemap.ts generated from route data rather than maintained as static files.
- A Vitest suite (25 tests) gating the build.
the hard parts
- Keeping the 3D hero from being the thing that tanks mobile performance meant not running it on mobile at all: the fallback isn't a lower-quality version of the same scene, it's a separate lightweight component gated at the same breakpoint that controls the animation, so mobile never pays for a WebGL initialization it wouldn't visibly benefit from.
- The reflective floor and self-assembling wireframe both had to read as "architectural drafting," not "generic 3D demo" — a material and lighting-direction problem (a specific paper/ink palette, a reflector tuned for a matte-paper look rather than a mirror) at least as much as a geometry problem.
Need something like this built?
Backend systems, payment and API integrations, AI pipelines, and the interfaces in front of them. Freelance or contract, remote.