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