High-fidelity loops for modern interfaces
under 1kB gzipped // synchronized speeds // CSS-based animations
[](https://www.npmjs.com/package/marqy)
[](https://www.npmjs.com/package/marqy)
[](https://bundlephobia.com/package/marqy)
# DEMO: [MARQY.PARTY](https://marqy.party)
## Install
```sh
yarn add marqy
```
or using npm
```sh
npm i marqy
```
## Usage
#### Import React
```tsx
import { Marqy } from 'marqy';
Your content here
```
#### Import CSS
```js
import 'marqy/dist/marqy.css';
```
**or add it manually:** [see marqy.css stylesheet](./marqy.css)
### Properties
| Name | Type | Description |
| -------------- | ------------------------------- | ----------------------------------------- |
| `speed` | number **[default: 0.5]** | Scroll speed multiplier |
| `direction` | string **[default: 'left']** | Direction of scroll |
| `pauseOnHover` | boolean **[default: false]** | Pauses the animation on hover |
| `manual` | boolean **[default: false]** | Renders without applying CSS animations |
| `children` | React.ReactNode | Content to repeat inside the marqy |
### License
MIT © [Nick DiMatteo](https://www.nickdimatteo.com) + [Mike Wagz](https://www.mikewagz.com)