# 💖 From nosfair – with love!

Bring a floating spark of joy to your website – with just one line of code.

---

## 🚀 Installation

### Via NPM

```bash
npm i @nosfair-digital/nosfair-with-love@latest
```

### Via CDN

```html
<script src="https://cdn.jsdelivr.net/npm/@nosfair-digital/nosfair-with-love@latest/dist/nosfair-with-love.umd.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@nosfair-digital/nosfair-with-love@latest/dist/style.min.css" rel="stylesheet">
```

---

## 💎 Usage

Add a floating badge to your site:

```html
<div style="position: fixed; bottom: 50px; left: 50px">
  <nosfair-with-love style="width: 50px; height: 50px"></nosfair-with-love>
</div>
```

Want it somewhere else? Just change the `position`, `bottom`, `left`, `right`, or `top` styles to your liking.

---

## ⚙️ Configuration

Customize the component via HTML attributes:

| Attribute        | Type      | Description                                                                    |
|------------------|-----------|--------------------------------------------------------------------------------|
| `title`          | `string`  | Custom title for the modal (default: `"nosfair"`).                             |
| `subtitle`       | `string`  | Custom subtitle (default: `"digital solutions"`).                              |
| `mouseRotation`  | `boolean` | If `true`, the cube rotates according to the user’s mouse movement.            |
| `rotationLimit`  | `number`  | Sets limit for rotation and impacts rotation speed that way  (default: `"90"`) |
| `href`           | `string`  | The link the component navigates to when clicked.                              |
| `showModal`      | `boolean` | Whether a modal should appear on hover.                                        |
| `modalDirection` | `string`  | Direction of the modal float. Options: `"left"` or `"right"`.                  |
| `bouncing`       | `boolean` | Enable a playful bouncing animation.                                           |
| `radius`       | `string`  | border-radius for corners as a number (will be used as px)                     |


---

## 💡 Example

```html
<nosfair-with-love
  href="https://nosfair.digital"
  showModal="true"
  modalDirection="right"
  bouncing="true"
  title="nosfair"
  subtitle="made with love"
  mouseRotation="true"
  style="width: 60px; height: 60px">
</nosfair-with-love>
```

---

## ✨ Result

> A beautifully animated badge – made with love by **[nosfair.digital](https://www.nosfair-digital.com/)** 💖