Spider Cursor: a Spider That Walks After Your Pointer and Spins Silk
Build a hero section where a spider drawn in code lowers itself on a thread, walks after the pointer on eight jointed legs that plant and step, and spins silk between the objects on the page; it wanders between them when the pointer rests and a click fixes the current strand. Pure code with no model calls and no media files: a 2D canvas, inverse-kinematics legs and sagging silk. The hero is followed by a full landing page: chapter titles, an intro, a product console drawn in HTML, feature cards, specs, stats, a quote, a call to action and a footer, with a moving glow and a floating section pill.
Bring your brand, a giant word, headline, links, up to four small objects for the page, the spider's look, palette and language. The Skill returns a full landing page (index.html), a section to paste into an existing site and a React component, with the bundled open fonts.
How it works
The builder writes the page with real text and the objects as small cards, plus a section to paste and a React wrapper.
In the browser a canvas draws the spider every frame: each leg is solved from hip to planted foot with inverse kinematics, and feet step in two alternating groups when the body has moved far enough.
A dragline trails from the spider; passing an object, growing long or a click fixes it as a strand that sags and sways.
Frequently asked questions
Does the page call a model?
No. It is pure code: HTML, one script and two fonts. Making a page costs nothing.
Can I change the spider?
Yes: pick a tiger, widow or garden look and set its size and speed in site.json.
Does the spider block clicks?
No. Its canvas ignores the pointer, so links and buttons under it still work.
Why do the links do nothing here?
The example runs in a sandboxed frame with its links disabled. In your own page they go wherever you set them in site.json.
Does it work on phones?
Yes. A dragged finger leads the spider. Checked in a 390 px phone viewport. With reduced motion turned on it hangs still on its thread.
Why is there no online generation?
Building a new scene needs a model key inside the sandbox, which the backend doesn’t support yet. Run the Skill with your own agent for now.