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.
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>
);
}