spiderSomething
small.
Something alive.
A GOOD PLACE TO HANG OUT.
SMALL PACKAGE. EIGHT LEGS. BIG PERSONALITY.
A little life.
In the corners.
Meet your website’s smallest resident. Delicate webs,
curious eyes, and a whole page to explore.
Zero dependencies · TypeScript · MIT licensed · No
CSS to import
01 / MEET YOUR NEW RESIDENT
LIVE PLAYGROUND
Make yourself at home.
A WEBSITE, WITH A LITTLE MORE SOUL.
Oh, hi there.
I made a little web.
Hope you don’t mind.
Please approach gently.
08 legs / 01 heart
Good things live
in the details.
in the details.
02 / THOUGHTFULLY TINY
Small presence.
Small presence.
Considered details.
A delightful extra that knows its place.
Built to feel at home on your website.
Knows the layers.
Webs follow real page elements. Scroll, resize, or bring a card forward—the silk follows, with foreground visibility checked by the browser.
A small spider. A whole world.
Blinking eyes, curious glances, a gentle sway. Watch articulated legs explore your whole page, spin silk between letters, and slip behind objects. Get too close and it scurries away.
A good guest, everywhere.
Responsive webs, touch reactions, and respect for reduced motion. Clicks pass through. Hidden tabs take a rest. No tracking, no runtime dependencies.
03 / MAKE ROOM FOR ONE MORE
A few lines.
A few lines.
Eight little legs.
Works with plain HTML, React, Vue, and the rest.
Mark a corner. Let your little
resident roam.
No stylesheets. No dependencies. A very good guest.
A FEW THINGS TO KNOW
The fine threads.
Will it get in the way?
The decorative canvas ignores pointer events and stays out of the accessibility tree.
Your links, text selection, and scrolling keep working. Use
data-spider-ignore to keep any area spider-free.
What about phones and reduced motion?
The spider works in page coordinates on every screen. Tap near the spider to startle it. It explores the document and takes shelter behind cards and other objects. With reduced motion enabled, it becomes a still illustration; blinking, weaving, swaying, and pointer reactions stop.
How does it understand layers?
It measures marked elements, intersects overflow containers, clips rounded corners, and samples browser hit-testing for foreground occlusion. It works best with rectangular cards. Visibility masks use a 12px grid; rotated shapes, pointer-transparent overlays, shadow DOM interiors, and iframe content have limits. See the README for details.
Can I make it my own?
Choose color, scale, speed, web span, opacity, fear radius, and resident count. Use the controller to pause, resume, refresh, or remove everything. Source and full API documentation are on GitHub.
The internet could use
a little more character.