5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/077g_l9cwe8hz.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ouyrs2yz196q.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/3-tcb9ouhlqkm.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/1p31g3z3kho5v.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/2885u7skzba5_.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/1fo1h_o5odhhk.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v-er0xp5q011.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2rwbpl35w01v4.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/0djs9po3g19ek.js","/creators-assets/_next/static/immutable/chunks/1_ej2mmnwnp37.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0bcmpcsc4ih7d.js"],"PostDetailCard"] 5d:T80e,

About

Arachne Web Canvas adds an interactive, procedural web background with crawling arachnid entities right inside your Framer projects. Drop it into hero sections, dark mode themes, or interactive landing pages to give your site an edge and keep visitors engaged.

What it does Renders a custom canvas with a particle field where interactive spiders autonomously crawl, reach out, and anchor their legs onto nearby floating dots. The component calculates leg reach, body motion, and directional facing in real time, featuring interactive cursor targeting, floating drift, and custom lighting aura effects around the entities.

What you can customize

Canvas & background: Canvas background color, vignette intensity, particle grid density, scatter randomness, and floating drift speed.
Particles & aura: Particle dot shape (square or circle), dot size, color, size variety, twinkle speed, and dynamic aura lighting radius around spider bodies.
Spider body & legs: Spider body shape, body size, body color, body glow, face motion toggles, number of legs, leg color, leg opacity, leg fade, leg reach, and leg spread.
Physics & anchors: Step animation speed, leg anchor tip color, anchor size, anchor glow intensity, motion trigger modes (cursor + idle), and movement smoothing settings.

Great for

Hero sections & dark theme landing pages
Creative portfolio sites
Gaming & tech project layouts
Interactive event landing pages
Web3 & futuristic UI showcases

Share your build If you ship something cool with it, post it on X and tag me @Dulajweb, or send it over. I’d love to see what you create.

Need help? Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb

59:[["$","$L5c",null,{"post":{"id":"019fcdce-b67d-7253-a4e6-df6028b1951a","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0bce05c0-4760-4da5-b2f4-851230a1db47","name":"Dulaj dilshan","slug":"dulaj-dilshan-gy7b4j","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132150/avatar-ZgETawWJyCuMuzgHBdPTUADcWJAJWn.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"YQ0MuAGkD44kICkFyZrw","resolved":true,"title":"ArachneSpider","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"About","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Arachne Web Canvas adds an interactive, procedural web background with crawling arachnid entities right inside your Framer projects. Drop it into hero sections, dark mode themes, or interactive landing pages to give your site an edge and keep visitors engaged."}]},{"type":"paragraph","content":[{"type":"text","text":"What it does","marks":[{"type":"bold"}]},{"type":"text","text":" Renders a custom canvas with a particle field where interactive spiders autonomously crawl, reach out, and anchor their legs onto nearby floating dots. The component calculates leg reach, body motion, and directional facing in real time, featuring interactive cursor targeting, floating drift, and custom lighting aura effects around the entities."}]},{"type":"paragraph","content":[{"type":"text","text":"What you can customize","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Canvas & background: Canvas background color, vignette intensity, particle grid density, scatter randomness, and floating drift speed."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Particles & aura: Particle dot shape (square or circle), dot size, color, size variety, twinkle speed, and dynamic aura lighting radius around spider bodies."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Spider body & legs: Spider body shape, body size, body color, body glow, face motion toggles, number of legs, leg color, leg opacity, leg fade, leg reach, and leg spread."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Physics & anchors: Step animation speed, leg anchor tip color, anchor size, anchor glow intensity, motion trigger modes (cursor + idle), and movement smoothing settings."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Great for","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero sections & dark theme landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative portfolio sites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gaming & tech project layouts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive event landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Web3 & futuristic UI showcases"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Share your build","marks":[{"type":"bold"}]},{"type":"text","text":" If you ship something cool with it, post it on X and tag me @Dulajweb, or send it over. I’d love to see what you create."}]},{"type":"paragraph","content":[{"type":"text","text":"Need help?","marks":[{"type":"bold"}]},{"type":"text","text":" Questions or feedback? Reach me anytime: "},{"type":"text","text":"dulajdilshan766@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:dulajdilshan766@gmail.com","target":"_blank"}}]},{"type":"text","text":" or on X @Dulajweb"}]}]},"introduction":"Interactive spider web background","slug":"arachnespider","author":{"framerUserId":"0bce05c0-4760-4da5-b2f4-851230a1db47","name":"Dulaj dilshan","slug":"dulaj-dilshan-gy7b4j","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132150/avatar-ZgETawWJyCuMuzgHBdPTUADcWJAJWn.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0bce05c0-4760-4da5-b2f4-851230a1db47/019fcdce-7f23-70c4-927f-7259323eca41.png"}],"post":null,"createdAt":"2026-08-04T17:25:03.827Z","updatedAt":"2026-08-22T13:02:18.236Z","publishedAt":"2026-08-04T17:25:03.823Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://arachnespider.framer.website/","price":"8","paymentUrl":"https://buy.polar.sh/polar_cl_S3hgbjLarUnf0v3ckoEbKnT52MF3OPYNGawkf21s5Z7","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"roFWbvvus3E81WTODGfP"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-04T17:25:04.253Z","updatedAt":"2026-08-04T17:25:04.253Z","reported":false}}],"$L5e"]

Suggested for you