feat(CharacterSlot): remove touch from characters
This commit is contained in:
@@ -3,8 +3,6 @@
|
||||
Renders a character with particular styling based on proximity, isPast, weight, fontAName, and fontBName.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { appliedFontsManager } from '$entities/Font';
|
||||
import { getFontUrl } from '$entities/Font/lib';
|
||||
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||||
import { comparisonStore } from '../../../model';
|
||||
|
||||
@@ -28,33 +26,6 @@ let { char, proximity, isPast }: Props = $props();
|
||||
const fontA = $derived(comparisonStore.fontA);
|
||||
const fontB = $derived(comparisonStore.fontB);
|
||||
const typography = $derived(comparisonStore.typography);
|
||||
|
||||
$effect(() => {
|
||||
if (!fontA || !fontB) {
|
||||
return;
|
||||
}
|
||||
|
||||
const urlA = getFontUrl(fontA, typography.weight);
|
||||
const urlB = getFontUrl(fontB, typography.weight);
|
||||
|
||||
if (!urlA || !urlB) {
|
||||
return;
|
||||
}
|
||||
|
||||
appliedFontsManager.touch([{
|
||||
id: fontA.id,
|
||||
weight: typography.weight,
|
||||
name: fontA.name,
|
||||
url: urlA,
|
||||
isVariable: fontA.features.isVariable,
|
||||
}, {
|
||||
id: fontB.id,
|
||||
weight: typography.weight,
|
||||
name: fontB.name,
|
||||
url: urlB,
|
||||
isVariable: fontB.features.isVariable,
|
||||
}]);
|
||||
});
|
||||
</script>
|
||||
|
||||
{#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)
|
||||
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'}
|
||||
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}
|
||||
</span>
|
||||
@@ -84,7 +60,7 @@ span {
|
||||
/*
|
||||
Optimize for performance and smooth transitions.
|
||||
step-end logic is effectively handled by binary font switching in JS.
|
||||
*/
|
||||
*/
|
||||
transition:
|
||||
font-family 0.15s ease-out,
|
||||
color 0.2s ease-out,
|
||||
|
||||
Reference in New Issue
Block a user