A premium one-page experience for a Qatar & GCC business-setup consultancy — built around a single interactive 3D access pass that carries the visitor through the entire story.
Role
Design & Front-End Build
Type
Marketing site · 3D / WebGL
Year
2026
Platform
React · Three.js · Vite
Scroll to read
01 — 08
01 / Overview
What Elevare is
Elevare helps foreign companies enter the GCC market — handling company setup, licensing, compliance and day-to-day operations so an international business can land in Qatar and start trading.
The brief was a brand presence that felt as considered as the service: calm, premium and trustworthy for international B2B clients making a high-stakes move into a new region. Rather than a conventional multi-page marketing site, Elevare is a single continuous scene — one 3D access pass, one scroll, one accountable narrative.
One
Continuous 3D scene
13
Scroll beats
6
Core services
3
Card faces
02 / The big idea
One pass, the whole journey.
The hero is built on a real-time 3D model of a physical access pass — Elevare's metaphor for a “license to operate” in the GCC. A kinetic wordmark cycles ENTER → STRUCTURE → OPERATE behind it, naming the three things the consultancy does. The card never leaves the screen: it re-poses, tilts and swaps faces as you scroll, tying every section to a single object.
elevare — enter · structure · operate
Home — real-time R3F canvas. The pass auto-fits on load; the kinetic headline types behind it.
03 / Design system
A restrained, premium language.
Pure black, a single off-white, and one accent: Qatar burgundy. Type does the talking — a tight, semibold sans with generous negative space. Nothing competes with the pass.
Obsidian
#000000
Stage / canvas. Lets the WebGL card and glow read at full contrast.
Off-white
#E8E8E8
Primary text. Softer than pure white to ease long-form reading on black.
Qatar Burgundy
#8A1538
The only accent. Hairlines, the contact glow and the “license to operate” seal.
Typeface — system sans
Aa
DisplayBuilt for businesses
BodySetup, compliance & operations.
LabelSIX CORE SERVICES
Headlines
Semibold weight, −2% tracking. Weights are kept deliberately consistent — no decorative split-weight treatments — so the brand reads as composed, not loud.
Rhythm
A 44px minimum touch target, hairline dividers and a monospace micro-label system give the long scroll an editorial, document-like cadence.
04 / Motion & interaction
Movement that feels engineered.
The whole site is one scroll state machine. Lenis smooths the wheel, the page free-scrolls like a high-end product site, then quietly snaps to the nearest of 13 anchors when you stop. A fixed camera keeps every pose deterministic — the card moves, the camera never does.
01
Smooth, never sticky
Lenis (lerp 0.1) drives a single self-healing rAF loop. The wheel is never intercepted, so momentum scrolling feels like Apple / Lusion — free, then settled.
02
Snap on idle
After the scroll goes quiet, the view eases to the nearest beat over ~0.7s with an ease-out cubic. Fully interruptible — a fresh flick cancels it.
03
One signature easing
cubic-bezier(0.16, 1, 0.3, 1) on every reveal and pose lerp gives the entire experience a single, recognisable motion fingerprint.
04
Calm atmosphere
A CSS-only vignette and film grain sit above the scene — depth without a per-frame JS cost, so scrolling stays buttery on every device.
05 / The build, section by section
Five movements, one object.
Each section re-poses the pass and, where it earns it, swaps the card’s printed face. The result reads as a guided tour of the service, not a stack of pages.
About — the card becomes the evidence. Its face swaps from the Qatar map, to setup & compliance, to a growth chart, as the copy walks through the value proposition.
elevare — about · 1 / 3
About 1/3 — “Built for businesses entering Qatar and the GCC.” Card face: the Qatar map.
elevare — about · 3 / 3
About 3/3 — “We focus on what drives growth.” Card face: the growth chart.
elevare — about · 2 / 3
About 2/3 — feature cards (Gateway Market · Regional Access · One Operator) animate in beside the pass.
Six core services — its own section. A horizontal icon rail sweeps past a central spotlight frame, scroll-driven, one stop per service.
elevare — services · 01 / 06
“Six core services, one accountable team.” The rail brightens icons by proximity to centre.
elevare — services · 02 / 06
Scroll advances the spotlight; a light-streak sweep + counter mark each service in turn.
From market entry to operations — the pass returns to centre stage for the closing service narrative.
elevare — services · how we deliver
“From market entry to ongoing operations.” The full pass face is shown — the product made tangible.
Contact — the pass peeks above an inline form. A maroon glow fades in; the CTA is a single, confident “Book consultation.”
elevare — contact
“Don’t just plan it. Built it.” Localised +974 phone input, WhatsApp / endpoint fallback wired in.
06 / Responsive
Rebuilt for the thumb.
Mobile isn’t a squeeze of the desktop. The hero wordmark moves to the top as a kinetic headline with the pass floating beneath it; a dark scrim drops behind the bright card on the services beats so copy stays legible; the contact pass peeks above a bottom sheet.
Captured live at 390×844. Kinetic headline → pass → service → enquiry.
07 / Under the hood
How it’s built.
A modern React + WebGL stack, tuned for a single 60fps scene that survives hot-reload and respects reduced-motion preferences end to end.
A single lazy-mounted R3F canvas renders the pass across every section. A scroll-driven rig lerps the camera-relative pose per beat; the GLB’s PBR materials swap textures for the three card faces.
B.
Deterministic, locked poses
Every section’s position, rotation and scale is tuned independently and locked, so a refresh always lands the card in exactly the same place. Changing one beat can never disturb another.
C.
Performance discipline
Memoised canvas, a guarded global scroll state, and an animation loop that only runs on its active section keep scroll jitter out. Atmosphere is CSS-only — no per-frame JavaScript.
D.
Accessible by default
prefers-reduced-motion disables every animation and bypasses smooth scroll; decorative WebGL is aria-hidden; focus rings and 44px targets throughout.
08 / Outcome
The result
A distinctive, high-end one-page experience that makes an abstract B2B service tangible — anchored by a single 3D object the visitor watches do the work.
The pass metaphor gives the consultancy a memorable signature; the continuous scroll keeps a complex offering legible; and the restrained black-and-burgundy system reads as exactly the kind of careful, premium partner the audience is looking for. Smooth on desktop, rebuilt for mobile, accessible throughout.
