Showcase

Infinite Physics Gallery

Infinite 2-D draggable grid with physics-based momentum, edge scrolling, and support for mixed image/video cells. Framework-agnostic Custom Element.

lit
gsap

Preview

Drag or scroll to explore the infinite grid. The edge of the viewport pulls the gallery toward it when idle.

Installation

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

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

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

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

Usage

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

<motion-infinite-physics-gallery
  items='[{"type":"image","src":"/1.jpg"},{"type":"image","src":"/2.jpg"}]'
  cell-width="320"
  cell-height="400"
  class="h-[480px] w-full rounded-2xl overflow-hidden"
></motion-infinite-physics-gallery>

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

export default function Page() {
  return (
    <motion-infinite-physics-gallery
      items='[{"type":"image","src":"/1.jpg"},{"type":"image","src":"/2.jpg"}]'
      cell-width="320"
      cell-height="400"
      class="h-[480px] w-full rounded-2xl overflow-hidden"
    />
  );
}

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

<template>
  <motion-infinite-physics-gallery
    :items='JSON.stringify([{"type":"image","src":"/1.jpg"},{"type":"image","src":"/2.jpg"}])'
    cell-width="320"
    cell-height="400"
    class="h-[480px] w-full rounded-2xl overflow-hidden"
  />
</template>

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

<motion-infinite-physics-gallery
  items='[{"type":"image","src":"/1.jpg"},{"type":"image","src":"/2.jpg"}]'
  cell-width="320"
  cell-height="400"
  class="h-[480px] w-full rounded-2xl overflow-hidden"
/>

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

<motion-infinite-physics-gallery
  items='[{"type":"image","src":"/1.jpg"},{"type":"image","src":"/2.jpg"}]'
  cell-width="320"
  cell-height="400"
  class="h-[480px] w-full rounded-2xl overflow-hidden"
></motion-infinite-physics-gallery>

API Reference

Attribute	Type	Default
`items`	`string`	`"[]"`
`cell-width`	`number`	`320`
`cell-height`	`number`	`400`
`gap`	`number`	`24`
`friction`	`number`	`0.95`
`wheel-speed`	`number`	`2`
`edge-threshold`	`number`	`100`
`edge-scroll-speed`	`number`	`2`