Listening for events…
← All Docs

Pulse ticker — chip design

Working design notes for the chip layout in the homepage pulse ticker (web/src/components/PulseTicker.astro). Goal: instant readability at a glance while preserving the scientific-instrument feel of the source.

Direction (revised 2026-05-14)

Keep the scientific symbols, make them bolder, make the chips bigger. Earlier draft of this doc proposed color emoji; that was the wrong move. The obscure-but-correct glyphs (⏚ for ground/quake, ☼ for solar flare, ☄ for space weather, ⛈ for storm) signal real instrument provenance — they're a credibility asset, not visual debt. Emoji would have flattened the brand into "another aggregator."

Principle

Each chip has up to four fields, time is mandatory:

[time] [glyph] [data-point?] [location?]

  • time — UTC HH:MM (always present, dim color so it doesn't compete for attention)
  • glyph — the scientific symbol for the event kind, rendered bold + full-opacity + bumped font-size so it pops without needing a color bubble
  • data-point — the headline measurement (magnitude, X-class, speed, Kp) when one is the actual story; bold weight; rendered only when non-empty (e.g. lightning has no data-point, just emoji + location)
  • location — resolved place name via offline_geo lookup (not raw lat/lon — see #166)

Glyph set (current + revised)

The current glyphs are largely good; only a few weak ones to upgrade:

  • quake ⏚ — IEC ground symbol; keep
  • flare ☼ — astronomical sun; keep
  • fireball ★ — generic but fine in context; keep
  • space_weather ☄ — comet; keep
  • solar_wind ~ — keep (flow-notation, recognized)
  • meteor ↘ — keep (trajectory arrow)
  • cme ◎ — keep (target/concentric circles, recognizable)
  • forbush ↓ → upgrade to ☢ (radiation symbol; Forbush is a cosmic-ray decrease)
  • alert ⚠ — keep (universal)
  • storm ⛈ — keep (explicit)
  • volcano ▲ — keep, but render bold so it doesn't look generic
  • system ✓ — keep
  • lightning (new) → ⚡ — fits alongside ⚠ aesthetically; unicode lightning bolt

Chip rendering — bolder + bigger

Three levers applied together:

  1. Drop icon opacity from 0.7 to 1.0 — current renders icons ghost-like at 70%. Full opacity is the single biggest readability win.
  2. Bump icon font-size from 0.7rem (~11px) to responsive text-sm sm:text-base (14px mobile → 16px desktop) with font-bold — gives the glyph visual weight against the chip body.
  3. Responsive chip padding and text size — chips are bigger overall, but more compact on mobile so the ticker bar doesn't eat too much screen on small viewports.

Specifically:

  • Chip body: text-xs sm:text-sm px-2 py-0.5 sm:px-3 sm:py-1 — ~22px height on mobile, ~30px on desktop
  • Icon span: text-sm sm:text-base font-bold (full opacity, no class)
  • Gap between chip elements: gap-2 (was gap-1.5)

The chip's tinted background (bg-{kind}-500/20) and ring (ring-{kind}-500/40) stay as-is — they already provide the kind-specific color signal, so a separate "color bubble" around the icon would compete rather than add.

Information hierarchy per chip type

  • 12:34 ⚡ Pennsylvania, US — lightning (location is the headline; no data-point)
  • 12:34 ⏚ M5.2 Andreanof Is, AK — earthquake (magnitude + where)
  • 12:34 ☼ X1.4 — solar flare (class is the entire story)
  • 12:34 ~ 850 km/s — solar wind speed
  • 12:34 ☢ Forbush 7% — cosmic-ray drop
  • 12:34 ⚠ Tornado Warning Davenport, IA — NWS alert (type + where)
  • 12:34 ▲ Mt. Spurr Watch — volcano (name + alert level)
  • 12:34 ⛈ Severe Thunderstorm Davenport, IA — severe convective

Open question — mobile vertical real estate

The bumped chip size adds ~8-10px to the ticker bar height (current ~32px → ~40-44px). That's a real chunk of mobile screen on small viewports. Worth eyeballing on an actual phone before locking in.

If it turns out too tall, the fallback is: keep current mobile sizing (text-[0.7rem] px-2 py-0.5), only bump on sm: and up. That's a single CSS class swap if it comes to that.

What's shipped today (prototype)

Visible at terrapulse.info. Commit [to fill in].

  • lightning kind added to KIND_STYLES with ⚡ glyph
  • Forbush glyph upgraded to ☢
  • Icon opacity dropped from 0.7 to 1.0
  • Icon font-size bumped to text-sm sm:text-base with font-bold
  • Chip text size: text-xs sm:text-sm
  • Chip padding: px-2 py-0.5 sm:px-3 sm:py-1
  • Inter-element gap: gap-2
  • Title span now renders conditionally (skips when empty so lightning chips read ⚡ Pennsylvania, US cleanly without a phantom bold-empty between glyph and location)
  • Blitzortung listener: title field dropped (was "Lightning", now empty) since the ⚡ carries the meaning

Eyeball on mobile + desktop. Tune from there.

Live Feed