Home
UI Elements
Resources
Tools Blog About Contact
Back
VIEW ALL UI ELEMENTS
Back
VIEW ALL RESOURCES
← Back to Gallery

The Vector Field Button

ButtonsAnimatedcanvasCSSDark ModePhysics & MathPlayful & Creative
Live Preview

Description: A button that is not a static shape, but a defined area of high viscosity and magnetic attraction.

Concept: Vector Fields & Fluid Dynamics.
The button generates a localized attractive force field. When the cursor (a particle) enters the vicinity, the button shape morphs (using spline mathematics) to reach out to the cursor, and the cursor is physically pulled toward the center of the button (magnetic snap).

Features:

  • Liquid Morphing: The border is defined by a Catmull-Rom spline that deforms like a water droplet breaking surface tension.

  • Inertial Drag: When the mouse leaves, the button doesn't just snap back; it oscillates (damps) like a spring (

    F=−kx−cvF=−kx−cv) before coming to rest.
  • Proximity Glow: Light intensity follows the Inverse Square Law (

    I∝1/d2I∝1/d2) relative to the cursor distance.

Uses:

  • Call to Action (CTA) buttons.

  • Submit triggers.

  • Navigation nodes.

Benefits:

  • Drastically increases Click-Through Rate (CTR) due to the "magnetic" feeling making it hard to miss.

  • Gamifies the interaction, making the user feel a physical connection to the interface.


Frequently Asked Questions

What is The Vector Field Button?
A button that is not a static shape, but a defined area of high viscosity and magnetic attraction.
What technologies are used in The Vector Field Button?
The The Vector Field Button is built using HTML5, CSS3, JavaScript (ES6+). It uses vanilla JavaScript with no external dependencies. Everything is self-contained and ready to use.
How do I integrate The Vector Field Button into my existing project?
Simply copy the HTML, add the CSS to your stylesheet, include the JavaScript into your project files. The component is designed to work standalone or integrate seamlessly with existing codebases.
Can I use The Vector Field Button in commercial projects?
Yes! The The Vector Field Button is free to use in both personal and commercial projects. You can modify it as needed and integrate it into your client work or products without restrictions.
Do I need any external libraries for The Vector Field Button?
The The Vector Field Button uses vanilla JavaScript with no external dependencies.

Leave a Comment

Your email address will not be published. Required fields are marked *

Confirm Action
Are you sure you want to proceed?