← Live demo

A new resident.
A few small steps.

  1. Create a code component called Spider in Framer.
  2. Paste the supplied Spider.tsx, save and place it on the page.
  3. Choose Whole page, then open Preview. The orange editor marker becomes a resident descending on silk.
  4. Tune size, speed and silk in the sidebar. Keep one instance visible at each breakpoint.

Give it a place to live.

Buttons, cards, images and headings provide real geometry. Name a layer Web anchor or Hiding place for explicit control. Silk is built gradually by the resident.

A considerate guest.

Visitor controls can pause the effect or explicitly clear the silk. Clicking webs never erases them. Reduced-motion preferences are respected, and touch scrolling remains available.

Checkout is not open yet. The MIT JavaScript engine is available now ↗