frontend-svelte/src/entities/Font/ui/FontListItem/FontListItem.svelte

<!--
    Component: FontListItem
    Displays a font item and manages its animations
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import type { Snippet } from 'svelte';
import { Spring } from 'svelte/motion';
import { type UnifiedFont } from '../../model';

interface Props {
    /**
     * Object with information about font
     */
    font: UnifiedFont;
    /**
     * Is element fully visible
     */
    isFullyVisible: boolean;
    /**
     * Is element partially visible
     */
    isPartiallyVisible: boolean;
    /**
     * From 0 to 1
     */
    proximity: number;
    /**
     * Children snippet
     */
    children: Snippet<[font: UnifiedFont]>;
}

const { font, isFullyVisible, isPartiallyVisible, proximity, children }: Props = $props();

let timeoutId = $state<NodeJS.Timeout | null>(null);

// Create a spring for smooth scale animation
const scale = new Spring(1, {
    stiffness: 0.3,
    damping: 0.7,
});

// Springs react to the virtualizer's computed state
const bloom = new Spring(0, {
    stiffness: 0.15,
    damping: 0.6,
});

// Sync spring to proximity for a "Lens" effect
$effect(() => {
    bloom.target = isPartiallyVisible ? 1 : 0;
});

$effect(() => {
    return () => {
        if (timeoutId) {
            clearTimeout(timeoutId);
        }
    };
});

function animateSelection() {
    scale.target = 0.98;

    timeoutId = setTimeout(() => {
        scale.target = 1;
    }, 150);
}
</script>

<div
    class={cn('pb-1 will-change-transform')}
    style:opacity={bloom.current}
    style:transform="
		scale({0.92 + (bloom.current * 0.08)})
		translateY({(1 - bloom.current) * 10}px)
	"
>
    {@render children?.(font)}
</div>