chrome-polish-button 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Drag0nSlay
+
+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.

package/README.md

@@ -0,0 +1,126 @@
+# chrome-polish-button
+
+A high-end **skeuomorphic chrome-style button** with  
+✨ live camera reflection  
+✨ tactile press animation  
+✨ optional click sound  
+
+Built for modern browsers using **pure JavaScript + CSS**.
+
+---
+
+## ✨ Features
+
+- Realistic **chrome / metal button** look  
+- **Live camera reflection** using `<canvas>`  
+- Smooth **press & highlight animation**  
+- Optional **sound feedback**  
+- No framework dependency  
+- Works with **Vite, React, Vanilla JS**  
+- Lightweight & beginner friendly  
+
+---
+
+## 📦 Installation
+
+```bash
+npm install chrome-polish-button
+```
+
+## 🚀 Basic Usage (Vanilla / Vite)
+### 1️. Import the package
+```bash
+import ChromeTactileButton from "chrome-polish-button";
+import "chrome-polish-button/style.css";
+```
+
+### 2. Add HTML container
+```bash
+<div id="my-button"></div>
+```
+
+### 3. Initialize the button
+```bash
+new ChromeTactileButton("#my-button", {
+  label: "Button" });
+```
+**🎉 That’s it!**
+The button will render inside the container.
+
+## 🔊 Using Sound (Optional)
+
+For sound support, **add the sound file in your project**, not inside the package.
+
+**📁 Vite / Vanilla project structure**
+```bash
+public/
+ └─ click.wav
+```
+
+**🧩 Code**
+```bash
+new ChromeTactileButton("#my-button", {
+  label: "Button",
+  soundSrc: "/click.wav" });
+```
+
+> ℹ️ Sound plays only on user interaction (browser autoplay rules).
+
+**📸 Camera Permission**
+
+- The button uses the **front camera** for reflection
+- Browser will ask for permission
+- If permission is denied, the button still works (no crash)
+
+**⚙️ Configuration Options**
+
+| Option     | Type   | Description                    |
+| ---------- | ------ | ------------------------------ |
+| `label`    | string | Text shown on the button       |
+| `soundSrc` | string | Path to click sound (optional) |
+
+**Example**
+```bash
+new ChromeTactileButton("#btn", {
+  label: "PUSH",
+  soundSrc: "/click.wav" });
+  ```
+
+**🧪 Local Development / Testing**
+
+If you want to test local changes without publishing:
+```bash
+npm link
+```
+
+In the test project:
+```bash
+npm link chrome-polish-button
+```
+
+**🌐 Browser Support**
+
+- Chrome ✅
+- Edge ✅
+- Firefox ⚠️ (camera filters may vary)
+- Mobile browsers ✅ (permission required)
+
+## 📄 License
+
+[MIT License](LICENSE) © Drag0nSlay
+
+## 🙌 Contributing
+Pull requests and suggestions are welcome.
+This project is still evolving 🚀
+
+**⭐ If you like it**
+
+Give it a ⭐ on GitHub
+and share feedback on npm!
+
+**🔚 Notes (for beginners)**
+
+- Always import the CSS
+- Place sound files in public/
+- Camera permission is normal
+- This is a **UI effect library**, not a framework

package/package.json

@@ -0,0 +1,21 @@
+{
+    "name": "chrome-polish-button",
+    "version": "1.0.1",
+    "description": "A high-end skeuomorphic button with live camera reflection and tactile feedback.",
+    "main": "script.js",
+    "type": "module",
+    "files": [
+      "script.js",
+      "style.css"
+    ],
+    "keywords": [
+      "ui",
+      "button",
+      "chrome",
+      "skeuomorphism",
+      "camera-reflection",
+      "tactile"
+    ],
+    "author": "Drag0nSlay",
+    "license": "MIT"
+  }  

package/script.js

@@ -0,0 +1,130 @@
+export default class ChromeTactileButton {
+  constructor(elementId, options = {}) {
+    this.container = document.querySelector(elementId);
+    if (!this.container) return;
+
+    this.config = {
+      label: options.label || "PUSH",
+      soundSrc: options.soundSrc || null
+    };
+
+    this.highlightX = null;
+    this.audio = null;
+
+    if (this.config.soundSrc) {
+      this.audio = new Audio(this.config.soundSrc);
+    }
+
+    this.init();
+  }
+
+  init() {
+    this.container.classList.add("chrome-btn-container");
+    this.container.innerHTML = `
+      <canvas class="chrome-canvas"></canvas>
+      <div class="chrome-label">${this.config.label}</div>
+      <div class="chrome-fingerprint"></div>
+      <div class="chrome-hit-line"></div>
+    `;
+
+    this.canvas = this.container.querySelector(".chrome-canvas");
+    this.ctx = this.canvas.getContext("2d");
+    this.hitLine = this.container.querySelector(".chrome-hit-line");
+    this.fingerprint = this.container.querySelector(".chrome-fingerprint");
+
+    this.canvas.width = 320;
+    this.canvas.height = 140;
+
+    this.video = document.createElement("video");
+    this.video.setAttribute("autoplay", "");
+    this.video.setAttribute("muted", "");
+    this.video.setAttribute("playsinline", "");
+
+    this.startCamera();
+    this.bindEvents();
+    this.animate();
+  }
+
+  async startCamera() {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: "user" }
+      });
+      this.video.srcObject = stream;
+      await this.video.play();
+    } catch (e) {
+      console.warn("Camera access denied or unavailable");
+    }
+  }
+
+  bindEvents() {
+    const getCoords = (e) => {
+      const r = this.container.getBoundingClientRect();
+      const x = (e.touches ? e.touches[0].clientX : e.clientX) - r.left;
+      const y = (e.touches ? e.touches[0].clientY : e.clientY) - r.top;
+      return { x, y };
+    };
+
+    this.container.addEventListener("pointermove", (e) => {
+      this.highlightX = getCoords(e).x;
+    });
+
+    this.container.addEventListener("pointerdown", (e) => {
+      this.container.classList.add("is-pressed");
+
+      if (this.audio) {
+        this.audio.currentTime = 0;
+        this.audio.play().catch(() => {});
+      }
+
+      const { x, y } = getCoords(e);
+
+      this.hitLine.style.left = `${x}px`;
+      this.hitLine.classList.remove("active");
+      void this.hitLine.offsetWidth;
+      this.hitLine.classList.add("active");
+
+      this.fingerprint.style.left = `${x}px`;
+      this.fingerprint.style.top = `${y}px`;
+
+      this.container.classList.remove("animating-fp");
+      void this.container.offsetWidth;
+      this.container.classList.add("animating-fp");
+    });
+
+    const release = () => this.container.classList.remove("is-pressed");
+    window.addEventListener("pointerup", release);
+    window.addEventListener("pointercancel", release);
+  }
+
+  draw() {
+    const { ctx, canvas, video, highlightX } = this;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    if (video.readyState >= 2) {
+      ctx.save();
+      ctx.globalAlpha = 0.55;
+      ctx.filter =
+        "blur(3px) contrast(1.2) brightness(1.1) saturate(1.3)";
+      ctx.translate(canvas.width, 0);
+      ctx.scale(-1, 1);
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+      ctx.restore();
+    }
+
+    if (highlightX !== null) {
+      const p = highlightX / canvas.width;
+      const g = ctx.createLinearGradient(0, 0, canvas.width, 0);
+      g.addColorStop(0, "rgba(255,255,255,0)");
+      g.addColorStop(p, "rgba(255,255,255,0.7)");
+      g.addColorStop(1, "rgba(255,255,255,0)");
+      ctx.fillStyle = g;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+  }
+
+  animate() {
+    this.draw();
+    requestAnimationFrame(() => this.animate());
+  }
+}

package/style.css

@@ -0,0 +1,85 @@
+.chrome-btn-container {
+  width: 320px;
+  height: 140px;
+  border-radius: 70px;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+  touch-action: manipulation;
+
+  transition: transform .1s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow .1s ease;
+  box-shadow:
+    inset 0 6px 12px rgba(255,255,255,.9),
+    inset 0 -8px 14px rgba(0,0,0,.25),
+    0 20px 40px rgba(0,0,0,.3);
+  z-index: 1;
+}
+
+.chrome-btn-container.is-pressed {
+  transform: translateY(4px) scale(.97);
+  box-shadow:
+    inset 0 3px 6px rgba(255,255,255,.6),
+    inset 0 -4px 8px rgba(0,0,0,.35),
+    0 8px 18px rgba(0,0,0,.25);
+}
+
+.chrome-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  background: #ccc;
+}
+
+.chrome-label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 32px;
+  font-weight: 700;
+  color: #cfcfcf;
+  pointer-events: none;
+  mix-blend-mode: overlay;
+  text-shadow: 1px 1px 2px rgba(255,255,255,.9), -1px -1px 2px rgba(0,0,0,.5);
+}
+
+.chrome-fingerprint {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at center, rgba(255,255,255,0.95), transparent 70%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.chrome-btn-container.animating-fp .chrome-fingerprint {
+  animation: heat-up 5s ease-out forwards;
+}
+
+@keyframes heat-up {
+  0% { opacity: 1; filter: blur(0); }
+  100% { opacity: 0; filter: blur(8px); }
+}
+
+.chrome-hit-line {
+  position: absolute;
+  width: 2px;
+  height: 100%;
+  background: white;
+  top: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.chrome-hit-line.active {
+  animation: flash 0.4s ease-out;
+}
+
+@keyframes flash {
+  0% { opacity: 1; }
+  100% { opacity: 0; }
+}