// generate fade animation keyframes
const keyframes = Array.from({ length: steps }, (_, i) => {
	return {
		opacity: currentOpacity + (opacityDifference * (i + 1)) / steps,
		time: (i + 1) / steps,
	};
});

const interval = setInterval(() => {
	const keyframe = keyframes.shift();
	if (keyframe) {
		opacity = keyframe.opacity;
	} else {
		clearInterval(interval);
	}
}, stepDuration);

// and use to run the animation

<Sprite
	width={hostWidth}
	height={hostHeight}
	{opacity}
	anchor={{ x: 0.5, y: 0.5 }}
	texture="/images/mountains.webp"
	x={hostWidth / 2}
	y={hostHeight / 2}
/>