Spider WebAn organic silk web that breathes with a slow idle bow.
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/particle-constellationFor dark mode, add the dark class to your <html> element:
<html class="dark">Install with AI Canvas MCP
With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.
About Spider Web
Spider Web is an organic silk lattice that bows gently on its own, with a slow idle motion so it never looks static. As you move across it, the nodes near your cursor are physically pushed outward and bounce back with internal tension, while the strings closest to you fade slightly so the focal point feels lifted. The whole composition is canvas-rendered with hand-tuned spring constants, no third-party physics required. It is built for editorial heroes, story-driven landing pages, and any layout where the background should feel like a living material.
Built with
Frequently asked questions
- Is Spider Web free to use?
- Yes. Spider Web is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
- How do I install Spider Web?
- One command: npx shadcn@latest add https://aicanvas.me/r/particle-constellation.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Spider Web for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
- What is Spider Web built with?
- Spider Web is built with React and TypeScript, using Canvas and Tailwind CSS. It ships with both light and dark styling.
- Where would I use Spider Web?
- Common uses include Hero section, Editorial, and Landing page. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Spider Web with AI?
- Yes. Spider Web ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas