Project Overview

Rechitta is a cinematic, feature-film-directed digital web experience engineered for luxury real estate developers in Dubai. It serves as a unified digital briefing engine connecting property developers with over 40,000 registered brokers across 6 international financial hubs at the exact same instant: 04:11 UTC.

The landing experience advances through an interconnected five-act sequence: Dawn, the Executive Boardroom, the Broker Terrace, the Synchronised World Chronometer, and the Dusk Horizon Loop.

The Problem and Industry Context

In rapid-growth luxury property capitals like Dubai, developers launch multi-billion-dollar landmark towers. However, information distribution traditionally relies on outdated and manual workflows:

Network Congestion: Over 40,000 registered brokers operating across more than 1,200 independent agencies.

The Scheduling Bottleneck: A standard 30-person developer sales team requires 3 to 6 months of repetitive boardroom pitches, phone campaigns, and slide presentations just to brief the local brokerage network.

Language Degradation: Cross-border buyers and international brokers speaking Mandarin, Russian, Arabic, Hindi, or French rely on third-party translation relays, causing severe loss of technical nuance, misunderstandings around payment plans, and delayed transaction closings.

From an engineering perspective, most scroll-driven video websites attempt to bind scroll offsets directly to the video currentTime property. This introduces decoder starvation, dropped frames, scroll judder, and severe performance issues on mobile devices. Rechitta required an ultra-luxury, fluid 60fps interactive narrative without compromising performance.

Key Engineering Architecture and Implementation

1. Discrete Beat Engine and Hardware GPU Decoding

To eliminate scroll judder and decoder stalls:

Developed a custom input state machine (director.ts) driven by an Intent Accumulator. User scroll wheel and touch gesture events accumulate until crossing a defined threshold before committing to a camera move.

Added cooldown guards and idle reset timers to prevent momentum overshoots.

Transitions decode short video sequences at native hardware GPU speeds (1.0x to 3.6x) rather than scrub-seeking raw video elements, delivering a locked 60fps playback experience across both desktop and mobile devices.

2. Mathematical 3D Perspective Homography Warp Engine

To render live, functioning web applications inside smartphones and boardroom monitors within moving cinematic footage:

Built a custom 8-degree-of-freedom perspective homography solver using Gaussian elimination.

Tracked normalised video coordinates across corner vertices (Top-Left, Top-Right, Bottom-Right, Bottom-Left) relative to viewport cover crops.

Dynamically calculated CSS matrix3d transformations in real time, allowing interactive application interfaces and iframes to naturally track moving physical camera angles.

3. Luminous 3D Orb Navigator and WebGL Globe

Built a celestial 3D Orb using Three.js and React Three Fibre that guides the visitor through the narrative.

Anchored orb trajectories directly to video clip timestamps rather than scroll percentages, ensuring spatial synchronisation regardless of responsive layout changes.

Implemented an interactive 3D WebGL Earth featuring custom atmospheric GLSL Fresnel glow shaders, day/night texture blending, and dynamic marker coordinates for global financial hubs.

4. Synchronised World Chronometer (04:11 UTC) and In-Memory Video Streamer

Realised the core philosophy of "The Same Moment" by mathematically calculating simultaneous local times across 6 world capitals (London, Paris, Moscow, Riyadh, Mumbai, Shanghai) from a single 04:11 UTC baseline.

Engineered an in-memory RAM Blob pre-warming engine (CityBackdrop.tsx) that precaches high-bitrate drone cinematography loops to ensure instantaneous switching between hubs with native localised typography (supporting both LTR and RTL scripts).

5. Automated Multi-Tier Video Encoding Pipeline

Built an automated multi-tier encoding pipeline using FFmpeg to support broad device compatibility:

6. Mobile Polish and Continuous Infinity Loop

Eliminated video end-of-clip flickering and playback hangs on iOS and Android devices through preloaded dual-video decoders and state cleanups.

Designed an architectural infinity loop where the Act V dusk horizon smoothly cross-dissolves backwards into the Act I dawn sky for an uninterrupted, continuous presentation cycle.

Design System and Visual Standards

Palette: Deep Obsidian (#0A0A09), Surface Obsidian (#141413), Desert Gold (#C5A572), Electric Brand Blue (#3D6FF5), and Warm Off-White (#FAFAF9).

Typography: Architectural serif headings paired with clean Swiss grotesque body typography and monospace UTC telemetry clocks.

Micro-Interactions: Magnetic custom cursors, glassmorphic HUD status overlays, and fluid layout progress rails.

Key Results and Deliverables

Consistent 60fps Playback: Fully resolved video judder and decoder starvation across low-power mobile devices and high-end 4K workstations.

Cross-Platform Parity: Native hardware video acceleration and responsive touch gestures across iOS, Android, macOS, and Windows.

Tested Reliability: Automated unit test coverage powered by Vitest verifying core algorithms including homography matrix calculations, input accumulators, and timeline synchronisation.

Luxury Standard: Delivered a high-performance web experience matching the calibre and architectural scale of Dubai's premier property developers.

Technology Stack

Frontend: Next.js 16 (App Router), React 19, TypeScript

Styling: Tailwind CSS v4, Vanilla CSS Modules

3D and Animation: Three.js, React Three Fibre, Drei, GSAP, Lenis Smooth Scroll

Shaders and Math: Custom GLSL Shaders, 8-DOF Homography Solver (matrix3d)

Media Pipeline: FFmpeg (AV1, HEVC, H.264, WebP)

Quality Assurance: Vitest, ESLint