About this site
A website that behaves like a camera.
Ismueil Osman is a photographer, digital marketer and designer in Saudi Arabia. His site had one job: feel like looking through his lens, then turn that feeling into a booking. Everything here starts from that idea.
01 — Concept
The lens is the interface
The homepage opens on a 3D camera that turns as you scroll and settles into position, the way a photographer raises a camera before a shot. Moving between pages closes and reopens an iris, like a shutter. The aperture mark in the header is the same six-blade diaphragm, drawn as a logo.
The Arabic copy is written in a Saudi voice, directly, as a client would speak. An English version sits beside it for international visitors.
02 — The mark
Six blades, one opening
The logo is generated from code: six straight blades rotated around a centre, captured at the moment the aperture is about 60% closed. The same geometry drives the page transition, so the brand and the motion share one idea.
03 — Colour
Darkroom and tungsten
Near-black, like a darkroom, with a single warm amber taken from tungsten light. The amber is used only for actions and key numbers, so the eye always knows where to go.
04 — Type
Built for Arabic first
05 — Technology
Hand-written, no framework
Three.js camera
A real-time 3D model linked to scroll, with time-based easing. It loads only when the browser is idle, and steps down to a still image on weaker devices.
View Transitions
The iris between pages uses the native browser API. No library, and browsers without support simply load the page normally.
Small interactions
Headings reveal as they enter, buttons lean toward the cursor, and cards tilt slightly. All of it switches off for visitors who prefer reduced motion.
Bilingual
Arabic (right-to-left) and English on the same pages, with the language choice remembered between visits.
Lead flow
Booking forms post straight to a Google Sheet with an email alert, with a fallback route so that no request is lost.
Static hosting
Plain HTML, CSS and JavaScript on GitHub Pages: fast, secure and nearly free to run.
06 — Care
Details nobody sees
- Tested across ten screen sizes, from a 320px phone to a wide desktop.
- Visible keyboard focus everywhere, and text contrast raised for readability.
- Heavy media is lazy-loaded, and the 3D scene watches its own frame rate.
- Structured data so search engines understand every page.
07 — Credits
Made by
Ismueil Osman
Concept, art direction, photography, video and copy.