@gkucmierz/bitcoin-logo

A premium, customizable, and interactive 3D-style Bitcoin logo component for Vue 3.

Live Demo: https://bitcoin-logo.7u.pl/

🚀 Features

• 3 Rotation Modes: Auto-rotate, Interactive (drag & throw), and Controlled.
• Physics-based Inertia: Smooth deceleration in interactive mode.
• Fully Customizable: Adjust size, colors, stroke, animation speed, and more.
• Lightweight: Built with Vue 3 and SVG, no heavy 3D libraries.
• Responsive: Centers perfectly in any container.

📦 Installation

npm install @gkucmierz/bitcoin-logo

🛠 Usage

Import the component and its styles.

<script setup>
import BitcoinLogo from '@gkucmierz/bitcoin-logo'
import '@gkucmierz/bitcoin-logo/style.css' // Import CSS!
</script>

<template>
  <BitcoinLogo
    mode="interactive"
    :size="250"
    symbolColor="#f7931a"
  />
</template>

📖 API

Props

Prop	Type	Default	Description
mode	String	'interactive'	Operation mode: 'auto', 'interactive', or 'controlled'.
size	Number	200	Size of the logo in pixels.
symbolColor	String	'#fff'	Color of the Bitcoin symbol (B) and stroke.
strokeWidth	Number	5	Thickness of the outer stroke.
duration	Number	4	(Auto mode) Duration of one full rotation in seconds.
easing	String	'linear'	(Auto mode) CSS easing function (e.g. 'ease-in-out').
friction	Number	0.98	(Interactive mode) Inertia friction factor (0.0 - 1.0).
rotation	Number	0	(Controlled mode) The rotation angle in degrees. Can be used with v-model:rotation.

Modes

1. interactive (Default)

The user can drag the logo to rotate it. Releasing it with velocity triggers inertia.

• Emits update:rotation event with the current angle.
• friction prop controls how fast it stops spinning.

2. auto

The logo rotates continuously using CSS animations.

• duration controls speed.
• easing controls animation curve.
• Note: Does not emit rotation events.
• Easing Options: linear, ease, ease-in, ease-out, ease-in-out.

3. controlled

The rotation is strictly determined by the rotation prop.

• Use this to link rotation to scroll position, mouse movement elsewhere, or other external state.

Events

Event	Payload	Description
update:rotation	Number	Emitted when rotation changes in 'interactive' mode.

💡 Examples

Interactive Mode (with v-model)

<script setup>
import { ref } from 'vue'
import BitcoinLogo from '@gkucmierz/bitcoin-logo'

const currentRotation = ref(0)
</script>

<template>
  <BitcoinLogo
    mode="interactive"
    v-model:rotation="currentRotation"
  />
  <p>Current Angle: {{ currentRotation.toFixed(0) }}°</p>
</template>

Auto Mode

<template>
  <BitcoinLogo
    mode="auto"
    :duration="2"
    easing="ease-in-out"
  />
</template>

Controlled Mode

<script setup>
import { ref } from 'vue'
import BitcoinLogo from '@gkucmierz/bitcoin-logo'

const angle = ref(0)
</script>

<template>
  <input type="range" v-model.number="angle" min="0" max="360" />
  <BitcoinLogo
    mode="controlled"
    :rotation="angle"
  />
</template>

---

📄 License

MIT