mBR Logo — Animation Testing

Option A — Current (bar blinks + dot scales to 120%)

3.5s resting → 0.5s pulse (bar blinks, dot scales 120%) → back

Production baseline. No glow — just the bar blink and dot scale.

resting (3.5s)

↔

myBetterRate

Option B — Equal split $ ↔ s (wordmark reference only)

1.5s $ + 0.5s fade + 1.5s s + 0.5s fade = 4s

Wordmark alternating. For reference — not a glow candidate.

$ (1.5s)

↔

s (1.5s)

↔

myBetterRate

Options C–H — Scaling glow +100%: opacity × dot-scale matrix

Glow disc grows from r=8 → r=16 while fading in. Three opacities × with/without 120% dot scale.

All six use the same scaling glow approach (+100%, peak at 93.75%). Use Slow (8s) to see the expansion clearly. Columns: left = accent dot also scales to 120%; right = dot is static.

C — 25% opacity + 120% dot scale

D — 25% opacity, dot static

E — 33% opacity + 120% dot scale

F — 33% opacity, dot static

G — 40% opacity + 120% dot scale

H — 40% opacity, dot static

Favicon preview — how the glow looks at actual tab sizes

Scaling glow +100% at 64px, 32px, and 16px

Using Option E (40% opacity + dot scale) as a preview. The glow disc grows from the dot centre outward. At 16px (typical browser tab), the ring is ~1px — very subtle. At 64px (Apple touch icon), it's clearly noticeable. Chrome and Firefox animate SVG favicons via embedded <style>. Safari shows a static first frame.

64px (Apple touch)

32px

16px (browser tab)

Alignment reference — $ vs s at multiple sizes

Left: $ showing. Right: s showing. Verify vertical alignment across sizes.

myBetterRate myBetterRate