Website · 2026
A cinematic web experience for a 50-year-old signage atelier
Role
Real Client — Art Direction + Design + Development + SEO
Stack
Programs Used
Çatı Reklam Tasarım is a signage and space-design atelier producing in Istanbul since the 1970s: the signs, exhibition stands and facades of brands like Titanic Mardan Palace, Cullinan Belek, Günaydın, Şişecam and Mavi come out of this workshop. Yet fifty years of craft had no digital trace — no site, no archive, no presence on Google. The question: how does an atelier that is 'the signature of a space' in the physical world carry that same weight digitally?
The concept grew from the atelier's soul: 'entering the workshop through an ancient door'. A cinematic door video, scrubbed by scroll, pulls the visitor in; a navy-ink + gold palette and the Fraunces serif establish the language of prestige. More than 70 projects were archived one by one, each with its own page. To push the works gallery to k95.it level I built a single WebGL scene: every project card is a textured plane in Three.js — cards fly between ring, spiral and list layouts with GSAP, scroll velocity bends them, and the focused card 'reveals' from navy duotone into true colour. At the centre, the atelier's 3D 'Ç' emblem spins with scroll. On the SEO side: LocalBusiness schema, keyword-focused copy and a TR/EN content structure.
Excavating the Archive
Decades of photo archive were scanned, cleaned and tagged: 70+ projects, from hotels to restaurants, exhibition stands to neon work, categorized into a data model.
Concept & Art Direction
'The signature of a space' and the ancient-door metaphor: a cinematic video hero, navy + gold palette, Fraunces typography and film grain set a stage worthy of 50 years of craft.
The WebGL Gallery Engine
Built from a k95.it analysis: a single Three.js scene with shader-based duotone→colour reveal, velocity-bent cards, GSAP flight transitions between ring/spiral/list layouts and raycaster clicks.
3D Emblem & Micro-interaction
The atelier's 'Ç' was modelled as a chrome 3D emblem — spinning with scroll impulse, following the cursor. A custom cursor, magnetic buttons and TR/EN switching complete the experience.
SEO & Launch
Launched with LocalBusiness schema, keyword-focused page copy, sitemap and robots setup — making the atelier findable on Google for the first time.
Turning a scattered 50-year photo archive into a sustainable data model with categories and a page per project
Replacing 44 janky DOM cards with a single WebGL scene running at a smooth 60fps
Not letting the visual show crush SEO — keeping a full DOM fallback behind the WebGL scene for screen readers and bots
What This Project Taught Me
“The strongest digital experiences grow out of a brand's physical truth. The door is a real workshop door, the navy is real ink, the gold is real brass signage — only the stage is digital.”
catitasarim.com — a bilingual site with Awwwards aesthetics that turns a 50-year archive into a living digital exhibition. The atelier's craft is now findable on Google, its references shareable with a single link. From signage to WebGL: physical craft and digital craft meeting under one signature.