Grain BackgroundA canvas-based grain background of randomly scattered dots that illuminate with a soft Gaussian glow and organic connection lines on hover.
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/noise-bgFor 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 Grain Background
Grain Background scatters thousands of tiny dots at random across a 2D canvas, with a subtle Gaussian glow that pools where they cluster. On hover, organic connection lines stretch between the dots near your cursor, briefly turning the noise into a network. It is a quiet, ambient background built for editorial layouts, hero sections, and any long-form page that needs texture without color competition. The whole effect runs in one canvas with Tailwind for the surrounding container.
Built with
Frequently asked questions
- Is Grain Background free to use?
- Yes. Grain Background 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 Grain Background?
- One command: npx shadcn@latest add https://aicanvas.me/r/noise-bg.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Grain Background 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 Grain Background built with?
- Grain Background is built with React and TypeScript, using Canvas and Tailwind CSS. It ships with both light and dark styling.
- Where would I use Grain Background?
- 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 Grain Background with AI?
- Yes. Grain Background 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