Quick Start

Suppose you want to handle a pinch gesture to implement zoom. Let’s build it step by step.

1. Install Cereb

Terminal window
npm install cereb

All features—gestures, events, and operators—are included in a single package.

2. Create a Source Stream

Import pinch and create a stream from your target element:

import { pinch } from "cereb";


const stream = pinch(element);

3. Transform with pipe()

Chain operators to add constraints like scale limits:

import { zoom } from "cereb/operators";


const stream = pinch(element).pipe(
  zoom({ minScale: 0.5, maxScale: 3 }),
);

4. Subscribe with on()

Nothing happens until you subscribe:

stream.on((signal) => {
  const { phase, scale, center } = signal.value;
  const [cx, cy] = center;


  if (phase === "change") {
    applyZoom(scale, cx, cy);
  }
});