Skip to main content
A curved, scrollable 3D gallery with dynamic image cards and animated text rendered using WebGL and OGL.

​
Installation

npm install ogl

​
Usage

<script setup lang="ts">
import { BendingGallery } from '@/components/visualization'

const items = [
  { image: '/image1.jpg', text: 'Image 1' },
  { image: '/image2.jpg', text: 'Image 2' },
  { image: '/image3.jpg', text: 'Image 3' },
]
</script>

<template>
  <BendingGallery :items="items" />
</template>

​
Props

Prop NameTypeDefaultDescription
items{ image: string; text: string }[][]Array of objects containing image URLs and accompanying text.
bendnumber3Controls the curvature of the gallery. Higher values bend more.
textColorstring"#ffffff"Color of the text displayed below each image.
borderRadiusnumber0.05Rounded corners for image cards (in UV space).
fontstring"bold 30px DM Sans"Font used for the text below each image.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us