Website · 2026
A concept web experience for a reformer pilates studio
Role
Concept · Brand · Web Design & Development (Self-initiated)
Stack
Programs Used
I wanted a piece in my portfolio that shows a top-tier, end-to-end web experience built entirely on my own decisions. I picked a concept from my target market — the wellness / studio world — that goes far beyond templates and feels like agency work: a fictional reformer pilates studio, Form.
I researched editorial fashion and booking UIs on Mobbin to set a direction: warm paper tones, high-contrast Fraunces serif typography and a sharp grid. I built the hero on a mouse-reactive flowing WebGL shader written in three.js, and choreographed the rest with GSAP + ScrollTrigger — masked line reveals, a scroll-scrubbed manifesto, clip-path image transitions and parallax. Lenis smooth scroll, a custom cursor, magnetic buttons and a cinematic preloader complete it. All single-file, bilingual (EN/TR) and fully responsive.
Concept & Brand
A fictional but believable brand from the target market: Form — a reformer pilates studio in Nişantaşı. Name, tone of voice and the manifesto 'Strength, in refined form.'
Art Direction (Mobbin Research)
Studied SSENSE, editorial fashion and wellness booking UIs on Mobbin; settled a warm-paper + ink palette, a Fraunces + Inter type pairing and a sharp editorial grid.
WebGL & Motion System
A custom-GLSL shader hero in three.js; line masks, a scroll-scrubbed manifesto, clip-path reveals and parallax via GSAP ScrollTrigger; Lenis, a custom cursor and magnetic buttons.
Build, i18n & Resilience
Single-file EN/TR, fully responsive; prefers-reduced-motion support and graceful fallbacks if libraries or images fail. Runtime verified with jsdom.
A system that stays premium even without photography — a WebGL hero + typography + grain that survives with editorial fallback blocks if images break
Building heavy animation without sacrificing accessibility: prefers-reduced-motion and content that stays visible if libraries fail to load
A consistent brand voice and a smooth EN/TR switch within a bilingual single-file architecture
What This Project Taught Me
“A concept piece demands as much discipline as a real client. Form taught me to use WebGL and motion not for spectacle, but as a tool to express the brand's quiet strength.”
A live, functional experience on par with Awwwards-tier studios: an interactive weekly schedule, membership tiers and a booking flow — finished both visually and in UX. Content stays visible even if libraries fail, and a graceful fallback kicks in if images break.