diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/CharacterSlot.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/CharacterSlot.svelte index 3f174f1..3c6ce24 100644 --- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/CharacterSlot.svelte +++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/CharacterSlot.svelte @@ -3,8 +3,6 @@ Renders a character with particular styling based on proximity, isPast, weight, fontAName, and fontBName. --> {#if fontA && fontB} @@ -67,13 +38,18 @@ $effect(() => { style:font-weight={typography.weight} style:font-size={`${typography.renderedSize}px`} style:transform=" - scale({1 + proximity * 0.3}) - translateY({-proximity * 12}px) - rotateY({proximity * 25 * (isPast ? -1 : 1)}deg) - " - style:filter="brightness({1 + proximity * 0.2}) contrast({1 + proximity * 0.1})" - style:text-shadow={proximity > 0.5 ? '0 0 15px rgba(99,102,241,0.3)' : 'none'} - style:will-change={proximity > 0 ? 'transform, font-family, color' : 'auto'} + scale({1 + proximity * 0.3}) translateY({-proximity * 12}px) rotateY({proximity * + 25 * + (isPast ? -1 : 1)}deg) + " + style:filter="brightness({1 + proximity * 0.2}) contrast({1 + + proximity * 0.1})" + style:text-shadow={proximity > 0.5 + ? '0 0 15px rgba(99,102,241,0.3)' + : 'none'} + style:will-change={proximity > 0 + ? 'transform, font-family, color' + : 'auto'} > {char === ' ' ? '\u00A0' : char} @@ -82,9 +58,9 @@ $effect(() => {