Components
Loading preview...
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.
@easemize
npx shadcn@latest add https://21st.dev/r/easemize/flow-field-backgroundimport React from "react";
import NeuralBackground from "@/components/ui/flow-field-background";
import { ArrowRight, Sparkles } from "lucide-react";
export default function NeuralHeroDemo() {
return (
// Container must have a defined height, or use h-screen
<div className="relative w-full h-screen">
<NeuralBackground
color="#818cf8" // Indigo-400
scale={1}
trailOpacity={0.1} // Lower = longer trails
speed={0.8}
/>
</div>
);
}