Showcase

Logo Carousel

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

Preview

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

Installation

pnpm dlx motion-blocks add logo-carousel

npx motion-blocks add logo-carousel

bunx --bun motion-blocks add logo-carousel

yarn dlx motion-blocks add logo-carousel

Usage

---import "@/components/motion-blocks/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-blocks/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-blocks/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-blocks/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-blocks/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`