MagneticReveal — Magnetic cursor reveal with media depth

Magnetic Reveal is a high performance canvas based interaction component that transforms static media into a responsive, physics driven experience. A grid of animated circles reacts to cursor or touch proximity, expanding and contracting like a magnetic field to dynamically reveal the underlying image or video.

Built with smooth easing and efficient rendering, the component feels natural and tactile rather than mechanical. Optional pulse and fade effects introduce subtle rhythm and atmosphere, while proximity and growth controls let you fine tune how aggressively the reveal reacts to user input.

Magnetic Reveal supports both images and videos, scales cleanly to any fixed frame size, and runs continuously without layout reflow, making it ideal for immersive hero sections and experimental storytelling.

Key features

• Cursor and touch driven magnetic reveal effect

• Canvas based rendering for smooth performance

• Supports both images and videos

• Adjustable proximity, growth, and easing physics

• Optional pulse animation for living motion

• Optional fade effect for ambient transitions

• Fully configurable circle density and size

• Responsive scaling within fixed layouts

Best used for

• Hero sections and landing page intros

• Interactive brand storytelling

• Experimental portfolios and case studies

• Editorial visuals with motion emphasis

• Creative studios and art direction showcases

Works best when

• Used at large sizes for maximum impact

• Paired with minimal surrounding UI

• Combined with dark or muted backgrounds

• Used sparingly as a focal interaction