mBR Text Component — Bar-Only Animation

Date: 2026-05-13 Component: sites/template/src/components/brand/MyBetterRates.astro Monorepo commit: 2ae71fc KB commit: 948e88c

What Changed

Replaced the original “small $ expands to cap-height $” animation with a bar-only overlay on a lowercase s.

Before: Terminal character was a small $ at font-size: 0.73em — always visible. Every 4 seconds it briefly grew to a full cap-height $. Visually “loud”; inconsistent with the restraint applied to the logo glow rejection.

After: Terminal character is a lowercase s at full inherited size (same height as surrounding letters, zero layout shift). Every 4 seconds a thin CSS bar (::after) briefly flashes through the s at the 93.75% keyframe, making it look like a lowercase-height $. No size change, no cap-height overshoot.

Final Component Geometry (locked)

display: inline-block;
position: relative;
line-height: 1;

/* .mbr-wm-s */
text-rendering: geometricPrecision;   /* disables font hinting → zoom-stable */
font-optical-sizing: none;

/* .mbr-char-wrap::after — animated bar */
position: absolute;
top: 0;
left: 50%;
width: 0.06em;
height: 0.73em;
transform: translate(-50%, 0.21em);   /* snap-free transform positioning */

Two Root-Cause Fixes for Cross-Size/Cross-Zoom Robustness

Fix 1: Transform-anchored bar (not `bottom`)

bottom: 0.06em snaps non-monotonically with font-size: at 1.25rem it snapped DOWN 17%, causing the bar to appear too high in card headings. At 2rem it snapped UP 4%, looking fine. No single bottom value is correct at all sizes.

Solution: transform: translate(-50%, 0.21em) — GPU-rendered in floating-point, no pixel snap.

Derivation: bottom: 0.06em; height: 0.73em → bar top at 1em − 0.06em − 0.73em = 0.21em from top of inline-block.

Fix 2: `geometricPrecision` on `.mbr-wm-s`

Inter’s s glyph hints to different pixel rows at 100% vs 125% vs 150% browser zoom. The CSS bar is math-stable; the glyph moves. Result: bar appeared at different relative positions at each zoom level — no bottom value could track this.

Solution: text-rendering: geometricPrecision; font-optical-sizing: none on .mbr-wm-s only. Disables hinting for that character → renders at its math x-height position at all zooms. Surrounding wordmark text stays fully hinted for legibility.

Why `$` Character Doesn’t Work

The $ glyph in any font has a bar extending to cap-height regardless of font-size. There is no size at which $ produces a lowercase-height bar. CSS ::after overlay is the only approach.

Verification

Confirmed on:

Windows Chrome 100%, 125%, 150% zoom
Safari iPad
Android Chrome

All six showcase contexts consistent: Default (1rem), With Entity (1rem), In Context (1rem body), Large Heading (2rem), Hero Scale (3.5rem), Card Heading (1.25rem weight 700 white-on-emerald).

Playwright: 24 passed, 3 skipped.

Files Updated

File	Change
`sites/template/src/components/brand/MyBetterRates.astro`	New animation implementation + geometry comments
`sites/template/src/components/showcase/MyBetterRatesShowcase.astro`	Updated animation description
`sites/template/src/pages/docs.astro`	Updated MyBetterRates entry
`02_Strategy/Branding Decisions.md`	Wordmark animation section rewritten

SDC SmartDebt Component

Not affected. SmartDebt cross-fades two complete text strings (SMART DEBT ↔ $MART DEBT) via opacity — no separately-positioned CSS bar. Font hinting affects both strings equally; alignment is always perfect regardless of zoom.