Ferrofluid Spikes — Interactive Physics Animation

The Ferrofluid Spikes simulation is a high-performance visual experiment that mimics the behavior of magnetic fluids (ferrofluids) in the presence of a magnetic field. Built with HTML5 Canvas, it creates a mesmerizing surface of sharp spikes that chase and react to your cursor in real-time.

How It Works

The simulation uses a grid of “Spike” objects. Each spike calculates its distance and angle from the mouse cursor. Instead of simple movement, the spikes use magnetic vector math to tilt and lunge toward the “magnetic” source (the cursor). We use a custom damping algorithm to ensure the motion feels liquid and organic rather than mechanical.

Use Cases

• Science and technology-themed websites
• High-end creative landing pages
• Interactive backgrounds for dark-themed UI
• Experimental physics visualizations

How to Customize

• Magnet Strength: In the JavaScript, adjust the maxDist and force variables to change how aggressively the spikes react.
• Visual Density: Change the spacing variable to create more or fewer spikes (higher spacing = fewer spikes, better performance).
• Color Palette: Modify the ctx.strokeStyle calculation in the draw method to change the color of the liquid spikes.

Frequently Asked Questions

Is it mobile-friendly?

Yes. The simulation is optimized to run smoothly on mobile browsers, though the interaction is most impressive with mouse movement on desktop.

Can I make the spikes bigger?

Yes. In the draw() method, you can adjust the length of the lineTo vector (currently set to 20) to create longer, more dramatic spikes.

Is the code private?

Absolutely. Like all tools on this site, the simulation runs entirely on your device in your browser’s local memory. No data or image assets are sent to any server.