{"id":32956228,"url":"https://github.com/AlbanCrepel/vue-displacement-slideshow","last_synced_at":"2025-11-13T07:01:55.187Z","repository":{"id":44839624,"uuid":"157028299","full_name":"AlbanCrepel/vue-displacement-slideshow","owner":"AlbanCrepel","description":"A Vue.js slideshow component working with Three.js","archived":false,"fork":false,"pushed_at":"2023-07-31T09:48:29.000Z","size":13872,"stargazers_count":214,"open_issues_count":4,"forks_count":29,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-25T20:04:59.113Z","etag":null,"topics":["images","slideshow","threejs","vuejs","webgl"],"latest_commit_sha":null,"homepage":"https://vue-displacement-slideshow.now.sh","language":"Vue","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/AlbanCrepel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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}},"created_at":"2018-11-10T22:46:49.000Z","updated_at":"2025-04-14T21:36:28.000Z","dependencies_parsed_at":"2024-01-08T08:57:00.814Z","dependency_job_id":null,"html_url":"https://github.com/AlbanCrepel/vue-displacement-slideshow","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/AlbanCrepel/vue-displacement-slideshow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlbanCrepel%2Fvue-displacement-slideshow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlbanCrepel%2Fvue-displacement-slideshow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlbanCrepel%2Fvue-displacement-slideshow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlbanCrepel%2Fvue-displacement-slideshow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlbanCrepel","download_url":"https://codeload.github.com/AlbanCrepel/vue-displacement-slideshow/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlbanCrepel%2Fvue-displacement-slideshow/sbom","scorecard":{"id":10340,"data":{"date":"2025-08-11","repo":{"name":"github.com/AlbanCrepel/vue-displacement-slideshow","commit":"5ea1192f0a9fe98daf32e08701b51bdbf5e72a65"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2,"checks":[{"name":"Code-Review","score":2,"reason":"Found 6/25 approved changesets -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"16 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-92r3-m2mg-pj97","Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw","Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g","Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3","Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx","Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6","Warn: Project is vulnerable to: GHSA-x574-m823-4x7w","Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8","Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x","Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4","Warn: Project is vulnerable to: GHSA-859w-5945-r5v3"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 13 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-14T14:25:15.217Z","repository_id":44839624,"created_at":"2025-08-14T14:25:15.217Z","updated_at":"2025-08-14T14:25:15.217Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284170493,"owners_count":26959115,"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","status":"online","status_checked_at":"2025-11-13T02:00:06.582Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["images","slideshow","threejs","vuejs","webgl"],"created_at":"2025-11-12T23:00:19.023Z","updated_at":"2025-11-13T07:01:55.183Z","avatar_url":"https://github.com/AlbanCrepel.png","language":"Vue","funding_links":["https://ko-fi.com/alban_crepel"],"categories":["Components \u0026 Libraries","UI Utilities","UI Utilities [🔝](#readme)"],"sub_categories":["UI Utilities","WebGL"],"readme":"# vue-displacement-slideshow\n\n\u003e Webgl image displacement transitions made simple. A Vue.js slideshow component working with Three.js and GSAP.\nIt works with Vue3 and older versions (until 3.0.1) work with Vue2.\n\n## Demo\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"lib/assets/demo.gif\" width=\"400px\" height=\"auto\" alt=\"Demo gif\"/\u003e\n\u003c/p\u003e\n\n\u003e The canvas can be interactive as well by setting the `isInteractive` props to `true`. See the `props` section to find more.\n\n## Live demo\n\n[DEMO](https://vue-displacement-slideshow.now.sh)\n\n## Installation\n\n```bash\n# using yarn\nyarn add vue-displacement-slideshow\n# or using npm\nnpm i vue-displacement-slideshow\n```\n\n:warning: If you are using this component with Vue2, you have to use this version: `3.0.1`, as \nthe ones that follow only support Vue3. You can install a particular version like this:\n\n```bash\n# using yarn\nyarn add vue-displacement-slideshow@3.0.1\n# or using npm\nnpm i vue-displacement-slideshow@3.0.1\n```\n\n## Example\n\n```vue\n\u003ctemplate\u003e\n    \u003cvue-displacement-slideshow\n            :images=\"images\"\n            displacement=\"require('../assets/displacement.png')\"\n            :intensity=\"0.2\"\n            :speedIn=\"1.4\"\n            :speedOut=\"1.4\"\n            ease=\"expo.out\"\n            ref=\"slideshow\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n    import VueDisplacementSlideshow from \"vue-displacement-slideshow\";\n\n    export default {\n        components: {\n            VueDisplacementSlideshow,\n        },\n        computed: {\n            images() {\n                return [\n                    require(\"../assets/images/1.jpg\"),\n                    require(\"../assets/images/2.jpg\"),\n                    require(\"../assets/images/3.jpg\")\n                ];\n            }\n        },\n        methods: {\n            init() {\n                //We loop through all our images by calling the 'next' method of our component every 2 seconds\n                setInterval(() =\u003e {\n                    this.$refs.slideshow.next();\n                }, 2000);\n            }\n        },\n        mounted() {\n            this.init();\n        }\n    };\n\u003c/script\u003e\n\n```\n\n**With Nuxt :**\n\nJust wrap the component in a `client-only` component like so :\n```html\n\u003cclient-only\u003e\n    \u003cvue-displacement-slideshow /\u003e\n\u003c/client-only\u003e\n```\n\nThis component is heavily based on this library :\n[https://github.com/robin-dela/hover-effect](https://github.com/robin-dela/hover-effect)\n\n## Props\n\n| name         |  type  | description                                                      | required | default value |\n|--------------|:------:|------------------------------------------------------------------|----------|---------------|\n| images       | `Array`  | An array containing the paths of the images you wan to use       | `true`     | `[]`            |\n| displacement | `String` | The path of the displacement image                               | `true`     |           |\n| intensity    | `Number` | The intensity of the displacement                                | `false`    | `1`             |\n| speedIn      | `Number` | The duration of the animation for the next image, in seconds     | `false`    | `1`             |\n| speedOut     | `Number` | The duration of the animation for the previous image, in seconds | `false`    | `1`             |\n| ease         | `String` | The GSAP easing to use                                           | `false`    | `expo.inOut`      |\n| preserveAspectRatio| `Boolean` | Whether the images keep their aspect ratio (act as `background-size` : `cover` (`true`) or `contain`  (`false`)  | `false`    | `true`  |\n| isInteractive| `Boolean`| Whether the canvas is interactive on mouse move | `false`    | `false`  |\n| interactionFactor| `Number` | The factor of the interaction | `false`    | `1`  |\n| interactionDuration| `Number` | The duration of the interaction | `false`    | `1`  |\n| startAsTransparent| `Boolean` | Whether the canvas  is initially transparent and the first transition goes to the first picture | `false`    | `false`  |\n| angle| `Number` | The angle of the transition | `false`    | `Math.PI / 4`  |\n\n## Methods\n\n| Name                    | Description             |Params|Returns\n|-------------------------|-------------------------|----------|----------|\n|next                     | Transition to the second image. |      |`void`|\n|previous                 | Transition to the first image. |      |`void`|\n|pause                 | Pause the current transition |     |`void`|\n|play                 | Play the current paused animation |     |`void`|\n|insertImage(path,index)                 | Insert an image at a given index |\u003cul\u003e\u003cli\u003e`path` : the path of the image \u003c/li\u003e\u003cli\u003e`index` : the index of the inserted image, if not provided, the image will be inserted at the end of the array. It has the same behavior as the `splice` method (negative number allowed)\u003c/li\u003e\u003c/ul\u003e|a Promise resolved when the image is loaded|\n|insertTransparentTexture(index)                 | Insert a transparent texture at a given index |\u003cul\u003e\u003cli\u003e`index` : the index of the inserted image, it has the same behavior as  the `insertImage` `index`  parameter |  `void` |\n|removeImage(index)                 | Remove an image at a given index |\u003cul\u003e\u003cli\u003e`index` : the index of the image to remove (must be different from the current image index)\u003c/li\u003e\u003c/ul\u003e| `void`|\n|goTo(index)                 | Transition to a given image by its index |\u003cul\u003e\u003cli\u003e`index` : the index of the image to transition to\u003c/li\u003e\u003c/ul\u003e| `void`|\n\n## Events emitted\n\n| Name                    | Description             |\n|-------------------------|-------------------------|\n|loaded                     | Fired when the component is ready |\n|animationEnd                 | Fired when the transition is done. |\n\n\n## Behavior\n\nThe first image of the array is displayed at first.\nWhen we call the `next` method while currently showing the last image, it will go to the first image.\nWhen we call the `previous` method while currently showing the first image, it will go to the last image.\n\nThe images are displayed as we would use `background-size:cover` in CSS.\n\nIf you set the prop `startAsTransparent` to `true`, then it **adds a texture to your `images` array**. If you want to \nremove it after, you can just call the `removeImage` method with `0` as the index parameter value.\n\n## Contributing\n\nContributions are welcome !\nFollow the instructions in the [contributing file](./CONTRIBUTING.md)\n\n## License\n\n[MIT](./LICENCE)\n\n## Support\n\nIf you find the component useful, you can support my open source work via [my ko-fi page](https://ko-fi.com/alban_crepel).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlbanCrepel%2Fvue-displacement-slideshow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAlbanCrepel%2Fvue-displacement-slideshow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlbanCrepel%2Fvue-displacement-slideshow/lists"}