I put 4.6 billion years on one page

One pixel is forty thousand years, all the way down. I went from the creation of our planet to today, and made many mistakes along the way.

I have been building a site called Deep Time. It is one page, you scroll it, and the entire history of Earth goes past. The rule is that one pixel equals forty thousand years, and that rule never changes, from the first pixel to the last.

That's the entire project. There is no zoom or scale break to make things more interesting. That was intentional because I wanted to see the history of our planet at true scale.

The inspiration came from two really cool websites. I saw a couple years ago. One showed how filthy rich Jeff Bezos is (post-COVID). The other... is A really cool site by Neil Agarwal called Deep Sea. (I even stole his naming convention.) Deep Sea puts in perspective just how deep the Mariana Trench is. I suggest you check both of them out. They are really fun. Anyways...

The timeline comes out to 115,000 pixels, plus a title screen at the top and an ending at the bottom that are not on the clock. 127,500 total. It is that same height on your phone as on a monitor, and it takes about four minutes to scroll through the entire history of our planet.

You start on a molten planet with no ground. You scroll for about a minute and something shows up. You scroll another minute and something else does. Then you hit a stretch where you scroll, and scroll, and the only thing changing on the screen is a counter in the bottom left.

If you make it to the dinosaurs, you are basically done. They land in the last 5% of the page.

I learned quite a bit from building this. Most of it was new to me. Or maybe it was just forgotten sometime after high school. My unfamiliarity certainly caused complications.

Things I didn't consider when I decided to make the site true to scale:

Most visual timelines you see cheat a bit. You kinda have to if you want to keep things interesting. They stretch the recent part, because the recent part is where the recognizable stuff is. But I did not want to do that. A map that draws Rhode Island the size of Texas so the label fits is not an accurate map. It is a misleading illustration. As an analyst, I am hardwired not to do things like that.

What I knew about the history of this planet was whatever I was taught in high school, and I do not remember hardly any of it. Dinosaurs came before people. There was an ice age at some point. There was a Big Bang and there are other planets. That's all I got...

The first real work on this project was not code. It was figuring out what happened and when. It's a little ironic because I wanted to create this site so that I could learn about our beautiful planet, but I was forced to do the learning before the site could be created.

That's OK... Others can benefit from it.

Learning all this 'stuff' is harder than it sounds, and not for the reason you would expect. Finding a list of events is easy. The problem is spacing. I had to make rules... Two things closer together than 600 pixels cannot both be on the scroll, because they would land on top of each other, and 600 pixels at this scale is 24 million years. So every candidate had to clear that bar.

I also had to ensure that there were enough events to keep the site interesting.

Essentially, I had to make sure that nobody would sit through twenty thousand pixels of nothing and then get eleven things stacked up at the end.

So I was hunting for events I did not know existed, that had to land at a position I could not control, at a spacing I could not adjust, because the date is the date.

57 moments made the page. 39 of them are Precambrian, Because most of earth's history is precambrian.

The first dinosaurs appear 227 million years ago. The mass extinction that killed roughly half of everything alive comes at 201.4 million years ago.

On this page, those two events are only 640 pixels apart. They can both be on your screen at the same time.

In reality, they are separated by more than 25 million years.

That's the scale we are dealing with. Events that feel like they belong next to each other can be separated by tens of millions of years, and following the spacing rules perfectly meant leaving out things that absolutely belonged in the story.

The dinosaurs were one of them.

So I broke my own rule. There are three places on the site where I ignored the spacing requirement on purpose because the events felt too important to leave out.

The first 88% of Earth's history is microbes, rock chemistry, and an atmosphere slowly changing. No animals. Nothing you would recognize. I had to read a bit about banded iron formations.... Never again. But it did inspire me to try to be as scientifically accurate as possible with timelines, images, backgrounds, and effects.

The background colors change to that era's actual sky and ocean color, and every transition takes its true duration in pixels. The haze burning off the early atmosphere for the last time takes 5,250 pixels, about ten seconds. All of Snowball Earth takes 2,050, about four. The Moon really recedes while you scroll, from roughly 24 Earth radii out to 58, with a day going from about six hours to twenty-two.

And there is a stretch geologists actually call the Boring Billion, where I put 15,000 pixels of almost nothing on the screen but a counter.

By far the most frustrating part of this entire project... I'm getting a little annoyed just writing about it.

The site needs 51 illustrations, and there is no photograph of a single one of these subjects. There cannot be. (Except for the human skull at the end.)

What exists are reconstructions, from scientists publishing what they believe a thing looked like based on a fossil or chemical traces. Those reconstructions are frequently in conflict with other scientist reconstructions. Surely there is something better to argue about...

Two entries on my site have a question mark in the name for exactly that reason. Grypania may be an alga or may be a colony of bacteria. The 890-million-year-old sponge may not be a sponge.

I am still not confident I got all, or any, of them right. That is not modesty. Nobody knows what most of this stuff looked like.

I generated the art with gpt-image-1, and it has a specific failure that took me a while to see. It does not fail on difficulty. It fails on familiarity. Anything with a living relative came back spot on. Anything obscure collapsed into the nearest common thing the model had seen. Lepidodendron, an extinct tree, drew as a Florida palm tree, and then as a winter oak tree. A stromatolite drew as a mushroom. A mammoth drew as an Asian elephant. Anomalocaris came back as a lobster with pincer claws.

And when I asked for Rodinia, a supercontinent from 1.1 billion years ago, it drew modern Africa. With Madagascar.

Negative prompting helped, but it was far from reliable. I named the modern continents I wanted the model to avoid, and while that improved some generations, others brought them back. I ran into the same problem with an ancient crocodile relative. I used the word gharial to explain what I didn’t want, and three rounds in a row gave me a gharial anyway. UGH!!!!

Sometimes the fix was the angle of the image. Tiktaalik is a fish with a neck, a wide flat head, and the eyes set on top. I asked for it from the side six times and got six normal-looking fish or weird-looking creatures. None of them looked like what I what I saw online.

Finally I nailed it with a bird's-eye camera view.

I did not have to get involved with most of the images because I ran loops to have agents compare the produced images with the descriptions from the research. It got quite a few of them right but I had to get involved on some of the ones mentioned above.

The working recipe, if loops fail and you need to generate images of things nobody's ever seen before 🤣....

Another truly infuriating quirk of image generation...

Images were being loaded onto the site and they were all completely different sizes.

I looked in the layout code first, but nothing was being capped.

The problem turned out to be the image processing step. Every illustration had a transparent margin added around it, but tall, narrow subjects were getting way too much. Some were being shrunk to less than half their available space before they even reached the page.

I cut that margin from 12% to 5%, and every illustration immediately became 32 to 37% bigger without changing the layout. The tradeoff was larger files, so I lowered the image resolution slightly to keep everything within budget.

By the way, if anyone reading this has a better solution, please reach out and let me know because it is truly frustrating.

I set one rule at the start, in these words: stuff can't overlap. I know better. I have dealt with overlap in site design more than I care to admit. Models don't really understand what that means, and they typically log it as a minor preference. Text and images were overlapping everywhere.

So I built an automated check. Before the site can build, it checks every element on the page at four different screen sizes, both with normal text and with text enlarged to 200%. If anything overlaps, the build fails.

The 200% text test caused the most problems. On a phone, there is already very little horizontal space. Double the text size and every paragraph becomes much taller, pushing everything else around it. Layouts that worked perfectly everywhere else suddenly broke. That test caught more problems than I expected.

The other problem was making sure every illustration stayed visible.

The background changes constantly as you scroll, from bright molten orange to almost white ice. An image that stands out perfectly in one section can nearly disappear in another.

My first fix was adding a soft glow around each image. It looked nice, but it didn’t actually help much. The glow used colors from the image itself, so it often blended right back into the background.

What finally worked was adding a thin outline around the shape of each illustration. The site tests both a light and dark version of that outline against the background, measures which one creates more contrast, and uses the better option.

I wouldn’t have figured that out just by looking at it. I had to measure it.

I did not hand-write most of this code. I directed it. What I spent my actual time on was deciding what was true and checking what got created and what was incorrect. For this project I think the code would have been the easy part. Anyways...

A few of the images are still wrong and bother me, but not in ways an automated check can catch. One planet renders its haze as a ring around the rim instead of a veil over the disc, which is the exact failure I wrote a negative prompt to prevent, and the negative did not hold. The sizing is not settled. I am still tweaking it, but I haven't had enough free time to get it right yet. I'm about 90% of the way there.

The ending is the primary reason I created the site, though. All of recorded human history sits inside a fraction of one pixel on that page. Every war, every book, spoken word.

The scale is difficult to comprehend even with this site.

If you put Earth's 4.6 billion years into a single calendar year, humans show up at 11:26 p.m. on December 31st, with farming in the last ninety seconds and writing in the last forty.

We are brand new here. Stromatolites, the mats of bacteria that build rock, had a three-and-a-half-billion-year run before we turned up. Plants have been on land for 470 million years. Our species has been here for 300,000, which is 7.5 pixels, and we have been writing things down for 5,400 of those, which is about 1/7 of one pixel.

This site inspired me to start a second project that takes our little fraction of a pixel and does the same thing to it. All of human history at its own true scale, where everything unseen in Deep Time becomes visable. I haven't decided if I am going to do human objects or moments in history.

A month ago I could not have told you what a stromatolite was. I now know a great deal more about our planet than I did last week. Maybe the human history project will turn up another invisable pocket and inspire a part three.

Thanks for reading 🙏

🌍: deeptime.dustincoledata.com

🔗 LinkedIn: https://www.linkedin.com/in/dustinwcole/

🌐 Site: dustincoledata.com

— Dustin