Cereb

An open source interaction library
for composable gesture and event streams

npm install --save cereb

Learn how to use Cereb in your project.

Table of Contents

1. Why Cereb?
2. Examples
3. License
4. 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 →

Documentation

You can find the Cereb documentation on the website.

• Core Concepts
  • Key Models
  • Behavior & Event
  • Creating Operators
  • High-Order Operators
  • The Problem Solves
• API Reference
  • Stream
  • Operators

Contributing

If you find Cereb useful, consider giving it a star — it helps others discover the project!

Contributions are welcome! Please read our Contributing Guide before submitting a Pull Request.

License

Cereb is MIT licensed.