Showcase

Logo Carousel

Grid of logos that cycles through items with a blurred vertical swap animation. Framework-agnostic Custom Element.

lit
gsap

Preview

Logos cycle through each column at a staggered interval with blur and slide transitions.

Installation

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/logo-carousel.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/logo-carousel.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/logo-carousel.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/logo-carousel.json

Usage

---
import "@/components/motion-kit/logo-carousel-element.ts";
---

<motion-logo-carousel
  logos='[{"src":"/logos/a.svg","alt":"A"},{"src":"/logos/b.svg","alt":"B"}]'
  columns="3"
  cycle-interval="2000"
></motion-logo-carousel>

import "@/components/motion-kit/logo-carousel-element.ts";

export default function Page() {
  return (
    <motion-logo-carousel
      logos='[{"src":"/logos/a.svg","alt":"A"},{"src":"/logos/b.svg","alt":"B"}]'
      columns="3"
      cycle-interval="2000"
    />
  );
}

<script setup>
import "@/components/motion-kit/logo-carousel-element.ts";
</script>

<template>
  <motion-logo-carousel
    :logos='JSON.stringify([{"src":"/logos/a.svg","alt":"A"},{"src":"/logos/b.svg","alt":"B"}])'
    columns="3"
    cycle-interval="2000"
  />
</template>

<script>
  import "@/components/motion-kit/logo-carousel-element.ts";
</script>

<motion-logo-carousel
  logos='[{"src":"/logos/a.svg","alt":"A"},{"src":"/logos/b.svg","alt":"B"}]'
  columns="3"
  cycle-interval="2000"
/>

<script type="module" src="/components/motion-kit/logo-carousel-element.js"></script>

<motion-logo-carousel
  logos='[{"src":"/logos/a.svg","alt":"A"},{"src":"/logos/b.svg","alt":"B"}]'
  columns="3"
  cycle-interval="2000"
></motion-logo-carousel>

API Reference

Attribute	Type	Default
`logos`	`string`	`"[]"`
`columns`	`number`	`2`
`cycle-interval`	`number`	`2000`