diff --git a/server/src/providers/spotify.ts b/server/src/providers/spotify.ts
index 919a96a..a10e3ad 100644
--- a/server/src/providers/spotify.ts
+++ b/server/src/providers/spotify.ts
@@ -11,21 +11,40 @@ import { tr } from '../i18n.js'
  */
 const SEP = '\x1f'
 const IS_RUNNING = 'tell application "System Events" to (name of processes) contains "Spotify"'
-const STATE = `tell application "Spotify"
+/**
+ * The position is made a whole number of milliseconds by AppleScript rather than read as the
+ * float it is.
+ *
+ * `player position` is the one fractional value here, and AppleScript writes a number with the
+ * decimal separator of the Mac's number format: where that is a comma it answers `69,724998`,
+ * which `Number()` reads as NaN — and a NaN position is a progress bar that never moves. An
+ * integer has no separator to get wrong. `duration` is already in milliseconds, and `sound
+ * volume` is already whole.
+ *
+ * With `div`, an operator, and not `round`, which is a Standard Additions command: inside a
+ * `tell` block a command goes to the target first, so `round` works only where Spotify agrees to
+ * load the addition, and one that refuses fails the whole script — a bar stuck at zero would
+ * become "Spotify error". An operator never leaves AppleScript. It truncates where `round`
+ * rounded, which under a millisecond nothing on the bar can show.
+ */
+export const STATE = `tell application "Spotify"
   if player state is stopped then return "stopped"
   set sep to "${SEP}"
-  return (player state as string) & sep & (name of current track) & sep & (artist of current track) & sep & (album of current track) & sep & (artwork url of current track) & sep & (duration of current track) & sep & (player position) & sep & (sound volume)
+  return (player state as string) & sep & (name of current track) & sep & (artist of current track) & sep & (album of current track) & sep & (artwork url of current track) & sep & (duration of current track) & sep & (((player position) * 1000) div 1) & sep & (sound volume)
 end tell`
 
 export function parseSpotify(raw: string) {
   const [state, title, artist, album, artwork, duration, position, volume] = raw.split(SEP)
+  // The script already sends integers; this is the second line of defence, so that a real which
+  // gets through anyway, decimal comma and all, still lands as a whole number rather than NaN.
+  const num = (v: string) => Math.round(Number(v.replace(',', '.')))
   return {
     available: true as const,
     state: state as 'playing' | 'paused' | 'stopped',
     title, artist, album, artwork,
-    durationMs: Number(duration),
-    positionMs: Math.round(Number(position) * 1000),
-    volume: Number(volume),
+    durationMs: num(duration),
+    positionMs: num(position),
+    volume: num(volume),
   }
 }
 
@@ -57,6 +76,8 @@ export function createSpotifyProvider(run: Runner = osascript, open: Opener = op
   const tell = (cmd: string) => run(`tell application "Spotify" to ${cmd}`).then(() => ({ ok: true }))
   return {
     channel: 'spotify',
+    // The widget's fill glides across exactly this second: `POLL_MS` and the `1s` transition in
+    // widgets/spotify/index.html say it again. Change the three together.
     intervalMs: 1000,
     async poll() {
       if ((await run(IS_RUNNING)) !== 'true') return { available: false }
diff --git a/server/test/providers.test.ts b/server/test/providers.test.ts
index cd1b52f..152faa6 100644
--- a/server/test/providers.test.ts
+++ b/server/test/providers.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from 'vitest'
 import { parseVolume, createVolumeProvider } from '../src/providers/volume.js'
-import { parseSpotify, createSpotifyProvider, OPEN_PROGRAM, SPOTIFY_BUNDLE_ID } from '../src/providers/spotify.js'
+import { parseSpotify, createSpotifyProvider, OPEN_PROGRAM, SPOTIFY_BUNDLE_ID, STATE } from '../src/providers/spotify.js'
 import { createMutedeckProvider } from '../src/providers/mutedeck.js'
 
 describe('volume', () => {
@@ -21,9 +21,30 @@ describe('volume', () => {
 describe('spotify', () => {
   it('parses the delimited state', () => {
     // The separator is an ASCII unit separator: a track name can contain any printable text.
-    const s = parseSpotify(['playing', 'Song', 'Artist', 'Album', 'https://i.scdn.co/x', '215000', '12.5', '80'].join('\x1f'))
+    const s = parseSpotify(['playing', 'Song', 'Artist', 'Album', 'https://i.scdn.co/x', '215000', '12500', '80'].join('\x1f'))
     expect(s).toEqual({ available: true, state: 'playing', title: 'Song', artist: 'Artist', album: 'Album', artwork: 'https://i.scdn.co/x', durationMs: 215000, positionMs: 12500, volume: 80 })
   })
+
+  /**
+   * The bug this guards: AppleScript writes a real with the decimal separator of the Mac's number
+   * format, so where that is a comma `player position` answered `69,724998`, `Number()` made NaN
+   * of it, and the progress bar never moved. Both ends hold now: the script asks for a whole
+   * number of milliseconds, and a real that gets through anyway, comma and all, is read as the
+   * number it is and rounded to the millisecond.
+   */
+  it('reads a real written with a decimal comma as whole milliseconds, not NaN', () => {
+    const french = (position: string) =>
+      parseSpotify(['playing', 'Song', 'Artist', 'Album', '', '215000', position, '80'].join('\x1f')).positionMs
+    expect(french('69724,998')).toBe(69725)
+    // What AppleScript actually writes for a real from 10 000 up: the comma, and an exponent.
+    expect(french('6,9724998E+4')).toBe(69725)
+  })
+  it('asks Spotify for a whole number of milliseconds, with operators alone', () => {
+    // `div` and not `round`, a Standard Additions command that Spotify would have to load: see `STATE`.
+    expect(STATE).toContain('((player position) * 1000) div 1')
+    expect(STATE).not.toContain('round (')
+    expect(STATE).not.toContain('sep & (player position)')
+  })
   it('reports unavailable when Spotify is not running', async () => {
     const run = vi.fn(async (script: string) => (script.includes('System Events') ? 'false' : ''))
     expect(await createSpotifyProvider(run).poll!()).toEqual({ available: false })
diff --git a/server/test/spotify-widget.test.ts b/server/test/spotify-widget.test.ts
index 454cc2d..3fd50c9 100644
--- a/server/test/spotify-widget.test.ts
+++ b/server/test/spotify-widget.test.ts
@@ -9,29 +9,63 @@ import { fileURLToPath } from 'node:url'
  * that record the listeners it registers — then the recorded `contextmenu` handler is called,
  * which is exactly what the Edge's touch driver produces for a press held past its threshold.
  */
+interface StubNode {
+  textContent: string; className: string; title: string; onclick: (() => void) | null
+  style: Record<string, string> & { transform: string; setProperty(name: string, value: string): void }
+  childNodes: StubNode[]
+  /** Every transform the node was given, with the class it had at that moment, in order. */
+  writes: [string, string][]
+}
+
 interface Loaded {
   listeners: Map<string, ((e: unknown) => void)[]>
   commands: [string, string, unknown?][]
   settings: Record<string, unknown>
+  /** The elements the widget asked for by id, so a test can read what it put in them. */
+  nodes: Map<string, StubNode>
+  /** Hands the widget one answer from the spotify channel, as the host delivers it. */
+  publish(data: Record<string, unknown>): void
 }
 
-async function loadWidget(settings: Record<string, unknown>): Promise<Loaded> {
+async function loadWidget(settings: Record<string, unknown>, viewport: [number, number] = [632, 282]): Promise<Loaded> {
   const html = await readFile(fileURLToPath(new URL('../../widgets/spotify/index.html', import.meta.url)), 'utf8')
   const script = [...html.matchAll(/<script[^>]*>([\s\S]*?)<\/script>/g)].map((m) => m[1]).join('\n')
 
   const listeners = new Map<string, ((e: unknown) => void)[]>()
   const commands: [string, string, unknown?][] = []
-  const node = () => ({
-    textContent: '', className: '', style: {}, src: '',
-    classList: { add: () => {}, remove: () => {}, toggle: () => {} },
-    setAttribute: () => {}, removeAttribute: () => {}, appendChild: () => {},
-    addEventListener: () => {}, onclick: null,
-  })
+  const subscribers: ((data: unknown) => void)[] = []
+  const node = () => {
+    // A setter rather than a field: a snap and a glide end on the same transform, and only the
+    // writes on the way there tell them apart.
+    let transform = ''
+    const self = {
+      textContent: '', className: '', title: '', src: '',
+      writes: [] as [string, string][],
+      style: {
+        setProperty(name: string, value: string) { (this as Record<string, unknown>)[name] = value },
+        get transform() { return transform },
+        set transform(value: string) { transform = value; self.writes.push([self.className, value]) },
+      } as StubNode['style'],
+      clientWidth: viewport[0] - 36,
+      childNodes: [] as StubNode[],
+      classList: { add: () => {}, remove: () => {}, toggle: () => {} },
+      setAttribute: () => {}, removeAttribute: () => {},
+      appendChild: (child: StubNode) => { self.childNodes.push(child) },
+      addEventListener: () => {}, onclick: null,
+    }
+    return self
+  }
+  // By id, and the same object every time: `textContent = ''` on a fresh stub would erase nothing.
+  const nodes = new Map<string, ReturnType<typeof node>>()
+  const byId = (id: string) => {
+    if (!nodes.has(id)) nodes.set(id, node())
+    return nodes.get(id)!
+  }
   const document = {
     documentElement: { lang: '', classList: { add: () => {}, remove: () => {} }, style: { setProperty: () => {} } },
     head: { firstChild: null, insertBefore: () => {}, appendChild: () => {} },
     createElement: node,
-    getElementById: node,
+    getElementById: byId,
     querySelector: node,
     addEventListener: (type: string, fn: (e: unknown) => void) => {
       listeners.set(type, [...(listeners.get(type) ?? []), fn])
@@ -43,7 +77,7 @@ async function loadWidget(settings: Record<string, unknown>): Promise<Loaded> {
     compact: false,
     instanceId: 'spotify-1',
     whenReady: (cb: () => void) => cb(),
-    subscribe: () => () => {},
+    subscribe: (_channel: string, cb: (data: unknown) => void) => { subscribers.push(cb); return () => {} },
     onLocale: () => {},
     onResize: () => {},
     onSettings: () => {},
@@ -51,13 +85,26 @@ async function loadWidget(settings: Record<string, unknown>): Promise<Loaded> {
       commands.push([channel, name, payload])
       return Promise.resolve({ ok: true })
     },
+    el: (_tag: string, className: string, text?: unknown) => {
+      const n = node()
+      n.className = className ?? ''
+      n.textContent = String(text ?? '')
+      return n
+    },
     t: (dict: unknown) => (typeof dict === 'string' ? dict : ((dict as Record<string, string>)?.fr ?? '')),
     esc: (v: unknown) => String(v ?? ''),
     color: (v: unknown, fallback: string) => fallback,
   }
-  const window = { setTimeout: (fn: () => void, ms: number) => setTimeout(fn, ms), clearTimeout }
+  const window = {
+    setTimeout: (fn: () => void, ms: number) => setTimeout(fn, ms), clearTimeout,
+    innerWidth: viewport[0], innerHeight: viewport[1],
+  }
   new Function('document', 'Fremkit', 'window', 'console', script)(document, Fremkit, window, console)
-  return { listeners, commands, settings }
+  return {
+    listeners, commands, settings,
+    nodes: nodes as unknown as Map<string, StubNode>,
+    publish: (data: Record<string, unknown>) => subscribers.forEach((cb) => cb(data)),
+  }
 }
 
 const fire = (loaded: Loaded, type: string, event: unknown = {}) =>
@@ -117,3 +164,87 @@ describe('the spotify widget long press', () => {
     }
   })
 })
+
+/**
+ * The progress bar. The position arrives once a second, so a bar that only moved when an answer
+ * landed stepped once a second — visibly. It is aimed a second ahead and given a second to get
+ * there instead, and each answer corrects the aim. What must not glide is a seek or a new track:
+ * running the fill backwards across a second reads as a bug, not as an animation.
+ */
+describe('the spotify widget progress bar', () => {
+  const playing = (positionMs: number, extra: Record<string, unknown> = {}) => ({
+    available: true, state: 'playing', title: 'Song', artist: 'Artist', album: 'Album',
+    durationMs: 200_000, positionMs, ...extra,
+  })
+  const scale = (loaded: Loaded) =>
+    Number(/scaleX\(([\d.]+)\)/.exec(loaded.nodes.get('bar')!.style.transform ?? '')?.[1])
+  /** What one answer does to the fill: each transform it is given, and the class it has then. */
+  const writesFor = (loaded: Loaded, data: Record<string, unknown>) => {
+    const bar = loaded.nodes.get('bar')!
+    bar.writes.length = 0
+    loaded.publish(data)
+    return bar.writes
+  }
+
+  it('aims one poll ahead while the track plays', async () => {
+    const loaded = await loadWidget({})
+    loaded.publish(playing(100_000))
+    // 100 s of 200 s, plus the second it will have played by the next answer.
+    expect(scale(loaded)).toBeCloseTo(0.505, 5)
+  })
+
+  it('stops at where it is when the track is paused', async () => {
+    const loaded = await loadWidget({})
+    loaded.publish(playing(100_000, { state: 'paused' }))
+    expect(scale(loaded)).toBeCloseTo(0.5, 5)
+  })
+
+  it('never aims past the end of the track', async () => {
+    const loaded = await loadWidget({})
+    loaded.publish(playing(199_800))
+    expect(scale(loaded)).toBe(1)
+  })
+
+  it('glides on an ordinary answer: one write, with the transition left on', async () => {
+    const loaded = await loadWidget({})
+    loaded.publish(playing(100_000))
+    expect(writesFor(loaded, playing(101_000))).toEqual([['', 'scaleX(0.51)']])
+  })
+
+  it('snaps rather than glides when the track changes', async () => {
+    const loaded = await loadWidget({})
+    loaded.publish(playing(180_000))
+    // Put down on the new track's position with the transition off, then sent on from there.
+    expect(writesFor(loaded, playing(1_000, { title: 'Another' })))
+      .toEqual([['snap', 'scaleX(0.005)'], ['', 'scaleX(0.01)']])
+  })
+
+  it('snaps on a seek backwards, and glides on one forwards', async () => {
+    const loaded = await loadWidget({})
+    loaded.publish(playing(100_000))
+    expect(writesFor(loaded, playing(20_000))).toEqual([['snap', 'scaleX(0.1)'], ['', 'scaleX(0.105)']])
+    expect(writesFor(loaded, playing(150_000))).toEqual([['', 'scaleX(0.755)']])
+  })
+
+  it('snaps on a pause, which lands behind a fill aimed a second ahead', async () => {
+    const loaded = await loadWidget({})
+    loaded.publish(playing(100_000))
+    // Aimed at 101 s; the next answer is `paused` at 100.2 s. Gliding there runs the fill back.
+    expect(writesFor(loaded, playing(100_200, { state: 'paused' })))
+      .toEqual([['snap', 'scaleX(0.501)'], ['', 'scaleX(0.501)']])
+  })
+
+  it('empties at once when Spotify closes, and lands rather than glides when it plays again', async () => {
+    const loaded = await loadWidget({})
+    loaded.publish(playing(100_000))
+    expect(writesFor(loaded, { available: false })).toEqual([['snap', 'scaleX(0)']])
+    // The same track at the same place: from an empty bar, that is a jump and not a glide.
+    expect(writesFor(loaded, playing(100_000))).toEqual([['snap', 'scaleX(0.5)'], ['', 'scaleX(0.505)']])
+  })
+
+  it('draws an empty bar for a track with no duration at all', async () => {
+    const loaded = await loadWidget({})
+    loaded.publish(playing(0, { durationMs: 0 }))
+    expect(scale(loaded)).toBe(0)
+  })
+})
diff --git a/server/test/widget-catalog.test.ts b/server/test/widget-catalog.test.ts
index 46669d6..57e9e83 100644
--- a/server/test/widget-catalog.test.ts
+++ b/server/test/widget-catalog.test.ts
@@ -147,6 +147,8 @@ describe('WidgetCatalog', () => {
     const battery = cat.get('battery')!
     expect(battery.subscriptions).toEqual(['battery'])
     expect([battery.minSize, battery.defaultSize]).toEqual([[8, 4], [8, 6]])
+    const spotify = cat.get('spotify')!
+    expect([spotify.minSize, spotify.defaultSize]).toEqual([[8, 4], [16, 5]])
     const status = cat.get('service-status')!
     expect(status.subscriptions).toEqual([])
     expect(status.commands).toEqual(['service-status'])
diff --git a/widgets/spotify/index.html b/widgets/spotify/index.html
index 80ca7bb..8ed8426 100644
--- a/widgets/spotify/index.html
+++ b/widgets/spotify/index.html
@@ -5,7 +5,15 @@
   .wrap{box-sizing:border-box;height:100%;padding:14px 18px;position:relative;display:flex;flex-direction:column;justify-content:center;gap:6px}
   .big{font-size:calc(44px * var(--text-scale, 1));font-weight:600;line-height:1}
   .bar{height:8px;border-radius:4px;background:var(--surface-3, #252a32);overflow:hidden}
-  .bar>i{display:block;height:100%;background:var(--accent, #d9b36a);width:0;transition:width .4s}
+  /* Scaled rather than resized: the position only arrives once a second, so the fill glides
+     across that second on the compositor instead of stepping on each answer. The 1s is the
+     provider's poll: `intervalMs` in server/src/providers/spotify.ts, and `POLL_MS` below. */
+  .bar>i{display:block;height:100%;width:100%;background:var(--accent, #d9b36a);
+    transform:scaleX(0);transform-origin:left center;transition:transform 1s linear}
+  /* A new track, a seek or a pause: there is nothing to glide across, so it lands where it is. */
+  .bar>i.snap{transition:none}
+  /* The glide runs for as long as music plays. Asked for less motion, the fill steps instead. */
+  @media (prefers-reduced-motion:reduce){.bar>i{transition:none}}
   .row{display:flex;justify-content:space-between;font-size:calc(15px * var(--text-scale, 1))}
   .muted{color:var(--text-muted, #8b93a0)}
   button{font:inherit;border:0;border-radius:10px;background:var(--surface-3, #252a32);color:var(--text, #e6e8eb);padding:10px 14px;font-size:calc(18px * var(--text-scale, 1))}
@@ -19,29 +27,89 @@
   html.accent-fill .bar>i{background:var(--on-surface,#0b0d10)}
 </style>
 <style>
-  /* The iframe's own viewport is exactly the tile, so vw/vh/vmin track the tile size directly. */
-  .wrap{flex-direction:row;align-items:center;justify-content:center;gap:clamp(10px,3vw,20px);padding:clamp(10px,3vh,18px) clamp(12px,3vw,20px)}
-  /* Cover: grows with tile height but never wider than ~40% of the tile, capped so it stays sane on huge tiles. */
-  #art{flex:0 0 auto;width:min(40vw,calc(100vh - 28px),300px);height:min(40vw,calc(100vh - 28px),300px);border-radius:10px;background:var(--surface-3, #252a32);object-fit:cover}
-  .info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(2px,1vh,6px)}
-  #title{font-size:calc(clamp(14px,5vh,26px) * var(--text-scale, 1));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-  #artist{font-size:calc(clamp(11px,3vh,16px) * var(--text-scale, 1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-  .info .bar{height:clamp(4px,1.4vh,8px);border-radius:4px;margin-top:clamp(4px,1vh,8px)}
+  /*
+   * The iframe's own viewport is exactly the tile, so vw/vh/vmin track the tile size directly.
+   *
+   * One grid, three arrangements. The cover, the song and the transport never move in the
+   * document; only the areas they sit in do. `.info` is a real box in the row — which is what
+   * keeps the cover from pushing the song and the buttons apart when it is the taller of the
+   * two — and steps out of the way with `display:contents` in the other two, so its children
+   * become areas of their own.
+   */
+  .wrap{display:grid;align-content:center;
+    column-gap:clamp(10px,3vw,20px);row-gap:0;
+    padding:clamp(10px,3vh,18px) clamp(12px,3vw,20px);
+    grid-template-columns:auto minmax(0,1fr);
+    grid-template-rows:minmax(0,1fr);
+    grid-template-areas:"art info"}
+  /* As tall as the row allows, and square: the height drives it, `aspect-ratio` gives the width,
+     and the same cap on both keeps it square when the cap is what binds rather than the height. */
+  #art{grid-area:art;align-self:center;justify-self:start;height:100%;width:auto;aspect-ratio:1/1;
+    max-width:min(46vw,300px);max-height:min(46vw,300px);
+    border-radius:10px;background:var(--surface-3, #252a32);object-fit:cover}
+  .info{grid-area:info;min-width:0;display:flex;flex-direction:column;justify-content:center}
+  .song{min-width:0;display:flex;flex-direction:column;gap:clamp(2px,1vh,6px)}
+  .rest{min-width:0;display:flex;flex-direction:column}
+  /*
+   * Type reads from whichever dimension the tile has to spare, and is held back by the other.
+   *
+   * Height alone left a 950×280 tile with a 21px title while it had room for thirty. Width alone
+   * would give a 2560×120 banner a 76px one, which does not fit under it — hence the inner
+   * `min`, which lets the width raise the size only as far as the height can carry it.
+   */
+  #title{font-size:calc(clamp(14px,max(6vh,min(3vw,20vh)),40px) * var(--text-scale, 1));font-weight:600;
+    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  #artist{font-size:calc(clamp(11px,max(3.4vh,min(1.6vw,11vh)),22px) * var(--text-scale, 1));
+    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  /* Thick enough to read as a track from across the room, and clear of the buttons: at 4px under
+     a 4px gap it looked like an underline on the transport rather than a bar of its own. */
+  .rest .bar{height:clamp(5px,1.8vh,12px);border-radius:999px;margin-top:clamp(4px,2.6vh,18px)}
   /* Transport under the song: wide, tall buttons that a finger can hit without aiming. */
   .controls{display:flex;gap:clamp(8px,1.5vw,14px);margin-top:clamp(4px,1.2vh,10px)}
   .controls button{flex:1;min-height:44px;font-size:calc(clamp(20px,6vh,34px) * var(--text-scale, 1));line-height:1;padding:clamp(8px,2vh,16px) 0;border-radius:clamp(8px,1.8vh,14px)}
-  /* Below 12 cells (480px) wide there is no room for cover + text + buttons side by side: stack them. */
-  @media (max-width:480px){
-    .wrap{flex-direction:column;text-align:center}
-    #art{width:min(60vw,45vh,220px);height:min(60vw,45vh,220px)}
-    .info{align-items:stretch;width:100%}
+  /*
+   * Wide enough for a title beside the cover, and tall enough that the row would leave a hole:
+   * the cover moves beside the song alone and the transport takes the whole width underneath.
+   *
+   * The two numbers are where the row stops working. Under 440px the title has nowhere to go
+   * beside a cover; under 340px of height the cover left in the top row would be smaller than
+   * the one the row was already giving, so the row stays. Above both, the row's right-hand
+   * column carries about 190px of content against a cover of 300 — the hole this closes.
+   */
+  @media (min-height:340px) and (min-width:440px){
+    .wrap{grid-template-areas:"art song" "rest rest";grid-template-rows:minmax(0,1fr) auto;
+      row-gap:clamp(4px,1.2vh,10px)}
+    .info{display:contents}
+    .song{grid-area:song;align-self:center}
+    .rest{grid-area:rest}
+    #art{max-width:min(40vw,320px);max-height:min(40vw,320px)}
+  }
+  /*
+   * Squarer than that, or taller than wide, and the cover is the point: it goes on top, alone,
+   * taking the height the song and the transport leave. Through the grid rather than by
+   * subtracting a guessed number, since the type and the buttons are sized in vh and any guess
+   * would drift.
+   */
+  @media (min-height:300px) and (max-aspect-ratio:23/20){
+    .wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"art" "song" "rest";
+      grid-template-rows:minmax(0,1fr) auto auto;justify-items:center;text-align:center}
+    .info{display:contents}
+    .song{grid-area:song;align-self:auto}
+    .rest{grid-area:rest}
+    /* The row is what is left over, so the height drives it here too; capping both sides by the
+       same width-derived number is what keeps it square when the width is what binds. */
+    #art{justify-self:center;height:100%;min-height:0;
+      max-width:min(calc(100vw - 40px),460px);max-height:min(calc(100vw - 40px),460px)}
+    .song,.rest{width:100%}
     #title,#artist{white-space:normal;overflow-wrap:anywhere}
   }
 </style></head><body><div class="wrap">
 <img id="art" alt="">
-<div class="info"><div id="title"></div><div id="artist" class="muted"></div>
+<div class="info">
+<div class="song"><div id="title"></div><div id="artist" class="muted"></div></div>
+<div class="rest">
 <div class="controls"><button id="prev">⏮</button><button id="pp">⏯</button><button id="next">⏭</button></div>
-<div class="bar"><i id="bar"></i></div></div>
+<div class="bar"><i id="bar"></i></div></div></div>
 </div>
 <script>
   var L = {
@@ -56,14 +124,57 @@
       document.documentElement.lang = Fremkit.locale
       var d = last
       if (!d) { t.textContent = Fremkit.t(L.closed); return }
-      if (d.error) { t.textContent = Fremkit.t(L.error); a.textContent = ''; img.removeAttribute('src'); return }
-      if (!d.available) { t.textContent = Fremkit.t(L.closed); a.textContent = ''; img.removeAttribute('src'); return }
-      if (d.state === 'stopped') { t.textContent = Fremkit.t(L.stopped); a.textContent = ''; return }
+      if (d.error) { t.textContent = Fremkit.t(L.error); a.textContent = ''; img.removeAttribute('src'); clearBar(); return }
+      if (!d.available) { t.textContent = Fremkit.t(L.closed); a.textContent = ''; img.removeAttribute('src'); clearBar(); return }
+      if (d.state === 'stopped') { t.textContent = Fremkit.t(L.stopped); a.textContent = ''; clearBar(); return }
       t.textContent = d.title; a.textContent = d.artist + ' · ' + d.album
       if (d.artwork && img.src !== d.artwork) img.src = d.artwork
-      document.getElementById('bar').style.width = (d.durationMs ? d.positionMs / d.durationMs * 100 : 0) + '%'
+      renderBar(d)
       document.getElementById('pp').textContent = d.state === 'playing' ? '⏸' : '▶'
     }
+    /**
+     * How far apart two positions arrive. The provider polls Spotify once a second, and a bar
+     * that moved only when an answer landed read as a step every second — so while the track
+     * plays the fill is sent to where it will be at the *next* answer, and takes that second to
+     * get there. Each answer then corrects the aim, so drift never accumulates.
+     *
+     * The same second as `intervalMs` in server/src/providers/spotify.ts and as the fill's `1s`
+     * transition above: change one, change all three.
+     */
+    var POLL_MS = 1000
+    var lastKey = null
+    var lastPositionMs = 0
+    var wasPlaying = false
+
+    function renderBar(d) {
+      var bar = document.getElementById('bar')
+      var here = d.durationMs ? Math.min(1, d.positionMs / d.durationMs) : 0
+      var key = d.title + '\u001f' + d.album
+      // Backwards, another track, or a pause — which lands behind a fill aimed a second ahead:
+      // gliding there would run the fill the wrong way for a second.
+      var snap = key !== lastKey || d.positionMs < lastPositionMs - 250 || (wasPlaying && d.state !== 'playing')
+      lastKey = key
+      lastPositionMs = d.positionMs
+      wasPlaying = d.state === 'playing'
+      if (snap) {
+        bar.className = 'snap'
+        bar.style.transform = 'scaleX(' + here + ')'
+        void bar.offsetWidth  // the reflow that makes the transition below start from here
+        bar.className = ''
+      }
+      var ahead = d.state === 'playing' && d.durationMs
+        ? Math.min(1, (d.positionMs + POLL_MS) / d.durationMs) : here
+      bar.style.transform = 'scaleX(' + ahead + ')'
+    }
+
+    /** No position to show: the fill empties at once, and whatever plays next lands rather than glides up from zero. */
+    function clearBar() {
+      var bar = document.getElementById('bar')
+      bar.className = 'snap'
+      bar.style.transform = 'scaleX(0)'
+      lastKey = null
+    }
+
     render()
     Fremkit.onLocale(render)
     Fremkit.subscribe('spotify', function (d) { last = d; render() })
diff --git a/widgets/spotify/manifest.json b/widgets/spotify/manifest.json
index 17b393e..0b32607 100644
--- a/widgets/spotify/manifest.json
+++ b/widgets/spotify/manifest.json
@@ -1,7 +1,7 @@
-{ "id": "spotify", "name": "Spotify", "version": "1.0.0",
+{ "id": "spotify", "name": "Spotify", "version": "1.1.0",
   "description": { "fr": "Contrôle Spotify", "en": "Spotify controls" },
   "category": "media",
-  "icon": "music", "minSize": [16, 4], "defaultSize": [16, 4], "subscriptions": ["spotify"], "commands": ["spotify"],
+  "icon": "music", "minSize": [8, 4], "defaultSize": [16, 5], "subscriptions": ["spotify"], "commands": ["spotify"],
   "settingsSchema": {
     "longPressOpensApp": { "type": "boolean", "default": false,
       "label": { "fr": "Appui long : ouvrir Spotify", "en": "Long press: open Spotify" } }