chrome-polish-button 1.0.0

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,63 @@
+# Chrome Polish Button
+
+A high-end, interactive skeuomorphic button featuring live camera reflection, dynamic fingerprint heat-maps, hit-line interaction, and metallic sound effect. Built for luxury UI and futuristic web experiences.
+
+---
+
+## Demo
+
+- Press the button to see **live camera reflection**.
+- A **hit-line** appears on press.
+- **Fingerprint highlights** animate when pressed.
+- **Metallic click sound** enhances the tactile feel.
+
+---
+
+## Features
+
+- Live camera feed reflection inside the button
+- Polished chrome look with highlights and micro-scratches
+- Fingerprint animation
+- Hit-line effect on press
+- Metallic click sound
+- Fully mobile-friendly
+
+---
+
+## Installation
+
+```bash
+npm install chrome-polish-button
+```
+
+# Quick Start
+
+1. Import the CSS and the JS module: 
+
+<!--end list-->
+```bash
+import ChromeTactileButton from 'chrome-polish-button';
+import 'chrome-polish-button/style.css';
+
+new ChromeTactileButton('#my-button', { label: "ACTIVATE", soundSrc: "path/to/your/sound.wav" });
+```
+
+2. Add the HTML element:
+<!--end list-->
+```bash
+<div id="my-button"></div>
+```
+
+> The camera reflection is process entirely on the client-side. No video data is recorded or transmitted. This library requires HTTPS for camera access in production.
+
+---
+
+## Usage
+- Move your cursor (or finger on mobile) over the button to see dynamic reflection highlights.
+- Press the button to see hit-line + fingerprint animation and hear the metallic click.
+
+## Technologies
+
+- HTML5 <canvas>
+- CSS3 (transitions, gradients, blend modes)
+- JavaScript (DOM manipulation, MediaDevices API)

package/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "chrome-polish-button",
+    "version": "1.0.0",
+    "description": "A high-end skeuomorphic button with live camera reflection and tactile feedback.",
+    "main": "script.js",
+    "files": [
+        "script.js",
+        "style.css",
+        "mixkit-metal-tool-drop-835.wav"
+    ],
+    "keywords": [
+        "ui", "button", "chrome", "skeuomorphism", "camera-reflection", "tactile"
+    ],
+    "author": "Drag0nSlay",
+    "license": "MIT"
+}

package/script.js

@@ -0,0 +1,115 @@
+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 || "mixkit-metal-tool-drop-835.wav"
+    };
+
+    this.highlightX = null;
+    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.audio = new Audio(this.config.soundSrc);
+    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 failed", e); }
+  }
+
+  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');
+      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);
+
+    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; }
+}