Interactive Globe Developer for Financial Site
I’m looking for a Webflow developer who specialises in interactive sections / WebGL to build a single high-impact section for an existing marketing site (finance/trading niche).
What I need
A reusable “Worldwide Earnings” section in Webflow where:
- 3D / pseudo-3D globe background
- Dark space background with a glowing orange planet horizon.
- Slow continuous rotation on desktop (smooth easing).
- Country markers/pins rendered from a provided list (code, lat, lng).
- Horizontal country slider / cards
- Each card shows: flag, country name, total earnings.
- Auto-plays through countries on a timer.
- When the active card changes (autoplay or click):
- The globe rotates to bring that country to the front.
- The country marker highlights in orange with a soft glow.
- The card gets an “active” state (e.g. subtle scale/glow).
- Two-way interaction
- Clicking a card in the slider:
- Centers that card.
- Rotates the globe and highlights that country.
- (Nice to have) Clicking a globe marker focuses the matching card.
- Data setup
- Accepts data from:
- A static JSON object embedded in the page, or
- A simple API endpoint returning countryCode, countryName, earningsUsd, lat, lng.
- Easy for me to add / remove countries later without touching core JS.
- Responsive & performance
- Desktop: full 3D experience using canvas/WebGL.
- Mobile / low-power devices: graceful fallback (static or lightly animated globe image; slider still works).
- Respect prefers-reduced-motion for users who disable heavy animations.
Tech expectations
- Strong Webflow experience (custom code embeds, working with sliders/collection lists).
- Solid JavaScript and animation experience.
- Experience with Three.js or similar (or a lightweight globe library like globe.gl), plus GSAP or similar for easing/tweens.
- Comfortable matching an existing dark, premium design (I’ll provide reference screens).
Deliverables
- A working Webflow section (in my project or a clonable) with:
- Globe background.
- Country slider.
- All interactions described above.
- Configurable data source (clear example JSON / API integration).
- Short README or Loom explaining:
- How to update the data list.
- How to tweak animation timings/easing.
- How the mobile fallback is handled.
- Basic cross-device QA (Chrome/Safari desktop, iOS/Android).
If this is in your wheelhouse, please send:
- 2–3 links to interactive sections you’ve built (ideally Webflow + WebGL/maps/complex animations).
- A rough estimate of cost and timeline for this one section.
Job Qualifications
- A static JSON object embedded in the page, or
- Name, earningsUsd, lat, lng
- Easy for me to add / remove countries later without touching core JS
- Desktop: full 3D experience using canvas/WebGL
- Mobile / low-power devices: graceful fallback (static or lightly animated globe image; slider still works)
- Respect prefers-reduced-motion for users who disable heavy animations
- Strong Webflow experience (custom code embeds, working with sliders/collection lists)
- Solid JavaScript and animation experience
- Experience with Three.js or similar (or a lightweight globe library like globe.gl), plus GSAP or similar for easing/tweens
- All interactions described above
- Configurable data source (clear example JSON / API integration)
- Short README or Loom explaining:
Job Benefits
- Dark space background with a glowing orange planet horizon
- Slow continuous rotation on desktop (smooth easing)
- Country markers/pins rendered from a provided list (code, lat, lng)
- Horizontal country slider / cards
- Each card shows: flag, country name, total earnings
- Auto-plays through countries on a timer
- The country marker highlights in orange with a soft glow
- Rotates the globe and highlights that country
- Data setup
- A simple API endpoint returning country
Job Responsibilities
- The card gets an “active” state (e.g. subtle scale/glow)
- Two-way interaction
- Comfortable matching an existing dark, premium design (I’ll provide reference screens)
- How to tweak animation timings/easing
- How the mobile fallback is handled
- 2–3 links to interactive sections you’ve built (ideally Webflow + WebGL/maps/complex animations)
- A rough estimate of cost and timeline for this one section