@onomatope/core

Onomatopoeia as micro-interaction. Tiny visible sound effects for UI.

Zero dependencies. Framework-agnostic.

Install

npm install @onomatope/core

Usage

import onomatope from '@onomatope/core'

button.addEventListener('click', (e) => {
  onomatope(e, { texts: ['POW'] })
})

Tones

| Tone | Feel | |------|------| | pop | Bouncy, snappy (default) | | static | Minimal, fade only | | drift | Flowing, slow | | rush | Fast, directional | | drop | Falling, gravity |

Options

onomatope(target, {
  texts: ['POW'],       // What to display (random pick)
  tone: 'pop',          // Animation feel
  color: '#666',        // Text color
  size: 16,             // Font size (px)
  duration: 600,        // Animation duration (ms)
  fontFamily: 'serif',  // Font family
})

License

MIT