Spider Crawler
Spider Crawler is a cursor effect in the UI HUB cursor effects collection. A cursor-following spider over a Wikipedia-style reference list. 8 legs use two-bone IK, tetrapod gait (A = L1,R2,L3,R4, B = R1,L2,R3,L4), seeded RNG, nearest word tracked by Y band.
The component is driven by 4 documented props (className, style, compact, showDemoButton), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Three.js OrthographicCamera and LineSegments/Mesh materials; 2D Canvas 2D context for glitch FX; ResizeObserver on root; toView uses root.getBoundingClientRect().
Preview the cursor effect in the browser above, copy the source, and paste it into your project. Cursor Effects components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Spider Crawler?
A spider that walks toward your pointer over a Wikipedia-style reference list, planting all eight legs on the words with glitch overlays and glowing text.
Spider Crawler at a glance
- Category
- Cursor Effects
- Pricing
- Pro component
- Libraries
- React, Three.js and motion
- Styling
- Tailwind CSS
- Configurable props
- 4
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Spider Crawler works
A cursor-following spider over a Wikipedia-style reference list. 8 legs use two-bone IK, tetrapod gait (A = L1,R2,L3,R4, B = R1,L2,R3,L4), seeded RNG, nearest word tracked by Y band. Body moves to pointer with critically damped velocity; scroll (wheel+keys+edge-follow) wraps scrollY keeping feet/tokens/glows/glitches aligned. Canvas FX renders glitch kinds with weights, spawn near crawler and on planted words, burst on pointerdown; glowing words decay. Three.js OrthographicCamera (0,720,0,1280,-10,10), LineSegments for legs, head plane+edge+dot, custom SVG arrow cursor shown after first pointermove, REDUCED motion supported.
Technical information for Spider Crawler
| Category | Cursor Effects |
|---|---|
| Libraries | React, Three.js and motion |
| Styling | Tailwind CSS |
| Rendering | HTML canvas, ResizeObserver |
| State change | resting on the reference grid to crawling toward pointer, planting legs on words with glitch and glow |
| Props | 4 configurable |
| Usage example | Not published yet |
What Spider Crawler requires
- Three.js OrthographicCamera and LineSegments/Mesh materials
- 2D Canvas 2D context for glitch FX
- ResizeObserver on root; toView uses root.getBoundingClientRect()
- Pointer/wheel/keydown listeners (wheel {passive:false} + preventDefault)
- requestAnimationFrame loop with dt, wrapScroll maintaining loopP
- prefers-reduced-motion matchMedia gating
Spider Crawler questions
What is Spider Crawler?
A spider that walks toward your pointer over a Wikipedia-style reference list, planting all eight legs on the words with glitch overlays and glowing text.
How does Spider Crawler work?
A cursor-following spider over a Wikipedia-style reference list. 8 legs use two-bone IK, tetrapod gait (A = L1,R2,L3,R4, B = R1,L2,R3,L4), seeded RNG, nearest word tracked by Y band. Body moves to pointer with critically damped velocity; scroll (wheel+keys+edge-follow) wraps scrollY keeping feet/tokens/glows/glitches aligned. Canvas FX renders glitch kinds with weights, spawn near crawler and on planted words, burst on pointerdown; glowing words decay. Three.js OrthographicCamera (0,720,0,1280,-10,10), LineSegments for legs, head plane+edge+dot, custom SVG arrow cursor shown after first pointermove, REDUCED motion supported.
Which category does Spider Crawler belong to?
Spider Crawler is listed under Cursor Effects in the UI HUB catalog. Custom cursor components that replace the system pointer with something branded: magnetic attraction, trail effects, target reticles, blend modes and blob followers. Each one is pointer-aware and responsive, and exposes props for colour, smoothing and activation zones. Best used on portfolio and agency sites where the cursor becomes part of the identity.
What does the className prop do in Spider Crawler?
Optional class applied to the root container. It defaults to "".
What does the style prop do in Spider Crawler?
Optional inline styles for the root container. It defaults to {}.
Is Spider Crawler free to use?
Spider Crawler is a Pro component on UI HUB. Pro components are labelled in the catalog and come with a documented props table on the component page.
Which libraries does Spider Crawler use?
Spider Crawler uses React, Three.js and motion and is styled with Tailwind CSS.
What does Spider Crawler need to run?
Spider Crawler needs Three.js OrthographicCamera and LineSegments/Mesh materials, 2D Canvas 2D context for glitch FX, ResizeObserver on root; toView uses root.getBoundingClientRect() and Pointer/wheel/keydown listeners (wheel {passive:false} + preventDefault).