React 3D Earth Globe (react-globe.gl) – Match Drop Animation (Web & PWA)
Budget / Salary€50–100
TypeFreelance project
LocationRemote
Posted1 hour ago
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).
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).
Apply on Freelancer →
Project sourced from Freelancer.com. Applications happen directly on the original platform — we never collect your data.