Showcase

Radial Gallery

Circular rotating image gallery. Items are evenly spaced around a ring that spins continuously. Framework-agnostic Custom Element.

lit
gsap

Preview

Images orbit along a circular ring. Set offset to peek it from below the fold.

Installation

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

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

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

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

Usage

---
import "@/components/motion-kit/radial-gallery-element.ts";
---

<motion-radial-gallery
  items='[{"src":"/img/1.jpg"},{"src":"/img/2.jpg"}]'
  radius="480"
  duration="24"
  element-size="160"
  class="h-[360px] w-full overflow-hidden"
></motion-radial-gallery>

import "`@/components/motion-kit/radial-gallery-element.ts`";

export default function Page() {
  return (
    <motion-radial-gallery
      items='[{"src":"/img/1.jpg"},{"src":"/img/2.jpg"}]'
      radius="480"
      duration="24"
      element-size="160"
      className="h-[360px] w-full overflow-hidden"
    />
  );
}

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

<template>
  <motion-radial-gallery
    :items='JSON.stringify([{"src":"/img/1.jpg"},{"src":"/img/2.jpg"}])'
    radius="480"
    duration="24"
    element-size="160"
    class="h-[360px] w-full overflow-hidden"
  />
</template>

<script>
  import "@/components/motion-kit/radial-gallery-element.ts";
</script>

<motion-radial-gallery
  items='[{"src":"/img/1.jpg"},{"src":"/img/2.jpg"}]'
  radius="480"
  duration="24"
  element-size="160"
  class="h-[360px] w-full overflow-hidden"
/>

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

<motion-radial-gallery
  items='[{"src":"/img/1.jpg"},{"src":"/img/2.jpg"}]'
  radius="480"
  duration="24"
  element-size="160"
  class="h-[360px] w-full overflow-hidden"
></motion-radial-gallery>

API Reference

Attribute	Type	Default
`items`	`string`	`"[]"`
`radius`	`number`	`600`
`duration`	`number`	`20`
`reversed`	`boolean`	`false`
`offset`	`number`	`0`
`gap`	`number`	`0`
`element-size`	`number`	`100`