Noise FieldA grid of flowing arrows driven by layered sine-wave noise — like wind mapped on a weather chart.

BackgroundsHero sectionEditorialMarketing site

Add to your project

One command adds this component to your project.

1

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-field
2

For dark mode, add the dark class to your <html> element:

Optional
<html class="dark">

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for “a navigation component from AI Canvas” inside Claude Code, Codex, or Cursor and it can suggest you a few options, then install the one you like. Less typing, lower token cost, modern way to build.

Get MCP

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

CanvasTailwind CSS

More like this