From 5d8869b3f2d2888e691142bf89872168a4296071 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 9 Feb 2026 16:47:19 +0300
Subject: [PATCH] fix(ComparisonSlider): remove blur inside the sliders line
 and add gpu acceleration. imrove animation duration

---
 .../ComparisonSlider/components/SliderLine.svelte | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
index 99c79e0..84a71f2 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
@@ -18,8 +18,15 @@ interface Props {
 let { sliderPos, isDragging }: Props = $props();
 </script>
 <div
-    class="absolute inset-y-2 sm:inset-y-4 pointer-events-none -translate-x-1/2 z-50 transition-all duration-300 ease-out flex flex-col justify-center items-center"
+    class={cn(
+        'absolute inset-y-2 sm:inset-y-4 pointer-events-none -translate-x-1/2 z-50 flex flex-col justify-center items-center',
+        // Force GPU layer with translateZ
+        'translate-z-0',
+        // Only transition left when NOT dragging
+        isDragging ? '' : 'transition-[left] duration-300 ease-out',
+    )}
     style:left="{sliderPos}%"
+    style:will-change={isDragging ? 'left' : 'auto'}
 >
     <!-- We use part of lucide cursor svg icon as a handle -->
     <svg
@@ -40,13 +47,13 @@ let { sliderPos, isDragging }: Props = $props();
 
     <div
         class={cn(
-            'relative h-full rounded-sm transition-all duration-500',
-            'bg-white/3 backdrop-blur-md',
+            'relative h-full rounded-sm transition-all duration-300',
+            'bg-white/3 ',
             // These are the visible "edges" of the glass
             'shadow-[0_0_40px_rgba(0,0,0,0.1)_inset_0_0_20px_rgba(255,255,255,0.1)]',
             'shadow-[0_10px_30px_-10px_rgba(0,0,0,0.2),inset_0_1px_1px_rgba(255,255,255,0.4)]',
             'rounded-full',
-            isDragging ? 'w-16 sm:w-32' : 'w-12 sm:w-16',
+            isDragging ? 'w-16 sm:w-24' : 'w-12 sm:w-16',
         )}
     >
     </div>