Distortion GridA canvas grid of thin lines that slowly undulate with large sweeping waves.
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/distortion-gridFor 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 Distortion Grid
Distortion Grid renders a fine grid of thin lines on a 2D canvas and bends the lattice with two slow-moving sine fields, so the surface always looks like a living blueprint. Your cursor acts as a repulsion field: nearby intersections push outward and the deformation propagates softly across the whole canvas. The implementation is pure canvas plus Tailwind classes for the wrapper, no WebGL, which keeps the bundle small and the GPU cost predictable. Drop it behind a hero headline or as the entire backdrop for a long-form editorial page.
Built with
Frequently asked questions
- Is Distortion Grid free to use?
- Yes. Distortion Grid 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 Distortion Grid?
- One command: npx shadcn@latest add https://aicanvas.me/r/distortion-grid.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Distortion Grid 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 Distortion Grid built with?
- Distortion Grid is built with React and TypeScript, using Canvas and Tailwind CSS. It ships with both light and dark styling.
- Where would I use Distortion Grid?
- Common uses include Hero section, Landing page, and Editorial. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Distortion Grid with AI?
- Yes. Distortion Grid 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