# Connect two electric points
Render a lightning recipe and reset its deterministic seed on click.

## APIs demonstrated

- [lightning](/reference/types/electric-textures/) from `@pibbl/core/textures`
- [LightningOptions](/reference/types/electric-textures/) from `@pibbl/core/textures`
- [LightningMessage](/reference/types/electric-textures/) from `@pibbl/core/textures`
- [ElectricPoint](/reference/types/electric-textures/) from `@pibbl/core/textures`
- [ElectricOptions](/reference/types/electric-textures/) from `@pibbl/core/textures`
- [ElectricControl](/reference/types/electric-textures/) from `@pibbl/core/textures`

## Complete example

[Plain source](/minimal/textures/texture-lightning.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 {
  lightning,
  useTexture,
  type ElectricControl,
  type ElectricOptions,
  type ElectricPoint,
  type LightningMessage,
  type LightningOptions,
} from "@pibbl/core/textures";

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

function Arc() {
  const positive: ElectricPoint = { x: 0.2, y: 0.5 };
  const negative: ElectricPoint = { x: 0.8, y: 0.5 };
  const appearance: ElectricOptions = { seed: 9, branching: 0.6, glow: 1.2 };
  const options: LightningOptions = {
    ...appearance,
    positive,
    negative,
    frequency: 15,
    contactCore: true,
  };
  const texture = useTexture(lightning(options));
  const reset: ElectricControl = { type: "reset", seed: 9 };
  const message: LightningMessage = reset;
  return (
    <>
      <Rectangle style={{ width: 320, height: 200, fill: "#11151c" }} />
      <Rectangle
        style={{ width: 320, height: 200, fill: texture }}
        onClick={() => texture.send(message)}
      />
    </>
  );
}

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

```

## Usage notes

- The texture owns its animation through Pibbl; no application frame loop is needed.

## Documentation version

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