Omdah StudioBilingual Site & Custom CMS for a Saudi Production Studio

Omdah Studio is a visual-production company in Riyadh. I designed and built their site as a single dark scroll — the showreel plays as the hero, projects open in place as playable reels, and the whole thing reads as a gallery with the lights down. Behind it sits a bespoke CMS: the studio manages every project, every reel and every line of copy from an admin panel, signing in with a code sent to their email. No passwords, no third-party CMS, no dashboard they have to learn.

A production studio's website has one job: prove they can shoot. Most bury the work behind stock photography and a contact form. Omdah needed the opposite — the footage in front, plus the ability to add a project themselves the day it wraps, without calling a developer.

The site is six bands, hard-cut with hairlines and numbered like wall labels: showreel, manifesto, services, work, clients, contact. Projects open in a dialog over the grid so the reel keeps your place, but each card is still a real anchor, so ⌘-click opens the standalone page and crawlers see it too. Behind that sits a full CMS at /admin: create and reorder projects, upload reels and stills, edit every string on the site, manage who is allowed to sign in. Access is passwordless — a six-digit code sent by email, exchanged for a 24-hour session.

Arabic set the constraints, not the layout grid. The headline reveal masks words, because splitting into characters breaks the joining forms and renders nonsense. Arabic is never letterspaced and has no uppercase, so every Latin-only type primitive needs an Arabic twin rather than a lang swap. And the failure is silent: a font with no Arabic coverage doesn't error, the browser just substitutes. I found index numerals rendering in Times New Roman and body text in Arial by querying Chrome for which face actually drew each glyph — CSS only reports what you asked for, not what you got.

Video delivery was the other hard part. Reels run to 45MB and serverless request bodies cap far below that, so uploads can't pass through the backend at all: the server mints a signed URL and the browser writes straight to object storage. On the decode side, footage arriving as HEVC in a QuickTime container plays fine in Finder and not at all in Chrome, so the pipeline had to fail visibly instead of showing a black rectangle.

Data access is two-tier. Row-level security makes reads safe with the browser's key; every mutation goes through a server route holding the service role, so the client never carries a credential that can change anything, and the sign-in tables are unreachable from the browser entirely.

The graphics are drawn, not exported. The contact section is a film strip whose frames progress from a line drawing, through a blocked-out composition and a lit scene, to a finished shot — the section's headline rendered as an object rather than described next to one. It is all markup and CSS, so it resizes and recolours with the palette, and it carries a gate weave: just under a pixel of vertical travel, because real film never sits perfectly still passing the projector gate. Motion is one object throughout — one easing curve for the entire site, one scroll-entrance component, one button, and no drop shadows anywhere, since depth is surface contrast and 1px rules.

Roughly 7,300 lines across 64 source files, 17 routes (9 pages and 8 API endpoints), 6 database tables with row-level security on every one, 12 runtime dependencies — no UI kit, no state library, no ORM — and 2 webfonts.