Wireframe GlobeA wire-frame globe that breathes on its own — a narrow wave band drifts quietly across the surface.
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/sphere-linesFor 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 Wireframe Globe
Wireframe Globe is a wireframe globe drawn entirely in a 2D canvas, with a single narrow band of wave-displacement that drifts continuously across its surface so the thing never looks frozen. Move your cursor near it and a localised ripple bows the wireframe at exactly that spot, then settles back. There is no Three.js involved, just trigonometry and one render loop, which keeps the build size tiny. Pair it with an AI hero, a research-style marketing page, or as a quiet centerpiece that signals depth without screaming.
Built with
Frequently asked questions
- Is Wireframe Globe free to use?
- Yes. Wireframe Globe 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 Wireframe Globe?
- One command: npx shadcn@latest add https://aicanvas.me/r/sphere-lines.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Wireframe Globe 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 Wireframe Globe built with?
- Wireframe Globe is built with React and TypeScript, using Canvas and Tailwind CSS. It ships with both light and dark styling.
- Where would I use Wireframe Globe?
- Common uses include Hero section, AI product, and Marketing site. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Wireframe Globe with AI?
- Yes. Wireframe Globe 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