Magnetic Hover Service List

Enhance your site's navigation and service presentation with this Magnetic Hover Service List. Designed for premium agency and portfolio websites, this widget replaces static lists with a fluid, physics-based interactive experience.

When a user hovers over a service item, a colorful "highlighter" bar glides smoothly to that position using a custom JavaScript physics engine (Linear Interpolation). This creates a "magnetic" feel that is significantly smoother and more luxurious than standard CSS transitions. Each item features fully editable typography (fonts, families, colors) and includes a dedicated call-to-action button with an animated SVG arrow, ensuring high engagement and a modern aesthetic.

Key Features:

• Physics-Based Hover Effect: Uses JavaScript Linear Interpolation (Lerp) to create a fluid, magnetic gliding animation for the background highlighter.
• Fully Editable Typography: Every text element—including Titles, Descriptions, and Button Links—supports font family, weight, and color customization directly in the editor.
• Rich Text Support: Add bolding, italics, or lists within the service descriptions for better content hierarchy.
• Animated SVG Arrows: The call-to-action buttons feature SVG vector arrows that slide on hover, with fully editable colors.
• Editor-Friendly Labels: All editable fields are clearly labeled (e.g., "Service Title", "Button Text") for an intuitive editing experience.