WorkGym chain · Web
Gorilbey Gym
A 19-page site for an 11-branch gym chain across four cities: a 3D gorilla that shatters as you scroll, and one tap to your branch.
IN PLAIN WORDSFinding the nearest branch and booking a body-measurement appointment with a ready-made WhatsApp message takes two taps; along the way the brand's gorilla emblem breaks apart and rebuilds itself down the page.
01 — Problem
The chain, with 11 branches in Ankara, Istanbul, Izmir and Manisa, had a site that didn't fit phones, branch addresses had got mixed up, and most of the facilities in its gyms were never mentioned. It needed a site that takes visitors to the right branch and lives up to the brand's poster language.
02 — Approach
I set a calm layout: white ground, black type, yellow kept for buttons only; on top sits a cinematic layer that never locks scrolling. The 3D gorilla in the hero (black body, gold facet edges) shatters as you scroll; its triangles first form '11' in the branch finder, then a map of Türkiye, and turn into other shapes on the discipline cards and in the measurement section. Copy comes from the brand's own poster lines; photos are the gyms' own shots, Reels clips and campaign posters. Every 'Book a measurement' opens the same panel: pick a branch or find the nearest by location, type your name, and WhatsApp opens with a message naming the branch. The 11 branch pages come from one template, and a dark theme can be chosen from the menu.
03 — Outcome
All 19 pages are browsable at the preview address; across 12 pages × 3 screen widths: zero overflow, zero tiny text, zero console errors, home page at ~58 fps. Presented to the chain and reviewed by the client.
Tools used
- Astro
- TypeScript
- Three.js
- Canvas 2D
- Vercel