Card Stack

npm i svelte-motion clsx tailwind-merge

import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
        
export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}

<script lang="ts">
	import { onMount } from 'svelte';
	import { Motion } from 'svelte-motion';

	type Card = {
		id: number;
		name: string;
		designation: string;
		content: string;
	};

	export let items: Card[];
	export let offset: number | undefined = undefined;
	export let scaleFactor: number | undefined = undefined;

	let interval: any;
	const CARD_OFFSET = offset || 16;
	const SCALE_FACTOR = scaleFactor || 0.06;
	let cards: Card[] = items;

	onMount(() => {
		startFlipping();
	});

	const startFlipping = () => {
		interval = setInterval(() => {
			const newArray = [...cards]; // create a copy of the array
			newArray.unshift(newArray.pop()!); // move the last element to the front
			cards = newArray;
		}, 5000);

		return () => clearInterval(interval);
	};
</script>

<div class="relative h-60 w-60 md:h-60 md:w-96">
	{#each cards as card, index (card.id)}
		<Motion
			let:motion
			style={{
				transformOrigin: 'top center'
			}}
			animate={{
				top: index * -CARD_OFFSET,
				scale: 1 - index * SCALE_FACTOR, // decrease scale for cards that are behind
				zIndex: cards.length - index //  decrease z-index for the cards that are behind
			}}
		>
			<div
				use:motion
				class="absolute flex h-60 w-60 flex-col justify-between rounded-3xl border border-neutral-200 bg-white p-4 shadow-xl shadow-black/[0.1] dark:border-white/[0.1] dark:bg-black dark:shadow-white/[0.05] md:h-60 md:w-96"
			>
				<div class="font-normal text-neutral-700 dark:text-neutral-200">
					{@html card.content}
				</div>
				<div>
					<p class="font-medium text-neutral-500 dark:text-white">
						{card.name}
					</p>
					<p class="font-normal text-neutral-400 dark:text-neutral-200">
						{card.designation}
					</p>
				</div>
			</div>
		</Motion>
	{/each}
</div>

<style>
	.highlight {
		@apply bg-emerald-100 px-1 py-0.5 font-bold text-emerald-700 dark:bg-emerald-700/[0.2] dark:text-emerald-500;
	}
</style>

import CardStack from './CardStack.svelte';

export { CardStack };