East Bridge
DESCRIPTION
Saudi Arabia Corporate Landing Page
DURATION
Jan 2026 - Feb 2026
MY ROLE
- Creative Developer: Built 3D global network visualization scenes in React Three Fiber, implemented custom fragment shaders, and directed scroll/mouse-based interactions and GSAP animations.
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 is a global consulting firm that helps overseas companies successfully enter the Saudi Arabian market. This project goes beyond simple information delivery and aims to visualize the core values of "Global Connection" and "Circular" through WebGL-based 3D interaction. By breaking the mold of static B2B websites, we designed a high-end minimalist experience where smooth transitions and responsive motion provide a premium user experience for a top-tier consulting brand.
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
- · Custom Shader Implementation with GLSL so particles react to mouse trajectory, forming a dynamic 3D "network bridge" between Saudi Arabia and global markets.
- · Post-processing pipeline with refined Bloom effects applied to transitions and 3D objects to convey a premium consulting mood and sense of infinite possibility.
Immersive Interaction System
- · Depth-based animations driven by Lenis scroll speed and position, so key services and market entry stages move along the Z-axis toward the user.
- · Loading sequence aligned with the vision "Your Premier Gateway" where core typography and 3D silhouettes are revealed through soft fade-ins.
Dynamic Archive Structure
- · Supabase integration for Fields of Expertise data and client inquiries, rendered as an async-loaded grid UI with smooth category-based filtering.
- · Glassmorphism-inspired contact interface with subtle ripple feedback on submit to keep the B2B experience stable yet immersive.
Performance Optimization
- · GPU-accelerated 3D network calculations and canvas rendering with Frustum Culling to maintain 60fps across environments.
- · High-resolution environment maps and visual assets served as WebP/AVIF with lazy loading applied to critical sections first.
Design Points
Corporate High-end Aesthetics
High-legibility typefaces, deep spacing, and structured layout convey the weight, authority, and professionalism of a leading Saudi business consulting firm.
Circular & Network Aesthetics
Circle motifs and organically connected linear elements are used as core UI language to express the "Circular Export Solution" concept and a positive business ecosystem.
Kinetic & Reactive UI
Subtle reveal and hover interactions tied to scroll and mouse trajectory avoid a rigid corporate feel and instead create a responsive, living interface.