Pulse

Controls and the live feed

Yesterday I made the globe clickable with those detail cards and the smooth focus transitions. Today I gave the user a proper way to actually control what they are looking at.I built a controls panel that sits in the corner of the HUD. It is a row of toggle buttons, one for each data layer: earthquakes, aurora, ISS, air quality, and submarine cables. Each button has an accent colour that matches the layer’s visual identity, so you know exactly which toggle does what. Tap one and the layer disappears from the globe. Tap it again and it comes back. No reload, no flicker, just instant feedback.

The sound control is in the same panel. It cycles through three states: off, on, and muted. Off means the audio is completely disabled. On means the ambient soundscape plays. Muted sits in between, where the audio is technically running but the volume is set to zero, so you can unmute without restarting anything.

The live feed was the other big piece today. It sits at the bottom of the HUD and shows a rolling list of events as they happen. Every new quake, every ISS position update, every fresh AQI reading gets pushed into the feed with a timestamp. The entries are prepended, so the newest event sits at the top, and the list caps at six items so it does not overflow and become a scrolling nightmare. I added a subtle animation to new rows: they slide in from the right and fade into place. It is a tiny detail but it gives the feed a sense of momentum, like the globe is actually reporting to you rather than just sitting there. Each entry also has an optional click handler, so you can tap a feed item and trigger the focus-to-detail interaction from yesterday. That means you see the quake appear in the feed, click it, and the globe flies straight to the event with the detail card already open

UI and fixing focus

Yesterday I got the air quality points breathing and glowing. Today I made them clickable. Because a cloud of pulsing dots is only half the story if you cannot actually ask the question: “what is that city and how bad is the air right now?“I built a proper detail card that slides into the HUD when you select something on the globe. It is a reusable component, so the same card can show earthquake data, ISS telemetry, or AQI readings, just with different labels and values. The styling is an accent stripe on the left that matches the point’s colour, monospace numbers, and a close button that dismisses it.

The picking logic is the fiddly part. I am using a raycast from the pointer position against the globe and its visible points. But I do not want to pick a point that is hidden behind the planet, so I filter to only the nearest visible point on the front hemisphere. The selection prioritises the closest point to the camera, which means you can click on a cluster and it picks the one you actually meant. Once selected, the camera does a smooth fly‑to. I added an easing function so the globe rotates and zooms in just enough to frame the point, but not so close that you lose context. During that transition, the controls lock so you do not accidentally spin the globe halfway through the animation. Unlock happens when the camera settles, and the detail card appears with all the live data fields populated. The card itself has dynamic key/value rows. For an earthquake you get magnitude, depth, time and location. For a city you get AQI, PM2.5, NO2, and the timestamp of the reading. I also wired up the select and clear callbacks so you can click away or hit close and the card vanishes, the focus resets, and the controls become responsive again.

Air quality has been added!

Today I turned my attention to the layer that sits much closer to the ground: the air quality index, or AQI, for cities around the world. I added a proper GPU-driven point cloud. Instead of rendering each city as a flat marker, I built a custom shader that makes every data point glow with intensity and fade softly at the edges, exactly like the aurora points but in a different colour palette. The ingestion logic is now hooked into the Open‑Meteo API, which gives me live AQI readings for hundreds of cities. I parse the response, extract the pollutant concentrations, and map each value to a colour gradient: green for good, yellow for moderate, orange for unhealthy, red for hazardous, and purple for the really nasty stuff. Each point also gets a weight that controls its size and opacity, so the worst‑off cities stand out immediately.

But I didn’t want it static. I added an update loop that pulses the points over time, a gentle breathing effect that makes the data feel alive. The breathing speed and amplitude are tied to the AQI value itself, so a city with dangerous air pulses more anxiously than one with clean air. It is a small touch, but it adds a layer of storytelling to the numbers. The points are also queryable. I exposed a set of hooks so you can hover or click a city and pull up its name, AQI reading, and pollutant breakdown. The data pipeline follows the same pattern as the quakes and the aurora: fetch with a timeout, fall back to a sample dataset if the API stumbles, and refresh on a sensible interval.

Aurora comes alive

Today I wanted the sky to earn its keep too. The aurora stub has been sitting there doing nothing for too long. I ripped it out and built the real thing from scratch, using the NOAA Ovation grid data as the source. That is the space weather forecast that tells you where the northern lights are actually likely to show up. The layer is now a cloud of glowing points hovering over the poles. I filter the grid to keep only the brightest cells, and I capped the total count so the frame rate stays smooth on slower machines. Each point maps its probability value to three things: colour, opacity and size. High probability gives you that electric green with a hint of magenta at the edges. Low probability fades out to nothing, which is exactly what you want. I added a shimmer animation that drifts over time, so the whole aurora breathes and shifts like it does in the real sky. The data pipeline is the same pattern as the quakes and the ISS: fetch the live feed, race it against a timeout, and fall back to a sample dataset if the API is having a bad moment. No blank sky on first load.

Animate cables

Reworked the submarine cables so they actually looks alive. I used additive blending so they glow faintly against the dark globe. I also turned each cable route into a continuous circle path by stitching multi‑hop arcs together without kinks. I also added a small shader‑based point sprite that travels along each cable, so the cables finally feel like they’re carrying data rather than just being drawn on the map.

Theme and HUD styles

Today was all CSS. I replaced the bare‑bones main.css. Custom properties for the colour palette and the monospace font are in, plus resets, so the whole thing starts from a clean base.

The HUD got the bulk of the work: wordmark, status dot, UTC clock, telemetry panels, legend rows, live feed, layer controls, detail card, and the boot screen are all styled. Added responsive breakpoints for narrower viewports so the panels reflow instead of breaking. It finally looks like a proper dashboard rather than a wireframe.

Built the HUD!

I’ve finally changed the hud into something that actually looks like a dashboard. I added the status dot, and wired up both telemetry panels - seismic readouts on the left, ISS lat/lon/alt/vel on the right, plus a legend row for each layer.

Enhance ISS and quake globe visual effects

Today was about making those two layers earn their place on the globe. The ISS is now a proper glowing sprite, with additive blending, so it looks like a bright cyan marker instead of a flat dot. Position updates are smoothed so the marker glides rather than snapping, and the trailing orbit line turns from solid to transparent over its length. If the satellite teleports (data gap or API glitch), the trail resets cleanly instead of drawing a spaghetti mess across the world. The quake layer got a bigger overhaul. I swapped the basic point rendering for a custom shader setup that gives each point a soft glow, a bright core, and a gentle breathing pulse based on elapsed time. New events now trigger pooled expanding ring pings that scale and fade out over a couple of seconds, so the globe feels alive when a fresh quake arrives. On first load, a handful of the most recent events are staggered across the first second to give an immediate sense of activity. The whole thing finally feels like a living dashboard rather than a static map.

Data, geo and palette utilities

Spent the day on the utils. Now it races every live endpoint against a timeout, then falls back to the local samples if anything fails, so the quake, ISS, aurora and air layers don’t each have to roll their own rescue logic. The geo module finally sorts out the lat/lng‑to‑Vector3 mess and generates proper great‑circle arcs with a lift that grows with distance, so the cables and the ISS trail read as actual orbital paths. Palette centralises all the colour constants and adds helpers for quake magnitude shading, aurora probability, and AQI bands.

live data wiring

Today was about stitching everything together. The empty main.js is now a proper startup sequence: scene setup, globe layers, HUD, picking interactions, intro camera dolly, and the render loop - all hooked up in order. The fetch pipelines for earthquakes, ISS, aurora, and air quality are in, each with its own interval and sample fallback so the globe never loads blank. The intro camera dolly in from a bit further out still needs a tiny easing tweak, but it works

Sample data and atmospheric glow

Most of today went into getting the offline fallbacks sorted. I added sample datasets for air quality, aurora, ISS, quakes, cities, and submarine cables so the globe never loads blank, even if every API is down. The bigger job was replacing the atmosphere with a proper dual‑shell Fresnel shader. I wanted a subtle rim glow and a bit of surface haze, so I wrote two custom shaders: a back‑side halo and a front‑side haze.

Globe rendering and scene foundation

Today was mostly about getting the visual core solid. I added the full camera, renderer, post‑processing composer, and resize handling, with a quick quality detection switch so it doesn’t melt phones. The earth now uses a “black marble” model: a dark body, and a separate night‑lights layer on top that blends. A fixed sun rig keeps the day‑night terminator moving as the globe rotates, which makes the whole thing feel alive. The starfield got a rewrite too, but it still needs polish, but the foundation finally feels solid.