Technical Documentation

1. Setup Instructions

1. Drag the MagneticInteraction block to your Screen.

2. Place a Button, Icon, or Circular Image inside the Content placeholder.

3. Ensure the element inside the placeholder is display: inline-block or has a fixed width/height for the best calculation accuracy.

2. Best Practices

• Size Matters: Best used on smaller elements (up to 150px). Large containers may feel "clunky" when moving magnetically.

• Radius Tuning: If you have multiple magnetic elements close to each other, reduce the Radius to avoid "conflicting" movements.

• Mobile Note: This effect is hover-based. It will remain static on touch devices, ensuring a standard experience for mobile users without errors.

3. Accessibility & Compatibility

• SEO: The text inside buttons remains fully indexable and selectable.

• Performance: The script is optimized to run only when the cursor is moving, with minimal overhead.

• Fallback: If JavaScript is disabled, the element simply stays in its original static position.

4. Troubleshooting

• Element not moving: Check if the Strength is set too low (e.g., 0.01). Also, ensure the internal widget is not display: block (full width), as the center calculation will be based on the screen width rather than the visual icon.

• Jerky movement: This usually happens if there is a global CSS transition conflict. The component's internal CSS uses a 0.3s cubic-bezier to smooth out the movement.

Champion Tip: Use this on your "Main Action" button. It increases the "hit area" feel of the button without actually changing its size, making it psychologically easier for users to click.