Radial Gallery

Installation

Install the component

Run the following command to install the component and its dependencies:

npx @motion-core/cli add radial-gallery

Import the component

Import the component into your Svelte file:

import { RadialGallery } from "$lib/motion-core";

import { RadialGallery } from "$lib/motion-core";

Usage

Motion Core

Item 0

Motion Core

Item 1

Motion Core

Item 2

Motion Core

Item 3

Motion Core

Item 4

Motion Core

Item 5

Motion Core

Item 6

Motion Core

Item 7

Motion Core

Item 8

Motion Core

Item 9

Motion Core

Item 10

Motion Core

Item 11

Motion Core

Item 12

Motion Core

Item 13

Motion Core

Item 14

Motion Core

Item 15

Motion Core

Item 16

Motion Core

Item 17

Motion Core

Item 18

Motion Core

Item 19

Motion Core

Item 20

Motion Core

Item 21

Motion Core

Item 22

Motion Core

Item 23

<script lang="ts">
	import { RadialGallery } from "motion-core";

	const images = [
		"/images/demos/sample-1.jpg",
		"/images/demos/sample-2.jpg",
		"/images/demos/sample-3.jpg",
		"/images/demos/sample-4.jpg",
		"/images/demos/sample-5.jpg",
		"/images/demos/sample-6.jpg",
		"/images/demos/sample-7.jpg",
		"/images/demos/sample-8.jpg",
	];
</script>

<RadialGallery
	class="h-full min-h-96 w-full"
	items={images}
	radius={850}
	duration={70}
	offset={-600}
	gap={100}
	elementSize={160}
>
	{#snippet children(item, i)}
		<div
			class="h-56 w-40 rounded-xl border border-border bg-background p-1 shadow-sm"
		>
			<div
				class="relative h-44 w-full overflow-hidden rounded-lg border border-border/60 bg-card-muted"
			>
				<img src={item} class="h-full w-full object-cover" alt="Gallery item" />
			</div>
			<div class="flex h-12 w-full items-center justify-between px-2">
				<p class="text-xs font-medium text-foreground font-display">
					Motion Core
				</p>
				<p class="text-[10px] text-foreground/45">
					Item {i}
				</p>
			</div>
		</div>
	{/snippet}
</RadialGallery>

Props

RadialGallery

Prop	Type	Default
`items`	`T[]`	`—`
`children`	`Snippet<[T, number]>`	`—`
`radius`	`number`	`600`
`duration`	`number`	`20`
`reversed`	`boolean`	`false`
`offset`	`number`	`0`
`gap`	`number`	`0`
`elementSize`	`number`	`100`
`class`	`string`	`—`