@mtph9/heehee.js 1.0.0

package/LICENSE.txt

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) [2026] [mtph9]
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,54 @@
+# heehee.js
+
+A lightweight JavaScript library that adds Michael Jackson's iconic "grunts" and sounds to your web elements when they are hovered over.
+
+[**Demo / GitHub Pages**](https://merlin-1d.github.io/heehee.js/)
+
+`heehee.js` provides a fun and simple way to add sound effects to your website. It listens for `mouseover` events on specified elements and plays one of the 31 available Michael Jackson grunts. By default, it targets elements with the class `.heehee` or the attribute `data-heehee`.
+
+## Features
+
+- **31 unique sounds**: A wide variety of iconic Michael Jackson grunts.
+- **Random or Specific sounds**: Hovering over a default element plays a random sound, but you can specify which sound to play using the `data-heehee` attribute (e.g., `data-heehee="5"` for grunt 6, as it's 0-indexed).
+- **Simple implementation**: Import and call `initHeeHee()`.
+
+## Setup & Run
+
+### 1. Install
+```bash
+npm install heehee.js
+```
+
+### 2. Usage
+Add `heehee` class or `data-heehee` attribute to your HTML elements:
+
+```html
+<div class="heehee">Hover over me!</div>
+<div data-heehee="7">Play specific sound (grunt-7.mp3)</div>
+```
+
+Initialize in your JS:
+```javascript
+import { initHeeHee } from '@mtph9/heehee.js';
+initHeeHee();
+```
+
+## Configuration Options
+
+You can pass an options object to `initHeeHee()`:
+
+- `selector`: (String) CSS selector for elements (default: `.heehee, [data-heehee]`)
+- `basePath`: (String) Custom path to the grunts directory (must end with `/`)
+- `showUnlockButton`: (Boolean) Whether to show the "unlock sound" button if audio playback is blocked by the browser (default: `true`)
+
+Example:
+```javascript
+initHeeHee({
+  selector: '.my-custom-class',
+  basePath: 'https://unpkg.com/heehee.js/grunts/'
+});
+```
+
+## License
+
+This project is licensed under the **ISC License**. See the `LICENSE.txt` file for more details.

package/heehee.css

@@ -0,0 +1,44 @@
+@keyframes heehee-scroll-in {
+  0% { transform: translateY(100px) scale(0); opacity: 0; }
+  60% { transform: translateY(-10px) scale(1.1); opacity: 1; }
+  100% { transform: translateY(0) scale(1); opacity: 1; }
+}
+
+@keyframes heehee-shake {
+  0%, 100% { transform: scale(1) rotate(0); }
+  10%, 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(-5deg); }
+  20%, 40%, 60%, 80% { transform: scale(1.1) rotate(5deg); }
+}
+
+.heehee-unlock-icon {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 48px;
+  height: 48px;
+  background-color: #ff0055;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  z-index: 9999;
+  transition: transform 0.2s, background-color 0.2s;
+  animation: heehee-scroll-in 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
+             heehee-shake 2s ease-in-out infinite 2s;
+}
+
+.heehee-unlock-icon:hover {
+  animation-play-state: paused;
+  transform: scale(1.2) !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .heehee-unlock-icon {
+    animation: none !important;
+    opacity: 1;
+    transform: none;
+  }
+}

package/heehee.js

@@ -0,0 +1,83 @@
+let soundsBasePath = new URL('./grunts/', import.meta.url).href;
+let unlockIcon = null;
+let showUnlockButtonEnabled = true;
+
+const sounds = Array.from({ length: 31 }, (_, i) => `grunt-${i + 1}.mp3`);
+
+function showUnlockIcon() {
+  if (unlockIcon) return;
+
+  unlockIcon = document.createElement('div');
+  unlockIcon.className = 'heehee-unlock-icon';
+  unlockIcon.innerHTML = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M11 5L6 9H2v6h4l5 4V5z"></path>
+      <line x1="23" y1="9" x2="17" y2="15"></line>
+      <line x1="17" y1="9" x2="23" y2="15"></line>
+    </svg>
+  `;
+
+  unlockIcon.addEventListener('click', () => {
+    const audio = new Audio(new URL(`./grunts/${sounds[0]}`, import.meta.url).href);
+    audio.play().then(() => {
+      unlockIcon.remove();
+      unlockIcon = null;
+    }).catch(err => {
+      console.debug('HeeHee: Still blocked.', err);
+    });
+  });
+
+  document.body.appendChild(unlockIcon);
+}
+
+function playSound(index, options = {}) {
+  const parsedIndex = parseInt(index);
+  const soundIndex = (!isNaN(parsedIndex) && parsedIndex >= 1 && parsedIndex <= sounds.length)
+    ? parsedIndex - 1
+    : Math.floor(Math.random() * sounds.length);
+
+  const audioUrl = options.basePath 
+    ? new URL(sounds[soundIndex], soundsBasePath).href
+    : new URL(`./grunts/${sounds[soundIndex]}`, import.meta.url).href;
+
+  new Audio(audioUrl).play().then(() => {
+    if (unlockIcon) {
+      unlockIcon.remove();
+      unlockIcon = null;
+    }
+  }).catch(err => {
+    if (err.name === 'NotAllowedError' && showUnlockButtonEnabled) {
+      showUnlockIcon();
+    }
+    console.debug('HeeHee: Audio playback failed.', err);
+  });
+}
+
+export function initHeeHee(options = {}) {
+  const selector = typeof options === 'string' ? options : (options.selector || '.heehee, [data-heehee]');
+
+  if (options.basePath) {
+    soundsBasePath = options.basePath.endsWith('/') ? options.basePath : options.basePath + '/';
+  }
+
+  if (options.showUnlockButton !== undefined) {
+    showUnlockButtonEnabled = !!options.showUnlockButton;
+  }
+
+  document.addEventListener('mouseover', (event) => {
+    const target = event.target.closest(selector);
+    
+    if (target && !target.dataset.heeheeActive) {
+      target.dataset.heeheeActive = 'true';
+      
+      const soundAttr = target.getAttribute('data-heehee');
+      playSound(soundAttr, options);
+      
+      const onMouseLeave = () => {
+        delete target.dataset.heeheeActive;
+        target.removeEventListener('mouseleave', onMouseLeave);
+      };
+      target.addEventListener('mouseleave', onMouseLeave);
+    }
+  });
+}

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@mtph9/heehee.js",
+  "version": "1.0.0",
+  "description": "",
+  "main": "heehee.js",
+  "repository": "https://github.com/mtph9/heehee.js",
+  "files": [
+    "heehee.js",
+    "heehee.css",
+    "grunts/"
+  ],
+  "exports": {
+    ".": "./heehee.js",
+    "./heehee.css": "./heehee.css",
+    "./grunts/*": "./grunts/*"
+  },
+  "keywords": [],
+  "author": "mtph9 <mtph9.dev@gmail.com>",
+  "license": "ISC",
+  "type": "module"
+}