Ryadeh Media — Production House Website

Overview

Ryadeh Media is the video and photography production arm of Ryadeh Group. It covers videography, photography, post-production, motion design, social content, AI content, voice-over, sponsored social media ads, website building and social account verification. Gnolex designed and built the studio's website at media.ryadehgroup.com. It is a single-page experience in English and Arabic, and the team runs it from its own admin panel.

What we built

• 3D hero stage. The home page opens on a deep-red stage under the Ryadeh emblem and a draped chess piece. A ring of video cards orbits in real 3D, and visitors can drag the ring to spin it. Each card plays its video when clicked. Over the scene sit the tagline "Every Frame. A Strategy." and buttons to view the work or start a project.
• Chess-themed services. Each service card is assigned a chess piece: The King, The Queen, The Rook, The Bishop, The Knight or The Pawn. Cards carry an icon, a short description and an "Explore" link, and show a count when photos are attached to a service.
• Filterable video portfolio. The "Video Work" section is a 3D coverflow carousel holding more than 40 videos. It has previous/next arrows, a position counter, pagination dots and filter chips for restaurants, companies, conferences, weddings, events, exhibitions and products. Videos can be self-hosted uploads or YouTube links, and they open in an in-page player.
• Full English and Arabic versions. A language toggle in the header switches every heading, service and video title to Arabic and flips the whole layout to right-to-left. The site remembers each visitor's language choice.
• Mobile navigation. On phones, a full-screen menu shows numbered serif links and the language switch.
• Contact section. "Let's Create Together" leads to one-tap email, phone and Instagram buttons, followed by a footer with quick links.
• Admin panel. A token-protected admin area with a first-run setup screen. The team uses it to upload videos or add YouTube links, assign video categories, manage photos and services (including the media attached to each service) and edit the site copy in both languages.

Design approach

The art direction comes from chess and cinema: "every move is deliberate". Near-black and deep-crimson backgrounds sit under red spotlight glows. Headings are set in Cormorant Garamond, with italic red highlights, wide-tracked uppercase labels and numbered section markers. On Arabic pages the type switches to Cairo and El Messiri. The cursor takes a chess theme on the hero, and the 3D stage and carousels let the studio's own footage carry the page. The layout adapts from a wide desktop stage to a single column on phones.

Technology

• Laravel backend with a JSON API for content, services, videos and photos
• React single-page front end built with Vite, with React Router and Zustand for state
• Three.js (r168) through React Three Fiber for the interactive 3D hero ring
• Framer Motion for scroll reveals and transitions, with Tailwind CSS utilities
• Bilingual content model (English and Arabic fields) with a runtime LTR/RTL switch
• Self-hosted video with generated thumbnails and previews, alongside YouTube embeds