<h1 align="center"><img width="50" height="50" alt="Cereb logo" src="https://cereb.dev/logo-square-light.svg" /><br/>Cereb</h1> <h3 align="center">An open source interaction library<br />for composable gesture and event streams</h3> <p align="center"> <a href="https://www.npmjs.com/package/cereb" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/v/cereb?color=0368FF&label=version" alt="npm version"></a> <img alt="NPM License" src="https://img.shields.io/npm/l/cereb?color=FF2B6E"> </p>

npm install --save cereb

Learn how to use Cereb in your project.

Why Cereb?
Examples
License
Contribute

Examples

import { pinch } from "cereb";
import { zoom } from "cereb/operators";

let scale = 1.0;
const MIN_SCALE = 0.5, MAX_SCALE = 3.0;

// pipe creates a pipeline where signals flow through operators
// Each operator extends the signal (signals are immutable)
pinch(element)
  // Operator: Convert ratio to scale delta
  .pipe(zoom())
  .on((signal) => {
    // zoom outputs frame-by-frame delta, accumulate and clamp
    scale += signal.value.scale;
    scale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale));
    element.style.transform = `scale(${scale})`;
  });

See all Examples and Demo →

Why Cereb?

No Abstraction for Event Flow — DOM events lack structure for state, dependencies, and composition
Lightweight Bundle — ~77% smaller than Hammer.js (1.73 KB gzipped for pan gesture)
Resource Efficiency — Event listener reuse, single-responsibility operators

See detailed examples →