Shadcn.io is not affiliated with official shadcn/ui
React Magnetic Field BackgroundNew
Mesmerizing iron filing visualization with particles that align along invisible magnetic field lines, reacting to cursor movement like a real magnet
Remember playing with iron filings and magnets as a kid? This brings that same magic to your screen. Particles align themselves along invisible magnetic field lines, creating those beautiful curved patterns you see in physics textbooks. Move your cursor and it becomes a magnetic pole—particles flow and realign in real-time, creating organic, almost alive patterns. The effect is hypnotic and scientific at the same time, perfect for tech products, science-themed sites, or anywhere you want that sense of invisible forces at work. Built on canvas with vector field mathematics for silky smooth performance.
React Magnetic Field Background preview
Installation
Related Components
Constellation
Connected particle network
Particles
Floating particle system
Vortex
Particle flow effect
Interactive Grid
Mouse-reactive grid
Paths
Flowing path animations
Beams
Light beam effects
FAQ
Was this page helpful?
Sign in to leave feedback.