How I Built a NASA-Style Name Generator with Next.js and Canvas API

Ever wondered what your name looks like from space? I built Your Name in Landsat — a web app that spells out any name or short phrase using real Landsat satellite imagery tiles shaped like alphabet letters.

The Idea

NASA's Landsat program has been capturing Earth observation data since 1972. Among the millions of satellite images, some natural and man-made features on Earth's surface happen to resemble letters of the alphabet. I thought it would be fun to collect these "letter tiles" and let people spell their names with them.

Tech Stack

• Next.js 16 with App Router for server-side rendering and routing
• React 19 for the interactive UI
• TypeScript for type safety
• Tailwind CSS 4 for responsive styling
• Canvas API for compositing letter tiles into a single shareable image
• Cloudflare Workers for edge deployment

How It Works

1. The user types a name or short phrase
2. The app maps each character to a pre-curated Landsat satellite image tile
3. Canvas API composites all tiles side by side into one panoramic image
4. The result can be downloaded or shared on social media

The letter tiles come from actual Landsat scenes — rivers that curve like an "S", urban grids that form an "H", coastlines shaped like a "C", and so on.

Key Technical Challenges

Image Loading and Canvas Compositing

Loading multiple high-resolution satellite tiles and stitching them together required careful management of async image loading. I used Promise.all to ensure all tiles are loaded before drawing:

const loadTile = (src) => new Promise((resolve, reject) => {
  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.onload = () => resolve(img);
  img.onerror = reject;
  img.src = src;
});

const tiles = await Promise.all(
  letters.map(letter => loadTile(`/tiles/${letter}.webp`))
);

Responsive Layout

Each letter tile is square, but the total width depends on the name length. I had to dynamically calculate canvas dimensions and handle viewport constraints so the result looks good on both desktop and mobile.

Edge Deployment

Deploying on Cloudflare Workers meant optimizing for cold start times. Next.js 16's built-in edge runtime support made this straightforward — static assets are cached at the edge while dynamic routes run in Workers.

Try It Out

You can try the Landsat Name Generator yourself. Type your name and see what it looks like spelled with satellite imagery from space!

The project is open source and I'd love feedback from the community. Let me know what you think in the comments.

Built with Next.js, React, and real NASA Landsat satellite data.