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();

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>