About this component

The card is a field of iron filings on a white surface. A hidden magnet beneath the surface aligns the filings to form text and shapes. Hover introduces a second, weaker magnetic field that distorts and bends the filings near the cursor. Clicking flips the polarity, scattering everything into chaos before it reforms into a different layout. A granular shimmering accompanies the filings' movement.

Difficulty

Advanced

Style

Magnetic Field Visualization

Frameworks

HTML/CSS, Tailwind, React, Vue, Angular, Svelte, LWC

Embed this component

Paste this snippet into any site — the design renders in a sandboxed iframe served from /embed/magnetic-field-card.