← BACK TO PORTFOLIO

SYNCRO

A main-menu concept for a fictional space game, and the reason this whole site looks the way it does.

THE ORIGINAL

Syncro was a portfolio piece I made years ago, purely to show off UI design. No game behind it, no brief, no client. Just a main menu for a space game that didn't exist, built to see how far I could push a look.

The original Syncro main menu concept, with an inverted galaxy background
The original Syncro main menu.

Looking at it now, it's too busy. Overlapping frames, ghosted rings, hairlines running edge to edge, and a background doing quite a lot of shouting behind text that needs to stay readable. There is more decoration than there is interface. The centre of the image is also far too dark, which is exactly where the menu items sit: the one region that needed to stay quiet is the one competing hardest with the type. But it was a genuinely fun exercise, and one idea in it turned out to be worth keeping.

THE INVERSION

The whole look comes from one move: take a photograph of a blue galaxy on black and invert it. Deep space becomes warm cream. Blue dust becomes burnt orange. The bright core, the part your eye goes to first, becomes a soft dark bloom.

The original blue galaxy photograph used as the source for the inversion
The source image, before inverting.

I did it in Affinity, and it was a one-click experiment that happened to work. You get a palette that feels like aged paper and printed ink rather than a screen, while the underlying image is still unmistakably a galaxy. It reads as space and as print at the same time, which is a strange combination to land on by accident.

THIS SITE IS THE SAME TRICK, RUNNING LIVE.

The background here isn't a photograph. It's a particle galaxy rendered in real time, with the inversion applied as a CSS filter over the top. That means it can be undone selectively: the headline bands and every content panel on this site invert a second time locally, punching back through to the true blue galaxy underneath. Same idea as the Syncro menu, except the source is live and the inversion is a layer rather than a baked-in edit.

BUILDING THIS SITE

The site you're reading was built with Claude Cowork over four days of ideation, iteration and an enormous number of changes.

Roughly half of that effort went into one problem: making the galaxy look like an actual galaxy. Everything else, the layout, the type, the inverted panels, the character sheet, came together comparatively quickly. The galaxy did not.

THE PROBLEMA naive particle spiral reads as a pinwheel, not a galaxy. Real ones have a dense bright bulge, arms that scatter and thin as they trail, and a huge amount of faint dust between the bright stars.
WHAT IT TOOKSeparate particle layers at different sizes and brightnesses, radial concentration tuned so the core packs without blowing out, arm scatter loosened so the spiral reads as drifts of stars rather than solid ribbons, and custom sprites with diffraction spikes so bright stars actually look like stars.
THE TELLIt only stopped looking synthetic once the faint material outnumbered the bright material by a long way, which is the opposite of what feels right while you're building it.

UI concept, art direction and build by Ignacio Garcia Zea.