open-index/open-npm huggingface dataset:
npm package: @slithy/math-particles
Description: Animated math equations particle overlay for React.
Author: Matthew Campagna
Latest version: 0.3.0

# @slithy/math-particles

Animated math equations particle overlay for React. Equations drift outward from the center of the container, scaling and fading over time. No animation library — the loop runs in a Web Worker via `OffscreenCanvas`, keeping the main thread free.

## Installation

```bash
npm install @slithy/math-particles
```

**Peer dependencies:** `react@^17 || ^18 || ^19`, `react-dom@^17 || ^18 || ^19`

---

## Vite setup

This package ships a Web Worker and is incompatible with Vite's dependency optimizer. Add it to `optimizeDeps.exclude` in your Vite config:

```ts
// vite.config.ts
optimizeDeps: {
  exclude: ['@slithy/math-particles']
}
```

The same applies to `electron-vite` projects — the exclusion goes under `renderer.optimizeDeps.exclude`.

---

## `MathParticlesOverlay`

Fills its nearest positioned ancestor. Give the parent `position: relative` and defined dimensions.

```tsx
import { MathParticlesOverlay } from '@slithy/math-particles'

<div style={{ position: 'relative', width: '100%', height: 480 }}>
  <MathParticlesOverlay />
</div>
```

**Props:**

| Prop | Type | Default | Description |
|---|---|---|---|
| `backgroundColor` | `string` | `"#07070f"` | Background fill color of the container |
| `blur` | `boolean` | `true` | Applies a soft blur at the start and end of each particle's lifecycle |
| `colors` | `string[]` | ColorBrewer RdYlBu | Array of colors to pick from randomly per particle |
| `density` | `number` | `1` | Multiplier on the auto-calculated particle count. `0.5` = half, `2` = double. Fixed at mount — use a `key` prop to reinitialize. |
| `fadeIn` | `boolean` | `true` | Fades the canvas in on mount |
| `fadeInDuration` | `number` | `800` | Duration of the mount fade-in in milliseconds |
| `reverse` | `boolean` | `false` | Reverses the animation: equations start large and drift inward rather than starting small and drifting outward |
| `speed` | `number` | `1` | Multiplier on particle animation speed. `0.5` = half speed, `2` = double. |

---

## Equations

16 equations are included: Euler's identity, Euler's formula, Pythagorean theorem, Pythagorean trig identity, quadratic formula, Einstein mass-energy, Fourier transform, Schrödinger equation, Gaussian integral, Taylor series, Navier-Stokes, Maxwell's first equation, Riemann zeta function, Bayes' theorem, integration by parts, and Heisenberg uncertainty.

---

## Examples

### Custom colors

```tsx
<MathParticlesOverlay colors={["#e63946", "#457b9d", "#f1faee"]} />
```

### Reduced density

```tsx
<MathParticlesOverlay density={0.5} />
```

### Reversed direction

```tsx
<MathParticlesOverlay reverse />
```

### No blur

```tsx
<MathParticlesOverlay blur={false} />
```

### No fade-in

```tsx
<MathParticlesOverlay fadeIn={false} />
```

### Transparent background

```tsx
<div style={{ position: 'relative', width: '100%', height: 480, background: 'your-bg' }}>
  <MathParticlesOverlay backgroundColor="transparent" />
</div>
```
npm package: @slithy/portal
Description: A hooks-based React portal.
Author: Matthew Campagna
Latest version: 1.1.0

# @slithy/portal

A hooks-based React portal. Automatically handles creating and tearing down DOM root elements — no need to ensure a target already exists.

## Installation

```bash
npm install @slithy/portal
```

**Peer dependencies:** `react@^17 || ^18 || ^19`, `react-dom@^17 || ^18 || ^19`

---

## `Portal`

Renders children into a portal outside the current React tree. By default, portals are appended to `document.body`.

```tsx
import { Portal } from '@slithy/portal'

<Portal>
  <MyTooltip />
</Portal>
```

**Props:**

| Prop | Type | Default | Description |
|---|---|---|---|
| `children` | `ReactNode` | — | Content to render in the portal |
| `id` | `string` | `"portal"` | ID of the portal root element. If an element with this ID already exists in the DOM, it is reused (persistent portal). Otherwise a new element is created and appended to `<body>`. |
| `element` | `string` | `"div"` | HTML tag to use for the portal wrapper element |
| `zIndex` | `string` | — | Sets `style.zIndex` on the portal root element |
| `attachment` | `(root, element) => void` | `root.appendChild(element)` | Custom function to attach the portal element to its root |

---

## Persistent vs. transient portals

- **Transient** (default `id="portal"`): A new wrapper element is created per portal instance and removed on unmount.
- **Persistent** (any other `id`): The root element with that ID is reused across instances — only one DOM node is created for all portals sharing the same ID. Useful for tooltip or modal containers.

```tsx
// Persistent — all tooltips share one #tooltips container
<Portal id="tooltips">
  <Tooltip />
</Portal>

// Transient — each portal creates and removes its own wrapper
<Portal>
  <FloatingMenu />
</Portal>
```

---

## Custom attachment

By default, content is appended to the portal root. Pass `attachment` to customize this — for example, to prepend instead:

```tsx
<Portal
  id="notifications"
  attachment={(root, element) => root.prepend(element)}
>
  <Notification />
</Portal>
```
npm package: @sliv/load-yt-iframe-api-promise
Description: ## usage
Author: sliv
Latest version: 0.0.1

# load-yt-iframe-api-promise

## usage

```js
import {loadYTApiPromise} from 'load-yt-iframe-api-promise'
loadYTApiPromise().then(() => {
    
})
```

As stated give a promise that confirm yt api is loaded