# Add a weighted filament source
Attach electric filaments to typed source sites and add one on click.

## APIs demonstrated

- [tendrils](/reference/types/electric-textures/) from `@pibbl/core/textures`
- [TendrilsOptions](/reference/types/electric-textures/) from `@pibbl/core/textures`
- [TendrilsMessage](/reference/types/electric-textures/) from `@pibbl/core/textures`
- [ElectricSource](/reference/types/electric-textures/) from `@pibbl/core/textures`
- [ElectricSourceMessage](/reference/types/electric-textures/) from `@pibbl/core/textures`

## Complete example

[Plain source](/minimal/textures/texture-tendrils.tsx). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```tsx
/** @jsxImportSource @pibbl/core */
import { pibbl, Rectangle } from "@pibbl/core";
import {
  tendrils,
  useTexture,
  type ElectricSource,
  type ElectricSourceMessage,
  type TendrilsMessage,
  type TendrilsOptions,
} from "@pibbl/core/textures";

const canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 240;
document.body.append(canvas);

function Filaments() {
  const source: ElectricSource = {
    id: "electrode-a",
    point: { x: 0.25, y: 0.75 },
    weight: 10,
  };
  const options: TendrilsOptions = {
    seed: 4,
    center: { x: 0.5, y: 0.5 },
    sources: [source],
    count: 12,
    glow: 1.2,
  };
  const texture = useTexture(tendrils(options));
  const nextSource: ElectricSourceMessage = {
    type: "upsert-source",
    source: { id: "electrode-b", point: { x: 0.75, y: 0.7 }, weight: 15 },
  };
  const message: TendrilsMessage = nextSource;
  return (
    <>
      <Rectangle style={{ width: 320, height: 240, fill: "#11151c" }} />
      <Rectangle
        style={{ width: 320, height: 240, fill: texture }}
        onClick={() => texture.send(message)}
      />
    </>
  );
}

const controller = pibbl(canvas, <Filaments />);
window.addEventListener("pagehide", () => controller.dispose(), { once: true });

```

## Usage notes

- Source coordinates are normalized to the complete texture, including its padding.

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.