Curases is a zero-latency, hardware-accelerated custom cursor engine with multi-state animations, live SVG physics, and instant npm or CDN deployment.

Sandbox

Installation & Integration

Install via npm, drop a 1-line CDN script tag into any website, or use the interactive npx setup tool. The engine is centrally hosted on your edge so bug fixes and new cursor presets update automatically without redeploying.

1. Choose your installation method

Method

npx curases handy

Interactive CLI guide ↗

Auto-detects your project (Next.js, React, Vite, or HTML), installs the package, and configures the cursor automatically.

2. Terminal command

Add the snippet to your application:

# Run inside your project root:
npx curases handy

# Or pick from an interactive menu:
npx curases

3. Thin client & hosted engine features

Zero Maintenance: The engine is served from https://www.curases.com/engine.js. Physics updates, optimizations, and new cursor presets roll out automatically without users needing to redeploy.
Dual Distribution: Choose between a fully-typed npm package with React/Next.js components (curases/react) or a zero-install 1-line CDN script tag.
Interactive npx CLI: Run npx curases handy in any terminal to automatically inspect your project, install packages, and inject components.
Multi-State Detection: Automatically morphs cursor states on interactive elements: hover, click, drag, typing, and not-allowed.
Roughness & Boil Animation: Real-time procedural SVG sketch jitter and hand-drawn line boiling physics.

Requirements & Compatibility

Framework support: React 18 & 19, Next.js (App & Pages Router), Vite, Astro, Vue, and plain HTML
No-code tools: Fully compatible with Webflow, Framer, Shopify, WordPress, and Squarespace
Ultra-lightweight footprint: The npm package is only ~11 KB and introduces 0 external runtime dependencies
SSR safe: Zero hydration warnings or DOM mismatches in Next.js

Configuration & Props Reference

Prop / Attribute	Type	Default	Description
cursor	string	"Handy"	Cursor preset name from the catalog
size	number	1.5	Scale multiplier (1 = 32px base size)
speed	number	1	Lerp smoothing factor (1 = instant 1:1 hardware)
color	string	""	Hex color override (empty string keeps natural SVG)