Origin Magnet Button

A tactile button featuring physics-driven magnetic pull, independent text parallax, and an origin-based radial hover wipe. Designed to add composed, high-performance interaction to refined layouts.

Features

• Adjustable text and typography controls for seamless brand alignment.

• Native hyperlink inputs with optional new-tab targeting for standard navigation routing.

• Customizable background color, container padding, and corner radius for precise structural fit.

• Configurable base and hover box-shadow support for establishing interactive depth.

• Origin-based radial hover fill for a fluid, cursor-aware background transition.

• Dynamic text color inversion during the hover wipe for sustained legibility across contrasting states.

• Adjustable wipe transition easing and duration for precise animation pacing.

• Configurable cursor pull strength and maximum travel range for strict interaction boundaries.

• Adjustable spring stiffness and damping for exact calibration of kinetic snap and friction.

• Expandable invisible activation area to capture the cursor before it reaches the component edge.

• Independent inner text parallax with adjustable drift strength for layered spatial depth.

• Singleton pointer tracking and frame batching for 60fps performance across dense component layouts.

• Scroll-aware visibility tracking to suspend mathematical calculations when the component leaves the viewport.

• Automatic touch-device detection to safely disable magnetic physics on mobile screens.

• Semantic anchor wrapping and tabIndex fallbacks for complete keyboard accessibility.

• Native text-highlight prevention for uninterrupted interactive behaviors.

How to Use

• Drag and drop the component onto your Framer canvas.

• Configure the properties to match your design style.

• Publish your project to view your component live.

Anchor your design system with physics-driven spatial depth.