Swamp Name Generator

When to use

Perfect for personal sites, communities, forums, newsletters, games. Anywhere a visitor lands and you want a one-second moment of personality. Especially good as a hero gift on a portfolio's first load.

The genius is in persistence — returning visitors are greeted by name, which makes them feel remembered without you having any account system at all.

1. HTML

Just two elements: where the greeting line goes and where the name goes.

<p>Hello, traveller. Your swamp name is</p>
<h1 id="swamp-name">...</h1>

<!-- optional reroll button -->
<button id="swamp-reroll">Re-roll</button>

2. JavaScript

Three word lists × cross-multiply = 4,536,000 possible names. Stored in localStorage under the key swamp:name.

// Swamp UI — Swamp Name Generator
(function () {
  const PREFIX = [
    'Mossbottom', 'Bogwhisper', 'Reedwalker', 'Fenshade', 'Wildleaf',
    'Mirepath', 'Cattail', 'Dewcatch', 'Silkmist', 'Quagmire',
    'Marshrover', 'Nightreed', 'Foxglow', 'Slowriver', 'Thornlight',
  ];
  const TITLE = [
    'the Wandering', 'the Quiet', 'the Twice-Lost', 'the Patient',
    'the Half-Remembered', 'the Curious', 'the Soft-Footed',
    'the Moonkept', 'the Slow', 'the Late-Arriving',
    'the Dreamer', 'the Listener',
  ];
  const CREATURE = [
    'Frog', 'Salamander', 'Newt', 'Heron', 'Owl',
    'Otter', 'Dragonfly', 'Firefly', 'Crane', 'Beetle',
    'Toad', 'Catfish', 'Hare', 'Moth',
  ];

  function pick(arr) { return arr[Math.floor(Math.random() * arr.length)]; }
  function generate() { return pick(PREFIX) + ' ' + pick(TITLE) + ' ' + pick(CREATURE); }

  function getOrCreate() {
    let name = localStorage.getItem('swamp:name');
    if (!name) {
      name = generate();
      localStorage.setItem('swamp:name', name);
    }
    return name;
  }

  function render() {
    const el = document.getElementById('swamp-name');
    if (el) el.textContent = getOrCreate();
  }

  render();

  const reroll = document.getElementById('swamp-reroll');
  if (reroll) reroll.addEventListener('click', () => {
    const n = generate();
    localStorage.setItem('swamp:name', n);
    document.getElementById('swamp-name').textContent = n;
  });
})();