@akshatbuilds/sonix 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 abhi-yo
+
+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,123 @@
+# Sonix — UI Sound Effects Library
+
+Micro UX audio for interactive web applications. Zero dependencies. Copy-paste ready.
+
+[Live Demo](https://abhi-yo.github.io/sound-library) · [Browse Sounds](#available-sounds) · [CLI](#cli)
+
+---
+
+## Features
+
+- **14 sounds** — clicks, hovers, success, error, notifications, transitions, and more
+- **Zero dependencies** — every snippet is standalone Web Audio API code
+- **Copy & paste** — hit the copy button on any card to get production-ready code
+- **CLI** — `npx sonix add pop` to scaffold sounds into your project
+- **Framework agnostic** — works with React, Vue, Svelte, vanilla JS, anything
+- **Dark mode** — with cinematic circular reveal transition
+- **`prefers-reduced-motion`** — respects user accessibility preferences
+
+## Quick Start
+
+### Web Audio (no files needed)
+
+```js
+const ctx = new AudioContext();
+const osc = ctx.createOscillator();
+const gain = ctx.createGain();
+osc.type = 'sine';
+osc.frequency.setValueAtTime(800, ctx.currentTime);
+gain.gain.setValueAtTime(0.25, ctx.currentTime);
+gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.15);
+osc.connect(gain).connect(ctx.destination);
+osc.start();
+osc.stop(ctx.currentTime + 0.15);
+```
+
+### MP3 (for button clicks)
+
+```js
+const audio = new Audio('/click1.mp3');
+audio.volume = 0.5;
+audio.play();
+```
+
+### React Hook
+
+```tsx
+import { playSound } from './lib/sounds';
+
+function MyButton() {
+  return <button onClick={() => playSound('pop')}>Click</button>;
+}
+```
+
+## CLI
+
+Add sounds to any project with the CLI:
+
+```bash
+npx sonix list              # List all available sounds
+npx sonix add pop           # Add a single sound
+npx sonix add pop swoosh    # Add multiple sounds
+```
+
+Sounds are written to `lib/sounds/` as standalone files — no runtime dependency.
+
+## Available Sounds
+
+| Name | Category | Source | Use Case |
+|------|----------|--------|----------|
+| `button-click` | Interaction | MP3 | Primary button presses |
+| `button-click-secondary` | Interaction | MP3 | Secondary / ghost buttons |
+| `hover-blip` | Feedback | Web Audio | Hovering over interactive elements |
+| `hover-soft` | Feedback | Web Audio | Subtle hover feedback |
+| `success-chime` | Notification | Web Audio | Form submissions, saves |
+| `success-bell` | Notification | Web Audio | Achievements, milestones |
+| `error-buzz` | Alert | Web Audio | Validation errors, failed actions |
+| `error-beep` | Alert | Web Audio | Warnings, blocked actions |
+| `notification-ping` | Alert | Web Audio | New messages, alerts |
+| `notification-subtle` | Alert | Web Audio | Background updates |
+| `swoosh` | Transition | Web Audio | Page transitions, panel slides |
+| `pop` | Interaction | Web Audio | Tooltips, popovers, reveals |
+| `slider-tick` | Interaction | Web Audio | Sliders, range inputs |
+| `key-press` | Interaction | Web Audio | Text inputs, keyboards |
+
+## Accessibility
+
+All sounds respect `prefers-reduced-motion: reduce`. When the user has requested reduced motion, sounds are automatically silenced.
+
+To manually control sound:
+
+```js
+// Check user preference
+const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+if (!prefersReducedMotion) {
+  playSound('pop');
+}
+```
+
+## Development
+
+```bash
+pnpm install
+pnpm dev
+```
+
+## Build
+
+```bash
+pnpm build
+```
+
+## Registry
+
+The project includes a shadcn-style registry at `public/registry/`. To rebuild:
+
+```bash
+node scripts/build-registry.mjs
+```
+
+## License
+
+MIT — see [LICENSE](./LICENSE).

package/app/globals.css

@@ -0,0 +1,110 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Circular reveal via View Transition API for cinematic theme change */
+::view-transition-old(root) {
+  animation: none;
+  z-index: 1;
+}
+
+::view-transition-new(root) {
+  animation: none;
+  z-index: 9999;
+  mix-blend-mode: normal;
+}
+
+/* Honor prefers-reduced-motion (Web Interface Guidelines: Animation) */
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none !important;
+  }
+}

package/app/layout.tsx

@@ -0,0 +1,54 @@
+import React from "react"
+import type { Metadata } from 'next'
+import { Geist, Geist_Mono } from 'next/font/google'
+import { ThemeProvider } from '@/components/theme-provider'
+import { Analytics } from '@vercel/analytics/next'
+
+import './globals.css'
+
+const geist = Geist({ subsets: ['latin'], variable: '--font-geist' })
+const geistMono = Geist_Mono({ subsets: ['latin'], variable: '--font-geist-mono' })
+
+export const metadata: Metadata = {
+  title: 'Sonix — UI Sound Effects Library',
+  description: 'Micro UX audio interactions for web apps. 14 sounds, zero dependencies, copy-paste ready.',
+  metadataBase: new URL('https://abhi-yo.github.io/sound-library'),
+  openGraph: {
+    title: 'Sonix — UI Sound Effects Library',
+    description: 'Micro UX audio interactions for web apps. 14 sounds, zero dependencies, copy-paste ready.',
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Sonix — UI Sound Effects Library',
+    description: 'Micro UX audio interactions for web apps. 14 sounds, zero dependencies, copy-paste ready.',
+  },
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning className={`${geist.variable} ${geistMono.variable}`}>
+      <head>
+        <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
+        <meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme: dark)" />
+      </head>
+      <body className="font-sans antialiased">
+        <a href="#main-content" className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-foreground">
+          Skip to main content
+        </a>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+        >
+          {children}
+        </ThemeProvider>
+        <Analytics />
+      </body>
+    </html>
+  )
+}

package/app/page.tsx

@@ -0,0 +1,40 @@
+import { SoundsGallery } from '@/components/sounds-gallery';
+import { UsageGuide } from '@/components/usage-guide';
+import { ThemeToggle } from '@/components/theme-toggle';
+
+export const metadata = {
+  title: 'UI Sound Effects Library',
+  description: 'Tiny audio interactions for web apps. Button clicks, hover blips, success sounds, and error feedback.',
+};
+
+export default function Home() {
+  return (
+    <main id="main-content" className="flex min-h-screen flex-col bg-background text-foreground">
+      <div className="flex flex-col gap-12 px-4 py-12 sm:px-8 lg:px-16">
+        {/* Header */}
+        <div className="flex flex-col gap-4 border-b border-border pb-8">
+          <div className="flex items-center justify-between">
+            <h1 className="font-sans text-4xl font-bold tracking-tight sm:text-5xl">
+              Sound Effects
+            </h1>
+            <ThemeToggle />
+          </div>
+          <p className="max-w-2xl text-lg text-muted-foreground">
+            Micro UX audio for interactive web applications. Click to preview, copy code to use.
+          </p>
+        </div>
+
+        {/* Gallery */}
+        <SoundsGallery />
+
+        {/* Usage Guide */}
+        <UsageGuide />
+
+        {/* Footer */}
+        <div className="border-t border-border py-8 text-center text-sm text-muted-foreground">
+          <p>Click the play button to preview. Use the copy button to get code for your project.</p>
+        </div>
+      </div>
+    </main>
+  );
+}

package/app/usage/page.tsx

@@ -0,0 +1,9 @@
+import { UsageGuide } from '@/components/usage-guide';
+
+export default function UsagePage() {
+  return (
+    <div className="container mx-auto px-4 py-12">
+      <UsageGuide />
+    </div>
+  );
+}

package/cli/index.mjs

@@ -0,0 +1,151 @@
+#!/usr/bin/env node
+
+/**
+ * sonix CLI — add sounds to your project
+ *
+ * Usage:
+ *   npx sonix add <sound-name>       Add a single sound
+ *   npx sonix add <s1> <s2> ...      Add multiple sounds
+ *   npx sonix list                   List all available sounds
+ *
+ * Sounds are fetched from the public registry and written
+ * to your project as standalone files — no runtime dependency.
+ */
+
+import { writeFileSync, mkdirSync, existsSync } from "node:fs";
+import { join } from "node:path";
+
+const REGISTRY_URL =
+  process.env.SONIX_REGISTRY ||
+  "https://abhi-yo.github.io/sound-library/registry";
+
+const COLORS = {
+  reset: "\x1b[0m",
+  green: "\x1b[32m",
+  cyan: "\x1b[36m",
+  yellow: "\x1b[33m",
+  red: "\x1b[31m",
+  dim: "\x1b[2m",
+  bold: "\x1b[1m",
+};
+
+function log(msg) {
+  console.log(msg);
+}
+
+function success(msg) {
+  log(`${COLORS.green}✓${COLORS.reset} ${msg}`);
+}
+
+function warn(msg) {
+  log(`${COLORS.yellow}⚠${COLORS.reset} ${msg}`);
+}
+
+function error(msg) {
+  log(`${COLORS.red}✗${COLORS.reset} ${msg}`);
+}
+
+async function fetchJSON(url) {
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Failed to fetch ${url}: ${res.status}`);
+  return res.json();
+}
+
+async function listSounds() {
+  try {
+    const registry = await fetchJSON(`${REGISTRY_URL}/index.json`);
+    log("");
+    log(`${COLORS.bold}Available sounds (${registry.sounds.length}):${COLORS.reset}`);
+    log("");
+
+    const categories = {};
+    for (const s of registry.sounds) {
+      const cat = s.category || "other";
+      if (!categories[cat]) categories[cat] = [];
+      categories[cat].push(s);
+    }
+
+    for (const [cat, sounds] of Object.entries(categories)) {
+      log(`  ${COLORS.cyan}${cat}${COLORS.reset}`);
+      for (const s of sounds) {
+        const badge = s.type === "mp3" ? `${COLORS.yellow}mp3${COLORS.reset}` : `${COLORS.dim}web audio${COLORS.reset}`;
+        log(`    ${s.name.padEnd(24)} ${badge}  ${COLORS.dim}${s.description}${COLORS.reset}`);
+      }
+      log("");
+    }
+  } catch (err) {
+    error(`Could not fetch registry: ${err.message}`);
+    process.exit(1);
+  }
+}
+
+async function addSounds(names) {
+  const outDir = join(process.cwd(), "lib", "sounds");
+
+  if (!existsSync(outDir)) {
+    mkdirSync(outDir, { recursive: true });
+    success(`Created ${COLORS.cyan}lib/sounds/${COLORS.reset}`);
+  }
+
+  for (const name of names) {
+    try {
+      const sound = await fetchJSON(`${REGISTRY_URL}/sounds/${name}.json`);
+
+      for (const file of sound.files) {
+        const filePath = join(outDir, file.name);
+        writeFileSync(filePath, file.content + "\n");
+        success(`Added ${COLORS.cyan}lib/sounds/${file.name}${COLORS.reset}`);
+      }
+
+      if (sound.assets?.length) {
+        warn(
+          `${name} requires asset files: ${sound.assets.join(", ")} — download them from the website and put in your public/ folder.`
+        );
+      }
+    } catch (err) {
+      error(`Could not add "${name}": ${err.message}`);
+    }
+  }
+
+  log("");
+  log(`${COLORS.dim}Import and use:${COLORS.reset}`);
+  log(`${COLORS.dim}  import { play${toPascal(names[0])} } from './lib/sounds/${names[0]}';${COLORS.reset}`);
+  log("");
+}
+
+function toPascal(str) {
+  return str
+    .split("-")
+    .map((w) => w[0].toUpperCase() + w.slice(1))
+    .join("");
+}
+
+// --- Main ---
+
+const args = process.argv.slice(2);
+const command = args[0];
+
+if (!command || command === "help" || command === "--help") {
+  log("");
+  log(`${COLORS.bold}sonix${COLORS.reset} — UI sound effects for your app`);
+  log("");
+  log(`  ${COLORS.cyan}npx sonix list${COLORS.reset}              List all sounds`);
+  log(`  ${COLORS.cyan}npx sonix add <name>${COLORS.reset}        Add a sound to your project`);
+  log(`  ${COLORS.cyan}npx sonix add pop swoosh${COLORS.reset}    Add multiple sounds`);
+  log("");
+  process.exit(0);
+}
+
+if (command === "list") {
+  await listSounds();
+} else if (command === "add") {
+  const names = args.slice(1);
+  if (names.length === 0) {
+    error("Specify at least one sound name. Run `npx sonix list` to see options.");
+    process.exit(1);
+  }
+  await addSounds(names);
+} else {
+  error(`Unknown command: ${command}. Run \`npx sonix --help\`.`);
+  process.exit(1);
+}