Cursor Custom transforms ordinary pointer movement into an engaging visual experience with dynamic trails, animated rings, sparks, and lens effects. Experiment with realistic physics, fine-tune every interaction using intuitive sliders, and seamlessly integrate your preferred effects into your website with ready-to-use React code.
A working gallery of interactive mouse cursor effects you can run, study and reuse — not a pack of static pointer images.
Cursor Custom is the home of the CursorX package: a browser-based playground with 24 custom cursor effects built on React 19, Vite and the Canvas API. Each slide in the gallery isolates one effect in its own demo area, so you can move the mouse, click, and watch exactly how that cursor reacts before deciding whether it belongs on your site.
Most "custom cursor" downloads replace the arrow with another picture. This one changes behaviour. A ring that squashes as it accelerates, embers that cool from yellow to grey, buttons that lean toward the pointer, a lens that magnifies the page beneath it. Those are motion and feedback decisions, and the gallery lets you tune them with sliders before you copy a single line of code.
Every feature exists to answer one question fast: will this cursor make my page better, or just busier?
Particle trails, spring rings, fire embers, constellation lines, a magnifying glass lens and nineteen more. Each one uses a different interaction model, so the gallery reads like a reference set rather than 24 colour swaps.
Sliders, colour swatches and toggles feed a reactive config object. Change stiffness, gravity, size or hue and the cursor redraws on the next frame — no reload, no rebuild.
Open the code modal on any slide to read the hook or component behind the effect, then copy it with one click.
Drawing runs inside requestAnimationFrame on canvases sized to the preview area, not the whole screen.
Every effect cancels its animation frame and removes window listeners when you leave the slide.
Magnetic and Gravity Pull read elements tagged with data attributes and move them with spring return.
CSS-driven, canvas-driven and filter-driven effects, so you can pick the technique that suits your stack.
Readable files you can audit, fork, trim and ship in personal or commercial work.
The gallery is a vertical carousel. Each slide mounts one cursor, wires it to a tuning panel and keeps its source a click away.
Scroll, use the arrow keys, tap the side dots or pick a name from the navbar menu to jump between all 24 effects.
The active effect mounts inside its own preview area. The previous one is unmounted and its animation loop cancelled.
Sliders and colour pickers write to a reactive config object. Canvas effects read it on the next frame; CSS effects update custom properties.
“View Code” opens a modal with the hook or component. Copy it, paste it into your project and pass your tuned values as props.
You need Node.js 18 or newer. Pick your system below — the commands are identical, only the terminal differs.
Download the Windows installer from nodejs.org and keep the default options, including “Add to PATH”.
Save the ZIP, right-click it, choose Extract All and open the extracted folder.
Right-click empty space in the folder and choose Open in Terminal (Windows 11) or type powershell into the address bar.
Run the two commands on the right, then open the local address Vite prints.
Use the macOS .pkg from nodejs.org or brew install node if you already use Homebrew.
Safari unzips archives automatically into Downloads. Move the folder somewhere permanent.
Type cd with a trailing space, drag the folder into the Terminal window and press Return.
Run the commands, then open the printed address in Safari, Chrome or Firefox.
Distribution repositories often lag behind. NodeSource packages or nvm install --lts give you a current build.
Run unzip CursorX-Interactive-Cursor-Effects-main.zip in your downloads folder.
cd CursorX-Interactive-Cursor-Effects-main
Run the commands and open the local URL in Firefox or Chromium.
# install dependencies (first run only) > npm install # start the gallery > npm run dev
Building for production instead? Run npm run build and upload the generated dist folder to any static host.
A cursor effect works when it supports what the page is for. These are the four contexts where people get the most out of the library.
Spotlight and Torch Light turn a project grid into something visitors explore. Designers use them on case-study indexes where curiosity matters more than speed of scanning.
Magnetic and Elastic Ring add feedback to add-to-cart and sign-up buttons. Used on a single control, the effect guides attention without turning checkout into a toy.
Crosshair Scope, Glitch Shift and Neon Glow suit launch pages for games, esports events and music drops, where the page itself should feel like a preview.
Ripple Wave, DNA Helix and Constellation double as small simulations. Teachers and workshop hosts use them to show interference, structure and networks on a projector.
The button pulls the latest main branch as a ZIP directly from GitHub. Nothing is repackaged or wrapped in an installer.
| File | CursorX-Interactive-Cursor-Effects-main.zip |
|---|---|
| Contents | Source code, 24 effects, docs |
| Requires | Node.js 18+ and npm |
| License | MIT |
| Price | Free |
Download the ZIP
Prefer to read first? Browse the repository or see the download details.
Because the effects are web code, the real question is which browser renders them, not which operating system you own.
On Windows 10 and Windows 11, run the gallery in Chrome, Edge or Firefox. On a Mac, Safari 16.4+ and every Chromium browser handle the canvas and blend-mode effects. Linux desktops behave the same with Firefox or Chromium. Touch-only devices show the effects on tap but have no hover pointer, so a few effects — Spotlight and Magnetic in particular — are best switched off on phones.
| Compared on | Cursor Custom | Sweezy cursors (extension) | Windows / macOS pointer settings | Plain CSS cursor:url() |
|---|---|---|---|---|
| What changes | Animated, physics-based effects | Pointer image on pages you visit | System arrow, size and colour | Static image on one site |
| Who sees it | Every visitor of your site | Only you | Only you, in every app | Every visitor of your site |
| Install needed | None for visitors | Browser extension | None | None |
| Motion and physics | Yes — springs, gravity, particles | Mostly static images | Animated .ani on Windows only | No |
| Tunable | Live sliders + code | Pick from a pack | Size and colour | Edit image file |
| Best for | Brand and interaction design | Personal browsing style | Visibility and accessibility | Simple branded pointer |
Collected from first runs on fresh Windows, macOS and Linux machines. Find your symptom, apply the fix.
LAG / LOW FPSTurn on hardware acceleration in your browser (Chrome: Settings → System → Use graphics acceleration). Then lower the particle count or trail length in the config panel.
WINDOWS · POWERSHELLnpm is not recognizedNode.js is missing or the terminal was opened before installing it. Install the LTS build from nodejs.org, close every terminal window and open a fresh one.
VITE DEV SERVERAnother dev server is running. Stop it with Ctrl + C, or start this one on a different port with npm run dev -- --port 5174.
OVERLAPPING EFFECTSA previous effect did not unmount. Switch slides once more to trigger cleanup, or refresh the tab. In your own app, make sure the component returns its cleanup function.
CLIPBOARD BLOCKEDBrowsers only allow the Clipboard API on https or localhost. Open the gallery through http://localhost:5173, not an IP address on your network.
MAGNIFIER POSITIONResize the window once so the boundary rectangle is recalculated, and avoid viewport-unit offsets on the cloned area.
The gallery is light. Requirements mostly come from Node.js and from how many particles you ask the GPU to draw.
Minimumnpm install
RecommendedA cursor download is a common place for adware. This package sidesteps the risk by being plain, readable source.
Interactive cursors are a design tool with real costs. Here is where this library shines and where it asks something of you.
Pros
ConsShort, specific answers. Longer explanations live in the linked guides.
A ZIP archive of the CursorX source code: the React 19 gallery, 24 cursor effect components in src/cursors/, the parameter data file, styles, the Vite configuration and the MIT license. There is no installer and no compiled program inside. You run the gallery locally with Node.js, or you copy individual effects into your own React project.
No. These effects live inside web pages, so they appear only where the code runs: the local gallery or a website that includes an effect. Your desktop pointer, File Explorer and other apps keep the cursor scheme set in Windows Settings. If you want a system-wide pointer on Windows 11, our Windows 11 guide walks through the built-in pointer settings and .cur/.ani schemes.
It works in Chrome, but it is not an extension. Extensions such as Sweezy cursors swap the pointer image on pages you visit. Cursor Custom effects are code that a site owner adds to their own pages, so every visitor sees them without installing anything. The Chrome guide compares both routes.
Yes. The gallery needs Node.js 18 or newer and a modern browser, both of which run on macOS with Apple silicon or Intel chips. Safari, Chrome, Edge and Firefox all render the canvas effects. The Mac guide covers Terminal setup step by step.
To browse and tune effects in the gallery, no — you only run two commands. To move an effect into your own site, basic React knowledge helps because each effect ships as a component or hook. Sites without React can still reuse the logic, since the core of most effects is plain Canvas API drawing inside a requestAnimationFrame loop.
Each effect draws on a canvas scoped to its preview area and cancels its animation frame on unmount, so idle cost is close to zero. Heavy particle effects can still strain older laptops if you raise particle counts. Keep counts moderate, disable effects on touch screens, and respect the reduced-motion setting. Our performance guide gives exact numbers to aim for.
The archive is served directly by GitHub from the public repository and contains readable JavaScript, CSS and JSON files only. It is released under the MIT license, which allows personal and commercial use as long as the copyright notice stays in place. You can inspect every file before running npm install.
Yes. The MIT license permits commercial use, modification and redistribution. Keep the original license text with the code you copy, test the effect with keyboard and touch users, and give visitors a way to turn heavy motion off.