pinch-type

Three canvas-based text effects for mobile web, built on @chenglou/pretext.

• Pinch Type — intercepts pinch-to-zoom and scales text size instead of zooming the page
• Scroll Morph — fisheye effect: text near the viewport center is large and bright, edges are small and dim
• Combined — both effects together

Live Demo →

Install

npm install pinch-type @chenglou/pretext

Quick Start

import { createPinchType, createScrollMorph, createPinchMorph } from 'pinch-type';

// 1. Pinch Type — uniform text, pinch gestures scale all text
const pt = createPinchType(document.getElementById('reader'));
pt.setText('Your long article text here…');

// 2. Scroll Morph — fisheye effect, no pinch zoom
const sm = createScrollMorph(document.getElementById('reader'));
sm.setText('Your long article text here…');

// 3. Combined — fisheye + pinch-to-zoom (the original behavior)
const pm = createPinchMorph(document.getElementById('reader'));
pm.setText('Your long article text here…');

// Clean up when done:
instance.destroy();

The container element should have a defined width and height (e.g. 100vw × 100vh). Each function creates a fullscreen <canvas> inside it.

API

createPinchType(element, options?)

Uniform text rendering with pinch-to-zoom scaling.

| Option | Type | Default | Description | |---|---|---|---| | fontSize | number | 18 | Base font size | | minFontSize | number | 8 | Smallest size reachable via pinch | | maxFontSize | number | 60 | Largest size reachable via pinch | | fontFamily | string | "Inter", system-ui, sans-serif | CSS font-family | | lineHeight | number | 1.57 | Line-height ratio | | padding | number | 28 | Content padding (px) | | background | string | #0a0a0a | Canvas background color | | friction | number | 0.95 | Scroll momentum friction (0–1) | | onZoom | (fontSize) => void | — | Callback after each pinch zoom |

createScrollMorph(element, options?)

Fisheye scroll effect. No pinch-to-zoom.

| Option | Type | Default | Description | |---|---|---|---| | centerFontSize | number | 26 | Font size at viewport center | | edgeFontSize | number | 11 | Font size at viewport edges | | morphRadius | number | 300 | Radius (px) of the center→edge gradient | | fontFamily | string | "Inter", system-ui, sans-serif | CSS font-family | | lineHeight | number | 1.57 | Line-height ratio | | padding | number | 28 | Content padding (px) | | background | string | #0a0a0a | Canvas background color | | friction | number | 0.95 | Scroll momentum friction (0–1) |

createPinchMorph(element, options?)

Combined: fisheye scroll effect + pinch-to-zoom.

| Option | Type | Default | Description | |---|---|---|---| | centerFontSize | number | 26 | Font size at viewport center | | edgeFontSize | number | 11 | Font size at viewport edges | | minFontSize | number | 8 | Smallest size reachable via pinch | | maxFontSize | number | 60 | Largest size reachable via pinch | | morphRadius | number | 300 | Radius (px) of the center→edge gradient | | fontFamily | string | "Inter", system-ui, sans-serif | CSS font-family | | lineHeight | number | 1.57 | Line-height ratio | | padding | number | 28 | Content padding (px) | | background | string | #0a0a0a | Canvas background color | | friction | number | 0.95 | Scroll momentum friction (0–1) | | onZoom | (center, edge) => void | — | Callback after each pinch zoom |

Instance Methods (all three)

| Method | Description | |---|---| | setText(text) | Update displayed text and re-layout | | resize() | Force re-layout (auto-called on window resize) | | destroy() | Remove canvas, listeners, and animation loop | | canvas | The underlying <canvas> element (read-only) |

Lightweight Mode

Just want pinch-to-zoom on your existing page? Use the lightweight API — no canvas, no dependencies, ~1KB. Want the full canvas rendering experience? Use createPinchType / createScrollMorph / createPinchMorph above.

pinchZoom(options?) — Vanilla JS

import { pinchZoom } from 'pinch-type';

const cleanup = pinchZoom({
  target: document.getElementById('article'),  // default: document.documentElement
  min: 12,        // min font size, default 12
  max: 32,        // max font size, default 32
  initial: 16,    // starting size, default 16
  step: 1,        // px per zoom step, default 1
  onZoom: (size) => console.log(size),
});

// Later: remove all listeners
cleanup();

Detects two-finger touch pinch and trackpad pinch (ctrl+wheel / meta+wheel). Single-finger scroll is unaffected. Applies font-size directly to the target element.

usePinchZoom(options?) — React Hook

Requires react as a peer dependency.

import { usePinchZoom } from 'pinch-type';

function Reader() {
  const { fontSize, ref } = usePinchZoom({ min: 12, max: 32 });
  return <article ref={ref} style={{ fontSize }}>...</article>;
}

| Option | Type | Default | Description | |---|---|---|---| | min | number | 12 | Minimum font size | | max | number | 32 | Maximum font size | | initial | number | 16 | Starting font size | | step | number | 1 | Pixels per zoom step | | onZoom | (size) => void | — | Callback after each zoom |

How It Works

Text is measured and wrapped using @chenglou/pretext for accurate segment-aware line breaking. Each frame, lines are drawn to a canvas. For scroll morph, font size and opacity are interpolated based on distance from the viewport center (ease-out cubic). Touch events drive momentum scrolling with configurable friction, and two-finger pinch gestures scale the font size range in real time.

License

MIT — Lucas Crespo