Anatomy

    <.marquee
  class="marquee"
  items={[
    %{name: "Apple", logo: "🍎"},
    %{name: "Banana", logo: "🍌"},
    %{name: "Cherry", logo: "🍒"}
  ]}
  duration={20}
  spacing="2rem"
  pause_on_interaction
>
  <:item :let={item}>
    <span>{item.logo}</span>
    <span>{item.name}</span>
  </:item>
</.marquee>

  

    <.marquee
  class="marquee"
  items={[
    %{name: "Home", icon: "hero-home"},
    %{name: "User", icon: "hero-user"},
    %{name: "Cog", icon: "hero-cog-6-tooth"}
  ]}
  duration={25}
  spacing="2rem"
  pause_on_interaction
>
  <:item :let={item}>
    <.heroicon name={item.icon} />
    <span>{item.name}</span>
  </:item>
</.marquee>

  

    <.marquee
  class="marquee"
  items={[
    %{name: "Elixir", img: "/images/tech/elixir.svg"},
    %{name: "Phoenix", img: "/images/tech/phoenix.svg"},
    %{name: "TypeScript", img: "/images/tech/typescript.svg"}
  ]}
  speed={50}
  spacing="3rem"
  pause_on_interaction
>
  <:item :let={item}>
    <img src={item.img} alt={item.name} class="h-8 w-auto opacity-90" />
  </:item>
</.marquee>