Kinetic UI
Back to Introduction
creative

Cube Image Gallery

An interactive 3D cube gallery that users can drag to rotate and click to expand using WebGL.

Quick Actions
CLI Installation
npx kinetic-ui-cli@latest add cube-image-gallery
cube-image-gallery-demo

Installation

npx kinetic-ui-cli add cube-image-gallery

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { CubeImageGallery } from "@/components/creative/cube-image-gallery";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { CubeImageGallery } from "@/components/creative/cube-image-gallery";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <CubeImageGallery
        images="example"
      />
    </div>
  );
}
Performance Notes
  • Uses CSS hardware acceleration via GPU transform-binds.
  • Damped interpolation minimizes paint-redraw flashes.
  • Tree-shakable import: only compiles elements requested.
Accessibility Notes
  • Full keyboard focus-ring navigation support (`Tab`/`Shift+Tab`).
  • ARIA roles mapped correctly for assistive screen readers.
  • Respects `prefers-reduced-motion` system toggles.