Back to Blog

Fixing EF-Map's Parallax Backdrop

EF-Map has always needed to be readable before it needed to be pretty. For a long time the map looked like white points on a black background. That was honest and it worked. You could see every system, nothing competed for attention, and the EVE Frontier universe read cleanly at any zoom. It was also flat. The goal was to make that universe feel a little more alive without making the map any harder to use. This is the story of a backdrop that existed for months, technically worked, and still did not feel right, and how we finally got it to behave the way it was meant to.

Why real space photos did not work

The obvious idea is to drop a real nebula photo behind everything. We looked at that, and it has two practical problems.

The first is geometric. Wrapping a flat image around a sphere or sky dome pinches badly near the poles. Look straight up or straight down and the texture smears into a knot. EVE Online and EVE Frontier sidestep some of this with nebula bands that hug the central plane rather than covering the whole sky, which looks great, but the source images still tend to contain bright points.

That leads to the second problem, which is specific to a map like ours. In EF-Map the selectable systems are stars. If the background also contains things that look like stars, players cannot tell the difference between a place they can click and a smear of distant light. A backdrop full of bright dots actively works against the one job the map has. So the direction became a very dark, procedural, gas and nebula style field with no point sources. Cloudy texture, no fake stars, nothing that reads as a clickable system. We covered the related star rendering work earlier in Starfield Depth Effects.

The original idea: near, mid and far

To make a flat cloud feel like space, we split the backdrop into three layers: near, mid and far. The intent was straightforward. As you pan or move the camera, the near layer should slide the most, the mid layer should drift more slowly, and the far layer should sit almost still. That difference in motion is parallax, and it is the same cue your eyes use to judge depth in the real world. Get it right and the background stops feeling like wallpaper and starts feeling like distance.

We also left the controls in the open. Under Display Settings there is a Backdrop Settings group with brightness, colour, scale and tint, plus a Randomize Layers button so anyone can shuffle the look until they like it. The point was never a single fixed effect. It was a tunable one.

Why it still did not feel right

Here is the candid part. The backdrop existed, and it did move. But the three layers never read as three layers. When you panned around the map, the whole background seemed to shift together by a hair rather than separating into near, mid and far. It was good enough to ship and it stayed that way for months, but it never matched the original idea.

The cause was not a broken slider. The Parallax Intensity control in Display Settings was wired up correctly and did change the effect. The problem was that the render loop quietly scaled the value down by a lot before using it. The interface offered intensity from 0 to 100 percent, but internally 100 percent was treated like a much smaller number, so even at maximum the motion was timid. On top of that, the far layer was set so close to camera locked that it barely moved relative to the others, which removed most of the contrast between layers. Everything technically worked. It was just turned down so far that the depth cue never landed.

The tuning pass

Rather than guess in the dark, we put the code in front of an LLM. GPT-5.5 Pro in the ChatGPT web app inspected the repository and worked out why the parallax was not visually clear, then produced an implementation prompt. That prompt went to Claude Opus 4.8 in Claude Code inside VS Code, which built a small tuning branch.

The useful trick was a temporary tuning mode behind a query parameter, ?parallaxTune=1. Open the preview with that flag and a small overlay appears with live controls for the values that actually mattered: the internal intensity scale, the sensitivity, the near, mid and far ratios, and the rotation scale. Changing any of them updates the backdrop immediately. That meant the tuning could happen in the browser, by feel, without a rebuild and redeploy for every small adjustment. The overlay is hidden for everyone who does not pass the flag, so normal visitors never see it.

This is the same loop we keep coming back to: a person notices something feels off, ChatGPT reads the code and suggests why, Claude Code implements a safe branch with live controls, the person tunes the preview, and the final numbers get merged once the feel is right. We have written about that workflow in Audit, Chunk, Implement and about the browser-and-repo-aware version of it in Don't Sleep on Claude Cowork.

The final settings

After smoke testing the live overlay, the preferred result was simpler than expected. We kept the existing backdrop colours and layer look, and we turned the candidate replacement profile down because the colours already in place looked better. The changes that mattered were about motion, not palette.

What we changed

  • Raised the internal intensity scale so the slider's 100 percent finally means a strong effect, not a faint one.
  • Raised the sensitivity so panning produces enough differential movement to read.
  • Retuned the layer ratios so the near layer moves freely, the mid layer trails it, and the far layer holds back without being frozen.
  • Left the colours, brightness and contrast alone, because the existing backdrop already looked right.

In plain terms: the near layer moves fastest, the mid layer moves slower, and the far layer stays close to static. That is what an actual parallax backdrop is supposed to do, and now it does it.

What it feels like now

The effect is still subtle. Pan across the EVE Frontier map and the foreground haze drifts, the middle distance lags behind it, and the deep background barely shifts. You are not meant to stare at it. Many people will never consciously notice the change at all, and that is fine. The map still looks like a clean field of selectable stars. It just no longer feels like flat dots painted on a black wall.

Why this kind of polish matters

This was a small fix, and it is worth being honest about that. It is not a graphics engine rewrite, it is not scientifically accurate, and nobody needs it to plan a route. The reason it was worth doing is that small depth cues are part of why a 3D tool feels like a place rather than a chart. Utility still comes first here, the same way it does in tools like the System Finder, and the backdrop stays firmly in the background. But returning to an old good-enough effect with better tooling and finally making it behave as intended was quietly satisfying.

Try it

Open EF-Map and pan around the map. To play with the backdrop yourself, go to Display Settings, open Backdrop Settings, and move the Parallax Intensity slider. Use Randomize Layers if you want a different colour mix behind the stars.

Performance Mode turns this off

These backdrop layers are visual polish, not core navigation, so Performance Mode disables them. If you would rather spend the frames on a smoother map, turn Performance Mode on and the parallax backdrop steps aside.

EF-Map EVE Frontier parallax backdrop Three.js WebGL nebula UX visual effects LLM workflow