{"id":13880642,"url":"https://github.com/lewhunt/divz","last_synced_at":"2025-05-16T15:03:38.648Z","repository":{"id":236538073,"uuid":"783350132","full_name":"lewhunt/divz","owner":"lewhunt","description":"A 3D slider component that lets you scroll, swipe and zoom through content on the z-axis. Ideal to showcase your portfolio, media or products. Try out the demos here: https://lewhunt.github.io/divz/","archived":false,"fork":false,"pushed_at":"2024-11-25T18:17:45.000Z","size":22525,"stargazers_count":206,"open_issues_count":0,"forks_count":10,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T15:08:16.018Z","etag":null,"topics":["3d","3d-slider","carousel","component","css3","custom-cards","deck","experimental","gallery","navigation","popup","presentations","react","showcase","slider","slideshow","swipe","ui-design","vertical-slider","zoom"],"latest_commit_sha":null,"homepage":"https://lewhunt.github.io/divz/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lewhunt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-07T16:44:05.000Z","updated_at":"2025-03-31T17:45:58.000Z","dependencies_parsed_at":"2024-05-13T17:54:00.865Z","dependency_job_id":null,"html_url":"https://github.com/lewhunt/divz","commit_stats":null,"previous_names":["lewhunt/divz"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lewhunt%2Fdivz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lewhunt%2Fdivz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lewhunt%2Fdivz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lewhunt%2Fdivz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lewhunt","download_url":"https://codeload.github.com/lewhunt/divz/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586244,"owners_count":21128995,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","3d-slider","carousel","component","css3","custom-cards","deck","experimental","gallery","navigation","popup","presentations","react","showcase","slider","slideshow","swipe","ui-design","vertical-slider","zoom"],"created_at":"2024-08-06T08:03:20.702Z","updated_at":"2025-04-12T14:55:49.422Z","avatar_url":"https://github.com/lewhunt.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch1 align='center'\u003e\n  Divz\n\u003c/h1\u003e\n\u003cp align='center'\u003e\n  \u003ca href='https://www.npmjs.com/package/divz'\u003e\n    \u003cimg src='https://img.shields.io/npm/v/divz.svg' alt='Latest npm version'\u003e\n  \u003c/a\u003e\n    \u003ca href='https://github.com/lewhunt/divz/blob/main/LICENSE'\u003e\n    \u003cimg src='https://img.shields.io/badge/License-MIT-yellow.svg' alt='MIT License'\u003e\n  \u003c/a\u003e\n    \u003ca href='https://www.npmjs.com/package/divz'\u003e\n    \u003cimg src='https://img.shields.io/npm/dm/divz.svg' alt='Monthly npm downloads'\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\u003ci\u003e\u003csmall\u003e\nA React UI component that lets you scroll, swipe \u0026 zoom through HTML elements on the 3D z-axis\u003c/small\u003e\u003c/i\u003e\u003c/p\u003e\n\n\u003cp dir=\"auto\" align='center'\u003e\u003ca href=\"https://lewhunt.github.io/divz/\" rel=\"nofollow\"\u003e\u003cimg  align='center' src=\"https://lewhunt.github.io/assets/readme/divz-demo1.gif\" alt=\"https://lewhunt.github.io/divz/\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align='center'\u003e\u003ci\u003e\u003csmall\u003e\nClick above to try out the demos\u003c/small\u003e\u003c/i\u003e\u003c/p\u003e\n\n\u003cbr/\u003e\n\n## Installation\n\n```bash\nnpm install divz\n```\n\n\u003cbr/\u003e\n\n## Basic Usage\n\nImport the component and render it in your app or page, wrapping it around your list of divs or other HTML elements:\n\n```jsx\nimport { Divz } from \"divz\";\n\nfunction App() {\n  return (\n    \u003cDivz\u003e\n      \u003cdiv\u003e1\u003c/div\u003e\n      \u003cdiv\u003e2\u003c/div\u003e\n      \u003cdiv\u003e3\u003c/div\u003e\n      \u003cdiv\u003e4\u003c/div\u003e\n    \u003c/Divz\u003e\n  );\n}\n```\n\n### [:point_right: Try out the demos :point_left:](https://lewhunt.github.io/divz/)\n\n**https://lewhunt.github.io/divz**\n\n\u003cbr/\u003e\n\n## Advanced Usage\n\nThe 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 uses a custom video component with preview images, optimised to only play video when the current item is active:\n\n```jsx\n\u003cDivz\n  isExpanded={true}\n  showPlayButton={false}\n  onIndexChange={(i) =\u003e setSelectedIndex(i)}\n\u003e\n  {demo3Assets.map((item, index) =\u003e (\n    \u003cDivzVideoItem\n      key={index}\n      index={index}\n      selectedIndex={selectedIndex}\n      previewImage={item.image}\n      videoSource={item.video}\n    \u003e\u003c/DivzVideoItem\u003e\n  ))}\n\u003c/Divz\u003e\n```\n\n\u003cbr/\u003e\n\nHere's a quick video of Demo 2, utilising dark mode, images and basic video elements:\n\nhttps://github.com/lewhunt/divz/assets/9886284/25c5f39b-5ab7-4088-8fa8-e23f4bb80498\n\n\u003cbr/\u003e\n\n## Why Divz?\n\nDivz 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:\n\n[![https://en.wikipedia.org/wiki/Time_Machine_%28macOS%29](https://upload.wikimedia.org/wikipedia/en/1/1a/Timemachine_gallery_windowsquicklook20070611.jpg)](https://en.wikipedia.org/wiki/Time_Machine_%28macOS%29)\n\n\u003cp\u003e\u003ci\u003eApple's Time Machine was the inspiration for Divz\u003c/i\u003e\u003c/p\u003e\n\n\u003cbr/\u003e\n  \n## What Sets It Apart?\n\n- \u003cb\u003eSimplified Integration:\u003c/b\u003e Divz is designed to be responsive and easy to use, acting as a straightforward wrapper around a list of divs or other HTML elements.\n- \u003cb\u003eDiverse Applications:\u003c/b\u003e 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.\n- \u003cb\u003eBroad Device Support:\u003c/b\u003e Divz accommodates various navigation modes, including touch for mobile devices, cursor/trackpad for desktop users, and arrow keys for TV devices.\n\n\u003cbr/\u003e\n\n## How Does It Work?\n\nUnder 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.\n\n\u003cbr/\u003e\n\n## Props\n\n| Prop                       | Description                                                                                                                                                                                            | Default |\n| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |\n| `autoPlay`                 | Set to `true` to autoplay a carousel sequence of any children div elements                                                                                                                             | `false` |\n| `isAutoPlayLooped`         | Set to `true` to enable the autoPlay sequence to endlessly loop                                                                                                                                        | `true`  |\n| `autoPlayDuration`         | Set the time interval in milliseconds for the autoPlay feature                                                                                                                                         | `6000`  |\n| `showPlayButton`           | Set to `true` to display the autoPlay toggle button                                                                                                                                                    | `true`  |\n| `showNavButtons`           | Set to `true` to display the up/down navigational buttons for cycling between div children                                                                                                             | `true`  |\n| `showExpandButton`         | Set to `true` to display the 'full-screen' expand button which is used to toggle the scale of div items                                                                                                | `true`  |\n| `showNavButtonsOnExpanded` | Set to `true` to display the navigational buttons when div items have been expanded                                                                                                                    | `false` |\n| `isExpanded`               | Set to `true` to toggle the scale of div items                                                                                                                                                         | `false` |\n| `isDarkMode`               | Set to `true` to set the buttons UI styling to dark mode                                                                                                                                               | `false` |\n| `isSnapEnabled`            | Set to `true` to ensure the transform animation is snap-fixed to only move between the div items                                                                                                       | `true`  |\n| `isScrollPageEnabled`      | Set to `true` to override the preferred 'fullscreen' behaviour and enable page scrolling with scrollbar. However, page scrolling is not recommended as it may also trigger the Divz swipe interactions | `false` |\n| `selectIndex`              | Set the index number to force it to instantly jump to position of a div child item. By default it will instead zoom animate to the first item.                                                         | `null`  |\n| `className`                | Insert additional classname values for overriding the component CSS styling                                                                                                                            | `null`  |\n| `onIndexChange`            | Called when navigation occurs and the currently selected divz item has changed index                                                                                                                   |         |\n| `onPlaying`                | Called when autoPlay sequence starts or stops                                                                                                                                                          |         |\n\n\u003cbr/\u003e\n\n## Credits\n\nSample media used in the [demos](https://lewhunt.github.io/divz/) are from various open source projects:\n\n- Demo 2 \u0026 3 images and videos are from [Pixabay](https://pixabay.com/) and [Runway](https://runwayml.com/)\n- Demo 4 images are generated in [Midjourney](https://www.midjourney.com/) by [Manoela Ilic](https://github.com/codrops/GridItemHoverEffect/)\n\n\u003cbr/\u003e\n\n## Support\n\nI hope this has given a good intro to the component and you get some use out of it for your own projects!\n\n[💬 Fire over a comment](https://github.com/lewhunt/divz/issues) if you have any feedback, requests or issues 🐛\n\n[⭐ Give it a star](https://github.com/lewhunt/divz) if you like the component or want to bookmark it 🙏\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flewhunt%2Fdivz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flewhunt%2Fdivz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flewhunt%2Fdivz/lists"}