Case Study · Travel · Cinematic

umrax — A journey told cinematically.

Umrah bookings don't emerge from rational comparisons — they emerge from emotions, trust and the desire to experience something sacred. We built a website that conveys exactly that: a cinematic journey from earth to the Kaaba — before the user has even booked.

umrax.vercel.app — LIVE
Cinematic
Website type
3D
Earth Hero
3 Clips
AI video sequence
GSAP
ScrollTrigger animations

Project Details

Package
Cinematic — 4.999 €
Industry
Travel / Booking
Markets
DE + AE + International
Technology
HTML · CSS · GSAP · Vercel
Services
Cinematic website, AI videos, booking UX
Highlight
3D Earth Hero + flight sequence
Conversion channel
WhatsApp CTA
Live URL
umrax.vercel.app
The Starting Point

Rethinking travel booking

The Umrah travel market is dominated by generic booking platforms. umrax is a smaller, more personal provider — but one that delivers experiences the big players can't. The problem: online, umrax looked like everyone else.

The solution: a booking website that doesn't feel like a booking machine — but like the beginning of a journey. Emotion first, form last.

umrax website
Mobile Experience

Cinematic also on mobile

The 3D earth, the flight videos and all scroll animations are optimised for mobile. GSAP ScrollTrigger automatically adapts the trigger points to the viewport size — no separate mobile layout, but an adaptive system.

HTML / CSS
GSAP ScrollTrigger
Vercel CDN
KI-Videos Seedance
umrax website
The central feature

The cinematic flight sequence

One click on the earth starts a journey — in real time, via AI video.

01

Interactive 3D earth in fullscreen hero

The visitor lands on a page made entirely of the earth — a rotating globe, no distractions, a single call-to-action: click the earth.

02

Video 1: Departure — camera leaves Earth

Click starts the first AI-generated video: the camera flies out from the Earth's atmosphere, over clouds and oceans. Fullscreen, no UI.

03

Video 2: Flight over Saudi Arabia — approaching Medina

The second video shows the approach: desert landscapes, then the mosque in Medina from above. The descent begins.

04

Kaaba — end frame that means everything to millions

The sequence ends with the image of the Kaaba — the emotional destination of every Umrah journey. No text needed. The visitor understands what it's about.

05

Transition to booking UI and trust-building elements

After the sequence: search interface for travel dates, FAQ section, testimonials, WhatsApp CTA. The user was emotionally prepared — now comes the form.

Impressions

The website in detail

UX Innovation

Before vs. After: The UX pattern

Classic booking website
  • Immediate access to search form
  • Price comparison as main motivation
  • Generic design like all competitors
  • No emotional build-up
  • User compares directly with other providers
umrax — Booking-Landing-Hybrid
  • Emotional entry through 3D earth hero
  • Cinematic flight sequence builds trust
  • Distinctive design that stays in memory
  • Kaaba image as emotional turning point
  • User is ready to book before seeing the form
What we built

The Solution

Cinematic scroll animations (GSAP)

Every section scrolls in with depth. Texts glide, images zoom, parallax effects. GSAP ScrollTrigger — the library behind Apple.com and Porsche.com.

AI video sequence (Seedance / Higgsfield)

3 chained AI-generated videos form a seamless sequence: earth → flight → Kaaba. Each video is optimised for load time and autoplay.

Booking-landing hybrid

No separation between marketing page and booking machine. Both integrated — emotion qualifies the user before they see the search field.

WhatsApp as primary conversion channel

For personal travel operators, WhatsApp is the most direct channel. The CTA doesn't lead to form nirvana — but directly into a human conversation.

How it was built

The Process

01
Brief & Concept
Target audience analysis (Muslims DE + AE), competitor analysis (Booking.com, Muslim travel providers), UX concept for the booking-landing hybrid.
02
AI Video Production
Keyframes defined (earth → clouds → Medina → Kaaba), Seedance prompts written, 3 chained clips produced, optimised for web (autoplay, loop preparation).
03
Design & Animation
GSAP ScrollTrigger animations for all sections, 3D earth integration, booking UI built, WhatsApp CTA implemented.
04
Mobile Optimisation
All animations adapted for touch devices, video autoplay tested for iOS/Android, load times optimised for mobile networks.
05
Launch & Iteration
Live on umrax.vercel.app, user feedback incorporated (FAQ added, trust elements strengthened), continuously refined.
Concept insight

“An Umrah is not a transaction. It is one of the deepest spiritual experiences in a Muslim's life. A website for it must make you feel that — not just explain it.”

— Muhammed Kiziler, Doc Mo Agency
Results

What the project achieved

umrax is the first Umrah booking website in the German-speaking market that uses emotion as the primary conversion element. The result: users who arrive after the earth-hero experience are already qualified — they want to book, not compare.

3D Earth
3 KI-Videos
1 Click → Kaaba
umrax website
UX Analysis

User journey in numbers

Feedback

What was said

“When I clicked on the earth and the video started — I had goosebumps. I showed it to a friend and he immediately booked too.”

Customer, umrax

“I had never seen a website like this before. It feels like a film, not like a booking machine. I immediately felt trust.”

User, German Muslim woman

“Doc Mo understood that Umrah is not a holiday. You can see that in every second of this website — in the videos, in the calm, in the design.”

Founder, umrax
FAQ

Questions about this project

What is a booking-landing hybrid?
A classic booking system (like Booking.com) shows the user the search form immediately. A landing page explains the provider first. The booking-landing hybrid combines both: first emotional qualification through story and visuals, then the booking interface. Users who reach the interface are already convinced — the conversion rate increases.
How were the AI videos produced?
The videos were generated with Seedance (Higgsfield AI). Each clip was controlled with precise prompts for camera movement, light and atmosphere. Start frame and end frame were passed as image references so the clips transition seamlessly. The result: 3 chained clips that feel like a single film.
Why WhatsApp as conversion channel and not a form?
For smaller, personal travel operators, WhatsApp is the most natural communication channel. Customers in the Arab world and German-speaking Muslims use WhatsApp daily for personal communication. A form would create distance — WhatsApp builds closeness. Also: WhatsApp enquiries have higher quality than form leads because the prospect actively takes a step.
Can the cinematic concept work for other types of travel?
Yes. The booking-landing hybrid pattern with cinematic intro sequence is transferable to any travel booking where emotion is decisive: luxury travel, honeymoon bookings, adventure tours. Everywhere the user isn't just booking a seat, but buying an experience, this pattern works.
Which package corresponds to the umrax project?
The Cinematic package (€4,999). It includes everything from Hochwertig plus: cinematic scroll animations (GSAP), AI video production and integration, 3D hero element, premium design language. For businesses that want to stand out and be remembered.

Your product cinematically showcased?

Every industry, every market. A 30-minute call shows you what's possible.

Book a call now →