open-index/open-npm huggingface dataset:
npm package: @shader-art/plugin-base
Description: Interface for shader-art plugins
Author: Lea Rosema
Latest version: 0.3.0

# `<shader-art>` plugin interface

You can build your own plugins by implementing this interface:

```js
export interface ShaderArtPlugin {
  name: string;
  setup(
    hostElement: HTMLElement,
    gl: WebGLRenderingContext | WebGL2RenderingContext,
    program: WebGLProgram,
    canvas: HTMLCanvasElement
  ): void | Promise<void>;
  dispose(): void;
}
```

If the setup method returns a promise, the shader-art component will wait until the promise resolves.
npm package: @shader-art/plugin-pointer-interactions
Description: Pointer interactions for shader-art
Author: Lea Rosema
Latest version: 0.0.4

# `<shader-art>` PointerInteractionsPlugin

## Installation

Install via NPM:

```sh
npm i shader-art @shader-art/plugin-pointer-interactions
```

Or use directly via skypack:

```js
import { PointerInteractionsPlugin } from 'https://cdn.skypack.dev/@shader-art/plugin-pointer-interactions';
```

## Usage

```js
ShaderArt.register([() => new PointerInteractionsPlugin()]);
```

Inside your glsl shader code (which is placed inside a `<script type="vert|frag">` tag), you can access one pointer (currently this is single-touch) via
uniform variables:

```
uniform vec2 pointerStart;
uniform vec2 pointer;
uniform int dragging;
```
npm package: @shader-art/plugin-texture
Description: Texture support for shader-art
Author: Lea Rosema
Latest version: 1.1.1

# `<shader-art>` TexturePlugin

## Installation

Install via NPM:

```sh
npm i shader-art @shader-art/plugin-texture
```

Or use directly via skypack:

```js
import { TexturePlugin } from 'https://cdn.skypack.dev/@shader-art/plugin-texture';
```

## Usage

Texture support can be added via a TexturePlugin.

You can load the texture plugin by importing the TexturePlugin and adding it to the `ShaderArt.register` call like this:

```js
ShaderArt.register([() => new TexturePlugin()]);
```

### Adding textures to your `shader-art`

Inside the shader art component, add an `img` tag like this;

```html
<img
  src="https://placekitten.com/512/512"
  name="cat"
  wrap-s="mirrored-repeat"
  wrap-t="clamp-to-edge"
  min-filter="nearest"
  mag-filter="nearest"
  hidden
/>
```

Inside your glsl shader code (which is placed inside a `<script type="vert|frag">` tag), you can access the texture via
a uniform variable:

```
uniform sampler2D cat;
```

### Attributes

- `src` url of the texture.
- `name` name of the uniform variable
- `wrap-s` horizontal texture wrapping (mirrored-repeat|repeat(default)|clamp-to-edge)
- `wrap-t` vertical texture wrapping (mirrored-repeat|repeat(default)|clamp-to-edge)
- `min-filter` texture minification filter (linear, nearest(default), nearest-mipmap-nearest, linear-mipmap-nearest, linear-mipmap-linear, nearest-mipmap-linear)
- `mag-filter` texture magnification filter (linear|nearest(default))

### Further resources

For more information about using textures inside glsl code, look at [`texture2D`](https://thebookofshaders.com/glossary/?search=texture2D).

### Example

- [Example using textures on CodePen](https://codepen.io/terabaud/pen/xxROeRJ)
npm package: @shader-art/plugin-uniform
Description: uniform variables with dat.gui for shader-art
Author: Lea Rosema
Latest version: 0.2.3

# UniformPlugin for `shader-art`

This plugin lets you add and configure uniform variables. Uses dat.GUI.

You can add uniform variables by using the `<uniform type="vec2|vec3|vec4|color|int|float" />` tag.

## Supported types:

```html
<uniform type="vec2" name="testVec2" value="1,2" />
<uniform type="vec3" name="testVec3" value="1,2,3" />
<uniform type="vec4" name="testVec4" value="1,2,3,4" />
<uniform type="color" name="testColor" value="#ff00ff" />
<uniform type="float" name="testFloat" value="123." />
<uniform type="int" name="testInt" value="42" />
```

## Examples

- https://codepen.io/terabaud/pen/jOymzJN?editors=1000
- https://codepen.io/terabaud/pen/bGgOpjb?editors=1000
npm package: @shader-composer/core
Description: ## Introduction
Author: Hendrik Mans
Latest version: 0.0.0-canary-20221130162026

# shader-composer-core

## Introduction

Shader Composer core functionality.

## License

```
Copyright (c) 2022 Hendrik Mans

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```
npm package: @shader-composer/postprocessing
Description: Build postprocessing effects using Shader Composer.
Author: Hendrik Mans
Latest version: 0.0.0-canary-20221130162026

# shader-composer-postprocessing

## Introduction

Build [postprocessing] effect passes using Shader Composer.

## License

```
Copyright (c) 2022 Hendrik Mans

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

[postprocessing]: https://github.com/pmndrs/postprocessing
npm package: @shader-composer/three
Description: Build Three.js shaders using JavaScript.
Author: Hendrik Mans
Latest version: 0.0.0-canary-20221130162026

# shader-composer-three

## Introduction

Three.js bindings for Shader Composer.

```js
import { compileShader } from "@shader-composer/core"
import configureThree from "@shader-composer/three"

configureThree()
```

## License

```
Copyright (c) 2022 Hendrik Mans

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```

[postprocessing]: https://github.com/pmndrs/postprocessing
npm package: @shader-motion/carousel
Description: A WebGL-based carousel component built on gl-layer, offering smooth transitions and shader-powered animations.
Author: Abel Lamesgen
Latest version: 0.1.211

# ShaderMotion

A WebGL-based carousel component built on gl-layer, offering smooth transitions and shader-powered animations. This library provides an elegant solution for creating interactive image carousels with GPU-accelerated transitions and GSAP-powered animations.

## Overview

ShaderMotion is a TypeScript library that combines the power of WebGL and GSAP to create fluid image transitions. It provides a React component for easy integration, along with hooks for custom canvas management and shader effects.

## Features

- **WebGL-Powered Carousel**: Smooth, hardware-accelerated image transitions
- **GSAP Integration**: Professional animation timing and easing
- **Interactive Transitions**: Mouse-based interaction for direction control
- **Texture Management**: Efficient handling of image textures
- **Custom Shaders**: Built-in shader effects for transitions
- **Canvas Hooks**: React hooks for WebGL canvas management
- **Type Safety**: Full TypeScript support

## Installation

```bash
npm install shader-motion
```

## Usage

### Basic Carousel Component

```typescript
import { CarouselWebGL } from 'shader-motion';

const MyCarousel = () => {
  const images = [
    '/path/to/image1.jpg',
    '/path/to/image2.jpg',
    '/path/to/image3.jpg'
  ];

  return (
    <CarouselWebGL
      images={images}
      size={{ width: 800, height: 600 }}
    />
  );
};
```

## API Reference

### CarouselWebGL Component

```typescript
interface WebGLShapeProps {
  size: {
    width: number;
    height: number;
  };
  images: string[];     // Array of image URLs
}
```

### useLayoutCanvas Hook

```typescript
const { 
  initializer,      // Initialize WebGL context and shaders
  resizeUpdate,     // Handle canvas resize
  increaseRadius    // Trigger transition animations
} = useLayoutCanvas();
```

### Canvas Initialization

```typescript
interface CanvasInitProps {
  canvasRef: {
    buffersRef: React.RefObject<BuffersRefType>;
    canvasRef: React.RefObject<HTMLCanvasElement>;
    glRef: React.RefObject<WebGLRenderingContext>;
    programInfoRef: React.RefObject<ProgramInfoRefType>;
    loading: boolean;
    setLoading: (loading: boolean) => void;
  };
  shader: {
    fragmentShaderSource: string;
    vertexShaderSource: string;
  };
  uniforms: Record<string, any>;
  textures: WebGLTexture[];
}
```

## Dependencies

- React ^19.0.0
- GSAP ^3.12.7
- gl-layer ^0.1.3

## License

MIT