Alpha is building technology cities across Africa. I designed and built alphacity.io end to end, from the first Figma wireframes to a site that walks through twelve thousand years of history, flies a live map across seven countries, and ends at one action: joining the Alpha Genesis Program.
Alpha’s plan covers new cities in several countries, built for an age that hasn’t fully arrived yet. That is hard to explain on a web page. Long paragraphs lose people, and a grid of feature cards makes it look like every other startup.
I worked directly with Bradford Cross, Alpha’s founder, who set the creative direction and signed off each stage. I owned the rest: the wireframes, the build, the motion, the map, the sign-up backend, security, SEO, performance and deploys. Bradford’s copy goes onto the page word for word.
“Building the most strategically important technology cities of the 21st century across Africa.”
Alpha’s own description
Don’t explain the vision. Let the visitor travel through it.
History becomes a pinned timeline. The plan becomes a map you fly across. The invitation becomes a set of doors you walk through. Each chapter is a place, not a paragraph, and every one of them ends at the same call to action.
On desktop, a boot loader holds the page until the fonts, the poster frame and the video are all ready. That way the first thing you see is the finished frame, not something half-loaded. The headline scrambles in over a 48-second film, framed by a HUD with coordinates, “Transmission 001” and “Status · Online”.
There is one call to action, “Join the Genesis Program”, and its fill sweeps from white to Alpha’s lime.
A progressive blur hands off to nine pinned eras. They run from the tribal age in 10,000 BCE, through the special economic zone, to “Next: Engineered High-Performance Civilization”. Each era is a slow Ken Burns scene with the year set huge behind it.
A dot rail shows where you are, and a skip pill lets impatient visitors jump straight to the cities. On phones the pill moves out of the way of the rail.
A spinning globe, with landmass, graticule and starfield, turns to Africa and descends into a pinned map. It moves through four chapters: AI Cities, the critical-minerals corridor, Digital Financial Centers and Equatorial Aerospace Cities.
Every country gets a camera fly-to, a highlight, a briefing panel and a gallery of renders. Countries can be clicked on the map or on the rail, so the team can drive the site live in a pitch meeting instead of switching to a slide deck.
The Genesis page is one pinned stage. Two doors, cut from a Stone Town street render and a lane down to the sea, wake out of white light. A gold seam opens, the wordmark lands, and the camera flies through on the Z axis.
Then you drop down through the clouds and face a choice: “Stay in the old system” or “Enter Alpha”. Choosing Alpha launches a three-second flight through the island’s parallax layers that lands you on the sign-up.
The same globe carries on underneath the Genesis sign-up, so the page ends where the story ends. You can sign up with Google in one tap or by email. Alpha Founders and Alpha Pioneers are explained right beside the form, so nobody has to leave the page to find out what they’re joining.
A site like this can easily become a slow, heavy page that search engines can’t read. Most of the work after launch went into making it load fast on a mid-range phone, rank properly, and fail gracefully.
The globe is MapLibre over self-hosted GeoJSON, so there is no tile API to rate-limit it. I cut the geometry from 662 KB to 543 KB and cached it. Loading retries itself, the map recovers from a lost WebGL context, and if WebGL isn't available at all it falls back to SVG.
Profiling phones turned up a lot of hidden work. An offscreen video kept decoding, touch-drags were driving the parallax, all nine era layers were composited at once, and a blur sat on top of WebGL. Fixing those, and capping the map's pixel ratio at 1.75 on phones, is where most of the mobile score came from.
The Genesis artwork arrived as 56 MB of PNG and stalled the image optimiser. Re-encoded as WebP it is 1.5 MB, with no visible loss on the large parallax plates.
Search engines only read the first country in the scroll. Each country now has its own static page with breadcrumb structured data and its own share card. Organization and WebSite JSON-LD, an image sitemap, llms.txt and IndexNow pings sit on top of that.
The Genesis sign-up takes Google or email and writes to Airtable. Google ID tokens are verified against Google's JWKS, redirects are guarded, sign-ups are limited to five per minute per IP, and CSV-formula injection is stripped before anything reaches the sheet. CSP and HSTS headers cover the rest.
On this stack, Framer Motion's range form of useTransform silently dropped opacity writes. Fades looked right in isolation and broke in combination. Every fade on the site now uses the function form, and it's written into the repo notes so it doesn't come back.
These are the mobile numbers from the November speed pass, plus the live audit afterwards. The site is verified in Search Console with its sitemap submitted, and every page in the sitemap passes.
The interface reads like a transmission: near-black surfaces, a lime signal colour for anything you can act on, and blue and cyan reserved for the map. Hilmar Sans sets the headlines and IBM Plex Sans carries the body. Monospace HUD labels (coordinates, chapter counters, status pills) hold the whole thing together.
Before any code, it started as Figma wireframes reviewed on fifteen boards at desktop and phone widths. Then came HTML prototypes of the timeline and a map-style studio, and the production map’s style was ported straight from that studio.
The Alpha team made the country renders, the hero film and the Genesis objects, and I worked on the film’s pacing with them. Bradford Cross set the creative direction. I did the design, front end, motion, map, sign-up backend, security, SEO, performance and deploys.
Captured from the live site. Tap any frame to enlarge it.
Have a vision in mind? I'm here to translate your ideas into cutting-edge digital reality. Let's talk about your next big move.
