Animated List

npx shadcn-svelte@latest add https://acme.com/r/animated-list

<script lang="ts">
  import { AnimatedList } from "magic/animated-list";

  const items = [
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Item 3" }
  ];
</script>

<AnimatedList {items}>
  {#snippet children(item, index)}
    <div class="p-4 bg-white rounded-lg shadow">
      {item.name}
    </div>
  {/snippet}
</AnimatedList>

<script lang="ts">
  import { AnimatedList } from "magic/animated-list";

  const notifications = [
    { id: 1, name: "New message", time: "2m ago" },
    { id: 2, name: "Update available", time: "5m ago" },
    { id: 3, name: "Task completed", time: "10m ago" }
  ];
</script>

<AnimatedList items={notifications} delay={1000}>
  {#snippet children(item)}
    <div class="flex items-center gap-3 p-4 bg-white rounded-lg">
      <div class="flex-1">
        <p class="font-medium">{item.name}</p>
        <p class="text-sm text-gray-500">{item.time}</p>
      </div>
    </div>
  {/snippet}
</AnimatedList>

<AnimatedList items={items} delay={500}>
  {#snippet children(item)}
    <div>{item.name}</div>
  {/snippet}
</AnimatedList>