# Ferrofluid Magnet > Beads of glossy black ferrofluid scattered across a hero: your cursor is an invisible magnet that tugs gently on hover; press and hold to pull the fluid into a spiked pool (or shove it clear in repel mode), then let go to throw it outward. Canonical: https://gsapvault.com/effects/ferrofluid-magnet Live demo: https://gsapvault.com/demos/ferrofluid-magnet/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | advanced | | Plugins | Core GSAP only | | Techniques | webgl-shader, metaballs, fluid-simulation, magnetic-attraction, pointer-tracking | | Uses Lenis | No | ## Overview A hero background of glossy black ferrofluid, rendered in WebGL. Beads of fluid lie scattered across the section, and your cursor is an invisible magnet with two strengths. Hovering only tugs the nearest beads towards it; pressing and holding switches it fully on, so the fluid streams in, merges into one pool and bristles into a crown of spikes that catch the light. Let go and the pool is thrown outward. Flip it to repel and the same hold shoves the fluid clear instead, opening a hole with the spikes standing round its rim. Nobody steering? A faint magnet idles in a slow loop so the fluid is never quite still, and anything you mark as keep-clear, such as your headline, stays free of fluid so the copy on top is always readable. It is three.js and a small bead simulation, not a video or a sprite sheet. It works with mouse, touch and keyboard, matches its floor to your page colour, and falls back to a still CSS pool of ferrofluid without JavaScript, without WebGL, or under reduced motion. ## Features - Two magnet strengths: a gentle tug on hover and a full pull while the pointer is held, easing smoothly between them - Attract and repel modes, switchable live from your own buttons with one custom event - Held fluid rises into a crown of needle spikes with uneven heights and pin-point highlights, centred on the magnet or ringed round the hole it opens - Letting go throws the fluid outward, harder the longer you held - Beads keep their volume and cling together as they meet, so the fluid pools and splits like a liquid rather than a cloud of dots - Keep-clear zones: mark any element and the fluid is nudged out from behind it, so headlines stay readable - An idling magnet drifts round a resting place you choose, with a separate resting place for narrow screens - Keyboard route: hold Space to press, arrow keys to move the magnet's resting place - Frame-rate independent, paused while off screen, and disposes every GPU resource and the WebGL context on teardown - Composed still-pool fallback for no JavaScript, no WebGL and reduced motion ## Use Cases - Agency and studio landing pages that want one tactile moment above the fold - Product launches for hardware, audio or materials brands where a glossy, physical look fits the product - Portfolio and personal sites where the hero should invite play before the scroll - Campaign and event microsites built around a single striking interaction - Science, engineering and design-school pages that want to show magnetism rather than describe it ## Vibe-Code Ready Setup This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works ### Beads, not a mesh The fluid is a pool of individual beads, mostly small with a few larger drops. Each frame they are pushed by the magnet, carried along in its wake when it moves, stirred by a slow current, and kept apart or pulled together by their neighbours. That last part is what makes them behave like a liquid: touching beads hold their volume and cling, so a pool forms, stretches and tears apart instead of overlapping into a blur. ### From beads to a glossy surface The beads are never drawn as circles. They are blended into one smooth field, and a single shader decides where that field crosses into fluid and how the surface curves. Where beads merge the surface bulges and joins seamlessly, which is the metaball look. It is lit by a soft studio reflection with a sharp specular highlight and a contact shadow on the floor, so it reads as wet black lacquer rather than flat ink. ### The magnet and the spikes The magnet follows your pointer with a little weight, or idles round its resting place when nobody is steering. Its strength is played rather than simulated: it fades in on load, eases up when you press and back down when you let go, and a short outward throw fires on release. Spikes only rise once enough fluid has gathered under a held, fairly still magnet, and they flatten again while it is dragged fast or released. ### Staying out of the way Elements you mark as keep-clear become zones the beads are nudged out of by the shortest route, and beads never start inside them. The simulation is scaled down for narrow containers, rescales in place when the container resizes, and stops entirely while the section is off screen. ### Fallbacks and teardown Support is checked before first paint, so a visitor who will not get a canvas sees the still pool from the start rather than a flash of it. Reduced motion is watched live, and tearing the effect down stops the loop, removes every listener and releases all of its GPU memory and the WebGL context. ## Documentation How this effect works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download. ### Quick Start **1. Add to your HTML ``:** _Code snippet omitted: it ships with the download._ The inline script is not optional. The still pool (`.ferro__still`, a glossy drop drawn in CSS) is the fallback for no JavaScript, no WebGL and reduced motion, and without this it paints for the half second it takes three.js to arrive, then gets swapped for the canvas. The probe runs before first paint, stamps `html.gl` when a canvas is coming, and the stylesheet hides the still under that class. No JavaScript, no class, the still shows; and the effect removes the class again if it cannot build a renderer after all. **2. Add to your ``:** _Code snippet omitted: it ships with the download._ **3. Add before the closing `` tag:** _Code snippet omitted: it ships with the download._ The script finds every `[data-ferro]` element, inserts a canvas as its first child, and hides the still once the canvas is actually there. **Why the import map rather than a plain `