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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Flow Field Background to your project and fits it to your theme.

import React from "react";
import NeuralBackground from "@/components/ui/flow-field-background";
import { ArrowRight, Sparkles } from "lucide-react";

const settings = {
  scale: 1,
  trailOpacity: 0.1,
  speed: 0.8,
};

export default function NeuralHeroDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    // Container must have a defined height, or use h-screen
    <div className="h-screen w-screen">
      <NeuralBackground
        color="#818cf8" // Indigo-400
        scale={s.scale}
        trailOpacity={s.trailOpacity} // Lower = longer trails
        speed={s.speed}
      />
    </div>
  );
}