diff --git a/lib/playground/src/pages/pointer/blob.astro b/lib/playground/src/pages/pointer/blob.astro
index b831b49..378a881 100644
--- a/lib/playground/src/pages/pointer/blob.astro
+++ b/lib/playground/src/pages/pointer/blob.astro
@@ -4,7 +4,7 @@ import Layout from "../../layouts/Layout.astro";
 ---
 
 <script>
-	import { onPointerEvents, useLoop, useWebGLCanvas, useBoundingRect } from "usegl";
+	import { usePointerEvents, useLoop, useWebGLCanvas } from "usegl";
 	import { fragment, vertex } from "../../shaders/blob";
 	import { incrementRenderCount } from "../../components/renderCount";
 
@@ -20,13 +20,12 @@ import Layout from "../../layouts/Layout.astro";
 		immediate: false,
 	});
 
-	const { center, rect } = useBoundingRect(canvas);
 	const targetPointer = { x: 0, y: 0 };
 
-	onPointerEvents(canvas, {
-		move: ({ x, y }) => {
-			targetPointer.x = (x - center.x) / (rect.width / 2);
-			targetPointer.y = (center.y - y) / (rect.height / 2);
+	usePointerEvents(canvas, {
+		move: ({ pointer, canvasRect, canvasCenter }) => {
+			targetPointer.x = (pointer.x - canvasCenter.x) / (canvasRect.width / 2);
+			targetPointer.y = (canvasCenter.y - pointer.y) / (canvasRect.height / 2);
 		},
 		leave: () => {
 			targetPointer.x = targetPointer.y = 0;
diff --git a/lib/playground/src/pages/pointer/pointer.astro b/lib/playground/src/pages/pointer/pointer.astro
index f38f145..c0573b9 100644
--- a/lib/playground/src/pages/pointer/pointer.astro
+++ b/lib/playground/src/pages/pointer/pointer.astro
@@ -3,7 +3,7 @@ import Layout from "../../layouts/Layout.astro";
 ---
 
 <script>
-	import { useBoundingRect, onPointerEvents, useWebGLCanvas } from "usegl";
+	import { usePointerEvents, useWebGLCanvas } from "usegl";
 	import { incrementRenderCount } from "../../components/renderCount";
 
 	const canvas = document.querySelector("canvas");
@@ -14,29 +14,35 @@ import Layout from "../../layouts/Layout.astro";
 			varying vec2 vUv;
 			uniform vec2 uPointerPosition;
 			uniform vec2 uResolution;
+			uniform vec3 uCircleColor;
 
 			void main() {
 				vec2 uv = (vUv - .5) * uResolution / min(uResolution.x, uResolution.y);
 				float dist = distance(uv, uPointerPosition);
-				float circle = 1. - smoothstep(.099, .101, dist);
-				gl_FragColor = vec4(vec3(circle), 1.);
+				float circleMask = 1. - smoothstep(.099, .101, dist);
+				vec3 circle = mix(vec3(0.), uCircleColor, circleMask);
+				gl_FragColor = vec4(circle, 1.);
 			}
 		`,
 		uniforms: {
 			uPointerPosition: [0, 0],
+			uCircleColor: [1, 1, 1],
 		},
 	});
 
-	const { rect } = useBoundingRect(canvas);
-
-	onPointerEvents(canvas, {
-		move: ({ clientX, clientY }) => {
-			const { left, bottom, width, height } = rect;
+	usePointerEvents(canvas, {
+		move: ({ pointer, canvasCenter, canvasRect }) => {
 			uniforms.uPointerPosition = [
-				(clientX - (left + width / 2)) / Math.min(width, height),
-				(bottom - height / 2 - clientY) / Math.min(width, height),
+				(pointer.x - canvasCenter.x) / Math.min(canvasRect.width, canvasRect.height),
+				(canvasCenter.y - pointer.y) / Math.min(canvasRect.width, canvasRect.height),
 			];
 		},
+		down: () => {
+			uniforms.uCircleColor = [1, 0, 0];
+		},
+		up: () => {
+			uniforms.uCircleColor = [1, 1, 1];
+		},
 	});
 
 	onAfterRender(incrementRenderCount);
diff --git a/lib/src/helpers/pointer.ts b/lib/src/helpers/pointer.ts
deleted file mode 100644
index d8c3820..0000000
--- a/lib/src/helpers/pointer.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-type PointerEvents = {
-	enter?: (e: PointerEvent) => void;
-	move?: (e: PointerEvent) => void;
-	leave?: (e: PointerEvent) => void;
-};
-
-export function onPointerEvents(canvas: HTMLCanvasElement, { enter, move, leave }: PointerEvents) {
-	function onPointerEnter(e: PointerEvent) {
-		enter?.(e);
-		if (typeof move === "function") {
-			canvas.addEventListener("pointermove", move);
-		}
-		canvas.addEventListener("pointerout", onPointerOut, { once: true });
-	}
-
-	function onPointerOut(e: PointerEvent) {
-		leave?.(e);
-		if (typeof move === "function") {
-			canvas.removeEventListener("pointermove", move);
-		}
-	}
-
-	canvas.addEventListener("pointerenter", onPointerEnter);
-
-	function stop() {
-		canvas.removeEventListener("pointerenter", onPointerEnter);
-		if (typeof move === "function") {
-			canvas.removeEventListener("pointermove", move);
-		}
-		canvas.removeEventListener("pointerout", onPointerOut);
-	}
-
-	return stop;
-}
diff --git a/lib/src/hooks/useBoundingRect.ts b/lib/src/hooks/useBoundingRect.ts
index dc24b4a..9aed9f6 100644
--- a/lib/src/hooks/useBoundingRect.ts
+++ b/lib/src/hooks/useBoundingRect.ts
@@ -15,6 +15,17 @@ export interface UseBoundingRectOptions {
 	windowScroll?: boolean;
 }
 
+export interface BoundingRect {
+	width: number;
+	height: number;
+	top: number;
+	right: number;
+	bottom: number;
+	left: number;
+	x: number;
+	y: number;
+}
+
 /**
  * Dynamically get the bounding rectangle of an HTML element
  */
@@ -24,7 +35,7 @@ export function useBoundingRect(target: HTMLElement, options: UseBoundingRectOpt
 		windowScroll = typeof window !== "undefined",
 	} = options;
 
-	const rect = {
+	const rect: BoundingRect = {
 		width: 0,
 		height: 0,
 		top: 0,
diff --git a/lib/src/hooks/usePointerEvents.ts b/lib/src/hooks/usePointerEvents.ts
new file mode 100644
index 0000000..b09fd25
--- /dev/null
+++ b/lib/src/hooks/usePointerEvents.ts
@@ -0,0 +1,62 @@
+import type { BoundingRect } from "./useBoundingRect";
+import { useBoundingRect } from "./useBoundingRect";
+
+type HandlerArgs = {
+	pointer: {
+		x: number;
+		y: number;
+	};
+	canvasRect: BoundingRect;
+	canvasCenter: {
+		x: number;
+		y: number;
+	};
+};
+
+type PointerEventsHandlers = {
+	enter?: ({ pointer, canvasRect, canvasCenter }: HandlerArgs) => void;
+	move?: ({ pointer, canvasRect, canvasCenter }: HandlerArgs) => void;
+	leave?: ({ pointer, canvasRect, canvasCenter }: HandlerArgs) => void;
+	down?: ({ pointer, canvasRect, canvasCenter }: HandlerArgs) => void;
+	up?: ({ pointer, canvasRect, canvasCenter }: HandlerArgs) => void;
+};
+
+/**
+ * Listen to common pointer events and provide additional infos about the canvas
+ */
+export function usePointerEvents(canvas: HTMLCanvasElement, handlers: PointerEventsHandlers) {
+	const { rect: canvasRect, center: canvasCenter } = useBoundingRect(canvas);
+
+	const activeHandlers = Object.fromEntries(
+		Object.entries(handlers)
+			.filter(([, handler]) => typeof handler === "function")
+			.map(([handlerName, handlerFunction]) => [
+				handlerName,
+				(e: PointerEvent) => {
+					handlerFunction({
+						pointer: { x: e.clientX, y: e.clientY },
+						canvasRect,
+						canvasCenter,
+					});
+				},
+			]),
+	);
+
+	function listen() {
+		for (const [event, handler] of Object.entries(activeHandlers)) {
+			canvas.addEventListener(`pointer${event as keyof PointerEventsHandlers}`, handler, {
+				passive: true,
+			});
+		}
+	}
+
+	function stop() {
+		for (const [event, handler] of Object.entries(activeHandlers)) {
+			canvas.removeEventListener(`pointer${event as keyof PointerEventsHandlers}`, handler);
+		}
+	}
+
+	listen();
+
+	return { stop, listen };
+}
diff --git a/lib/src/index.ts b/lib/src/index.ts
index a97c6da..caa801e 100644
--- a/lib/src/index.ts
+++ b/lib/src/index.ts
@@ -14,5 +14,4 @@ export { useWebGLContext } from "./hooks/useWebGLContext";
 export { useLoop, playAllLoops, pauseAllLoops } from "./hooks/useLoop";
 export { useResizeObserver } from "./hooks/useResizeObserver";
 export { useBoundingRect } from "./hooks/useBoundingRect";
-
-export { onPointerEvents } from "./helpers/pointer";
+export { usePointerEvents } from "./hooks/usePointerEvents";
diff --git a/lib/tests/__screenshots__/pointer-move/pointer-move-android.png b/lib/tests/__screenshots__/pointer-move/pointer-move-android.png
index 209a779..814aad1 100644
--- a/lib/tests/__screenshots__/pointer-move/pointer-move-android.png
+++ b/lib/tests/__screenshots__/pointer-move/pointer-move-android.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4b6217ee63285ab849d0a2223f4da526ffd85e608b644f0af81dc65df996902f
-size 4514
+oid sha256:c23be07638293c1eb500401c5f50be5c7d22db46a30ada43685da0aeeffdf956
+size 4359
diff --git a/lib/tests/__screenshots__/pointer-move/pointer-move-chromium.png b/lib/tests/__screenshots__/pointer-move/pointer-move-chromium.png
index 2d0174f..9b290a5 100644
--- a/lib/tests/__screenshots__/pointer-move/pointer-move-chromium.png
+++ b/lib/tests/__screenshots__/pointer-move/pointer-move-chromium.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6051d10065a1f59bed3c50f2d591bc5cf0c036d0915d915ec41b6bf2046a5121
-size 4571
+oid sha256:f48975190da32d03955ce467aae6a7ce3dd560cedcd6e850454595f337f8f269
+size 4513
diff --git a/lib/tests/__screenshots__/pointer-move/pointer-move-firefox.png b/lib/tests/__screenshots__/pointer-move/pointer-move-firefox.png
index 5f8a9d5..f138ef6 100644
--- a/lib/tests/__screenshots__/pointer-move/pointer-move-firefox.png
+++ b/lib/tests/__screenshots__/pointer-move/pointer-move-firefox.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:621e7fe67ff27639ee8bcaeb05acd847795c9c52ea473410c4eed3ddff8ce95c
-size 11772
+oid sha256:c32674b0dc38df49cb396067bfb2372949ecf4bc7790f0855d1965a11edd2612
+size 11659
diff --git a/lib/tests/__screenshots__/pointer-move/pointer-move-iphone.png b/lib/tests/__screenshots__/pointer-move/pointer-move-iphone.png
index 67669ea..a3eb43b 100644
--- a/lib/tests/__screenshots__/pointer-move/pointer-move-iphone.png
+++ b/lib/tests/__screenshots__/pointer-move/pointer-move-iphone.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:49e569098738e6f3bd9b78590cfdd23ae70de16919123b5ae0c1ef7de95dfc93
-size 4664
+oid sha256:90044781673d171dfdd08355f327d67d8fd15954d437a4d1402b5edbf7e504d5
+size 4439
diff --git a/lib/tests/__screenshots__/pointer-move/pointer-move-safari.png b/lib/tests/__screenshots__/pointer-move/pointer-move-safari.png
index 30ef66a..5eea253 100644
--- a/lib/tests/__screenshots__/pointer-move/pointer-move-safari.png
+++ b/lib/tests/__screenshots__/pointer-move/pointer-move-safari.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:973c9add52e416d6c50a9d730cfc2dc2e002258e807f3519655af0bee38510ca
-size 5142
+oid sha256:7ffe81c345d248d297fc4bc32224438c53c89058fb113178748535375c08c507
+size 4896
diff --git a/lib/tests/screenshots.spec.ts b/lib/tests/screenshots.spec.ts
index 8eacca2..b2ef563 100644
--- a/lib/tests/screenshots.spec.ts
+++ b/lib/tests/screenshots.spec.ts
@@ -22,6 +22,9 @@ test("pointer move", async ({ page, viewport, baseURL }) => {
 	await page.mouse.move((viewport?.width || 0) * 0.5, (viewport?.height || 0) * 0.45);
 
 	await expect(page.getByText("Renders: 2")).toBeVisible();
+
+	await page.mouse.down();
+
 	await page.waitForTimeout(100);
 
 	await expect(page.locator("main")).toHaveScreenshot();