Recreating the Stripe / GitHub Globe using Claude Code
TL;DR — you’re probably familar with the Stripe and GitHub globes:
So I made my own version (free to use) using Claude Code.
https://ronreiter.github.io/globe/
Aside from a $30 vibe coding session, I did notice that Claude had a bit difficulties with creating the globe, and I thought it would be interesting to share some of them as a way to share my experience with vibe coding in general.
First of all, I have to admit that I am literally shocked by just how good Claude 3.7 is. I did not write any code at all — and the only changes I made myself are to tweak numbers in the code.
Claude is not good with visual data
Although Claude can generate excellent texual data, it falls short on generating visual data. For example, in the case of creating a globe animation — an image of the earth is required. Asking Claude to generate a bitmap of the world map simply does not work. So in order for this to work, I had to replace the bitmap that Claude generated of the world map by my own version.
So I took a free image I found online:
And had Claude generate a bitmap out of it using a script that Claude generated for me:
import json
from PIL import Image
import numpy as np
# Open the world map image
img = Image.open('worldmap.png')
# Resize to 195x105
img = img.resize((195, 105))
# Ensure we have alpha channel (RGBA mode)
img_rgba = img.convert('RGBA')
# Convert to binary (0 and 1)
# Any pixel with alpha > 0 is considered 1, transparent pixels (alpha = 0) are 0
binary_data = []
for y in range(img_rgba.height):
row = ""
for x in range(img_rgba.width):
# Get RGBA values
r, g, b, a = img_rgba.getpixel((x, y))
# If alpha is 0 (completely transparent), it's 0, otherwise it's 1
if a == 0:
row += "0"
else:
row += "1"
binary_data.append(row)
# Verify dimensions
assert len(binary_data) == 105, f"Expected 105 rows, got {len(binary_data)}"
for i, row in enumerate(binary_data):
assert len(row) == 195, f"Row {i} expected length 195, got {len(row)}"
# Save to JSON file
with open('worldmap.json', 'w') as f:
json.dump(binary_data, f)
print("Conversion complete. JSON file created with dimensions 195x105.")Claude likes to hard-code values
What I’ve noticed over and over again — is that Claude must have ongoing feedback on separating configuration and logic. Unless specifically directed, Claude will usually prefer to hard-code values into the middle of the code. Moreover, unless specifically directed, it would not calculate values based on a ratio of a variable but rather just re-calculate and hard-code values.
Claude gets used to a work pattern
If you ask Claude to commit and push your code after a change, he will start offering you to do it after all changes. However — if you restart the applcition, it will forget the context and won’t do it again — unless you ask it to update the instructions (CLAUDE.md).
This could be annoying sometimes, because at some point if it gets used to push every change to git then you won’t be able to undo changes, if you start auto-approving.
Prompt engineering requires a lot of software engineering knowledge
Claude is smart — but I’ve had to instruct it with at least 100 prompts which are highly technical and well crafted — which used most of my coding experience to know what exactly to ask it to do.
For example, insisting on configuration, asking it to create the atmosphere with shaders, or to use a bitmap of the world map, and use a hex pattern to generate the dots on the map instead of lat/long mapping.
Auto-approve mode is dangerous
A lot of times Claude would automatically improve your code on areas that you did not ask it to improve. In most cases, it’s OK — but in many cases it can change things you did not intend to, or sometimes ruin your code. Make sure to always review and test it before you commit.
Long sessions can create messy code
It is recommended that if you do have some time left, ask Claude to cleanup any duplicate code or overcomplicated code that it left behind. It loses context quickly especially if dealing with many files, since it’s easy for it to ignore the previously created code. Sometimes it’s actually better to vibe code on just one file and only when you are done, ask it to split the files to different modules.
Conclusion
After $30 and 3–4 hours later, I am very happy with the result:
The code is MIT licensed so feel free to use it:
