github.com/angrybunnyman.com

Portrait of the Man as a...

Post Nutrition Label

  • Content Type: Text
  • Read Time: 10 min
  • Topics: HTML, CSS, JS, Easter Eggs
  • Mood: Devious

Where have you been, All Reading Eye?

Sigils in the Margins: A Guide to the Little Whispers

There are glyphs now---scratches in the footer of the page, marks you didn't place but which appeared anyway after wandering the halls of this blog long enough. They look like sigils, strange little runes that wink into existence as you move from chamber to chamber. Each one is a quiet tally of your trespasses, a breadcrumb trail made of bone dust.

This isn't coincidence. It's code.

The Ritual (aka JavaScript)

Below is the summoning circle. Don't fear the syntax; it's simply keeping score of where you've gone and making the symbols appear when the pattern matches.

<script>
  // Track which sigils have been seen today
  function getVisited() {
    let visited = localStorage.getItem('visitedSigils');
    return visited ? JSON.parse(visited) : [];
  }

  function addVisit(pageId) {
    let visited = getVisited();
    if (!visited.includes(pageId)) {
      visited.push(pageId);
      localStorage.setItem('visitedSigils', JSON.stringify(visited));
    }
    renderSigils(visited);
  }

  function renderSigils(visited) {
    let footer = document.querySelector('footer');
    if (!footer) return;

    footer.innerHTML = '';
    visited.forEach((sigil, index) => {
      let span = document.createElement('span');
      span.classList.add('sigil');
      span.textContent = '⟟'; // the rune, replace with any glyph
      footer.appendChild(span);
    });
  }

  // Example: mark this page with its unique sigil ID
  document.addEventListener('DOMContentLoaded', () => {
    addVisit('page-unique-id'); // each page uses its own ID
  });
</script>

And in the stylesheet, you etch a little more menace:

.sigil {
  margin: 0 .25em;
  font-size: 1.5em;
  color: var(--accent-color);
  text-shadow: 0 0 8px var(--accent-color);
  animation: pulse 2s infinite alternate;
}

@keyframes pulse {
  from { opacity: 0.5; transform: scale(1); }
  to   { opacity: 1; transform: scale(1.2); }
}

Plain Language Translation

That's it. There is no central authority, no database, no great ledger. Just your browser keeping a candle-lit tally of your own sins.

Reply on Bluesky ⤤ Reply by Email (or just say hi!) Reply on Mastodon ⤤

Footnotes