JAPANESE KAOMOJI STUDIO

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

const KAOMOJI_DATA = [
      { text: "¯\\_(ツ)_/¯", tag: "Shrug" },
      { text: "(╯°□°)╯︵ ┻━┻", tag: "Table Flip" },
      { text: "┬─┬ノ( º _ ºノ)", tag: "Put Table Back" },
      { text: "(⁠✿⁠^⁠‿⁠^⁠)", tag: "Happy / Cute" },
      { text: "(⁠★⁠u⁠★⁠)", tag: "Star Eyes" },
      { text: "(⁠⊙⁠_⁠⊙⁠)", tag: "Shocked" },
      { text: "(⁠T⁠_⁠T⁠)", tag: "Crying" },
      { text: "(⁠>⁠<⁠)", tag: "Blushing" },
      { text: "(⁠~⁠￣⁠³⁠￣⁠)⁠~", tag: "Kiss" },
      { text: "(⁠ಠ⁠_⁠ಠ⁠)", tag: "Disapproval" },
      { text: "ʕ⁠·⁠ᴥ⁠·⁠ʔ", tag: "Bear" },
      { text: "(⁠=⁠^⁠･⁠ｪ⁠･⁠^⁠=⁠)", tag: "Cat" },
      { text: "(⁠/⁠¯⁠◡⁠line⁠)⁠/⁠¯", tag: "Victory" },
      { text: "d(⁠⌒⁠ー⁠⌒⁠)b", tag: "Thumbs Up" },
      { text: "(⁠.⁠ ⁠❛⁠ ⁠ᴗ⁠ ⁠❛⁠.⁠)", tag: "Smile" },
      { text: "(⁠ノ⁠ಠ⁠益⁠ಠ⁠)⁠ノ", tag: "Rage" }
    ];

    const grid = document.getElementById('grid');
    const input = document.getElementById('search-input');
    const toast = document.getElementById('toast');

    function showToast(msg) {
      toast.textContent = msg;
      toast.classList.add('show');
      setTimeout(() => toast.classList.remove('show'), 2000);
    }

    function render(filter = '') {
      grid.innerHTML = '';
      const query = filter.toLowerCase();
      KAOMOJI_DATA.filter(k => k.text.toLowerCase().includes(query) || k.tag.toLowerCase().includes(query)).forEach(k => {
        const card = document.createElement('div');
        card.className = 'kaomoji-card';
        card.innerHTML = `<span class="kao-text">${k.text}</span><span class="kao-tag">${k.tag}</span>`;
        card.addEventListener('click', () => {
          navigator.clipboard.writeText(k.text);
          showToast(`Copied ${k.text}`);
        });
        grid.appendChild(card);
      });
    }

    input.addEventListener('input', e => render(e.target.value));

    render();