From ac979c816c0ab0f789c32dcde04c8e58007f54a6 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 22 Jan 2026 15:37:49 +0300
Subject: [PATCH] feat(FontComparer): add apperance animation for
 ComparisonSlider

---
 .../ui/FontComparer/FontComparer.svelte          | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/features/DisplayFont/ui/FontComparer/FontComparer.svelte b/src/features/DisplayFont/ui/FontComparer/FontComparer.svelte
index 198b90e..c900146 100644
--- a/src/features/DisplayFont/ui/FontComparer/FontComparer.svelte
+++ b/src/features/DisplayFont/ui/FontComparer/FontComparer.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 import { appliedFontsManager } from '$entities/Font';
 import { controlManager } from '$features/SetupFont';
-import { Input } from '$shared/shadcn/ui/input';
 import { ComparisonSlider } from '$widgets/ComparisonSlider/ui';
+import { cubicOut } from 'svelte/easing';
+import { fly } from 'svelte/transition';
 import { displayedFontsStore } from '../../model';
 import PairSelector from '../PairSelector/PairSelector.svelte';
 
@@ -20,16 +21,17 @@ $effect(() => {
 {#if hasAnyPairs}
     <div class="flex flex-col gap-4">
         <div class="flex flex-row gap-4">
-            <Input bind:value={displayedText} />
             <PairSelector />
         </div>
 
         {#if fontA && fontB}
-            <ComparisonSlider
-                fontA={fontA}
-                fontB={fontB}
-                bind:text={displayedText}
-            />
+            <div in:fly={{ y: 0, x: -50, duration: 300, easing: cubicOut, opacity: 0.2 }}>
+                <ComparisonSlider
+                    fontA={fontA}
+                    fontB={fontB}
+                    bind:text={displayedText}
+                />
+            </div>
         {/if}
     </div>
 {/if}