You Might Also Like
Learn Coding Visually
Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.
HTML Playground42 lessons · Click-based · Live preview
CSS PlaygroundLearn CSS with a live editor
JavaScript Playground60 lessons · DOM · Async · Canvas
React PlaygroundLearn React with a live code editor
GSAP PlaygroundLearn GSAP animation interactively
SVG Playground44 lessons · shapes · paths · animation
SCSS Playground45 lessons · Sass modules · tokens
Tailwind PlaygroundLearn Tailwind CSS with a live editor
Bootstrap 5 Playground50 lessons · live previewSocial Magnet Footer — Free HTML CSS JS Magnetic Social Icon Footer
Social Magnet Footer · Footers · Plain HTML, CSS & JS · Live preview
What's included
Features
About this UI Snippet
Social Magnet Footer — Vector-Math Attraction Applied to a Row of Icons
A row of social icons in a footer is usually the least interactive part of a page — five flat glyphs nobody looks at twice. This snippet applies the same magnetic-attraction technique from the Magnetic Button to each icon individually, so the row itself becomes a small moment of delight at the very end of the page instead of an afterthought.
The vector math, per icon
Each .smf-icon gets its own pointermove listener. On every move, the handler computes the icon's centre from getBoundingClientRect(), finds the vector (dx, dy) from that centre to the cursor, and its magnitude dist via the Pythagorean theorem. A maxDist — 1.3× the icon's own size — defines the attraction radius: outside it, nothing happens; inside it, factor = (1 - dist / maxDist) * strength scales from full strength at the centre down to zero at the radius's edge. The icon then translates by (dx * factor / maxDist, dy * factor / maxDist), which pulls it toward — never past — the cursor, with the pull strongest when the cursor is closest.
Why per-icon listeners rather than one for the whole row
Attaching pointermove to each icon rather than to the row and calculating distances to five centres on every event keeps each icon's math independent and the attraction radius local to that icon — hovering near icon three shouldn't visibly tug at icon one. With only five small elements this is cheap; for a much longer row you'd want to switch to a single row-level listener that iterates a cached array of centres, avoiding five separate event subscriptions.
A small addition beyond the original button: scale
Where the Magnetic Button only translates, this version adds scale(1.08) to the same transform while the icon is inside the attraction radius, so the icon both leans toward the cursor and grows slightly — a stronger, more tactile signal in a row of otherwise-identical small circles where a translate alone is easy to miss.
Resetting cleanly, and respecting the OS motion setting
pointerleave resets the transform to translate(0,0) scale(1), and because the CSS transition on .smf-icon handles the ease back to rest, no JavaScript animation loop is needed — the browser interpolates between the last computed transform and zero. A prefers-reduced-motion: reduce block removes the transition entirely for users who've opted out of animation, so the icons still respond but snap rather than glide.
Build with AI
Build, Understand, Optimize, and Extend It With AI
Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to walk through exactly why factor is computed as (1 - dist / maxDist) * strength rather than a simpler linear falloff, and what would visually change if maxDist were removed entirely (hint: every icon on the page would always be pulling, even from the far side of the screen). It's a good candidate for a scalability discussion too — ask whether the current per-icon pointermove listener approach would still perform well with twenty icons instead of five, and how you'd refactor it to a single delegated listener with cached bounding rects if not. For extending it, ask for a version that also rotates each icon slightly based on the angle to the cursor (using Math.atan2(dy, dx)) for an even more physical feel, or one that adds a subtle glow/shadow that intensifies as the pull strengthens.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Build a "social magnet" website footer in plain HTML, CSS, and vanilla JavaScript — no library, no canvas.
Requirements:
- A centred footer with a brand name, a short tagline, and a row of five circular social icon links (inline SVGs for Twitter, GitHub, LinkedIn, YouTube, and Discord), followed by a slim bottom bar with legal links and a copyright line.
- Each social icon must independently attract toward the pointer when the cursor comes within roughly 1.3x the icon's own size: on pointermove, compute the vector from the icon's center (via getBoundingClientRect) to the cursor position, calculate its distance, and if within the attraction radius, translate the icon toward the cursor by an amount that scales from strongest at the center to zero at the radius's edge — plus a subtle scale-up (around 1.08x) while attracted.
- Make the pull strength configurable per icon via a data-strength HTML attribute (default around 26), read once when wiring up each icon's listener.
- Reset the icon to its resting transform on pointerleave, letting a CSS transition (not a JavaScript animation loop) handle the smooth ease back to translate(0,0) scale(1).
- Add a prefers-reduced-motion media query that removes the CSS transition so the interaction stays functional (no glide) for users who have that OS setting enabled.
- Style the icons as circular, semi-transparent buttons on a dark background that brighten in color and border on hover, independent of the magnetic transform.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
Step by step
How to Use
- 1Paste HTML, CSS, and JSFive social icons render in a row — move your cursor near one to feel the magnetic pull.
- 2Move the cursor near an iconThe icon leans toward the pointer and scales up slightly, strongest at the centre and fading to zero at the edge of its pull radius.
- 3Adjust the pull strengthChange the data-strength attribute on any .smf-icon (default 26) for a stronger or gentler attraction.
- 4Adjust the pull radiusEdit the 1.3 multiplier in maxDist inside the JS to widen or narrow how close the cursor must get before the effect starts.
- 5Swap in your own iconsReplace any inline SVG and its aria-label and href — the magnetic behaviour applies automatically via the shared .smf-icon class.
- 6Export in your formatClick HTML, JSX, or Tailwind to download the version you need.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
It reuses the same core vector-math technique — a pointermove handler computing distance from the cursor to the element's centre and translating toward it within a radius — but applies it independently to each icon in a row, and adds a scale(1.08) to the transform for a more noticeable effect on small elements.
With only five small icons, per-icon listeners keep each icon's attraction radius and math fully independent — hovering near one icon will not visibly affect its neighbours. For a much larger set of elements, a single listener on the container that iterates cached centre coordinates would scale better.
It sets how far the icon travels toward the cursor at its closest approach. The default is 26 (pixels, roughly, before the falloff factor is applied) — increase it for a stronger pull, decrease it for a subtler one, per icon.
The pointermove-driven pull only fires on devices that generate move events without a touch — on a phone or tablet, the icons behave as plain, fully functional links with no magnetic effect, which is the correct fallback since there is no cursor to attract toward.
The CSS transition that eases the icon back to rest is disabled under prefers-reduced-motion: reduce, so the icons still respond to the pointer but snap into position rather than gliding — the interaction stays functional without the continuous motion.
Click JSX, Vue, or Angular to download the converted component. In React, attach the pointermove and pointerleave handlers via a ref per icon (or a single delegated handler using event.currentTarget) rather than re-querying the DOM, and write the transform directly to the ref to avoid unnecessary re-renders on every pointer move.