PitchHut
Log in / Sign up
divz
7 views
Elevate your content with 3D scrolling, swiping, and zooming.
Pitch

DIVZ is a powerful React component that transforms how you present your portfolio, media, or products in an immersive 3D environment. With intuitive scroll, swipe, and zoom mechanics, users can navigate your content effortlessly. Dive into our demos to experience a unique showcase that captivates and engages.

Description

Divz is a dynamic React UI component designed to elevate your web experience by allowing users to scroll, swipe, and zoom through HTML elements on the 3D z-axis. Perfect for showcasing portfolios, media, or product displays, Divz transforms standard content into an engaging pseudo-3D environment. Inspired by Apple's Time Machine interface, this innovative component not only enhances visual interaction but also provides a unique way to navigate through content effortlessly.

Key Features:

  • Seamless Integration: Easily incorporate Divz into your project by wrapping it around your HTML elements for an instant 3D showcase.
  • Versatile Usage: Whether you need a carousel, slideshow, or gallery, Divz adapts to various applications, making it a valuable addition to any web project.
  • Multiple Navigation Modes: Supports touch interactions for mobile devices, cursor/trackpad navigation for desktops, and arrow key controls for TVs, promoting broad accessibility.

Example Usage:

To get started, simply import Divz into your React app:

import { Divz } from "divz";

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

Advanced Capabilities:

Enhance user experiences further with features like autoplay, dark mode, and deeper customizations:

<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>

Explore the Demos:

For an interactive experience and to see Divz in action, check out the live demos: Divz Demos

Why Choose Divz? Divz is not just a component; it's an innovative way to present content that keeps users engaged. With its responsive design and flexibility, it offers an array of functionalities tailored to enhance your website's visual narrative. Elevate your projects by incorporating Divz today!