# @kaave/vue-disortion-carousel

> Vue Image distortion carousel component. Not dependencies any WebGL libraries like three.js, pixi.js.

Latest version **0.1.1** (published 2019-05-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @kaave/vue-disortion-carousel
pnpm add @kaave/vue-disortion-carousel
yarn add @kaave/vue-disortion-carousel
bun add @kaave/vue-disortion-carousel
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2019-05-09 |
| First published | 2019-03-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | kaave |

## Links

- npm: https://www.npmjs.com/package/@kaave/vue-disortion-carousel
- npm.io page: https://npm.io/package/@kaave/vue-disortion-carousel

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.6.6

## Recent versions

- 0.1.1 (latest) — 2019-05-09
- 0.1.0 — 2019-05-07
- 0.0.1 — 2019-03-23

## README

# vue-disortion-carousel

Vue Image distortion carousel component. Not dependencies any WebGL libraries like three.js, pixi.js.

## Sample code

```vue
<template>
  <distortion-carousel
    :index="index"
    :image-urls="imageUrls"
    distortion-texture-url="/texture.jpg"
    :max-width="1000"
    :ratio="{ width: 16, height: 10 }"
    :move-threshold="0.2"
    :duration-sec="2.5"
    :easing="easing"
  >
    It's Readable Content!
  </distortion-carousel>
</template>

<script>
import Vue from 'vue';
import { Ease, Power3 as Quart } from 'gsap';
import DistortionCarousel from '@kaave/vue-distortion-carousel.vue';

export default {
  component: { DistortionCarousel },
  data() {
    return { index: 0 },
  },
  computed: {
    imageUrls() { return ['/d1.jpg', '/d2.jpg', '/d3.jpg'] },
    easing() { return Quart.easeInOut; },
  },
  mounted: {
    setInterval(() => this.index = (this.index + 1) % this.imageUrls.length, 3000);
  },
};
</script>
```

## Inspiration

- [robin-dela/hover-effect](https://github.com/robin-dela/hover-effect)

---
_Source: https://npm.io/package/@kaave/vue-disortion-carousel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._