East Bridge
DESCRIPTION
Saudi Arabia Corporate Landing Page
DURATION
Jan 2026 - Feb 2026
MY ROLE
- Creative Developer: 3D global network scenes in React Three Fiber, custom fragment shaders, and the scroll- and pointer-driven interaction under GSAP.
TECH
Next.js (App Router) · TypeScript · Tailwind CSS
Three.js · React Three Fiber · GLSL (Shaders)
GSAP · Lenis · Framer Motion
Supabase
Vercel
Project Purpose
East Bridge takes overseas companies into the Saudi Arabian market — a business that runs on relationships and is usually presented as a wall of text. The two ideas the firm actually trades on, global connection and circularity, were built as WebGL 3D interaction rather than stated in a paragraph. What came out sits closer to a high-end minimal experience than to a B2B template: smooth transitions, motion that answers the pointer, and not a single stock photograph holding it together.
Scope
- · Corporate branding web design & development
- · WebGL-based global network visualization
- · Dynamic service archive build
- · Scroll interaction integration
- · Overseas CDN setup
Key Technical Features
Real-time WebGL Engine
- · GLSL shaders put the particle field under the pointer's control, forming a 3D network bridge between Saudi Arabia and the markets on the other side of it.
- · A restrained bloom pass over the transitions and 3D objects keeps the register premium without tipping into spectacle.
Immersive Interaction System
- · Lenis scroll speed and position drive depth, so the services and the market-entry stages advance along the Z-axis toward the reader.
- · Loading sequence aligned with the vision "Your Premier Gateway" where core typography and 3D silhouettes are revealed through soft fade-ins.
Dynamic Archive Structure
- · Fields of Expertise data and client inquiries run on Supabase, loaded asynchronously into a grid with category filtering.
- · A glassmorphic contact interface answers a submission with a small ripple — enough feedback to feel finished without breaking the tone.
Performance Optimization
- · The 3D network calculation and canvas rendering run GPU-accelerated with frustum culling, which is what holds 60fps across environments.
- · High-resolution environment maps and visual assets ship as WebP and AVIF, with lazy loading ordered so the critical sections come first.
Design Points
Corporate High-end Aesthetics
Highly legible typefaces, deep spacing and a structured layout carry the weight and authority a leading Saudi consulting firm is measured on.
Circular & Network Aesthetics
Circle motifs and organically connected lines are the core UI language, which is how the Circular Export Solution concept reads as a picture rather than a phrase.
Kinetic & Reactive UI
Quiet reveals and hover states tied to scroll and pointer keep the page from settling into corporate stiffness.
Gallery
Click to enlargeFAQ
How is a 3D interactive website different from a regular one?
It runs Three.js and WebGL in the browser, so objects move and respond to the cursor and scroll. A regular site organises information; an interactive one delivers the brand as an experience. It pays off most in fashion, beauty, architecture and exhibitions.
How long does a website take to build?
Seven days for a landing page, fifteen for a five-page company site, thirty for a ten-page 3D interactive build. The clock starts when your material arrives and shifts with design feedback. If a date is fixed, say so at the first call and feasibility is checked first.
Are hosting, domain and server costs separate?
SSL certificate, hosting setup and database provisioning are included at no cost. You only pay for the domain, about ₩20,000–30,000 a year. Accounts are created in your name from the start, so nothing lapses when staff change.
Can I edit the content myself after launch?
An admin page is built alongside the site, so text, images and posts can be edited without development knowledge, and a manual is handed over at delivery. Only structural changes or new features need development.