[11]

3 Monkeys Bozüyük

2026

Client

Piton Studios

Year

2026

Scope

Web design, scroll animation, WebGL

Role

Design / Development

Live Site

Visit site ↗

§ Case Study

3 Monkeys Bozüyük — Concept website for a burger house — a burger that assembles layer by layer on scroll and a real-time WebGL smoke hero.

A Turkish-language, mobile-ready website concept we prepared for the Bozüyük branch of 3 Monkey Burger House. Real-time smoke drifts over a cinematic three-burger hero; as the page scrolls, six separate photo layers — bun, sauce, cheddar, patty, greens — come together into a single burger. Home, menu, our story and contact are built as separate pages.

It is built with the Next.js App Router, React 19 and TypeScript. The burger scene is not a 3D model but a 2.5D layer arrangement driven by CSS perspective, and the smoke is a dependency-free WebGL shader. This is an independent design concept, not the restaurant's official website; scene imagery is representative, and prices or unverifiable details are not shown.

Next.jsScroll AnimationWebGLRestaurant

Challenge

This is an independent concept Piton Studios prepared on its own initiative; it is not the restaurant's official website and is not presented as commissioned client work. The goal was to build an appetising, animated yet lightweight site for a local burger restaurant: a scroll scene that explains the product, a strong hero and quick access to the menu. It had to be done without loading a heavy 3D model or video, and stay smooth on mobile and low-end hardware.

Solution

The burger scene is made of six layers from a single photo sprite; the layers separate and assemble through CSS perspective and scroll progress, with no WebGL model required. The hero smoke is a dependency-free WebGL shader: capped at 30 fps, paused when off-screen, when the tab is hidden and when reduced motion is selected; if WebGL is unavailable the interface keeps working. Animations run on a passive scroll listener and requestAnimationFrame, and wheel scrolling is smoothed with Lenis. There is a separate vertical hero composition for mobile, a keyboard-operable mobile menu and Escape support. Phone, Instagram, map and current-menu links point to the branch's real channels; there is no backend, payment, membership or personal data collection.

Key technical decisions

Six photo layers that assemble on scroll: a 2.5D scene built with CSS perspective, no 3D model.
Dependency-free WebGL smoke shader; 30 fps cap, automatic pause off-screen and in hidden tabs.
A separate vertical hero composition for mobile and keyboard-operable mobile navigation.
Content stays visible without JavaScript, and reduced-motion preference is respected.
No prices, awards or unverifiable opening hours; visitors are pointed to the branch's own channels for current information.

Tech stack

Next.jsReactTypeScriptWebGLCSSLenisVercel

Outcome

The result is a live four-page concept site: a strong hero, a scroll scene that explains the product layer by layer, and direct access to the menu. It shows our approach to building lightweight but memorable websites for restaurants, cafés and local businesses. Scene and menu imagery is representative and was generated with AI for this concept; the brand and logo belong to their respective owner.