fix(mobile): center component on small screens and update docs

README.md

@@ -5,12 +5,15 @@
 
 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
 
-- **Interactive 3D Rotation**: Tilt and rotate the logo with mouse or touch.
+- **3 Rotation Modes**: Auto-rotate, Interactive (drag & throw), and Controlled.
-- **Inertia & Momentum**: Smooth rotation that continues after release.
+- **Physics-based Inertia**: Smooth deceleration in interactive mode.
-- **Customizable**: Control size, colors, and animation speed via props.
+- **Fully Customizable**: Adjust size, colors, stroke, animation speed, and more.
-- **Premium Aesthetics**: Clean SVG-based design with subtle gradients and shadows.
+- **Lightweight**: Built with Vue 3 and SVG, no heavy 3D libraries.
+- **Responsive**: Centers perfectly in any container.
 
 ## 📦 Installation
 
@@ -20,30 +23,114 @@ npm install @gkucmierz/bitcoin-logo
 
 ## 🛠 Usage
 
+Import the component and its styles.
+
 ```vue
 <script setup>
-import { BitcoinLogo } from '@gkucmierz/bitcoin-logo'
+import BitcoinLogo from '@gkucmierz/bitcoin-logo'
-import '@gkucmierz/bitcoin-logo/style.css'
+import '@gkucmierz/bitcoin-logo/style.css' // Import CSS!
 </script>
 
 <template>
   <BitcoinLogo
-    :size="256"
+    mode="interactive"
+    :size="250"
     symbolColor="#f7931a"
-    :inertia="true"
   />
 </template>
 ```
 
+## 📖 API
+
 ### Props
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `size` | `Number` | `256` | The width and height of the logo in pixels. |
+| `mode` | `String` | `'interactive'` | Operation mode: `'auto'`, `'interactive'`, or `'controlled'`. |
-| `symbolColor` | `String` | `'#f7931a'` | The color of the Bitcoin symbol. |
+| `size` | `Number` | `200` | Size of the logo in pixels. |
-| `autoRotate` | `Boolean` | `true` | Whether the logo should rotate automatically. |
+| `symbolColor` | `String` | `'#fff'` | Color of the Bitcoin symbol (B) and stroke. |
-| `rotationDuration` | `Number` | `10` | Duration of one full rotation in seconds. |
+| `strokeWidth` | `Number` | `5` | Thickness of the outer stroke. |
-| `inertia` | `Boolean` | `true` | Enable inertia during manual interaction. |
+| `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>
+```
 
 ---
 

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>

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;
+  top: 50%;
-  left: 0;
+  left: 50%;
-  right: 0;
+  transform: translate(-50%, -50%);
-  bottom: 0;
   /* background: rgba(255, 0, 0, 0.2); Bounding rect debug */
   display: flex;
   justify-content: center;

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;
+  }
+}