React 3D Earth Globe (react-globe.gl) – Match Drop Animation (Web & PWA)

About the project

We are looking for an experienced React / WebGL Developer to build an interactive 3D Earth Globe component for our matchmaking platform, IAMeetYou. The goal is to recreate a visually compelling, dynamic animation when user matches/compatibilities are found. A short reference video (Map video site.mp4) is attached showing the expected visual result and timing. Key Requirements & Features: 3D Night Earth Globe: Render a realistic night-time Earth with night lights and a starry background space. Pin Drop Animation: When match coordinates are passed, 3D pins must dynamically drop from space and plant themselves on the target location. (Note: The pins must be slightly smaller than the ones shown in the reference video). User Match Representation: Each pin represents a highly compatible user. The component must allow attaching specific user data (ID, score) to each pin, ready to trigger a mini-profile when tapped/clicked. Synchronized Impact Shockwave: A glowing shockwave effect must trigger right at the moment of impact. Mobile & PWA Ready (Crucial): Our platform is a web app and a PWA. The 3D globe must be 100% responsive and fully support mobile touch gestures (swipe to rotate, pinch to zoom, tap to click). Smart Zoom & Navigation: Smooth camera animation to zoom deeply into the target city upon tapping a pin. Tech Stack Context: Frontend: React (built with Vite) hosted on Vercel. Tailwind CSS is used. Libraries: react-globe.gl and three are already installed. Backend: Hosted on AWS. Deliverables: Clean, modular .jsx component(s) optimized for both Desktop and Mobile/PWA. A clear example of how to pass dynamic match coordinates into the component. (Please review the attached reference video. Mention your experience with React and Three.js/react-globe.gl, and share relevant interactive 3D demos).

Skills required