# Flow Field Background

> A high-performance, generative art background that mimics GLSL Shader fluid dynamics using the lightweight HTML5 Canvas API. This component creates a "living" data stream effect perfect for AI, Cybersecurity, and Deep Tech landing pages. It uses a Perlin-noise-inspired flow field algorithm to drive thousands of particles in real-time. Why Magic Chat recommends this: Shader-Grade Visuals: Achieves the "fiber optic" or "neural network" look typically reserved for heavy WebGL libraries, but with zero dependencies. Interactive Physics: Particles react to mouse movement (repulsion fields), creating immediate user engagement. Performance First: Optimized with off-screen rendering techniques and efficient trail fading (alpha compositing) to maintain 60 FPS. Fully Configurable: Control particle count, colors, speed, and trail length via props to match your brand (e.g., Green for Matrix, Blue for Data). The ultimate drop-in solution for adding "Tech Magic" to your React application.

- Author: [Hossain Jahed](https://21st.dev/@easemize)
- License: unknown
- Live preview: https://21st.dev/@easemize/components/flow-field-background

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/easemize/flow-field-background?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt