Khat Studios
A web design and development studio building fast, considered, brand led websites. We handle the whole build, design, motion, engineering, content tooling and launch.
Web design
Editorial art direction, type systems, grid and motion language crafted for each brand, never a template.
Front end engineering
React and TanStack Start with server rendering, typed routing and component systems that stay maintainable.
Motion and interaction
GSAP, ScrollTrigger and Lenis smooth scrolling, tuned frame by frame for desktop and mobile.
Bilingual and RTL builds
Full English and Arabic experiences with correct RTL layout, Arabic typography metrics and mirrored navigation.
Custom CMS and admin tools
Simple dashboards built around how a team actually works, so clients edit their own site without a developer.
Performance and SEO
Adaptive media, modern formats, clean metadata, sitemaps and Core Web Vitals work from the first commit.
republikagency.com, designed and engineered end to end.
Discovery and direction
We studied Republik's positioning as an independent Omani creative agency and set a minimal, editorial direction: heavy display type, generous negative space, and full bleed film as the hero.
Design system
A semantic token system for colour, type and spacing drives light and dark sections, so the whole site can shift tone without touching component code.
Motion and storytelling
The hero film, expanding showreel, pinned manifesto sequence and hover reveals on project cards were all built with GSAP ScrollTrigger, then tuned for iOS Safari where the browser chrome changes viewport height mid scroll.
Bilingual experience
Every section, including navigation, footer and case studies, is fully translated. Arabic uses corrected font metrics so letters never clip, with layout, marquees and animations mirrored for RTL reading.
Case studies
Each project has its own route with cover art, gallery, summary and long form story in both languages, generated from the database rather than hard coded pages.
Performance pass
Mobile media weight was cut from around 29MB to under 4MB using adaptive video sources, H.264 transcodes, poster frames, WebP imagery and lazy loading, alongside a sitemap and per route metadata for search.
A content system the client actually enjoys using.
One simple login
Visit /admin, enter a username and password, and you are in. Sessions are stored in signed, httpOnly cookies with rate limiting on failed attempts.
Edit every section
Hero, manifesto, services, clients, navigation, footer and contact details are all editable fields, prefilled with the live content so nothing starts blank.
English and Arabic side by side
Each field has both languages. Clearing a value in one language can sync to the other, so removed content disappears everywhere.
Work and case studies
Create, reorder, publish, edit or delete projects, with categories such as branding, communication, film production and event management, plus taglines, intros and long form body copy.
Media library
Upload images and video through a secure server side proxy into private storage, then reuse them anywhere. Existing site assets are available in the same picker.
Messages and settings
Contact form submissions land in the dashboard and in the inbox, and credentials can be changed from the settings tab.