@nosfair-digital/nosfair-with-love NPM

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