💖 From nosfair – with love!

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

🚀 Installation

Via NPM

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

Via CDN

<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:

<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

<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 💖