A React UI component that lets you scroll, swipe & zoom through HTML elements on the 3D z-axis

Click above to try out the demos

npm install divz

Import the component and render it in your app or page, wrapping it around your list of divs or other HTML elements:

import { Divz } from "divz";

function App() {
  return (
    <Divz>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </Divz>
  );
}

https://lewhunt.github.io/divz

The demos illustrate how the component can be initialised with more props - along with images and videos inside the child divs - for a richer user experience. Demo 3 goes even further and uses a custom video component with preview images, optimised to only play video when the current item is the selected index (active):

<Divz
  autoPlay={true}
  autoPlayDuration={7000}
  isDarkMode={true}
  onIndexChange={(i) => setSelectedIndex(i)}
>
  {demo3Assets.map((item, index) => (
    <DivzVideoItem
      key={index}
      index={index}
      selectedIndex={selectedIndex}
      previewImage={item.image}
      videoSource={item.video}
    ></DivzVideoItem>
  ))}
</Divz>

Here's a quick video of Demo 2, utilising dark mode, images and basic video elements:

Divz was created to quickly showcase portfolio work within a pseudo-3D environment, loosely inspired by Apple's Time Machine interface which allows the user to zoom through historical Finder windows:

Apple's Time Machine was the inspiration for Divz

• Simplified Integration: Divz is designed to be responsive and easy to use, acting as a straightforward wrapper around a list of divs or other HTML elements.
• Diverse Applications: While the demos showcase its versatility as a carousel, slideshow, or gallery component, Divz opens the door to a range of other potential uses. Consider it an innovative, experimental method for navigating web content.
• Broad Device Support: Divz accommodates various navigation modes, including touch for mobile devices, cursor/trackpad for desktop users, and arrow keys for TV devices.

Under the hood, Divz performs CSS3 transforms on the core component and the child HTML elements, set dynamically with React TypeScript. The component is packaged using Vite to allow npm library integration.

Sample media used in the demos are from various open source projects:

• Demo 2 & 3 images and videos are from Pixabay and Runway
• Demo 4 images are generated in Midjourney by Manoela Ilic

I hope this has given a good intro to the component and you get some use out of it for your own projects!

💬 Fire over a comment if you have any feedback, requests or issues 🐛

⭐ Give it a star if you like the component or want to bookmark it 🙏