What is SpiderCursor?

SpiderCursor is a lightweight, framework-agnostic procedural 8-legged spider that stalks your cursor across any web page. Rendered in Three.js with real-time inverse kinematics (IK) leg physics, ground drop shadows, and trailing silk, it requires zero external 3D model files or images.

Does SpiderCursor block clicks, buttons, or input fields?

No. SpiderCursor is rendered on an overlay canvas with CSS pointer-events: none applied by default, allowing clicks, text selection, and form interactions to pass directly through without disruption.

How do I add SpiderCursor to my website in one line?

Include Three.js and the SpiderCursor UMD bundle via CDN in your HTML head, then initialize it on the body tag with: .

Does SpiderCursor require downloading 3D models or textures?

No. All spider anatomy (carapace, abdomen, 8 multi-jointed legs, eyes, silk) is generated mathematically at runtime via Three.js procedural geometry with zero external asset files.

What behavior modes does SpiderCursor support?

SpiderCursor supports four distinct behavior modes: hunt (smoothly stalks the cursor), flee (scurries away when approached), wander (freely roams the viewport autonomously), and perch (remains motionless until startled).

Does SpiderCursor affect battery life or Core Web Vitals?

SpiderCursor utilizes hardware-accelerated WebGL with an adjustable framerate cap (default 60 FPS) and automatically pauses the render loop when the browser tab is hidden to conserve CPU, GPU, and battery power.

SpiderCursor - Lightweight Three.js Procedural Spider

Key Features

Realistic Inverse Kinematics: 8 legs dynamically compute joint angles and footstep cadence in real time.
Zero External Assets: 100% procedural geometry and Web Audio synthesis. No 3D model downloads or image sprites.
Non-Blocking Click-Through UI: Uses pointer-events: none so every button, link, and input on your website remains completely interactive.
4 Behavioral Modes: Hunt, Flee, Wander, and Perch.

Instant 1-Line Setup

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://unpkg.com/spider-cursor@1.0.0/dist/spider-cursor.umd.js"></script>
<body onload="SpiderCursor.init()">