diff --git a/.changeset/ring-steady-flow.md b/.changeset/ring-steady-flow.md
new file mode 100644
index 0000000..8230baa
--- /dev/null
+++ b/.changeset/ring-steady-flow.md
@@ -0,0 +1,5 @@
+---
+"ftw-webapp": patch
+---
+
+Now shows which way your power flows, as the phone app does: thin lines of light run between each part of the ring and the home in the middle, in toward the home for power coming into it and out for power leaving it, faster with more power. Each new reading from your box sends one soft swell along the arcs that are live. With reduced motion turned on, the lines hold still and a small arrow shows the direction instead.
diff --git a/src/lib/state/ring-motion.test.ts b/src/lib/state/ring-motion.test.ts
index fe9c1f7..4be8c52 100644
--- a/src/lib/state/ring-motion.test.ts
+++ b/src/lib/state/ring-motion.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ArcMotion, Follow, wave, waveSpeed, type ArcTarget } from './ring-motion'
+import { ArcMotion, Follow, WAVELENGTH, ringEase, ringLines, ringStrength, ringSwell, waveSpeed, type ArcTarget } from './ring-motion'
 
 const target = (p: Partial<ArcTarget> = {}): ArcTarget => ({
   kw: 2, live: true, flowing: true, towardHome: true, fill: 0.5, ...p,
@@ -39,7 +39,7 @@ describe('the light on an arc', () => {
     expect(m.step(target({ live: false }), 5, false).light).toBe(0)
   })
 
-  it('runs the wave only while live, and not at all under reduced motion', () => {
+  it('runs the lines only while live, and not at all under reduced motion', () => {
     const live = run(new ArcMotion(target(), 0), target(), 0, 1)
     expect(live.phase).toBeGreaterThan(0.5)
     const still = run(new ArcMotion(target(), 0), target(), 0, 1, true)
@@ -60,10 +60,67 @@ describe('the light on an arc', () => {
   })
 })
 
-describe('the wave', () => {
-  it('crests at 1 and dips to 0.45', () => {
-    expect(wave(0, 0)).toBeCloseTo(1)
-    expect(wave(15, 0)).toBeCloseTo(0.45)
+describe('a swell per reading', () => {
+  it('starts with a new reading from the box and ends before the next', () => {
+    const m = new ArcMotion(target(), 0, 0)
+    expect(m.step(target(), 0.5, false, 0).swell).toBeNull()
+    expect(m.step(target(), 1, false, 1000).swell).toBe(0)
+    expect(m.step(target(), 1.4, false, 1000).swell).toBeGreaterThan(0.3)
+    expect(m.step(target(), 2, false, 1000).swell).toBeNull()
+  })
+
+  it('never swells on the first reading, a quiet arc, a frame drawn at rest or under reduced motion', () => {
+    expect(new ArcMotion(target(), 0).step(target(), 0.1, false, 1000).swell).toBeNull()
+    expect(new ArcMotion(target({ live: false }), 0, 0).step(target({ live: false }), 0.1, false, 1000).swell).toBeNull()
+    expect(new ArcMotion(target({ flowing: false }), 0, 0).step(target({ flowing: false }), 0.1, false, 1000).swell).toBeNull()
+    expect(new ArcMotion(target(), 0, 0).step(target(), 0.1, false, 1000, false).swell).toBeNull()
+    expect(new ArcMotion(target(), 0, 0).step(target(), 0.1, true, 1000).swell).toBeNull()
+  })
+
+  it('runs from the middle out past both ends and fades', () => {
+    const half = 60
+    expect(ringSwell(0, 0, half)).toBeCloseTo(1, 12)
+    const peak = (k: number) => {
+      let best = 0
+      for (let s = 0; s <= 140; s += 0.5) if (ringSwell(s, k, half) > ringSwell(best, k, half)) best = s
+      return best
+    }
+    expect(peak(0.2)).toBeLessThan(peak(0.5))
+    expect(peak(0.9)).toBeGreaterThan(half)
+    expect(ringSwell(peak(0.8), 0.8, half)).toBeLessThan(ringSwell(peak(0.3), 0.3, half))
+    expect(ringSwell(10, 0.4, half)).toBe(ringSwell(-10, 0.4, half))
+    expect(ringSwell(0, 1.01, half)).toBe(0)
+  })
+})
+
+describe('the lines and the arc', () => {
+  it('sit a wavelength apart and run toward the home for power coming in', () => {
+    const length = 36.75
+    for (const toward of [true, false]) {
+      for (let phase = 0; phase < 3; phase += 0.07) {
+        const ps = ringLines(phase, length, toward)
+        expect(ps.every((p) => p >= 0 && p <= 1)).toBe(true)
+        expect([2, 3]).toContain(ps.length)
+      }
+      const a = ringLines(0.2, length, toward)[0] ?? 0
+      const b = ringLines(0.3, length, toward)[0] ?? 0
+      expect((b - a) * length).toBeCloseTo((toward ? 1 : -1) * 0.1 * WAVELENGTH, 9)
+    }
+    expect(ringLines(0.4, 0, true)).toEqual([])
+    expect(ringLines(Number.NaN, length, true)).toEqual([])
+  })
+
+  it('is brightest over its middle third, with no hot ends', () => {
+    expect(ringEase(0, 0.14)).toBe(1)
+    expect(ringEase(0.3, 0.14)).toBe(1)
+    expect(ringEase(1, 0.14)).toBeCloseTo(0.14, 12)
+    expect(ringEase(-1, 0)).toBeCloseTo(0, 12)
+  })
+
+  it('grows in strength with power and stops at full', () => {
+    expect(ringStrength(0)).toBe(0.65)
+    expect(ringStrength(5)).toBe(1)
+    expect(ringStrength(-1)).toBe(ringStrength(1))
   })
 
   it('runs faster with power, never racing', () => {
diff --git a/src/lib/state/ring-motion.ts b/src/lib/state/ring-motion.ts
index 4960bfa..4783117 100644
--- a/src/lib/state/ring-motion.ts
+++ b/src/lib/state/ring-motion.ts
@@ -4,26 +4,73 @@
  * screen. The constants are the iOS app's (Flow.swift): a change belongs in
  * both, or the phone and the browser stop showing the same house.
  *
- * Light means live. An arc glows and its wave runs only while the box
+ * Steady flow (J, chosen by Fredrik on 30 October 2026): an arc is brightest
+ * over its middle third, each reading from the box sends one swell along it,
+ * and thin lines of light run all the time between the arc and the home's
+ * circle, in toward the home for power coming into it and out for power
+ * leaving it.
+ *
+ * Light means live. An arc glows and its lines run only while the box
  * confirms the reading; when it stops, the glow cools like a CRT and the
  * arc goes to ink. An arc that has never been live never glows, so a cache
  * opens still.
  */
 
-/** Pixels from one crest of the light to the next. */
-export const WAVELENGTH = 30
+/** Pixels from one line of light to the next on its way to the home or
+ *  away from it. */
+export const WAVELENGTH = 15
 
-/** How fast the light runs from source to sink, in px a second: 19 at
- *  0.1 kW, 31 at 1 kW, 52 at 10 kW. Faster with power, never racing. */
+/** How fast the light runs, in px a second: 19 at 0.1 kW, 31 at 1 kW, 52
+ *  at 10 kW. Faster with power, never racing. */
 export function waveSpeed(kw: number): number {
   return 16 + 22 * Math.log10(1 + 4 * Math.abs(kw))
 }
 
-/** Brightness along an arc, from 0.45 to 1: soft crests a wavelength apart.
- *  `s` is px from the source, `phase` is wavelengths the light has run. */
-export function wave(s: number, phase: number): number {
-  const c = (1 + Math.cos(2 * Math.PI * (s / WAVELENGTH - phase))) / 2
-  return 0.45 + 0.55 * c * c * c
+/** How strong an arc's swell and its lines are: 0.65 at a trickle, full
+ *  from about 4.7 kW. */
+export function ringStrength(kw: number): number {
+  const a = Math.abs(kw)
+  if (!Number.isFinite(a)) return 0.65
+  return 0.65 + 0.35 * Math.min(1, Math.log10(1 + 4 * a) / 1.3)
+}
+
+/** Brightness along an arc or a line, `u` from -1 at one end to 1 at the
+ *  other: full over the middle third, easing to `end` at the ends. The
+ *  light has no hot ends. */
+export function ringEase(u: number, end: number): number {
+  const x = Math.min(1, Math.max(0, (Math.abs(u) - 0.3) / 0.7))
+  return 1 - (1 - end) * x * x * (3 - 2 * x)
+}
+
+/** The swell a reading sends along its arc, `s` px from the arc's middle,
+ *  `k` of the way through it, on an arc `half` px each side of its middle:
+ *  it starts in the middle, runs out past both ends and fades as it goes. */
+export function ringSwell(s: number, k: number, half: number): number {
+  if (!(k >= 0 && k <= 1)) return 0
+  const sigma = Math.max(12, 0.32 * half)
+  const at = (1 - (1 - k) * (1 - k)) * (half + sigma)
+  const d = Math.abs(s) - at
+  return Math.pow(1 - k, 1.3) * Math.exp(-(d * d) / (2 * sigma * sigma))
+}
+
+/** How long a reading's swell runs: 0.95 of the time since the one before,
+ *  from 0.48 s to 1.5 s, so at a steady cadence a swell has ended when the
+ *  next reading comes. */
+export function ringSwellDuration(gap: number): number {
+  return Math.min(1.5, 0.95 * Math.max(0.5, Number.isFinite(gap) ? gap : 1))
+}
+
+/** Where the lines of light sit on a way `length` px long between an arc
+ *  and the home's circle, as shares from the arc (0) to the circle (1). As
+ *  `phase`, in wavelengths, grows they move toward the home when the power
+ *  flows into it and toward the arc when it flows out. */
+export function ringLines(phase: number, length: number, towardHome: boolean): number[] {
+  if (!(length > 0) || !Number.isFinite(phase)) return []
+  const out: number[] = []
+  for (let s = (phase - Math.floor(phase)) * WAVELENGTH; s <= length; s += WAVELENGTH) {
+    out.push(towardHome ? s / length : 1 - s / length)
+  }
+  return out
 }
 
 /** A value that follows its target as a critically damped spring with time
@@ -52,7 +99,7 @@ export class Follow {
 
 /** The phosphor, from 0 (ink, still) to 1 (live). It ignites on a spring
  *  (response 0.35 s, damping 0.85) and decays exponentially (τ 0.4 s) while
- *  its wave slows to rest in 0.35 s. Instant under reduced motion. */
+ *  its lines slow to rest in 0.35 s. Instant under reduced motion. */
 export class Light {
   static readonly decay = 0.4
   static readonly rest = 0.35
@@ -78,13 +125,13 @@ export class Light {
     this.live = live
   }
 
-  /** The glow, the wave's depth and the core's strength. */
+  /** The glow, the lines' light and the core's strength. */
   level(t: number): number {
     const dt = Math.max(0, t - this.since)
     return this.live ? 1 - (1 - this.level0) * Light.residual(dt) : this.level0 * Math.exp(-dt / Light.decay)
   }
 
-  /** How fast the wave runs, as a share of its speed. */
+  /** How fast the lines run, as a share of their speed. */
   motion(t: number): number {
     const dt = Math.max(0, t - this.since)
     if (this.live) return Math.min(1, 1 - (1 - this.motion0) * Light.residual(dt))
@@ -107,7 +154,7 @@ export interface ArcTarget {
   kw: number
   live: boolean
   flowing: boolean
-  /** The light runs toward the home: clockwise. */
+  /** The power flows into the home: the lines run toward it. */
   towardHome: boolean
   /** How much of its quarter the arc lights, 0 to 1. */
   fill: number
@@ -115,21 +162,23 @@ export interface ArcTarget {
 
 /** One arc's look in one frame. */
 export interface ArcFrame {
-  /** Wavelengths the light has run, source to sink. */
+  /** Wavelengths the lines have run. */
   phase: number
-  /** The phosphor: the glow's strength and the wave's depth. */
+  /** The phosphor: the glow's strength and the lines' light. */
   light: number
   /** 0 for a flowing arc, 1 for a node at rest. */
   idle: number
   /** The share of its quarter the arc lights. */
   fill: number
+  /** How far the newest reading's swell has run, 0 to 1; null when none runs. */
+  swell: number | null
 }
 
 export const alpha = (f: ArcFrame) => 0.35 + 0.65 * Math.min(1, f.light)
-export const depth = (f: ArcFrame) => Math.min(1, f.light)
 
 /** One arc over time: its fill and speed follow the readings (τ 0.4 s), its
- *  light ignites and decays, its wave runs at the speed the power gives. */
+ *  light ignites and decays, its lines run at the speed the power gives, and
+ *  each new reading from the box sends one swell along it. */
 export class ArcMotion {
   static readonly tau = 0.4
   /** Longer than this between two frames, nothing was drawn: the page was
@@ -142,18 +191,27 @@ export class ArcMotion {
   private light: Light
   private phase = 0
   private last: number
+  /** The newest reading's time, in ms. */
+  private reading: number | null
+  private swell: { start: number; duration: number } | null = null
 
   /** The first frame: everything where the reading puts it, with no ignite,
    *  so a page that opens on live data does not flash. */
-  constructor(target: ArcTarget, t: number) {
+  constructor(target: ArcTarget, t: number, reading: number | null = null) {
     this.speed = new Follow(waveSpeed(target.kw))
     this.idle = new Follow(target.flowing ? 0 : 1)
     this.fill = new Follow(target.fill)
     this.light = new Light(target.live, t)
     this.last = t
+    this.reading = reading
   }
 
-  step(target: ArcTarget, t: number, reduceMotion: boolean): ArcFrame {
+  /** The arc at `t`, with `reading` the time of the newest reading from the
+   *  box. A new one starts a swell while the arc is live and flowing and the
+   *  ring is `animating`. The first frame, a reading that came while nothing
+   *  was drawn, a frame drawn once at rest, a cache and reduced motion never
+   *  swell: a swell that cannot run would stand still at its brightest. */
+  step(target: ArcTarget, t: number, reduceMotion: boolean, reading: number | null = null, animating = true): ArcFrame {
     const dt = Math.max(0, t - this.last)
     this.last = Math.max(this.last, t)
     // A reading that stopped being live while nothing was drawn went out at
@@ -171,11 +229,24 @@ export class ArcMotion {
       this.fill.step(target.fill, dt, ArcMotion.tau)
       this.phase = ((this.phase + (this.speed.value * this.light.motion(t) * dt) / WAVELENGTH) % 1_000)
     }
+    if (reading !== null && reading !== this.reading) {
+      if (this.reading !== null && target.live && target.flowing && !reduceMotion && animating && dt <= ArcMotion.gap) {
+        this.swell = { start: t, duration: ringSwellDuration((reading - this.reading) / 1000) }
+      }
+      this.reading = reading
+    }
+    let swell: number | null = null
+    if (this.swell) {
+      const p = (t - this.swell.start) / this.swell.duration
+      if (reduceMotion || !animating || p > 1) this.swell = null
+      else swell = Math.max(0, p)
+    }
     return {
       phase: this.phase,
       light: this.light.level(t),
       idle: Math.min(1, Math.max(0, this.idle.value)),
       fill: Math.min(1, Math.max(0, this.fill.value)),
+      swell,
     }
   }
 }
diff --git a/src/lib/state/ring.test.ts b/src/lib/state/ring.test.ts
index 6805372..b168a41 100644
--- a/src/lib/state/ring.test.ts
+++ b/src/lib/state/ring.test.ts
@@ -150,10 +150,11 @@ describe('where the nodes sit', () => {
     expect(ringArc('top', 0).lit).toBeNull()
   })
 
-  it('lights a fifth at 0.6 kW, half at 1.8 kW and nine tenths at 6 kW', () => {
+  it('lights at least a quarter, half at 1.8 kW and nine tenths at 6 kW', () => {
     expect(ringFill(0.04)).toBe(0)
-    expect(ringFill(0.05)).toBe(0.12)
-    expect(ringFill(0.6)).toBeCloseTo(0.21, 2)
+    expect(ringFill(0.05)).toBe(0.25)
+    expect(ringFill(0.7)).toBe(0.25)
+    expect(ringFill(0.8)).toBeGreaterThan(0.25)
     expect(ringFill(1.8)).toBeCloseTo(0.51, 2)
     expect(ringFill(6)).toBeCloseTo(0.91, 2)
     expect(ringFill(-6)).toBe(ringFill(6))
diff --git a/src/lib/state/ring.ts b/src/lib/state/ring.ts
index c620ff9..946afeb 100644
--- a/src/lib/state/ring.ts
+++ b/src/lib/state/ring.ts
@@ -1,5 +1,5 @@
 /* The ring on Now, as the iOS app draws it (Ring / Quiet, chosen by Fredrik
- * on 24 October 2026).
+ * on 24 October 2026, with steady flow, J, on 30 October 2026).
  *
  * The home's use sits in the middle of a ring. The sun is top left, the
  * battery top right, the grid bottom left and the car bottom right, each as
@@ -229,15 +229,15 @@ export function ringArc(spot: RingSpot, fill: number): RingArc {
 }
 
 /**
- * How much of its quarter a node's arc lights: none at rest, a fifth at
- * 0.6 kW, half at 1.8 kW, nine tenths at 6 kW. One curve for every node, so
+ * How much of its quarter a node's arc lights: none at rest, at least a
+ * quarter, half at 1.8 kW, nine tenths at 6 kW. One curve for every node, so
  * arcs compare across the ring, and it saturates, so an 11 kW charger never
  * swallows the rest.
  */
 export function ringFill(kw: number): number {
   const a = Math.abs(kw)
   if (!Number.isFinite(a) || a * 1000 <= FLOW_IDLE_W) return 0
-  return Math.min(1, Math.max(0.12, 1 - Math.exp(-a / 2.5)))
+  return Math.min(1, Math.max(0.25, 1 - Math.exp(-a / 2.5)))
 }
 
 // ---------- the room it takes ----------
diff --git a/src/views/EnergyRing.svelte b/src/views/EnergyRing.svelte
index f95ebf8..677eb02 100644
--- a/src/views/EnergyRing.svelte
+++ b/src/views/EnergyRing.svelte
@@ -3,15 +3,19 @@
   Quiet, chosen by Fredrik on 24 October 2026): the home's use in the middle
   of a ring, each other node as text on the ground in its corner, and the
   quarter of the ring that faces it lit from its middle out, longer with
-  more power. A soft wave of light runs along a lit arc, clockwise for power
-  coming into the home and the other way for power leaving it.
+  more power. Steady flow (J, chosen on 30 October 2026): the arc is
+  brightest over its middle third, each reading from the box sends one swell
+  along it, and thin lines of light run all the time between the arc and the
+  home's circle, in toward the home for power coming into it and out for
+  power leaving it. In the dark the arcs and lines glow in two blurred
+  passes for the whole ring.
 
   Light means live. Only a reading the box confirms live glows or moves; a
   cached or quiet arc is a faint still arc in ink, and a node at rest shows
   only its quarter's track. The loop runs only while an arc is live and
   flowing, or for a moment after a change so an arc can grow or cool, and
-  only while this view is on screen. Under reduced motion the light holds
-  still and a chevron on the arc says which way it flows.
+  only while this view is on screen. Under reduced motion nothing runs or
+  swells, and a still chevron on the way to the home says which way it flows.
 -->
 <script lang="ts">
   import { onMount, untrack } from 'svelte'
@@ -21,17 +25,20 @@
     NODE_TITLE, doing, flowHeight, flowing, labelHeight, nodeWidth, onAxis, quantised, quantisedHolding,
     ringArc, ringFill, ringGeometry, ringSpot, type RingNode, type RingReading, type RingSpot,
   } from '$lib/state/ring'
-  import { ArcMotion, WAVELENGTH, alpha, depth, wave, type ArcFrame, type ArcTarget } from '$lib/state/ring-motion'
+  import { ArcMotion, alpha, ringEase, ringLines, ringStrength, ringSwell, type ArcTarget } from '$lib/state/ring-motion'
 
   interface Props {
     readings: RingReading[]
     /** Whether this view is the one on screen. Hidden, nothing draws. */
     active?: boolean
+    /** When the newest reading from the box came, in ms. Each new one sends
+     *  a swell along the live arcs. */
+    readingAt?: number | null
     /** A tap on a node, with the scope the box's own hero would send. */
     onopen?: (scope: ControlScope) => void
   }
 
-  let { readings, active = true, onopen }: Props = $props()
+  let { readings, active = true, readingAt = null, onopen }: Props = $props()
 
   let width = $state(0)
   // jsdom and a first frame before layout have no width; draw a phone's.
@@ -104,6 +111,9 @@
 
   let root = $state<HTMLDivElement | undefined>()
   let canvas = $state<HTMLCanvasElement | undefined>()
+  // The glow in two passes for the whole ring, each blurred once.
+  let halo = $state<HTMLCanvasElement | undefined>()
+  let near = $state<HTMLCanvasElement | undefined>()
   const motions = new Map<RingNode, ArcMotion>()
   let frameId = 0
   let settleUntil = 0
@@ -189,109 +199,136 @@
     frameId = 0
     if (!active) return
     const now = performance.now()
-    draw(now / 1000)
-    if (running(now)) frameId = requestAnimationFrame(tick)
+    const moving = running(now)
+    draw(now / 1000, moving)
+    if (moving) frameId = requestAnimationFrame(tick)
   }
 
-  function draw(t: number) {
-    const ctx = canvas?.getContext('2d')
-    if (!canvas || !ctx) return
-    const g = ring
-    const dpr = window.devicePixelRatio || 1
+  /** A canvas sized to the ring and cleared, or null. */
+  function layer(c: HTMLCanvasElement | undefined, dpr: number): CanvasRenderingContext2D | null {
+    const ctx = c?.getContext('2d')
+    if (!c || !ctx) return null
     const pw = Math.round(w * dpr)
     const ph = Math.round(height * dpr)
-    if (canvas.width !== pw || canvas.height !== ph) {
-      canvas.width = pw
-      canvas.height = ph
+    if (c.width !== pw || c.height !== ph) {
+      c.width = pw
+      c.height = ph
     }
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
     ctx.clearRect(0, 0, w, height)
     ctx.lineCap = 'round'
-    ctx.lineWidth = g.thickness
+    return ctx
+  }
 
-    const path = (range: [number, number]) => {
-      ctx.beginPath()
-      ctx.arc(g.cx, g.cy, g.radius, rad(range[0]), rad(range[1]), false)
-    }
+  function draw(t: number, animating: boolean) {
+    const dpr = window.devicePixelRatio || 1
+    const ctx = layer(canvas, dpr)
+    if (!ctx) return
+    const glows = dark && !reduceTransparency
+    const haloCtx = layer(halo, dpr)
+    const nearCtx = layer(near, dpr)
+    const g = ring
+    const th = g.thickness
+    const r = g.radius
 
     // Each node's quarter, the track its arc lights.
+    ctx.lineWidth = th
     ctx.strokeStyle = rgba(ink, dark ? 0.13 : 0.09)
     for (const a of arcs) {
-      path(ringArc(a.spot, 1).track)
+      const [lo, hi] = ringArc(a.spot, 1).track
+      ctx.beginPath()
+      ctx.arc(g.cx, g.cy, r, rad(lo), rad(hi), false)
       ctx.stroke()
     }
 
-    const glows = dark && !reduceTransparency
-    const cap = ((g.thickness / 2 / g.radius) * 180) / Math.PI
+    // The way between the arcs and the home's circle, where the lines run.
+    const outer = r - th / 2 - 4
+    const inner = g.hub / 2 + 4
+    const reading = untrack(() => readingAt)
     for (const a of arcs) {
       let m = motions.get(a.node)
-      if (!m) motions.set(a.node, (m = new ArcMotion(a.target, t)))
-      const f = m.step(a.target, t, reduceMotion)
+      if (!m) motions.set(a.node, (m = new ArcMotion(a.target, t, reading)))
+      const f = m.step(a.target, t, reduceMotion, reading, animating)
       const k = 1 - f.idle
       const lit = ringArc(a.spot, f.fill).lit
       if (k <= 0.01 || !lit) continue
-      const hue = hueOf(a.color)
-      if (glows && f.light > 0.004) {
-        for (const [wide, strength] of [[2.8, 0.12], [1.8, 0.25]] as const) {
-          ctx.lineWidth = g.thickness * wide
-          ctx.strokeStyle = rgba(hue, strength * f.light * k)
-          path(lit)
-          ctx.stroke()
-        }
-        ctx.lineWidth = g.thickness
-      }
+      const light = Math.min(1, f.light)
       // Light means live: the arc's colour while the box confirms it, ink
       // once it does not, crossing over as the phosphor ignites or cools.
-      const color = mix(ink2, hue, f.light)
-      // With no glow, full-strength colour says live alone: the wave runs
-      // shallower and the arc keeps its colour between crests.
-      ctx.strokeStyle = gradient(ctx, lit, a.target.towardHome, f, color, k, cap, glows ? 1 : 0.35)
-      path(lit)
-      ctx.stroke()
-      if (reduceMotion && a.target.flowing) chevron(ctx, lit, a.target.towardHome, alpha(f) * k)
+      const color = mix(ink2, hueOf(a.color), light)
+      const strength = ringStrength(a.target.kw)
+      const half = (((lit[1] - lit[0]) / 2) * r * Math.PI) / 180
+      const swell = (s: number) => (f.swell === null ? 0 : ringSwell(s, f.swell, half))
+      // A live arc leaves the swell the room it needs.
+      const base = 1 - (reduceMotion ? 0.1 : 0.3) * light
+      const end = dark ? 0.14 : 0.32
+      soft(ctx, lit, r, th, color, (u, s) => alpha(f) * k * ringEase(u, end) * (base + (1 - base) * swell(s)))
+      if (glows && light > 0.004) {
+        const g0 = light * k
+        if (haloCtx) soft(haloCtx, lit, r, th * 1.6, color, (u, s) => 0.9 * g0 * ringEase(u, 0) * (0.5 + 0.6 * strength * swell(s)))
+        if (nearCtx) soft(nearCtx, lit, r, th * 1.1, color, (u, s) => 0.65 * g0 * ringEase(u, 0) * (0.5 + 0.6 * strength * swell(s)))
+      }
+      const mid = (lit[0] + lit[1]) / 2
+      if (reduceMotion) {
+        if (a.target.flowing) chevron(ctx, mid, (outer + inner) / 2, a.target.towardHome, alpha(f) * k)
+        continue
+      }
+      // The lines keep their angle, so they narrow as they near the home and
+      // widen as they leave it, and fade in and out at the ends of the way.
+      if (light <= 0.004) continue
+      const spread = Math.max(8, (lit[1] - lit[0]) / 2)
+      for (const toHome of ringLines(f.phase, outer - inner, a.target.towardHome)) {
+        const rr = outer + (inner - outer) * toHome
+        const hs = spread * (1 - 0.4 * toHome)
+        const line = (dark ? 0.6 : 0.55) * strength * Math.pow(Math.sin(Math.PI * toHome), 1.2) * light * k
+        const range: [number, number] = [mid - hs, mid + hs]
+        soft(ctx, range, rr, th * 0.4, color, (u) => (dark ? 1 : 0.85) * line * ringEase(u, 0))
+        if (glows && nearCtx) soft(nearCtx, range, rr, th * 0.8, color, (u) => 0.75 * line * ringEase(u, 0))
+      }
     }
   }
 
   /**
-   * The core's brightness along the arc as a conic gradient that starts
-   * `lead` degrees before the arc's first angle, so the round cap there
-   * takes the arc's first colour. Stops sit ten to a wavelength, close
-   * enough that a crest running past keeps its height within 4 %.
+   * A soft arc at `radius` over `range`: `color` at `strength(u, s)` along
+   * it, `u` from -1 at its first angle to 1 at its last and `s` px from its
+   * middle, on a conic gradient that starts half the stroke's width before
+   * the arc, so each round cap takes the colour of the end it closes. Stops
+   * sit 6 px apart, close enough for light this soft.
    */
-  function gradient(ctx: CanvasRenderingContext2D, lit: [number, number], clockwise: boolean, f: ArcFrame, color: RGBA, k: number, lead: number, scale: number): CanvasGradient | string {
-    const span = lit[1] - lit[0]
-    const strength = (deg: number) => {
-      // From where the light starts: the first angle when it runs
-      // clockwise, the last when it runs back.
-      const s = ((clockwise ? deg : span - deg) * ring.radius * Math.PI) / 180
-      return alpha(f) * (1 - depth(f) * scale * (1 - wave(s, f.phase))) * k
-    }
-    if (typeof ctx.createConicGradient !== 'function') return rgba(color, strength(span / 2))
-    const grad = ctx.createConicGradient(rad(lit[0] - lead), ring.cx, ring.cy)
-    const at = (deg: number) => (deg + lead) / 360
-    grad.addColorStop(0, rgba(color, strength(0)))
-    grad.addColorStop(at(0), rgba(color, strength(0)))
-    const perDegree = (ring.radius * Math.PI) / 180
-    if (depth(f) * scale > 0.001 && span * perDegree > 1) {
-      const step = WAVELENGTH / 10 / perDegree
-      for (let d = step; d < span; d += step) grad.addColorStop(at(d), rgba(color, strength(d)))
+  function soft(ctx: CanvasRenderingContext2D, range: [number, number], radius: number, width: number, color: RGBA, strength: (u: number, s: number) => number) {
+    const [lo, hi] = range
+    const span = hi - lo
+    if (span <= 0.2) return
+    const perDegree = (radius * Math.PI) / 180
+    const lead = width / 2 / perDegree
+    const at = (deg: number) => rgba(color, strength(span > 0 ? (deg / span) * 2 - 1 : 0, Math.abs(deg - span / 2) * perDegree))
+    ctx.lineWidth = width
+    if (typeof ctx.createConicGradient === 'function') {
+      const grad = ctx.createConicGradient(rad(lo - lead), ring.cx, ring.cy)
+      grad.addColorStop(0, at(0))
+      const step = Math.max(0.5, Math.min(span / 8, 6 / perDegree))
+      for (let d = 0; d < span; d += step) grad.addColorStop((d + lead) / 360, at(d))
+      grad.addColorStop(Math.min(1, (span + lead) / 360), at(span))
+      grad.addColorStop(1, at(span))
+      ctx.strokeStyle = grad
+    } else {
+      ctx.strokeStyle = at(span / 2)
     }
-    grad.addColorStop(at(span), rgba(color, strength(span)))
-    // Past the arc only the end's round cap is drawn; it keeps the end's colour.
-    grad.addColorStop(1, rgba(color, strength(span)))
-    return grad
+    ctx.beginPath()
+    ctx.arc(ring.cx, ring.cy, radius, rad(lo), rad(hi), false)
+    ctx.stroke()
   }
 
-  /** A still chevron at the middle of an arc, pointing the way the light
-   *  would run, in ink. */
-  function chevron(ctx: CanvasRenderingContext2D, lit: [number, number], clockwise: boolean, opacity: number) {
+  /** A still chevron on the way between an arc and the home, at the arc's
+   *  middle, pointing the way the lines would run, in ink. */
+  function chevron(ctx: CanvasRenderingContext2D, angle: number, radius: number, inward: boolean, opacity: number) {
     const g = ring
-    const mid = rad((lit[0] + lit[1]) / 2)
-    const cx = g.cx + g.radius * Math.cos(mid)
-    const cy = g.cy + g.radius * Math.sin(mid)
-    const dir = clockwise ? 1 : -1
-    const ux = -Math.sin(mid) * dir
-    const uy = Math.cos(mid) * dir
+    const a = rad(angle)
+    const cx = g.cx + radius * Math.cos(a)
+    const cy = g.cy + radius * Math.sin(a)
+    const dir = inward ? -1 : 1
+    const ux = Math.cos(a) * dir
+    const uy = Math.sin(a) * dir
     const size = Math.max(6, g.thickness * 0.6 + 3)
     ctx.save()
     ctx.lineWidth = 1.75
@@ -443,8 +480,12 @@
   bind:this={root}
   style:height="{height}px"
   style:--scale={ring.labelScale}
+  style:--halo="{ring.thickness * 1.3}px"
+  style:--near="{ring.thickness * 0.5}px"
   data-live={anyLive}
 >
+  <canvas class="halo" bind:this={halo} style:width="{w}px" style:height="{height}px" aria-hidden="true"></canvas>
+  <canvas class="near" bind:this={near} style:width="{w}px" style:height="{height}px" aria-hidden="true"></canvas>
   <canvas bind:this={canvas} style:width="{w}px" style:height="{height}px" aria-hidden="true"></canvas>
 
   <div class="box" style:top="{ring.cy - ring.box / 2}px" style:height="{ring.box}px">
@@ -509,6 +550,16 @@
     pointer-events: none;
   }
 
+  .halo {
+    filter: blur(var(--halo));
+    mix-blend-mode: plus-lighter;
+  }
+
+  .near {
+    filter: blur(var(--near));
+    mix-blend-mode: plus-lighter;
+  }
+
   .box {
     position: absolute;
     left: 0;
diff --git a/src/views/EnergyRing.svelte.test.ts b/src/views/EnergyRing.svelte.test.ts
index 80e62af..6efe055 100644
--- a/src/views/EnergyRing.svelte.test.ts
+++ b/src/views/EnergyRing.svelte.test.ts
@@ -124,7 +124,7 @@ describe('the ring', () => {
     const view = render(EnergyRing, { props: { readings: house(), active: true } })
     await tick()
     frames.run()
-    expect(strokes.wide(), 'a live arc did not glow').toBeGreaterThan(0)
+    expect(strokes.glow(), 'a live arc did not glow').toBeGreaterThan(0)
     expect(strokes.colours.has('rgba(255, 225, 77)'), 'a live sun was not in its colour').toBe(true)
 
     strokes.clear()
@@ -134,7 +134,7 @@ describe('the ring', () => {
     vi.spyOn(performance, 'now').mockReturnValue(performance.now() + 10_000)
     frames.run()
     expect(strokes.list.length, 'nothing was drawn').toBeGreaterThan(0)
-    expect(strokes.wide(), 'a cached arc glowed').toBe(0)
+    expect(strokes.glow(), 'a cached arc glowed').toBe(0)
     expect(Math.max(...strokes.stops), 'a cached arc kept its full strength').toBeLessThanOrEqual(0.35 + 1e-6)
     expect([...strokes.colours], 'a cached arc kept its colour').toEqual(['rgba(154, 165, 184)'])
   })
@@ -160,16 +160,16 @@ function visibility(state: DocumentVisibilityState) {
   document.dispatchEvent(new Event('visibilitychange'))
 }
 
-/** A 2D context that keeps each stroke's width and each colour stop's alpha. */
+/** 2D contexts that keep each stroke's layer and each colour stop's alpha. */
 function recordStrokes() {
-  const list: { width: number }[] = []
+  const list: { glow: boolean }[] = []
   const stops: number[] = []
   const colours = new Set<string>()
   const alphaOf = (c: string) => Number(/,\s*([\d.]+)\)$/.exec(c)?.[1] ?? 1)
-  const ctx = {
+  const context = (glow: boolean) => ({
     lineWidth: 1, strokeStyle: '' as unknown, fillStyle: '#000', lineCap: '', lineJoin: '',
     setTransform() {}, clearRect() {}, beginPath() {}, arc() {}, moveTo() {}, lineTo() {}, save() {}, restore() {},
-    stroke() { list.push({ width: this.lineWidth }) },
+    stroke() { list.push({ glow }) },
     createConicGradient() {
       return {
         addColorStop: (_: number, c: string) => {
@@ -178,15 +178,20 @@ function recordStrokes() {
         },
       }
     },
-  }
-  HTMLCanvasElement.prototype.getContext = (() => ctx) as never
+  })
+  const glowing = context(true)
+  const plain = context(false)
+  // The glow's own blurred layers, and the cores.
+  HTMLCanvasElement.prototype.getContext = function (this: HTMLCanvasElement) {
+    return this.classList.contains('halo') || this.classList.contains('near') ? glowing : plain
+  } as never
   return {
     list,
     stops,
     /** The colours of the stops, without their alpha. */
     colours,
-    /** Strokes wider than an arc: the glow. */
-    wide: () => list.filter((s) => s.width > 20).length,
+    /** Strokes on the glow's layers. */
+    glow: () => list.filter((s) => s.glow).length,
     clear() {
       list.length = 0
       stops.length = 0
diff --git a/src/views/Now.svelte b/src/views/Now.svelte
index 81ce7dd..4c6e772 100644
--- a/src/views/Now.svelte
+++ b/src/views/Now.svelte
@@ -337,7 +337,7 @@
     <!-- A tap opens the node: the charger's sheet for the car, a live line
          for the rest. It works while the saved home reconnects; the panel
          shows the progress, then checks what the box can do. -->
-    <EnergyRing readings={ring} {active} onopen={openPlanetControls} />
+    <EnergyRing readings={ring} {active} readingAt={site.lastFrameAtMs} onopen={openPlanetControls} />
     {#if status && !statusLive}
       <p class="note" role="status">Device details are out of date.{live ? ' Showing live totals.' : ''}</p>
     {/if}