Noise FieldA grid of flowing arrows driven by layered sine-wave noise — like wind mapped on a weather chart.
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-fieldFor 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 Noise Field
Noise Field draws a regular grid of small arrows pointing in directions sampled from layered sine-wave noise, so the field looks like wind mapped across a weather chart. The pattern drifts continuously, and bringing your cursor into the canvas creates a swirling vortex centered on it that the surrounding arrows curl around. It is a pure 2D canvas component with Tailwind chrome, so it stays light despite the dense visual texture. Drop it as a hero backdrop, an editorial section break, or behind a marketing-page CTA where you want quiet ambient motion.
Built with
Frequently asked questions
- Is Noise Field free to use?
- Yes. Noise Field 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 Noise Field?
- One command: npx shadcn@latest add https://aicanvas.me/r/noise-field.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Noise Field 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 Noise Field built with?
- Noise Field is built with React and TypeScript, using Canvas and Tailwind CSS. It ships with both light and dark styling.
- Where would I use Noise Field?
- Common uses include Hero section, Editorial, and Marketing site. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Noise Field with AI?
- Yes. Noise Field 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