[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-972":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":15,"starSnapshotCount":15,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},972,"tiks","rexa-developer\u002Ftiks","rexa-developer","Procedural UI sounds for the web. Zero audio files. Pure synthesis.","https:\u002F\u002Frexa-developer.github.io\u002Ftiks\u002F",null,"TypeScript",539,6,1,0,9,24,66,27,6.54,"MIT License",false,"main",true,[],"2026-06-12 02:00:21","# tiks\n\n**Procedural UI sounds for the web. Zero audio files. Pure synthesis.**\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@rexa-developer\u002Ftiks)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@rexa-developer\u002Ftiks)\n[![gzip size](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fgzip-~2KB-brightgreen)](https:\u002F\u002Fbundlephobia.com\u002Fpackage\u002F@rexa-developer\u002Ftiks)\n[![license](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-blue)](LICENSE)\n\nEvery native app has satisfying sounds — iOS toggle clicks, macOS trash crumple, Android keyboard taps. Web apps have nothing. **tiks** brings that missing sensory layer using the Web Audio API. Every sound is generated at runtime through oscillators, noise buffers, and gain envelopes. No audio files shipped. Just math.\n\nAll sounds share a common synthesis engine with a unified theme — so they sound like they belong together.\n\n## Install\n\n```bash\nnpm install @rexa-developer\u002Ftiks\n```\n\n## Quick Start\n\n```ts\nimport { tiks } from '@rexa-developer\u002Ftiks'\n\n\u002F\u002F Initialize (safe to call at any time — the AudioContext is created on the\n\u002F\u002F first real user gesture, so this never triggers an autoplay-policy warning)\ntiks.init()\n\n\u002F\u002F Play sounds\ntiks.click()\ntiks.success()\ntiks.toggle(true)\n```\n\nThat's it. Three lines.\n\n## Sounds\n\n| Method | Character | Duration |\n|--------|-----------|----------|\n| `click()` | Short, crisp tap | ~30ms |\n| `toggle(true)` | Rising pitch snap | ~60ms |\n| `toggle(false)` | Falling pitch snap | ~60ms |\n| `success()` | Two-note rising chime | ~200ms |\n| `error()` | Gentle buzz\u002Fthud | ~150ms |\n| `warning()` | Cautious double-tap | ~180ms |\n| `hover()` | Whisper-soft tick | ~15ms |\n| `pop()` | Playful bubble pop | ~80ms |\n| `swoosh()` | Quick transition whoosh | ~120ms |\n| `notify()` | Bright attention ping | ~300ms |\n\n## Themes\n\nTwo built-in themes that change the character of every sound:\n\n```ts\ntiks.init({ theme: 'soft' })   \u002F\u002F Warm, rounded, Apple-like (default)\ntiks.init({ theme: 'crisp' })  \u002F\u002F Sharp, tactile, mechanical keyboard feel\n```\n\nSwitch at runtime:\n\n```ts\ntiks.setTheme('crisp')\n```\n\n### Custom Themes\n\n```ts\nimport { tiks, defineTheme } from '@rexa-developer\u002Ftiks'\n\nconst brand = defineTheme({\n  name: 'brand',\n  baseFreq: 500,\n  oscType: 'triangle',\n  decay: 0.8,\n})\n\ntiks.init({ theme: brand })\n```\n\nTheme properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `name` | `string` | Theme identifier |\n| `baseFreq` | `number` | Root frequency all sounds derive from |\n| `noiseColor` | `'white' \\| 'pink'` | Noise type for transients |\n| `oscType` | `OscillatorType` | `'sine'` `'triangle'` `'square'` `'sawtooth'` |\n| `filterFreq` | `number` | Bandpass center for click\u002Ftransient sounds |\n| `filterQ` | `number` | Filter resonance |\n| `attack` | `number` | Attack time in seconds |\n| `decay` | `number` | Decay multiplier (1.0 = normal, 0.5 = snappy) |\n| `brightness` | `number` | Highpass cutoff (higher = brighter) |\n\n## Controls\n\n```ts\ntiks.setVolume(0.5)   \u002F\u002F 0.0 - 1.0 (default: 0.3)\ntiks.mute()\ntiks.unmute()\ntiks.setTheme('crisp')\n```\n\n## Options\n\n```ts\ntiks.init({\n  theme: 'soft',              \u002F\u002F 'soft' | 'crisp' | custom theme\n  volume: 0.4,                \u002F\u002F 0.0 - 1.0\n  muted: false,               \u002F\u002F Start muted\n  respectReducedMotion: true,  \u002F\u002F Auto-mute if prefers-reduced-motion\n})\n```\n\n## React\n\n```tsx\nimport { useTiks } from '@rexa-developer\u002Ftiks\u002Freact'\n\nfunction ToggleButton() {\n  const { click, toggle } = useTiks()\n\n  return (\n    \u003Cbutton onClick={() => {\n      click()\n      setEnabled(prev => {\n        toggle(!prev)\n        return !prev\n      })\n    }}>\n      Toggle\n    \u003C\u002Fbutton>\n  )\n}\n```\n\nThe hook auto-initializes on mount. All returned methods are stable references.\n\n> **Note:** `volume` and `muted` are shared globally across all `useTiks` hooks (they live on the underlying audio engine). `theme` is per-hook. If two hooks pass different `volume` values, the last-mounted one wins.\n\n## Vue\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { useTiks } from '@rexa-developer\u002Ftiks\u002Fvue'\n\nconst { click, success, error } = useTiks()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"click\">Click me\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n```\n\nThe composable auto-initializes on component mount. Same global\u002Fper-instance semantics as the React hook: `volume` and `muted` are shared across all `useTiks` calls, `theme` is per-composable.\n\n## Tree-Shakeable Imports\n\nFor minimal bundles, import only the sounds you need:\n\n```ts\nimport { init, click, success } from '@rexa-developer\u002Ftiks'\n\ninit()\nclick()\nsuccess()\n```\n\n## CDN\n\n```html\n\u003Cscript type=\"module\">\n  import { tiks } from 'https:\u002F\u002Fesm.sh\u002F@rexa-developer\u002Ftiks'\n  document.querySelector('#btn').onclick = () => tiks.click()\n\u003C\u002Fscript>\n```\n\n## Accessibility\n\n- **`prefers-reduced-motion`**: Pass `respectReducedMotion: true` to auto-mute\n- **Sounds are additive**: Never the only way to convey information — always pair with visual feedback\n- **Global mute**: `tiks.mute()` for user control\n- **Default volume is 30%**: Subtle, not intrusive\n\n## Browser Support\n\nWorks in all browsers that support the [Web Audio API](https:\u002F\u002Fcaniuse.com\u002Faudio-api) — Chrome, Firefox, Safari, Edge, and mobile browsers. The library handles autoplay policy automatically by resuming the AudioContext on first interaction.\n\n## How It Works\n\nEach sound is a pure function that creates Web Audio nodes, connects them, schedules playback, and lets the browser garbage-collect them:\n\n```\nOscillatorNode ──┐\n                 ├──→ GainNode (envelope) ──→ MasterGain ──→ speakers\nNoiseBuffer ─────┘\n    ↓\nFilterNode ───────────────────────────────┘\n```\n\nNo audio files. No downloads. No decoding. Just oscillators and math.\n\n## Size\n\n| Entry | Gzipped |\n|-------|---------|\n| Core (`tiks`) | ~2KB |\n| React hook (`tiks\u002Freact`) | ~300B |\n| Vue composable (`tiks\u002Fvue`) | ~300B |\n\n## License\n\nMIT\n","tiks 是一个用于网页的程序化UI声音生成库，它不依赖任何音频文件，完全通过合成技术生成声音。该项目使用TypeScript编写，基于Web Audio API，在运行时通过振荡器、噪声缓冲区和增益包络实时生成各种界面交互音效，如点击声、切换声等。其特点是体积小（压缩后约2KB），提供多种预设声音方法及两种内置主题（柔和与清脆），并支持自定义主题设置。tiks适用于希望增强用户体验但又不想增加额外资源负担的Web应用开发场景中，尤其是在需要为按钮点击、表单提交等操作添加反馈音效的情况下。",2,"2026-06-11 02:40:35","CREATED_QUERY"]