Motion Blocks

Showcase

Infinite Gallery

A 3D gallery that endlessly scrolls through textured planes with cloth-like distortion and scroll-driven transitions.

  • lit Preview of https://lit.devLitSimple. Fast. Web Components.
  • ogl Preview of https://github.com/oframe/oglOGLMinimal WebGL framework.

Preview

Scroll or press the arrow keys to drive the tunnel. Planes wrap infinitely and blend fade/blur by depth.
Attributes

Installation 

pnpm dlx motion-blocks add infinite-gallery

Usage 

---import "@/components/motion-blocks/infinite-gallery-element.ts";--- <motion-infinite-gallery  images='[{"src":"/1.jpg","alt":"One"},{"src":"/2.jpg","alt":"Two"}]'  speed="1"  visible-count="8"  class="h-[600px] w-full"></motion-infinite-gallery>

API Reference

Attribute Type Default
images JSON-serialized array of image URLs or objects with src and optional alt properties. string []
speed Scroll speed multiplier. number 1
visible-count Number of image planes visible at once. number 8
fade-settings Fade transition zones (normalized 0-1). object {fadeIn:{start:0.01,end:0.25},fadeOut:{start:0.43,end:0.46}}
blur-settings Blur transition zones and maximum blur amount. object {blurIn:{start:0,end:0.2},blurOut:{start:0.43,end:0.46},maxBlur:8}