open-index/open-npm huggingface dataset:
npm package: @lagosta/pixel-perfect-storybook-addon
Description: Build pixel perfect components by adding an overlaying image of component in Storybook's preview iframe.
Author: Timur Svoboda
Latest version: 1.0.11

# Storybook Addon Pixel Perfect

Build pixel perfect components by adding an overlaying image of component in Storybook's preview iframe.

[Live example](https://639313fc4b277f76b849dc95-mxzmajchdy.chromatic.com/). Try to toggle eye button in the Storybook toolbar and "Pixel Perfect" panel.

## Features

- Overlay rendering.
- Overlay visibility toggling.
- Overlay opacity customization.
- Overlay color inversion toggling.
- Overlay options resetting.

## Getting Started

### Installation

```sh
npm install -D pixel-perfect-storybook-addon
```

Or

```sh
yarn add -D pixel-perfect-storybook-addon
```

Then, update _.storybook/main.js_ with the following ([Find out more here](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project)):

```javascript
// .storybook/main.js

module.exports = {
  addons: ["pixel-perfect-storybook-addon"],
};
```

### Usage

In parameters of your stories:

```javascript
parameters: {
    pixelPerfect: {
        overlay: {
            src: "path/to/overlay",
            opacity: 0.5,
            colorInversion: true,
        },
    },
},
```

### Options

| Name                     | Type    | Default | Description                                                                                                                         |
|--------------------------|---------|---------|-------------------------------------------------------------------------------------------------------------------------------------|
| `overlay.src`            | string  |         | Path to the overlay image. This can be any string that the `src` attribute of the HTML `img` element accepts.                       |
| `overlay.opacity`        | number  | 0.5     | Opacity of the overlay.                                                                                                             |
| `overlay.colorInversion` | boolean | true    | If `true` colors of the overlay are inverted. The effect is the same as using the CSS `filter` property with the value `invert(1)`. |
npm package: @lagrange/barba-core
Description: Create badass, fluid and smooth transition between your website's pages
Latest version: 2.9.11

# @barba/core

[![NPM version](https://img.shields.io/npm/v/@barba/core?style=flat-square)](https://www.npmjs.com/package/@barba/core)
[![Dependencies](https://img.shields.io/librariesio/release/npm/@barba/core?style=flat-square)](https://github.com/barbajs/barba/network/dependencies)

> TBD ([GitHub repo](https://github.com/barbajs/barba.js))

## Install

Using npm:

```sh
npm install --save-dev @barba/core
```

or using yarn:

```sh
yarn add @barba/core --dev
```