Nasa's Black Marble - Portfolio Showcase

Hi, I’ve created my own version of Nasa’s Black Marble in R3F. This had took me quite a while to make it alive and I’d like if you all can try this out on your laptop/desktop and let me know your thoughts and suggestion on how it can be Improved.

Special thanks to @donmccurdy and @drcmda for helping me by answering all my queries. Without them, my Journey would have been way more challenging.


It works smooth here.


  • Language: refine the text (e.g. ‘most of it land’ (its), ‘wind travelling war’ (far), ‘river Nile support’ (supports), etc.)
  • Graphics: some countries are not outlined (e.g. China, Australia, India), while others are (Syria, Russia)
  • User Interface: it is impossible to scroll fast – the view does not advance until the current animation is running.

For Language, definitely that needs more refinement and will get it done by tomorrow. I’d also say that’s where I’ve spent least amount of time. Thanks for pointing it out. Highly appreciated.

Border - Most of us generally know where India, China and Australia is and it’s instantly recognisable. I’ve considered to highlight only those which are actually need. Like Russia because I wanted to highlight its geographical area. Argentina - Most of the boundaries of the countries in South America seems crammed (no offense to anyone living there) so I thought lets highlight it. Afghanistan and Syria are relatively a land locked or have no to very limited sea strip. So you can see why I’ve done that. But in general I’ve done keep the awareness of general audience in my mind.

UI - fixing the scrolling issue was real pain. This is what currently I’ve right now which is utmost stable. I’ve deliberately done because I wanted user to experience it one by one. I know it kinda compromises the usability. Implementing that with current scroll logic will be challenging. What I’m thinking is to give user the ability to expand the width of fake blue scrollbar and select options to scroll where they want to go directly. That way its more manageable and does meet the usability requirement.

The scroll logic is also partially inspired from Medal of Honor which scrolls one by one. Let me know what you think about it compared to this.

Going one by one is not a problem. Waiting for the animation to stop is a problem, because the user will try to scroll, but the page will not scroll (because the animation is still running).

In Medal oh Honor you can jump forward to any hot spot – there is a navigation bar at the right.

I’ll try to add hotspots in near future.

Spelling are now fixed with the help of Quillbot. I didn’t knew there were so many mistakes. Next time I’ll be very cautious about it.