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

npm install chrome-polish-button

🚀 Basic Usage (Vanilla / Vite)

1️. Import the package

import ChromeTactileButton from "chrome-polish-button";
import "chrome-polish-button/style.css";

2. Add HTML container

<div id="my-button"></div>

3. Initialize the button

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

public/
 └─ click.wav

🧩 Code

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

new ChromeTactileButton("#btn", {
  label: "PUSH",
  soundSrc: "/click.wav" });

🧪 Local Development / Testing

If you want to test local changes without publishing:

npm link

In the test project:

npm link chrome-polish-button

🌐 Browser Support

• Chrome ✅
• Edge ✅
• Firefox ⚠️ (camera filters may vary)
• Mobile browsers ✅ (permission required)

📄 License

MIT 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