1.0.2

.gitea/workflows/npm-publish.yaml

@@ -0,0 +1,26 @@
+name: npm-publish
+
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: self-hosted
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm run build
+      - name: Publish to npm
+        run: |
+          echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > .npmrc
+          npm publish --access public
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+

.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+dist-app
 dist-ssr
 *.local
 

Dockerfile

@@ -12,7 +12,7 @@ RUN npm run build
 # Stage 2: Serve the application with Nginx
 FROM nginx:stable-alpine as production-stage
 
-COPY --from=build-stage /app/dist /usr/share/nginx/html
+COPY --from=build-stage /app/dist-app /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 
 EXPOSE 80

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Grzegorz Kucmierz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,5 +1,139 @@
-# Vue 3 + Vite
+# @gkucmierz/bitcoin-logo
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+![NPM Version](https://img.shields.io/npm/v/@gkucmierz/bitcoin-logo)
+![License](https://img.shields.io/npm/l/@gkucmierz/bitcoin-logo)
 
-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+A premium, customizable, and interactive 3D-style Bitcoin logo component for Vue 3.
+
+**Live Demo:** [https://bitcoin-logo.7u.pl/](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
+
+```bash
+npm install @gkucmierz/bitcoin-logo
+```
+
+## 🛠 Usage
+
+Import the component and its styles.
+
+```vue
+<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)
+
+```vue
+<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
+
+```vue
+<template>
+  <BitcoinLogo
+    mode="auto"
+    :duration="2"
+    easing="ease-in-out"
+  />
+</template>
+```
+
+### Controlled Mode
+
+```vue
+<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

index.html

@@ -6,6 +6,20 @@
   <link rel="icon" type="image/svg+xml" href="/bitcoin-btc-logo.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>₿ Bitcoin 3D - Premium SVG Animation</title>
+  <meta name="description"
+    content="Premium 3D Bitcoin logo with interactive rotation modes, built with Vue 3 and SVG." />
+  <!-- Open Graph -->
+  <meta property="og:title" content="Bitcoin 3D - Premium SVG Animation" />
+  <meta property="og:description"
+    content="Premium 3D Bitcoin logo with interactive rotation modes, built with Vue 3 and SVG." />
+  <meta property="og:image" content="/preview.png" />
+  <meta property="og:type" content="website" />
+  <!-- Twitter Cards -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Bitcoin 3D - Premium SVG Animation" />
+  <meta name="twitter:description"
+    content="Premium 3D Bitcoin logo with interactive rotation modes, built with Vue 3 and SVG." />
+  <meta name="twitter:image" content="/preview.png" />
 </head>
 
 <body>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "bitcoin-svg-3d",
-  "version": "0.0.0",
+  "version": "1.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "bitcoin-svg-3d",
-      "version": "0.0.0",
+      "version": "1.0.2",
       "dependencies": {
         "vue": "^3.5.25"
       },

package.json

@@ -1,21 +1,53 @@
 {
-  "name": "bitcoin-logo",
-  "private": true,
-  "version": "1.0.0",
+  "name": "@gkucmierz/bitcoin-logo",
+  "version": "1.0.2",
   "description": "Premium 3D SVG rotating Bitcoin logo",
   "author": "Grzegorz Kucmierz",
   "license": "MIT",
+  "keywords": [
+    "bitcoin",
+    "crypto",
+    "cryptocurrency",
+    "logo",
+    "svg",
+    "3d",
+    "animation",
+    "vue",
+    "vue3",
+    "component",
+    "interactive",
+    "physics",
+    "inertia",
+    "finance",
+    "blockchain",
+    "coin"
+  ],
   "type": "module",
+  "main": "./dist/bitcoin-logo.umd.cjs",
+  "module": "./dist/bitcoin-logo.js",
+  "exports": {
+    ".": {
+      "import": "./dist/bitcoin-logo.js",
+      "require": "./dist/bitcoin-logo.umd.cjs"
+    },
+    "./style.css": "./dist/bitcoin-logo.css"
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "npm run build:lib && npm run build:app",
+    "build:lib": "vite build",
+    "build:app": "vite build --config vite.config.app.js",
     "preview": "vite preview"
   },
-  "dependencies": {
-    "vue": "^3.5.25"
+  "peerDependencies": {
+    "vue": "^3.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.2",
-    "vite": "^7.3.1"
+    "vite": "^7.3.1",
+    "vue": "^3.5.25"
   }
 }

src/components/BitcoinLogo.vue

@@ -151,12 +151,10 @@ const symbolShape = 'M72.0434988 42.8770472c0.9951968,-6.6540344 -4.0707264,-10.
   font-size: v-bind("props.size + 'px'");
   width: 1em;
   height: 1em;
-  margin: auto;
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   /* background: rgba(255, 0, 0, 0.2); Bounding rect debug */
   display: flex;
   justify-content: center;

src/index.js

@@ -0,0 +1,4 @@
+import BitcoinLogo from './components/BitcoinLogo.vue'
+
+export { BitcoinLogo }
+export default BitcoinLogo

src/style.css

@@ -62,4 +62,18 @@ p {
   padding: 3rem;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
   display: inline-block;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+
+@media (max-width: 640px) {
+  #app {
+    padding: 1rem;
+  }
+
+  .glass-card {
+    padding: 1.5rem;
+    width: 100%;
+    border-radius: 16px;
+  }
 }

vite.config.app.js

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+
+export default defineConfig({
+    plugins: [vue()],
+    build: {
+        outDir: 'dist-app'
+    },
+    server: {
+        host: true,
+        allowedHosts: true,
+        headers: {
+            'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
+            'Pragma': 'no-cache',
+            'Expires': '0',
+        }
+    }
+})

vite.config.js

@@ -1,8 +1,24 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
 
 export default defineConfig({
   plugins: [vue()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.js'),
+      name: 'BitcoinLogo',
+      fileName: 'bitcoin-logo',
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
   server: {
     host: true,
     allowedHosts: true,