From 600b905e016bc26f54b946261bdda7855af7f81d Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 16:00:29 +0300
Subject: [PATCH 1/7] feat(Font): add windowSizeForLine crossfade-window policy

---
 src/entities/Font/domain/index.ts             |  1 +
 .../windowSizeForLine.test.ts                 | 38 +++++++++++++++++++
 .../windowSizeForLine/windowSizeForLine.ts    | 34 +++++++++++++++++
 src/entities/Font/index.ts                    |  1 +
 4 files changed, 74 insertions(+)
 create mode 100644 src/entities/Font/domain/windowSizeForLine/windowSizeForLine.test.ts
 create mode 100644 src/entities/Font/domain/windowSizeForLine/windowSizeForLine.ts

diff --git a/src/entities/Font/domain/index.ts b/src/entities/Font/domain/index.ts
index bffc09f..0f8a2ea 100644
--- a/src/entities/Font/domain/index.ts
+++ b/src/entities/Font/domain/index.ts
@@ -8,3 +8,4 @@ export {
     findSplitIndex,
     type LineRenderModel,
 } from './computeLineRenderModel/computeLineRenderModel';
+export { windowSizeForLine } from './windowSizeForLine/windowSizeForLine';
diff --git a/src/entities/Font/domain/windowSizeForLine/windowSizeForLine.test.ts b/src/entities/Font/domain/windowSizeForLine/windowSizeForLine.test.ts
new file mode 100644
index 0000000..392871b
--- /dev/null
+++ b/src/entities/Font/domain/windowSizeForLine/windowSizeForLine.test.ts
@@ -0,0 +1,38 @@
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+import { windowSizeForLine } from './windowSizeForLine';
+
+describe('windowSizeForLine', () => {
+    it('returns 0 for an empty or non-positive line', () => {
+        expect(windowSizeForLine(0)).toBe(0);
+        expect(windowSizeForLine(-3)).toBe(0);
+    });
+
+    it('floors non-empty short lines at the minimum window of 1', () => {
+        expect(windowSizeForLine(1)).toBe(1);
+        expect(windowSizeForLine(2)).toBe(1);
+        expect(windowSizeForLine(3)).toBe(1);
+    });
+
+    it('scales with round(n / 3) in the mid range', () => {
+        expect(windowSizeForLine(6)).toBe(2);
+        expect(windowSizeForLine(12)).toBe(4);
+    });
+
+    it('caps at the maximum window of 5', () => {
+        expect(windowSizeForLine(15)).toBe(5);
+        expect(windowSizeForLine(16)).toBe(5);
+        expect(windowSizeForLine(100)).toBe(5);
+    });
+
+    it('rounds to nearest at fractional boundaries', () => {
+        // round(4/3)=1, round(5/3)=2, round(13/3)=4, round(14/3)=5
+        expect(windowSizeForLine(4)).toBe(1);
+        expect(windowSizeForLine(5)).toBe(2);
+        expect(windowSizeForLine(13)).toBe(4);
+        expect(windowSizeForLine(14)).toBe(5);
+    });
+});
diff --git a/src/entities/Font/domain/windowSizeForLine/windowSizeForLine.ts b/src/entities/Font/domain/windowSizeForLine/windowSizeForLine.ts
new file mode 100644
index 0000000..daa9f6d
--- /dev/null
+++ b/src/entities/Font/domain/windowSizeForLine/windowSizeForLine.ts
@@ -0,0 +1,34 @@
+/**
+ * Crossfade-window sizing policy for the dual-font slider.
+ *
+ * The slider renders a band of per-char `Character` cells that opacity-crossfade
+ * between the two fonts; everything outside the band is committed native bulk
+ * text. A fixed band looked wrong on short lines — a 6-grapheme line left almost
+ * no bulk, so nearly the whole line shimmered as per-char DOM. The band size
+ * therefore scales with the line's grapheme count and caps so long lines don't
+ * pay for an oversized per-char DOM band.
+ */
+
+/**
+ * Fraction of a line's graphemes that sit in the crossfade band.
+ */
+const WINDOW_RATIO = 1 / 3;
+/**
+ * Smallest band for a non-empty line — guarantees at least one crossfading char.
+ */
+const WINDOW_MIN = 1;
+/**
+ * Largest band regardless of line length — bounds per-char DOM cost.
+ */
+const WINDOW_MAX = 5;
+
+/**
+ * Crossfade window size, in graphemes, for a line of `n` graphemes.
+ * `clamp(round(n / 3), 1, 5)`; an empty/non-positive line gets no window.
+ */
+export function windowSizeForLine(n: number): number {
+    if (n <= 0) {
+        return 0;
+    }
+    return Math.min(WINDOW_MAX, Math.max(WINDOW_MIN, Math.round(n * WINDOW_RATIO)));
+}
diff --git a/src/entities/Font/index.ts b/src/entities/Font/index.ts
index b93f0fc..a59a859 100644
--- a/src/entities/Font/index.ts
+++ b/src/entities/Font/index.ts
@@ -2,6 +2,7 @@ export {
     computeLineRenderModel,
     DualFontLayout,
     findSplitIndex,
+    windowSizeForLine,
 } from './domain';
 export type {
     ComparisonLine,
-- 
2.52.0


From 744cdc9d19f90cae7d09d2ce9118927a0c57e92d Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 16:03:51 +0300
Subject: [PATCH 2/7] refactor(ComparisonView): size crossfade window per line

---
 src/widgets/ComparisonView/ui/Line/Line.svelte           | 9 ++++-----
 .../ComparisonView/ui/SliderArea/SliderArea.svelte       | 8 +-------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/widgets/ComparisonView/ui/Line/Line.svelte b/src/widgets/ComparisonView/ui/Line/Line.svelte
index 96e8b6d..4721a1e 100644
--- a/src/widgets/ComparisonView/ui/Line/Line.svelte
+++ b/src/widgets/ComparisonView/ui/Line/Line.svelte
@@ -10,6 +10,7 @@
 import {
     type ComparisonLine,
     computeLineRenderModel,
+    windowSizeForLine,
 } from '$entities/Font';
 import { getTypographySettingsStore } from '$features/AdjustTypography';
 import { getComparisonStore } from '../../model';
@@ -24,16 +25,14 @@ interface Props {
      * Count of chars the slider has passed, from `findSplitIndex`.
      */
     split: number;
-    /**
-     * Number of chars in the crossfade window around the split.
-     */
-    windowSize: number;
 }
 
-let { line, split, windowSize }: Props = $props();
+let { line, split }: Props = $props();
 
 const comparisonStore = getComparisonStore();
 
+const windowSize = $derived(windowSizeForLine(line.chars.length));
+
 const model = $derived(computeLineRenderModel(line, split, windowSize));
 
 const typography = getTypographySettingsStore();
diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index 8b98abe..e98f9dd 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -107,12 +107,6 @@ const layout = new DualFontLayout();
 
 let layoutResult = $state<ComparisonResult>({ lines: [], totalHeight: 0 });
 
-/**
- * N-window size for the per-char crossfade zone around the slider split.
- * Tuned so chars complete their 100ms opacity crossfade before exiting the window.
- */
-const WINDOW_SIZE = 5;
-
 // Track container width changes (window resize, sidebar toggle, etc.)
 $effect(() => {
     if (!container) {
@@ -344,7 +338,7 @@ $effect(() => {
                     >
                         {#each layoutResult.lines as line, lineIdx (lineIdx)}
                             {@const split = findSplitIndex(line, sliderPos, containerWidth)}
-                            <Line {line} {split} windowSize={WINDOW_SIZE} />
+                            <Line {line} {split} />
                         {/each}
                     </div>
 
-- 
2.52.0


From 8dbea97a3355f3df2516d3fe1322f65a2fef4f7a Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 16:06:35 +0300
Subject: [PATCH 3/7] docs(ComparisonView): note per-line window sizing in Line
 header

---
 src/widgets/ComparisonView/ui/Line/Line.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/widgets/ComparisonView/ui/Line/Line.svelte b/src/widgets/ComparisonView/ui/Line/Line.svelte
index 4721a1e..92350b2 100644
--- a/src/widgets/ComparisonView/ui/Line/Line.svelte
+++ b/src/widgets/ComparisonView/ui/Line/Line.svelte
@@ -1,7 +1,8 @@
 <!--
     Component: Line
     Renders one laid-out line as three regions: a fontA bulk run (past the
-    slider), an N-char crossfade window straddling it, and a fontB bulk run (not
+    slider), a crossfade window straddling it (its size derived per line from
+    the line's grapheme count via `windowSizeForLine`), and a fontB bulk run (not
     yet past). Bulk runs are native shaped text (kerning, ligatures); only the
     window uses per-char DOM. `split` is a primitive so the render-model
     `$derived` skips recomputation on ticks that leave it unchanged.
-- 
2.52.0


From a2ec025a65aedfddc062a8102a9885c2be7ec1c7 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 16:07:48 +0300
Subject: [PATCH 4/7] test(e2e): assert crossfade window against the sizing
 rule

---
 e2e/preview-text.test.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/e2e/preview-text.test.ts b/e2e/preview-text.test.ts
index c3e60f5..ada9313 100644
--- a/e2e/preview-text.test.ts
+++ b/e2e/preview-text.test.ts
@@ -1,3 +1,4 @@
+import { windowSizeForLine } from '../src/entities/Font/domain/windowSizeForLine/windowSizeForLine';
 import {
     expect,
     test,
@@ -5,12 +6,15 @@ import {
 
 test.describe('preview text', () => {
     test('drives the slider character rendering', async ({ comparison }) => {
+        const text = 'Sphinx';
         await comparison.pickPair('Inter', 'Roboto');
-        await comparison.setPreviewText('Sphinx');
+        await comparison.setPreviewText(text);
 
-        // Window chars render as `.char-wrap` cells for crossfade.
-        // With WINDOW_SIZE=5, "Sphinx" (6 chars) fits 5 in the window.
-        await expect(comparison.slider.locator('.char-wrap')).toHaveCount(5);
+        // Window chars render as `.char-wrap` cells for crossfade. The window
+        // size is a pure function of the line's grapheme count — assert against
+        // the rule, not a hardcoded constant, so tuning the policy can't silently
+        // break this. "Sphinx" is one unwrapped line of 6 graphemes.
+        await expect(comparison.slider.locator('.char-wrap')).toHaveCount(windowSizeForLine(text.length));
     });
 
     test('preserves the typed value in the input', async ({ comparison }) => {
-- 
2.52.0


From 5084df3914dc16e088afb3e249449d4693484ea3 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 16:10:31 +0300
Subject: [PATCH 5/7] test(e2e): document single-line ASCII constraint on
 preview sample

---
 e2e/preview-text.test.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/e2e/preview-text.test.ts b/e2e/preview-text.test.ts
index ada9313..c2565b5 100644
--- a/e2e/preview-text.test.ts
+++ b/e2e/preview-text.test.ts
@@ -6,6 +6,13 @@ import {
 
 test.describe('preview text', () => {
     test('drives the slider character rendering', async ({ comparison }) => {
+        /**
+         * Must stay a single unwrapped line of ASCII: the assertion feeds
+         * `text.length` (UTF-16 code units) to `windowSizeForLine`, but the
+         * renderer feeds it the line's grapheme count. They match only for
+         * plain ASCII — emoji/combining marks (length > graphemes) or wrapping
+         * (one input string splitting into several lines) silently desync them.
+         */
         const text = 'Sphinx';
         await comparison.pickPair('Inter', 'Roboto');
         await comparison.setPreviewText(text);
-- 
2.52.0


From 99e9a1fb2c21c1d2ae6b2de674a492f5e598feec Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 16:13:16 +0300
Subject: [PATCH 6/7] docs(Font): record short-line crossfade pop tradeoff on
 WINDOW_MIN

---
 .../Font/domain/windowSizeForLine/windowSizeForLine.ts       | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/entities/Font/domain/windowSizeForLine/windowSizeForLine.ts b/src/entities/Font/domain/windowSizeForLine/windowSizeForLine.ts
index daa9f6d..d790360 100644
--- a/src/entities/Font/domain/windowSizeForLine/windowSizeForLine.ts
+++ b/src/entities/Font/domain/windowSizeForLine/windowSizeForLine.ts
@@ -15,6 +15,11 @@
 const WINDOW_RATIO = 1 / 3;
 /**
  * Smallest band for a non-empty line — guarantees at least one crossfading char.
+ *
+ * Accepted tradeoff: short lines now get a band of 1–2, so a fast slider drag
+ * can unmount a char before its ~100ms opacity crossfade finishes, a slight pop.
+ * Worth it for the "bulk committed, small band shimmering" look on short lines;
+ * raising this trades that pop back for less committed bulk.
  */
 const WINDOW_MIN = 1;
 /**
-- 
2.52.0


From 11d5ba0e632fa0a9d55c8eaf28daf0e58e19ac3e Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 6 Jun 2026 08:59:21 +0300
Subject: [PATCH 7/7] refactor(ComparisonView): extract strut-height and
 settled-text from Line

Pull the baseline-strut height math into a documented computeStrutHeight
util (named constants for the empirical 0.34 / 1.1 factors, with a unit
test) and the per-side native text runs into a SettledText component.
Strut statics move to Tailwind classes with only the height as style:height;
drop the now-redundant style-string $derived bindings.
---
 src/widgets/ComparisonView/lib/index.ts       |  1 +
 .../computeStrutHeight.test.ts                | 28 ++++++++++++
 .../computeStrutHeight/computeStrutHeight.ts  | 45 +++++++++++++++++++
 .../ComparisonView/ui/Line/Line.svelte        | 45 +++++--------------
 .../ui/SettledText/SettledText.svelte         | 37 +++++++++++++++
 5 files changed, 123 insertions(+), 33 deletions(-)
 create mode 100644 src/widgets/ComparisonView/lib/utils/computeStrutHeight/computeStrutHeight.test.ts
 create mode 100644 src/widgets/ComparisonView/lib/utils/computeStrutHeight/computeStrutHeight.ts
 create mode 100644 src/widgets/ComparisonView/ui/SettledText/SettledText.svelte

diff --git a/src/widgets/ComparisonView/lib/index.ts b/src/widgets/ComparisonView/lib/index.ts
index f84d781..942760e 100644
--- a/src/widgets/ComparisonView/lib/index.ts
+++ b/src/widgets/ComparisonView/lib/index.ts
@@ -1,3 +1,4 @@
+export { computeStrutHeight } from './utils/computeStrutHeight/computeStrutHeight';
 export {
     createDotCrossfade,
     getDotTransitionParams,
diff --git a/src/widgets/ComparisonView/lib/utils/computeStrutHeight/computeStrutHeight.test.ts b/src/widgets/ComparisonView/lib/utils/computeStrutHeight/computeStrutHeight.test.ts
new file mode 100644
index 0000000..b6a2dfa
--- /dev/null
+++ b/src/widgets/ComparisonView/lib/utils/computeStrutHeight/computeStrutHeight.test.ts
@@ -0,0 +1,28 @@
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+import { computeStrutHeight } from './computeStrutHeight';
+
+describe('computeStrutHeight', () => {
+    it('uses the centering height when the line-height is generous', () => {
+        // centering = 40/2 + 16*0.34 = 25.44; floor = 16*1.1 = 17.6 → centering wins.
+        expect(computeStrutHeight(40, 16)).toBeCloseTo(25.44, 5);
+    });
+
+    it('falls back to the ascent floor when the line-height is tight', () => {
+        // centering = 16/2 + 16*0.34 = 13.44; floor = 16*1.1 = 17.6 → floor wins.
+        expect(computeStrutHeight(16, 16)).toBeCloseTo(17.6, 5);
+    });
+
+    it('treats the floor and centering height as equal at the crossover line-height', () => {
+        // centering == floor when lineHeight = 1.52 * fontSize → 24.32 for 16px.
+        expect(computeStrutHeight(24.32, 16)).toBeCloseTo(17.6, 5);
+    });
+
+    it('scales with font size', () => {
+        // centering = 60/2 + 32*0.34 = 40.88; floor = 32*1.1 = 35.2 → centering wins.
+        expect(computeStrutHeight(60, 32)).toBeCloseTo(40.88, 5);
+    });
+});
diff --git a/src/widgets/ComparisonView/lib/utils/computeStrutHeight/computeStrutHeight.ts b/src/widgets/ComparisonView/lib/utils/computeStrutHeight/computeStrutHeight.ts
new file mode 100644
index 0000000..cafe65b
--- /dev/null
+++ b/src/widgets/ComparisonView/lib/utils/computeStrutHeight/computeStrutHeight.ts
@@ -0,0 +1,45 @@
+/**
+ * Fraction of the font size added to half the line height to drop the strut's
+ * baseline from the line box's vertical middle down to the text's optical
+ * center. Empirical: ~0.34em approximates a Latin font's midline-to-baseline
+ * offset, so glyphs sit centered rather than riding high in the line.
+ */
+const BASELINE_OFFSET_RATIO = 0.34;
+
+/**
+ * Minimum strut height as a multiple of the font size. Floors the strut above
+ * the fonts' ascent (~1em) so that at tight line-heights it stays the tallest
+ * inline box and keeps ownership of the line baseline. Empirical: 1.1 clears the
+ * tallest ascenders in the catalog's Latin fonts.
+ */
+const MIN_HEIGHT_RATIO = 1.1;
+
+/**
+ * Pixel height for a slider line's invisible baseline strut.
+ *
+ * The slider renders each line with a zero-width strut span whose box is
+ * deliberately the tallest inline box on the line. The browser pins a line box's
+ * baseline to its tallest inline box; fixing the strut's height independent of
+ * which bulk runs or window chars are currently mounted keeps the baseline (and
+ * every glyph) from jumping as the slider sweeps runs in and out. With
+ * `overflow: hidden` the strut's baseline sits at its bottom edge, so this height
+ * also sets the text's vertical position within the line box.
+ *
+ * The result is `max(centeringHeight, ascentFloor)`:
+ * - `centeringHeight = lineHeightPx / 2 + fontSizePx * BASELINE_OFFSET_RATIO`
+ *   centers the text — half the line box places the strut's bottom edge at the
+ *   vertical middle, and the offset term nudges the baseline down to the glyphs'
+ *   optical center.
+ * - `ascentFloor = fontSizePx * MIN_HEIGHT_RATIO` keeps the strut taller than the
+ *   fonts' ascent when the line-height is tight (where `centeringHeight` would
+ *   shrink below a real glyph box and let another box steal the baseline).
+ *
+ * @param lineHeightPx Line height in pixels (typography line-height × font size).
+ * @param fontSizePx   Rendered font size in pixels.
+ * @returns            Strut height in pixels.
+ */
+export function computeStrutHeight(lineHeightPx: number, fontSizePx: number): number {
+    const centeringHeight = lineHeightPx / 2 + fontSizePx * BASELINE_OFFSET_RATIO;
+    const ascentFloor = fontSizePx * MIN_HEIGHT_RATIO;
+    return Math.max(centeringHeight, ascentFloor);
+}
diff --git a/src/widgets/ComparisonView/ui/Line/Line.svelte b/src/widgets/ComparisonView/ui/Line/Line.svelte
index 92350b2..df864c5 100644
--- a/src/widgets/ComparisonView/ui/Line/Line.svelte
+++ b/src/widgets/ComparisonView/ui/Line/Line.svelte
@@ -14,8 +14,10 @@ import {
     windowSizeForLine,
 } from '$entities/Font';
 import { getTypographySettingsStore } from '$features/AdjustTypography';
+import { computeStrutHeight } from '../../lib';
 import { getComparisonStore } from '../../model';
 import Character from '../Character/Character.svelte';
+import SettledText from '../SettledText/SettledText.svelte';
 
 interface Props {
     /**
@@ -44,36 +46,9 @@ const fontSizePx = $derived(typography.renderedSize);
 const lineHeightPx = $derived(typography.height * typography.renderedSize);
 const letterSpacingPx = $derived(typography.spacing * typography.renderedSize);
 
-/**
- * Class and style are single short bindings so the formatter keeps
- * `<span ...>{text}</span>` on one line. A wrapped text expression would leak
- * its indentation into the span content under `white-space: pre`.
- */
-const BULK_LEFT_CLASS =
-    'inline-block align-baseline leading-none text-swiss-black/75 dark:text-brand/75 transition-colors duration-300';
-const BULK_RIGHT_CLASS =
-    'inline-block align-baseline leading-none text-neutral-950 dark:text-white transition-colors duration-300';
-
-const leftStyle = $derived(`font-family:${fontA?.name ?? ''};font-size:${fontSizePx}px`);
-const rightStyle = $derived(`font-family:${fontB?.name ?? ''};font-size:${fontSizePx}px`);
-
-/**
- * Stops the whole line from jumping up or down as the slider moves. The browser
- * pins a line box's baseline to its tallest inline box, so without a fixed
- * reference the baseline (and every glyph) shifts the moment a bulk run appears
- * or disappears, or the last window char morphs to a font with a taller ascent.
- * This invisible strut is always the tallest box — `overflow: hidden` puts its
- * baseline at its bottom edge — so it owns the line baseline and holds it still.
- * Its height also sets the text's vertical position (the container is block, so
- * nothing else centers it).
- *
- * Height factors are empirical: the first term centers the text, the `* 1.1`
- * floor keeps the strut above the fonts' ascent at tight line-heights.
- */
-const strutHeightPx = $derived(Math.max(lineHeightPx / 2 + fontSizePx * 0.34, fontSizePx * 1.1));
-const strutStyle = $derived(
-    `display:inline-block;width:0;overflow:hidden;vertical-align:baseline;height:${strutHeightPx}px`,
-);
+// Invisible strut that pins the line baseline so glyphs don't jump as the
+// slider moves; `computeStrutHeight` explains the why and the formula.
+const strutHeightPx = $derived(computeStrutHeight(lineHeightPx, fontSizePx));
 </script>
 
 <!--
@@ -91,15 +66,19 @@ const strutStyle = $derived(
         style:letter-spacing="{letterSpacingPx}px"
         style:font-weight={typography.weight}
     >
-        <span style={strutStyle} aria-hidden="true"></span>
+        <span
+            class="inline-block w-0 overflow-hidden align-baseline"
+            style:height="{strutHeightPx}px"
+            aria-hidden="true"
+        ></span>
         {#if model.leftText}
-            <span class={BULK_LEFT_CLASS} style={leftStyle}>{model.leftText}</span>
+            <SettledText text={model.leftText} fontFamily={fontA.name} fontSize={fontSizePx} side="left" />
         {/if}
         {#each model.windowChars as wc (wc.key)}
             <Character char={wc.char} {fontA} {fontB} isPast={wc.isPast} fontSize={fontSizePx} />
         {/each}
         {#if model.rightText}
-            <span class={BULK_RIGHT_CLASS} style={rightStyle}>{model.rightText}</span>
+            <SettledText text={model.rightText} fontFamily={fontB.name} fontSize={fontSizePx} side="right" />
         {/if}
     </div>
 {/if}
diff --git a/src/widgets/ComparisonView/ui/SettledText/SettledText.svelte b/src/widgets/ComparisonView/ui/SettledText/SettledText.svelte
new file mode 100644
index 0000000..750ce8b
--- /dev/null
+++ b/src/widgets/ComparisonView/ui/SettledText/SettledText.svelte
@@ -0,0 +1,37 @@
+<!--
+    Component: SettledText
+    One side's text settled in a single font — left is fontA the slider has
+    passed, right is fontB not yet reached. A native shaped run (kerning,
+    ligatures); the crossfading middle uses per-char Character cells instead.
+-->
+<script lang="ts">
+interface Props {
+    /**
+     * Run text.
+     */
+    text: string;
+    /**
+     * CSS font-family name.
+     */
+    fontFamily: string;
+    /**
+     * Font size in px.
+     */
+    fontSize: number;
+    /**
+     * Window side — selects the color treatment.
+     */
+    side: 'left' | 'right';
+}
+
+let { text, fontFamily, fontSize, side }: Props = $props();
+
+// Left (fontA, passed) is dimmed; right (fontB, pending) is full-strength.
+const SIDE_CLASS: Record<Props['side'], string> = {
+    left:
+        'inline-block align-baseline leading-none text-swiss-black/75 dark:text-brand/75 transition-colors duration-300',
+    right: 'inline-block align-baseline leading-none text-neutral-950 dark:text-white transition-colors duration-300',
+};
+</script>
+
+<span class={SIDE_CLASS[side]} style:font-family="'{fontFamily}'" style:font-size="{fontSize}px">{text}</span>
-- 
2.52.0