Pixel UI
Controls

Spider Cursor

Spider Cursor

Now swinging in all five boroughs*

Your friendly neighborhood web developer.

I do whatever a spider can. So far that is sticking to walls, shipping on Fridays, and being late to everything.

*Staten Island by ferry only. I cannot swing over water.

1,204
cats pulled out of trees
0
months of rent paid on time
3
identical guys pointing at me
29 min
average pizza delivery, one minute too late

What one radioactive bite gets you

No refunds. The spider is unavailable for comment.

Wall-crawling

Great for stakeouts. Terrible for touchscreens.

Spider-sense

Tingles before danger, landlords, and group projects.

Web fluid

Homemade. Dissolves in one hour, same as my confidence.

Super strength

Can lift a bus. Cannot open a pickle jar while anyone is watching.

Today's patrol board

Grab a card and haul it to another column. Yes, with a web. I do not own a mouse.

To do

Return Aunt May's casserole dish
Fight a grown man dressed as a rhino
Find out who keeps pointing at me

Swinging on it

Sell photos of myself to my own boss
Explain the suit smell to the dry cleaner

Done-ish

Homework, due yesterday

People are saying things

A menace. I want pictures of him, and I want them cheap.
A newspaper editor
He webbed my car door shut during a rescue. Five stars.
Guy in Queens
We are not the same person. Please stop asking.
A different spider guy

Rates

Billed per swing. Web fluid sold separately.

Friendly

$0

You get waved at from a rooftop.

Neighborhood

1 slice

One rescue and up to four quips.

Amazing

My rent

Full-time hero. May cry on your fire escape.

With great power comes a great electricity bill.

Not affiliated with any spider, radioactive or otherwise. Do not try the wall thing at home.
Scroll to swing, click to throw webs, drag a patrol card

Spider Cursor

A scroll container whose cursor is a red spider mask that swings the page on a web line, webs up what you click, and hauls draggable items around on a thread.

Dependencies

motion

Installation

npx shadcn@latest add ikislay/pixel-ui/spider-cursor

How to use

import { SpiderCursor } from "@/components/ui/spider-cursor";


export default function Demo() {
  return (
    <SpiderCursor
      className="h-96"
      onWebDrop={(item, zone) => console.log(item.dataset.webDrag, zone?.dataset.webDrop)}
    >
      <div data-web-drop="inbox">
        <div data-web-drag="card-1">Drag me</div>
      </div>
      <div data-web-drop="done" />
    </SpiderCursor>
  );
}

Source Code

// Loading…

Props

Options you can pass to customize this component.

Prop
Type
Description
onWebDrop
(item: HTMLElement, zone: HTMLElement | null) => void

Runs when a dragged item is released. Mark draggable items with data-web-drag set to a unique id and drop zones with data-web-drop. The zone is null when the item lands outside one.

className
string

Classes applied to the root. Give it a height; the content scrolls inside it.