src/widgets/ComparisonView/ui/Character/Character.svelte

@@ -3,7 +3,6 @@
     Renders a single character with morphing animation
 -->
 <script lang="ts">
-import { typographySettingsStore } from '$features/AdjustTypography';
 import { cn } from '$shared/lib';
 import { comparisonStore } from '../../model';
 
@@ -12,26 +11,21 @@ interface Props {
      * Character
      */
     char: string;
-    /**
-     * Proximity value
-     */
-    proximity: number;
     /**
      * Past state
      */
     isPast: boolean;
 }
 
-let { char, proximity, isPast }: Props = $props();
+let { char, isPast }: Props = $props();
 
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
-const typography = $derived(typographySettingsStore);
 
 let slot = $state<0 | 1>(0);
 let slotFonts = $state<[string, string]>(['', '']);
 
-const displayChar = $derived(char === ' ' ? '\u00A0' : char);
+const displayChar = $derived(char === ' ' ? ' ' : char);
 const targetFont = $derived(isPast ? fontA?.name ?? '' : fontB?.name ?? '');
 
 $effect(() => {
@@ -45,12 +39,7 @@ $effect(() => {
 </script>
 
 {#if fontA && fontB}
-    <span
-        class="char-wrap"
-        style:font-size="{typography.renderedSize}px"
-        style:margin-right="{typography.spacing}em"
-        style:will-change={proximity > 0 ? 'transform' : 'auto'}
-    >
+    <span class="char-wrap">
         {#each [0, 1] as s (s)}
             <span
                 class={cn(
@@ -61,7 +50,6 @@ $effect(() => {
                         : 'text-neutral-950 dark:text-white',
                 )}
                 style:font-family={slotFonts[s]}
-                style:font-weight={typography.weight}
                 style:opacity={slot === s ? '1' : '0'}
                 style:position={slot === s ? 'relative' : 'absolute'}
                 aria-hidden={slot !== s ? true : undefined}
@@ -89,7 +77,6 @@ $effect(() => {
     font-optical-sizing: auto;
     transition:
         opacity 0.1s ease-out,
-        color 0.2s ease-out,
-        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+        color 0.2s ease-out;
 }
 </style>

src/widgets/ComparisonView/ui/Line/Line.svelte

@@ -1,42 +1,46 @@
 <!--
     Component: Line
-    Renders a line of text in the SliderArea
+    Renders one laid-out line of comparison text as three regions:
+    a fontA bulk run (already past the slider), an N-char window of crossfade
+    slots straddling the slider, and a fontB bulk run (not yet past).
+    Bulk text is rendered as native shaped runs so the browser applies
+    kerning and ligatures; per-char DOM is reserved for the window only.
 -->
 <script lang="ts">
+import type { LineRenderModel } from '$entities/Font';
 import { typographySettingsStore } from '$features/AdjustTypography';
-import type { Snippet } from 'svelte';
-
-interface LineChar {
-    char: string;
-    xA: number;
-    widthA: number;
-    xB: number;
-    widthB: number;
-}
+import { comparisonStore } from '../../model';
+import Character from '../Character/Character.svelte';
 
 interface Props {
     /**
-     * Pre-computed grapheme array from CharacterComparisonEngine.
-     * Using the engine's chars array (rather than splitting line.text) ensures
-     * correct grapheme-cluster boundaries for emoji and multi-codepoint characters.
+     * Per-line render slice from computeLineRenderModel.
      */
-    chars: LineChar[];
-    /**
-     * Character render snippet
-     */
-    character: Snippet<[{ char: string; index: number }]>;
+    model: LineRenderModel;
 }
-const typography = $derived(typographySettingsStore);
 
-let { chars, character }: Props = $props();
+let { model }: Props = $props();
+
+const typography = $derived(typographySettingsStore);
+const fontA = $derived(comparisonStore.fontA);
+const fontB = $derived(comparisonStore.fontB);
 </script>
 
 <div
-    class="relative flex w-full justify-center items-center whitespace-nowrap"
+    class="relative flex w-full justify-center items-center whitespace-pre"
     style:height="{typography.height * typography.renderedSize}px"
     style:line-height="{typography.height * typography.renderedSize}px"
+    style:font-size="{typography.renderedSize}px"
+    style:letter-spacing="{typography.spacing}em"
+    style:font-weight={typography.weight}
 >
-    {#each chars as c, index}
-        {@render character?.({ char: c.char, index })}
+    {#if model.leftText}
+        <span style:font-family={fontA?.name}>{model.leftText}</span>
+    {/if}
+    {#each model.windowChars as wc (wc.key)}
+        <Character char={wc.char} isPast={wc.isPast} />
     {/each}
+    {#if model.rightText}
+        <span style:font-family={fontB?.name}>{model.rightText}</span>
+    {/if}
 </div>

src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte

@@ -9,10 +9,12 @@
 -->
 <script lang="ts">
 import {
-    CharacterComparisonEngine,
+    type ComparisonResult,
+    DualFontLayout,
     MULTIPLIER_L,
     MULTIPLIER_M,
     MULTIPLIER_S,
+    computeLineRenderModel,
 } from '$entities/Font';
 import { TypographyMenu } from '$features/AdjustTypography';
 import { typographySettingsStore } from '$features/AdjustTypography/model';
@@ -30,7 +32,6 @@ import {
     getPretextFontString,
 } from '../../lib';
 import { comparisonStore } from '../../model';
-import Character from '../Character/Character.svelte';
 import Line from '../Line/Line.svelte';
 import Thumb from '../Thumb/Thumb.svelte';
 
@@ -95,10 +96,15 @@ let isDragging = $state(false);
 let isTypographyMenuOpen = $state(false);
 let containerWidth = $state(0);
 
-// New high-performance layout engine
-const comparisonEngine = new CharacterComparisonEngine();
+const layout = new DualFontLayout();
 
-let layoutResult = $state<ReturnType<typeof comparisonEngine.layout>>({ lines: [], totalHeight: 0 });
+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(() => {
@@ -249,7 +255,7 @@ $effect(() => {
         if (cancelled) {
             return;
         }
-        layoutResult = comparisonEngine.layout(
+        layoutResult = layout.layout(
             _text,
             fontAStr,
             fontBStr,
@@ -328,17 +334,9 @@ $effect(() => {
                             my-auto
                         "
                     >
-                        {#each layoutResult.lines as line}
-                            {@const lineStates = comparisonEngine.getLineCharStates(line, sliderPos, containerWidth)}
-                            <Line chars={line.chars}>
-                                {#snippet character({ char, index })}
-                                    <Character
-                                        {char}
-                                        proximity={lineStates[index]?.proximity ?? 0}
-                                        isPast={lineStates[index]?.isPast ?? false}
-                                    />
-                                {/snippet}
-                            </Line>
+                        {#each layoutResult.lines as line, lineIdx (lineIdx)}
+                            {@const model = computeLineRenderModel(line, sliderPos, containerWidth, WINDOW_SIZE)}
+                            <Line {model} />
                         {/each}
                     </div>