Make Your Buttons Dodge the Cursor with a Wrium Plugin

Buttons often wait patiently for a click. The Wrium Evasive Button plugin, however, can make a button—or any interactive element—smoothly avoid the cursor as you approach. This playful feature offers several benefits, such as enabling smart form validation, gamified forms, and challenging confirmations. Here’s how to implement it:

First, install the plugin along with its dependency, Wrium, using npm: `npm install @wrium/evasive-button @wrium/wrium`. Then, add the EvasiveButtonPlugin to your Wrium application. Usage is straightforward:

```html

<div id="app">

<button v-evade>Try to Click Me!</button>

</div>

```

In your JavaScript, initialize the app and mount it:

```javascript

import { createApp } from "@wrium/wrium";

import { EvasiveButtonPlugin } from "@wrium/evasive-button";

createApp(() => ({})).use(EvasiveButtonPlugin).mount("#app");

```

For form validation, bind the `active` property of the button to your form’s state. When the form is invalid, the button will evade the cursor, providing a playful experience until the form is correct:

```html

<div id="button-arena">

<button v-evade="{ active: !isFormValid, bounds: "#button-arena", maxRadius: 150 }">

{{ isFormValid ? "Log In" : "Fill fields first!" }}

</button>

</div>

```

Customize the button’s appearance based on its state with CSS:

```css

.login-btn.is-evading {

background: #e11d48;

}

```

Remember, while the plugin adds fun, it should be used sparingly for critical actions. It respects user preferences for reduced motion, supports keyboard navigation, and automatically stops evading after a set duration or number of attempts. The project is available on GitHub, MIT licensed, and welcomes contributions with creative uses of the plugin.