<script lang="ts">
	const imported = import.meta.glob('$lib/assets/img/blinkies/*.gif', { eager: true });
	let blinkies: Array<string> = [];
	for (const img in imported) {
		blinkies.push(img);
	}
</script>

<div class="holder noselect">
	<div class="marquee">
		{#each blinkies as blinkie}
			<img src={blinkie} alt="" />
		{/each}
		{#each blinkies as blinkie}
			<img src={blinkie} alt="" />
		{/each}
	</div>
</div>

<style>
	img {
		width: 150px;
		height: 20px;
	}
    .holder {
		font-family: none;
		width: 800px;
		margin: 1em auto;
        overflow: hidden;
		height: 20px;
    }
	.marquee {
		display: inline-flex;
		gap: 5px;

		animation: marquee 120s linear infinite;
	}
	@keyframes marquee {
		0% {
			transform: translateZ(0);
		}
		to {
			transform: translate3d(-50%, 0, 0);
		}
	}
</style>
