{"id":15458126,"url":"https://github.com/dmotz/hexaflip","last_synced_at":"2025-07-15T15:43:21.181Z","repository":{"id":7313010,"uuid":"8631041","full_name":"dmotz/hexaflip","owner":"dmotz","description":"🧊 Visualizes arrays as cube interfaces","archived":false,"fork":false,"pushed_at":"2018-03-16T17:10:21.000Z","size":3711,"stargazers_count":141,"open_issues_count":3,"forks_count":30,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-12T09:48:17.691Z","etag":null,"topics":["animation","coffeescript","javascript","jquery"],"latest_commit_sha":null,"homepage":"http://oxism.com/hexaflip","language":"CoffeeScript","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/dmotz.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}},"created_at":"2013-03-07T16:03:50.000Z","updated_at":"2025-06-07T16:33:12.000Z","dependencies_parsed_at":"2022-09-01T04:32:04.005Z","dependency_job_id":null,"html_url":"https://github.com/dmotz/hexaflip","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/dmotz/hexaflip","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmotz%2Fhexaflip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmotz%2Fhexaflip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmotz%2Fhexaflip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmotz%2Fhexaflip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmotz","download_url":"https://codeload.github.com/dmotz/hexaflip/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmotz%2Fhexaflip/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265327771,"owners_count":23747768,"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":["animation","coffeescript","javascript","jquery"],"created_at":"2024-10-01T22:59:23.065Z","updated_at":"2025-07-15T15:43:21.117Z","avatar_url":"https://github.com/dmotz.png","language":"CoffeeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![HexaFlip](http://oxism.com/hexaflip/demo/hexaflip.png)\n# [HexaFlip](http://oxism.com/hexaflip/)\n### Transform arrays of any length into cubes with infinite sides.\n### Featuring touch/mouse interaction, getter/setter methods, zero dependencies, and jQuery support.\n[Dan Motzenbecker](http://oxism.com), MIT License\n\n[@dcmotz](http://twitter.com/dcmotz)\n\nTake a look at the [Codrops article](http://tympanus.net/codrops/2013/03/07/hexaflip-a-flexible-3d-cube-plugin)\nfor a guide through the process and some [demos](http://tympanus.net/Tutorials/HexaFlip).\n\n## Basic Usage\n\nCreate an instance by passing a DOM element and a key-value set of arrays:\n\n```javascript\nvar cubeSet = new HexaFlip(document.getElementById('my-el'),\n    {\n        prince: ['For You', 'Prince', 'Dirty Mind', 'Controversy', '1999', 'Around the World in a Day'],\n        curtis: ['Curtis', 'Roots', 'Super Fly', 'Back to the World', 'Got to Find a Way', 'Sweet Exorcist']\n    }\n);\n\n// you can also pass a selector string and HexaFlip will take the first matching element:\nvar firstDiv = new HexaFlip('div');\n```\n\nIf a value is a URL, HexaFlip will set that side to the image it points to, preloading it automatically.\n\nYou can also pass objects as values with `style` and `value` keys\nfor some meticulous customization of different sides.\nMake the former an object literal of CSS properties to customize the styling of that cube face.\n\n\n```javascript\nvar colorCube = new HexaFlip('#color-cube',\n    {\n        chromaSet: [\n          {\n              value: 'orange',\n              style: {\n                  backgroundColor: '#e67e22',\n                  fontWeight: 100\n              }\n          },\n          {\n              value: 'teal',\n              style: {\n                  backgroundColor: '#1abc9c',\n                  fontFamily: 'Futura'\n              }\n          },\n          {\n              value: 'yellow',\n              style: {\n                  backgroundColor: '#f1c40f',\n                  textDecoration: 'underline'\n              }\n          }\n        ]\n    }\n);\n```\n\nTo enable horizontal rotation (like the photos above), pass it in the options:\n\n```javascript\nvar horizontalCube = new HexaFlip('#my-el2',\n    {\n        letters: ['α', 'β', 'γ', 'δ', 'ε', 'ζ', 'η', 'θ', 'ι', 'κ', 'λ', 'μ',\n                  'ν', 'ξ', 'ο', 'π', 'ρ', 'σ', 'τ', 'υ', 'φ', 'χ', 'ψ', 'ω']\n    },\n    {\n        horizontalFlip: true,\n        size: 300\n    }\n);\n```\n\nTo set and get the values of the cubes:\n\n```javascript\ncubeSet.setValue({ prince: '1999', curtis: 'Roots' });\ncubeSet.getValue();\n```\n\nTo rotate the cubes to the next or previous sides:\n\n```javascript\ncubeSet.flip();\ncubeSet.flipBack();\n```\n\n## Events\n\nTo add custom DOM events, simply pass a key value object called `domEvents` to the instance's options:\n\n```javascript\n//...\n    },\n    {\n        domEvents: {\n            mouseover: function(e, face, cube) {\n                face.style.backgroundColor = 'red';\n            },\n            mouseout: function(e, face, cube) {\n                face.style.backgroundColor = 'blue';\n            },\n            click: function(e, face, cube) {\n                console.log(face.innerHTML);\n            }\n        }\n    }\n);\n```\n\nEvery callback is passed the event object, the face element that triggered the event, and the cube\nelement the face belongs to. The callback is automatically bound to the HexaFlip instance\nso `this` works properly.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmotz%2Fhexaflip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmotz%2Fhexaflip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmotz%2Fhexaflip/lists"}