diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.stories.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.stories.svelte
index 78b671a..e46e755 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.stories.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.stories.svelte
@@ -124,17 +124,6 @@ const mockCourier: UnifiedFont = {
     </Providers>
 </Story>
 
-<Story name="Serif vs Sans-Serif">
-    {@const _ = (comparisonStore.fontA = mockCourier, comparisonStore.fontB = mockVerdana)}
-    <Providers>
-        <div class="min-h-screen flex items-center justify-center p-8">
-            <div class="w-full max-w-5xl">
-                <ComparisonSlider />
-            </div>
-        </div>
-    </Providers>
-</Story>
-
 <Story name="Loading State">
     {@const _ = (comparisonStore.fontA = undefined, comparisonStore.fontB = undefined)}
     <Providers>
@@ -145,73 +134,3 @@ const mockCourier: UnifiedFont = {
         </div>
     </Providers>
 </Story>
-
-<Story name="With Custom Text">
-    {@const _ = (
-    comparisonStore.fontA = mockArial,
-        comparisonStore.fontB = mockVerdana,
-        comparisonStore.text = 'Typography is the art and technique of arranging type.'
-)}
-    <Providers>
-        <div class="min-h-screen flex items-center justify-center p-8">
-            <div class="w-full max-w-5xl">
-                <ComparisonSlider />
-            </div>
-        </div>
-    </Providers>
-</Story>
-
-<Story name="Short Text">
-    {@const _ = (comparisonStore.fontA = mockGeorgia, comparisonStore.fontB = mockCourier, comparisonStore.text = 'Hello')}
-    <Providers>
-        <div class="min-h-screen flex items-center justify-center p-8">
-            <div class="w-full max-w-5xl">
-                <ComparisonSlider />
-            </div>
-        </div>
-    </Providers>
-</Story>
-
-<Story name="Multiline Text">
-    {@const _ = (
-    comparisonStore.fontA = mockArial,
-        comparisonStore.fontB = mockGeorgia,
-        comparisonStore.text =
-            'The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump!'
-)}
-    <Providers>
-        <div class="min-h-screen flex items-center justify-center p-8">
-            <div class="w-full max-w-5xl">
-                <ComparisonSlider />
-            </div>
-        </div>
-    </Providers>
-</Story>
-
-<Story name="Settings Mode">
-    {@const _ = (comparisonStore.fontA = mockVerdana, comparisonStore.fontB = mockArial)}
-    <Providers>
-        <div class="min-h-screen flex items-center justify-center p-8">
-            <div class="w-full max-w-5xl">
-                <div class="mb-8 text-center">
-                    <p class="text-text-muted">Click the settings icon to toggle settings mode</p>
-                </div>
-                <ComparisonSlider />
-            </div>
-        </div>
-    </Providers>
-</Story>
-
-<Story name="Responsive Container">
-    {@const _ = (comparisonStore.fontA = mockGeorgia, comparisonStore.fontB = mockVerdana)}
-    <Providers>
-        <div class="min-h-screen flex items-center justify-center p-8">
-            <div class="w-full">
-                <div class="mb-8 text-center">
-                    <p class="text-text-muted">Resize the browser to see responsive behavior</p>
-                </div>
-                <ComparisonSlider />
-            </div>
-        </div>
-    </Providers>
-</Story>
diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/FontShifter.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/FontShifter.svelte
deleted file mode 100644
index 03135fd..0000000
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/FontShifter.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
-
-interface Props {
-    text: string;
-    fontName: string;
-    isAnimating: boolean;
-    onAnimationComplete?: () => void;
-}
-
-let { text, fontName, isAnimating, onAnimationComplete }: Props = $props();
-
-// Split text into characters, preserving spaces
-const chars = $derived(text.split('').map(c => c === ' ' ? '\u00A0' : c));
-
-let completedCount = 0;
-
-function handleTransitionEnd() {
-    completedCount++;
-    if (completedCount === chars.length) {
-        onAnimationComplete?.();
-        completedCount = 0;
-    }
-}
-</script>
-
-<div class="relative inline-flex flex-wrap leading-tight">
-    {#each chars as char, i}
-        <span
-            class={cn(
-                'inline-block transition-all duration-500 ease-[cubic-bezier(0.34,1.56,0.64,1)]',
-                isAnimating ? 'opacity-0 -translate-y-4 rotate-x-90' : 'opacity-100 translate-y-0 rotate-x-0',
-            )}
-            style:font-family={fontName}
-            style:transition-delay="{i * 25}ms"
-            ontransitionend={i === chars.length - 1 ? handleTransitionEnd : null}
-        >
-            {char}
-        </span>
-    {/each}
-</div>
-
-<style>
-/* Necessary for the "Flip" feel */
-div {
-	perspective: 1000px;
-}
-span {
-	transform-style: preserve-3d;
-	backface-visibility: hidden;
-}
-</style>