open-index/open-npm huggingface dataset:
npm package: @flippit/visage
Description: Easily display Ready Player Me avatars and 3D on the web.
Author: Ready Player Me
Latest version: 0.1.29

# [Visage](https://readyplayerme.github.io/visage/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/readyplayerme/visage/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@readyplayerme/visage)](https://www.npmjs.com/package/@readyplayerme/visage)
Visage is a collection of components for showcasing Ready Player Me avatars and 3D on the web!

Built with [`three.js`](https://github.com/mrdoob/three.js), [`react-three-fiber`](https://github.com/pmndrs/react-three-fiber), [`drei`](https://github.com/pmndrs/drei), [`three-stdlib`](https://github.com/pmndrs/three-stdlib) and [`react`](https://github.com/facebook/react/).

# Installation

Visage is available as an [npm package](https://www.npmjs.com/package/@readyplayerme/visage).
```sh
npm install @readyplayerme/visage
```

Make sure to install peer-dependencies if your project doesn't already include them:
```sh
npm install @react-three/drei@9.79.3 @react-three/fiber@8.13.5 @react-three/postprocessing@2.15.0 three@0.154.0 three-stdlib@2.23.13 suspend-react@0.1.3 postprocessing@6.32.2
```

# Documentation & examples

You can find all **code examples** of the components and their **documentation** on [our GitHub page](https://readyplayerme.github.io/visage/).

Here is the first one to get you started:
```typescript jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Avatar } from '@readyplayerme/visage';

const modelSrc = 'https://readyplayerme.github.io/visage/male.glb';

function App() {
  return (
    <Avatar modelSrc={modelSrc} />
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));
```

### Validation
Props such as `modelSrc`, `animationSrc` and `poseSrc` are validated before rendering on the scene.

Supported resource formats are:
* URL resources
  * relative `/headwear.glb`
  * absolute `https://readyplayerme.github.io/visage/male.glb?queryParams=allowed`
* Base64 strings
  * `data:application/octet-stream;base64`
  * `data:model/gltf-binary;base64`
* Binary input such as `model/gltf-binary`

## License

Visage is [MIT licensed](./LICENSE).
npm package: @flipsidecrypto/pine-sdk
Description: The official Flipside Crypto Pine SDK
Author: dev@flipsidecrypto.com
Latest version: 0.0.8

# Pine SDK

### The official Flipside Crypto Pine SDK

[view on npm](https://www.npmjs.com/package/@flipsidecrypto/pine-sdk)
[API docs](https://flipside-crypto.gitbook.io/pine/)

## Installation

```sh
$ npm install @flipsidecrypto/pine-sdk
```

```sh
$ yarn add @flipsidecrypto/pine-sdk
```

## Usage

```ts
import { tracer } from "@flipsidecrypto/pine-sdk";
import type { SDKResponse, TracerEvent } from "@flipsidecrypto/pine-sdk";

const laborMarketTracer = tracer({
  connection: {
    apikey: "11111111-ffff-aaaa-2222-333333333333",
    endpoint: "localhost:8080",
  },
  tracer: {
    namespace: "labor-marker",
    version: "0.0.1",
  },
});

await laborMarketTracer.start();

await laborMarketTracer.consume(
  async (response: SDKResponse<TracerEvent[] | null>) => {
    if (response.status !== "ok") {
      console.error(response.error.msg);
      return false; // will end the process of listening
    }
    if (!response.data) return false; // will request the same event batch again

    // do something custom with events
    await Promise.all(
      response.data.map((event) => {
        if (event.contract.name === "LaborMarketSpawned") {
          return Promise.all(
            Object.values(event.decoded.inputs).map(async (input) => {
              if (input.name === "url") {
                const metadata = await ipfsData(input.value);
              }
            })
          );
        }
      })
    );
    return true; // will request the next batch of events
  },
  { name: "laborMarketListener", batchSize: 100 }
);
```