Framework-agnostic · Zero dependencies · TypeScript
Your cursor transforms dynamically — play on video, sliders on carousels, exit arrow on external links. One line of code. Works everywhere.
Hover each card to see the cursor transform in real-time. Switch between themes to see different visual styles.
<video> input[type=range] <input>, <textarea> <button>, role=button, <select> cursorRules option draggable="true" data-cursor npm install cursor-as-toolimport { CursorAsTool } from 'cursor-as-tool';
const cursor = new CursorAsTool({
smooth: true,
smoothSpeed: 0.12,
theme: 'gaming', // 'minimal' (default) or 'gaming'
cursorRules: [
{ selector: '.gallery img', cursorType: 'zoom-in' },
],
});
cursor.init();
// Clean up when done:
cursor.destroy();import { useCursorAsTool } from 'cursor-as-tool/react';
function App() {
// init on mount, destroy on unmount — automatic
useCursorAsTool({ smooth: true, theme: 'gaming' });
return <main>Your app</main>;
}<script src="https://unpkg.com/cursor-as-tool/dist/cursor-as-tool.umd.global.js"></script>
<script>
// One-liner (uses minimal theme by default)
CursorAsTool.init();
// Or with gaming theme
const c = new CursorAsTool.CursorAsTool({ smooth: true, theme: 'gaming' });
c.init();
</script>| Option | Type | Default |
|---|---|---|
hideNativeCursor | boolean | true |
size | number | 32 |
zIndex | number | 9999 |
smooth | boolean | false |
smoothSpeed | 0–1 | 0.15 |
cursorRules | CursorRule[] | [] |
container | HTMLElement | document.body |
theme | 'minimal' | 'gaming' | 'minimal' |
Set any cursor type directly in HTML — no JavaScript needed:
<div data-cursor="zoom-in">Gallery item</div>
<div data-cursor="loading">Async content</div>