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}