From e25e84eebe249534202be4c3bc5fa8ca9b5084d7 Mon Sep 17 00:00:00 2001
From: Ronald Tse <ronald.tse@ribose.com>
Date: Thu, 23 Jul 2026 02:33:34 +0800
Subject: [PATCH 1/4] feat(easter-eggs): themed WAAPI easter eggs + console API
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Eleven themed easter eggs, all rendered via the Web Animations API
(no CSS animation libs). Each is built around PubID's domain:
publication identifiers, standards bodies, and the PubID data model.

Eggs:
- Konami code (↑↑↓↓←→←→BA) → Standards Lifecycle animation:
  WD → CD → DIS → FDIS → Published, with sequenced stage morphs,
  progress segments lighting up, confetti + page-shake finale.
  Demonstrates Promise-based timelines and composite easing.
- Click logo × 7 → Logo decomposes into labeled PubID components
  (Publisher / Type / Number / Year / Supplement) with SVG callout
  lines drawn via animated stroke-dash.
- Type "ISO 9001" → Quality Certified stamp drops via spring easing
  (cubic-bezier overshoot) with curved-text SVG path.
- Type "RFC 1149" → Carrier pigeon flies across with sinusoidal
  vertical motion layered on the linear horizontal motion via
  WAAPI composite:'add'. Drops a "PKT" datagram mid-flight.
- Type "802.11" → Concentric beacon pulses radiate from the
  wordmark (5 staggered rings, each fading on expansion).
- Type "urn" → Identifier regex scans the page; each match sprouts
  a URN chip via staggered fadeInUp.
- Type "errata" → Dictionary lookup strikes words with redline
  strikethroughs; falls back to random words when no dictionary
  match exists in a paragraph.
- World Standards Day (Oct 14) → Auto-badge in header + confetti.
- Console: pubid.spin(), .shake(), .confetti() — programmatic
  access to the same primitives.

Console API:
- window.help and window.pubid.help() → styled ASCII directory
  of every egg with triggers and descriptions.
- window.pubid.list() → egg metadata as data.
- window.pubid.fire(id) → trigger by id.
- window.pubid.{spin,shake,confetti}() → quick effects.

Architecture:
- src/scripts/easter-eggs/effects.ts  WAAPI primitives (overlay,
  toast, confetti, shake, spin, pulse-ring, dim-page, fade helpers).
  All routed through a single pointer-events:none overlay.
- src/scripts/easter-eggs/eggs.ts     Egg implementations and
  registry.
- src/scripts/easter-eggs/index.ts    Triggers (typing buffer,
  Konami detector, click counter, temporal), console API install,
  init(). Auto-initialises on import.

prefers-reduced-motion: flashy effects (confetti, shake) no-op.
All keyboard input is ignored when an input/textarea/contentEditable
is focused so the eggs never interfere with form entry.
---
 src/layouts/BaseLayout.astro       |   3 +
 src/scripts/easter-eggs/effects.ts | 340 ++++++++++
 src/scripts/easter-eggs/eggs.ts    | 960 +++++++++++++++++++++++++++++
 src/scripts/easter-eggs/index.ts   | 299 +++++++++
 4 files changed, 1602 insertions(+)
 create mode 100644 src/scripts/easter-eggs/effects.ts
 create mode 100644 src/scripts/easter-eggs/eggs.ts
 create mode 100644 src/scripts/easter-eggs/index.ts

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index bf36ae6..b254d68 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -44,6 +44,9 @@ const fullTitle = title === 'PubID' ? title : `${title} · PubID`
       <slot />
     </main>
     <Footer />
+    <script>
+      import '~/scripts/easter-eggs'
+    </script>
     <script>
       const io = new IntersectionObserver(
         (entries) => {
diff --git a/src/scripts/easter-eggs/effects.ts b/src/scripts/easter-eggs/effects.ts
new file mode 100644
index 0000000..5ba98c6
--- /dev/null
+++ b/src/scripts/easter-eggs/effects.ts
@@ -0,0 +1,340 @@
+/**
+ * PubID Easter Eggs — WAAPI primitives and overlay helpers.
+ *
+ * Every visual effect routes through a single pointer-events:none overlay
+ * so easter eggs never block normal interaction. All animations honour
+ * prefers-reduced-motion: when the user has reduced motion enabled, effects
+ * either no-op or render as a static end-state.
+ */
+
+const ACCENT = '#2978a1'
+const ACCENT_2 = '#4193ac'
+const WARM = '#da9d76'
+const PALETTE = [ACCENT, ACCENT_2, WARM, '#fbbf24', '#34d399', '#2dd4bf']
+
+let _overlay: HTMLElement | null = null
+
+export function prefersReducedMotion(): boolean {
+  return (
+    typeof matchMedia !== 'undefined' &&
+    matchMedia('(prefers-reduced-motion: reduce)').matches
+  )
+}
+
+/** Shared, pointer-events-none overlay that holds all transient effects. */
+export function overlay(): HTMLElement {
+  if (_overlay && document.body.contains(_overlay)) return _overlay
+  const el = document.createElement('div')
+  el.id = 'pubid-egg-overlay'
+  el.style.cssText =
+    'position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden;'
+  document.body.appendChild(el)
+  _overlay = el
+  return el
+}
+
+/** Empty the overlay (called between eggs). */
+export function clearOverlay(delayMs = 0) {
+  if (!_overlay) return
+  setTimeout(() => {
+    if (_overlay) _overlay.innerHTML = ''
+  }, delayMs)
+}
+
+type Style = Record<string, string>
+
+const toKebab = (s: string) => s.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`)
+
+export function makeEl<K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  style: Style | string = {},
+  text?: string
+): HTMLElementTagNameMap[K] {
+  const el = document.createElement(tag)
+  if (typeof style === 'string') {
+    el.style.cssText = style
+  } else {
+    for (const [k, v] of Object.entries(style)) {
+      try {
+        el.style.setProperty(toKebab(k), v)
+      } catch {
+        /* ignore unknown css props */
+      }
+    }
+  }
+  if (text) el.textContent = text
+  return el
+}
+
+/** Toast at bottom-center. Auto-dismisses. */
+export function toast(
+  message: string,
+  opts: { duration?: number; color?: string } = {}
+) {
+  const { duration = 2400, color = ACCENT } = opts
+  const el = makeEl(
+    'div',
+    {
+      position: 'fixed',
+      bottom: '32px',
+      left: '50%',
+      transform: 'translateX(-50%) translateY(20px)',
+      background: 'rgba(15,18,24,0.94)',
+      color: '#fafafa',
+      padding: '10px 18px',
+      borderRadius: '8px',
+      fontSize: '13px',
+      fontFamily: 'ui-monospace,"SF Mono",Menlo,monospace',
+      letterSpacing: '0.04em',
+      border: `1px solid ${color}`,
+      boxShadow: '0 8px 24px rgba(0,0,0,0.3)',
+      pointerEvents: 'auto',
+      opacity: '0',
+      whiteSpace: 'nowrap',
+    },
+    message
+  )
+  overlay().appendChild(el)
+  el.animate(
+    [
+      { opacity: '0', transform: 'translateX(-50%) translateY(20px)' },
+      { opacity: '1', transform: 'translateX(-50%) translateY(0)' },
+    ],
+    { duration: 200, easing: 'ease-out', fill: 'forwards' }
+  )
+  setTimeout(() => {
+    el.animate(
+      [
+        { opacity: '1', transform: 'translateX(-50%) translateY(0)' },
+        { opacity: '0', transform: 'translateX(-50%) translateY(20px)' },
+      ],
+      { duration: 200, fill: 'forwards' }
+    ).onfinish = () => el.remove()
+  }, duration)
+}
+
+/** Confetti burst from a point. Returns a promise that resolves when all pieces land. */
+export function confetti(
+  opts: {
+    count?: number
+    colors?: string[]
+    originX?: number
+    originY?: number
+    spread?: number
+  } = {}
+): Promise<void> {
+  if (prefersReducedMotion()) return Promise.resolve()
+  const {
+    count = 90,
+    colors = PALETTE,
+    originX = window.innerWidth / 2,
+    originY = window.innerHeight / 2,
+    spread = Math.PI * 2,
+  } = opts
+  const layer = overlay()
+  const animations: Animation[] = []
+  for (let i = 0; i < count; i++) {
+    const color = colors[i % colors.length]
+    const piece = makeEl('div', {
+      position: 'absolute',
+      left: `${originX}px`,
+      top: `${originY}px`,
+      width: `${5 + Math.random() * 5}px`,
+      height: `${9 + Math.random() * 6}px`,
+      background: color,
+      borderRadius: '1px',
+      opacity: '1',
+    })
+    layer.appendChild(piece)
+    const angle = -Math.PI / 2 + (Math.random() - 0.5) * spread
+    const velocity = 220 + Math.random() * 480
+    const tx = Math.cos(angle) * velocity
+    const ty = Math.sin(angle) * velocity
+    const rot = (Math.random() - 0.5) * 1080
+    const fall = window.innerHeight - originY + 200
+    const anim = piece.animate(
+      [
+        { transform: 'translate(0,0) rotate(0)', opacity: 1 },
+        {
+          transform: `translate(${tx}px,${ty + fall * 0.4}px) rotate(${rot * 0.5}deg)`,
+          opacity: 1,
+          offset: 0.5,
+        },
+        {
+          transform: `translate(${tx * 1.1}px,${fall}px) rotate(${rot}deg)`,
+          opacity: 0,
+        },
+      ],
+      {
+        duration: 1600 + Math.random() * 1200,
+        easing: 'cubic-bezier(0.2,0.6,0.4,1)',
+        fill: 'forwards',
+      }
+    )
+    anim.onfinish = () => piece.remove()
+    animations.push(anim)
+  }
+  return Promise.all(animations.map(a => a.finished)).then(() => undefined)
+}
+
+/** Screen shake. */
+export function shake(target: Element = document.body, intensity = 8) {
+  if (prefersReducedMotion()) return
+  target.animate(
+    [
+      { transform: 'translate(0,0)' },
+      { transform: `translate(${-intensity}px,${intensity / 2}px)` },
+      { transform: `translate(${intensity}px,${-intensity / 2}px)` },
+      { transform: `translate(${-intensity * 0.6}px,${intensity * 0.3}px)` },
+      { transform: `translate(${intensity * 0.4}px,${-intensity * 0.2}px)` },
+      { transform: 'translate(0,0)' },
+    ],
+    { duration: 420, easing: 'ease-out' }
+  )
+}
+
+/** Spin around centre. */
+export function spin(target: Element, duration = 900) {
+  return target.animate(
+    [{ transform: 'rotate(0)' }, { transform: 'rotate(360deg)' }],
+    { duration, easing: 'cubic-bezier(0.5,0,0.5,1)', fill: 'none' }
+  )
+}
+
+/** Fade + slide in. */
+export function fadeInUp(
+  el: Element,
+  opts: { delay?: number; duration?: number; distance?: number } = {}
+) {
+  const { delay = 0, duration = 600, distance = 16 } = opts
+  return el.animate(
+    [
+      { opacity: 0, transform: `translateY(${distance}px)` },
+      { opacity: 1, transform: 'translateY(0)' },
+    ],
+    {
+      duration,
+      delay,
+      easing: 'cubic-bezier(0.22,1,0.36,1)',
+      fill: 'both',
+    }
+  )
+}
+
+/** Stamp drop with spring overshoot. */
+export function stampDrop(
+  el: Element,
+  opts: { delay?: number; duration?: number; rotate?: number } = {}
+) {
+  const { delay = 0, duration = 520, rotate = -8 } = opts
+  return el.animate(
+    [
+      {
+        opacity: 0,
+        transform: `translateY(-80px) scale(2.2) rotate(${rotate - 12}deg)`,
+      },
+      {
+        opacity: 1,
+        transform: `translateY(0) scale(1) rotate(${rotate}deg)`,
+        offset: 0.65,
+      },
+      {
+        transform: `translateY(-5px) scale(1.07) rotate(${rotate + 1}deg)`,
+        offset: 0.82,
+      },
+      { transform: `translateY(0) scale(1) rotate(${rotate}deg)` },
+    ],
+    {
+      duration,
+      delay,
+      easing: 'cubic-bezier(0.34,1.56,0.64,1)',
+      fill: 'forwards',
+    }
+  )
+}
+
+/** Concentric expanding ring (used by WiFi pulses, etc.). */
+export function pulseRing(
+  parent: HTMLElement,
+  opts: {
+    x?: number
+    y?: number
+    color?: string
+    delay?: number
+    duration?: number
+    maxScale?: number
+  } = {}
+): Animation {
+  const {
+    x = 0,
+    y = 0,
+    color = ACCENT,
+    delay = 0,
+    duration = 1400,
+    maxScale = 4,
+  } = opts
+  const ring = makeEl('div', {
+    position: 'absolute',
+    left: `${x}px`,
+    top: `${y}px`,
+    width: '24px',
+    height: '24px',
+    marginLeft: '-12px',
+    marginTop: '-12px',
+    border: `2px solid ${color}`,
+    borderRadius: '999px',
+    opacity: '0',
+  })
+  parent.appendChild(ring)
+  const anim = ring.animate(
+    [
+      { transform: 'scale(0.4)', opacity: 0.9 },
+      { transform: `scale(${maxScale})`, opacity: 0 },
+    ],
+    { duration, delay, easing: 'cubic-bezier(0.2,0.7,0.3,1)', fill: 'forwards' }
+  )
+  anim.onfinish = () => ring.remove()
+  return anim
+}
+
+/** Dim the page behind an effect. Returns the dimmer element. */
+export function dimPage(
+  opts: { opacity?: number; blur?: string; duration?: number } = {}
+): HTMLElement {
+  const { opacity = 0.55, blur = '6px', duration = 220 } = opts
+  const dim = makeEl('div', {
+    position: 'fixed',
+    inset: '0',
+    background: 'rgba(9,9,11,0.85)',
+    backdropFilter: `blur(${blur})`,
+    WebkitBackdropFilter: `blur(${blur})`,
+    opacity: '0',
+    pointerEvents: 'auto',
+  })
+  overlay().appendChild(dim)
+  dim.animate(
+    [{ opacity: 0 }, { opacity: String(opacity) }],
+    { duration, easing: 'ease-out', fill: 'forwards' }
+  )
+  return dim
+}
+
+/** Crossfade-remove an element. */
+export function fadeOut(el: Element, duration = 240): Promise<void> {
+  return new Promise(resolve => {
+    const anim = el.animate([{ opacity: 1 }, { opacity: 0 }], {
+      duration,
+      easing: 'ease-out',
+      fill: 'forwards',
+    })
+    anim.onfinish = () => {
+      el.remove()
+      resolve()
+    }
+  })
+}
+
+/** Sleep helper for sequencing. */
+export const sleep = (ms: number) => new Promise<void>(r => setTimeout(r, ms))
+
+export const COLORS = { ACCENT, ACCENT_2, WARM, PALETTE }
diff --git a/src/scripts/easter-eggs/eggs.ts b/src/scripts/easter-eggs/eggs.ts
new file mode 100644
index 0000000..1f4a829
--- /dev/null
+++ b/src/scripts/easter-eggs/eggs.ts
@@ -0,0 +1,960 @@
+/**
+ * PubID Easter Eggs — implementations.
+ *
+ * Each egg is themed around publication identifiers, standards bodies, or
+ * the PubID data model. They use real WAAPI features (composite modes,
+ * path-based animation, custom easing, sequenced timelines) rather than
+ * CSS-only tricks.
+ */
+
+import * as fx from './effects'
+
+export interface EggContext {
+  fire: (id: string) => void
+  log: (msg: string) => void
+}
+
+export interface Egg {
+  id: string
+  name: string
+  description: string
+  category: 'konami' | 'keystroke' | 'click' | 'console' | 'temporal'
+  trigger: string
+  activate: (ctx: EggContext) => void | Promise<void>
+}
+
+const { ACCENT, ACCENT_2, WARM } = {
+  ACCENT: '#2978a1',
+  ACCENT_2: '#4193ac',
+  WARM: '#da9d76',
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * 1. Konami → Standards Lifecycle (WD → CD → DIS → FDIS → Published)
+ * ───────────────────────────────────────────────────────────────── */
+const STANDARDS_LIFECYCLE: Egg = {
+  id: 'lifecycle',
+  name: 'Standards Lifecycle',
+  description:
+    'Watch a document progress through Working Draft → Committee Draft → Draft International Standard → Final Draft → Published.',
+  category: 'konami',
+  trigger: '↑ ↑ ↓ ↓ ← → ← → B A',
+  async activate(ctx) {
+    ctx.log('Standards lifecycle engaged.')
+    const dim = fx.dimPage({ opacity: 0.7, blur: '8px' })
+
+    const card = document.createElement('div')
+    card.style.cssText = `
+      position: fixed; top: 50%; left: 50%;
+      transform: translate(-50%, -50%);
+      width: min(440px, 92vw);
+      background: var(--color-bg, #fff);
+      color: var(--color-text, #09090b);
+      border: 1px solid var(--color-border, #e4e4e7);
+      border-radius: 16px;
+      padding: 32px 36px;
+      box-shadow: 0 30px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04);
+      font-family: ui-sans-serif, system-ui, sans-serif;
+      pointer-events: auto;
+      overflow: hidden;
+    `
+    fx.overlay().appendChild(card)
+
+    const stageLabel = document.createElement('div')
+    stageLabel.style.cssText = `
+      font-family: ui-monospace, "SF Mono", Menlo, monospace;
+      font-size: 11px; font-weight: 500;
+      letter-spacing: 0.18em; text-transform: uppercase;
+      color: var(--color-text-3, #a1a1aa);
+      margin-bottom: 12px;
+    `
+    const title = document.createElement('div')
+    title.style.cssText = `
+      font-family: "Fraunces Variable", ui-serif, Georgia, serif;
+      font-size: 32px; font-weight: 600;
+      letter-spacing: -0.02em; line-height: 1.1;
+      margin-bottom: 8px;
+    `
+    const subtitle = document.createElement('div')
+    subtitle.style.cssText = `
+      font-size: 14px; color: var(--color-text-2, #52525b);
+      line-height: 1.5;
+    `
+    const progress = document.createElement('div')
+    progress.style.cssText = `
+      margin-top: 22px; display: flex; gap: 6px;
+    `
+    for (let i = 0; i < 5; i++) {
+      const seg = document.createElement('div')
+      seg.style.cssText = `
+        flex: 1; height: 4px; border-radius: 999px;
+        background: var(--color-border, #e4e4e7);
+        transition: background 200ms;
+      `
+      progress.appendChild(seg)
+    }
+
+    card.append(stageLabel, title, subtitle, progress)
+
+    fx.fadeInUp(card, { duration: 320, distance: 24 })
+
+    const stages = [
+      {
+        abbr: 'WD',
+        name: 'Working Draft',
+        sub: 'Editors are still arguing. Anything can change.',
+        color: '#a1a1aa',
+      },
+      {
+        abbr: 'CD',
+        name: 'Committee Draft',
+        sub: 'National bodies are circling specific sentences.',
+        color: '#da9d76',
+      },
+      {
+        abbr: 'DIS',
+        name: 'Draft International Standard',
+        sub: 'The shape of the thing is now visible to all.',
+        color: '#4193ac',
+      },
+      {
+        abbr: 'FDIS',
+        name: 'Final Draft International Standard',
+        sub: 'Only editorial changes from here. The vote is locked.',
+        color: '#2978a1',
+      },
+      {
+        abbr: 'IS',
+        name: 'Published',
+        sub: 'ISO XXXX:2026 — International Standard. Cite accordingly.',
+        color: '#34d399',
+      },
+    ]
+
+    const segments = Array.from(progress.children) as HTMLElement[]
+
+    for (let i = 0; i < stages.length; i++) {
+      const stage = stages[i]
+      stageLabel.textContent = `Stage ${i + 1} of 5 — ${stage.abbr}`
+      if (i === 0) {
+        title.textContent = stage.abbr
+        subtitle.textContent = stage.name
+      } else {
+        // Morph text with WAAPI
+        const morph = title.animate(
+          [
+            { opacity: 1, transform: 'translateY(0)' },
+            { opacity: 0, transform: 'translateY(-12px)' },
+          ],
+          { duration: 180, fill: 'forwards', easing: 'ease-in' }
+        )
+        await morph.finished
+        title.textContent = stage.abbr
+        title.style.color = stage.color
+        title.animate(
+          [
+            { opacity: 0, transform: 'translateY(12px)' },
+            { opacity: 1, transform: 'translateY(0)' },
+          ],
+          { duration: 220, fill: 'forwards', easing: 'cubic-bezier(0.22,1,0.36,1)' }
+        )
+        const subMorph = subtitle.animate(
+          [{ opacity: 1 }, { opacity: 0 }],
+          { duration: 180, fill: 'forwards' }
+        )
+        await subMorph.finished
+        subtitle.textContent = stage.name
+        subtitle.animate(
+          [{ opacity: 0 }, { opacity: 1 }],
+          { duration: 220, fill: 'forwards' }
+        )
+      }
+
+      // Light up progress segments one by one (staggered)
+      const seg = segments[i]
+      setTimeout(() => {
+        seg.style.background = stage.color
+        seg.animate(
+          [{ transform: 'scaleY(1)' }, { transform: 'scaleY(2.4)' }, { transform: 'scaleY(1)' }],
+          { duration: 360, easing: 'cubic-bezier(0.34,1.56,0.64,1)' }
+        )
+      }, 100)
+
+      // Subtext rotation: show the commentary below
+      const commentary = document.createElement('div')
+      commentary.textContent = stage.sub
+      commentary.style.cssText = `
+        margin-top: 14px; font-size: 13px; line-height: 1.55;
+        font-family: "Newsreader Variable", ui-serif, Georgia, serif;
+        font-style: italic;
+        color: var(--color-text-2, #52525b);
+        opacity: 0;
+      `
+      card.appendChild(commentary)
+      commentary.animate(
+        [{ opacity: 0, transform: 'translateY(6px)' }, { opacity: 1, transform: 'translateY(0)' }],
+        { duration: 320, delay: 200, fill: 'forwards' }
+      )
+
+      await fx.sleep(900)
+      if (i < stages.length - 1) {
+        const cFade = commentary.animate(
+          [{ opacity: 1 }, { opacity: 0 }],
+          { duration: 200, fill: 'forwards' }
+        )
+        await cFade.finished
+        commentary.remove()
+      }
+    }
+
+    // Final celebration
+    await fx.sleep(300)
+    const cardRect = card.getBoundingClientRect()
+    fx.confetti({
+      originX: cardRect.left + cardRect.width / 2,
+      originY: cardRect.top + cardRect.height / 2,
+      spread: Math.PI * 1.4,
+      count: 140,
+    })
+    fx.shake(card, 4)
+    await fx.sleep(2400)
+
+    await Promise.all([fx.fadeOut(card), fx.fadeOut(dim)])
+    fx.clearOverlay(200)
+  },
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * 2. Click logo 7× → Logo decomposes into labelled PubID components
+ * ───────────────────────────────────────────────────────────────── */
+const LOGO_DECOMPOSE: Egg = {
+  id: 'logo-decompose',
+  name: 'Logo Decomposition',
+  description:
+    'The wordmark breaks apart into its semantic components: PUBLISHER, TYPE, NUMBER, YEAR.',
+  category: 'click',
+  trigger: 'Click the logo × 7',
+  async activate(ctx) {
+    ctx.log('Decomposing PubID…')
+    const logo = document.querySelector<HTMLAnchorElement>('header a[href="/"]')
+    if (!logo) return
+
+    const rect = logo.getBoundingClientRect()
+
+    // Pull the logo to a centre-stage position
+    const clone = logo.cloneNode(true) as HTMLElement
+    clone.style.cssText = `
+      position: fixed; top: 50%; left: 50%;
+      transform: translate(-50%, -50%) scale(2.6);
+      pointer-events: none; z-index: 10000;
+      transition: none;
+    `
+    fx.overlay().appendChild(clone)
+    clone.animate(
+      [
+        {
+          left: `${rect.left + rect.width / 2}px`,
+          top: `${rect.top + rect.height / 2}px`,
+          transform: 'translate(-50%, -50%) scale(1)',
+        },
+        { transform: 'translate(-50%, -50%) scale(2.6)' },
+      ],
+      { duration: 480, easing: 'cubic-bezier(0.22,1,0.36,1)', fill: 'forwards' }
+    )
+
+    const dim = fx.dimPage({ opacity: 0.4, blur: '4px' })
+
+    await fx.sleep(420)
+
+    // Annotate with callouts
+    const callouts = [
+      { label: 'Publisher', desc: 'The issuing body.', dx: -240, dy: -90, color: ACCENT },
+      { label: 'Type', desc: 'Optional document class.', dx: 0, dy: -150, color: '#34d399' },
+      { label: 'Number', desc: 'Zero-padded canonical ID.', dx: 240, dy: -60, color: '#f87171' },
+      { label: 'Year', desc: 'Publication or revision.', dx: -180, dy: 150, color: '#fbbf24' },
+      { label: 'Supplement', desc: 'Amd / Cor nesting.', dx: 220, dy: 140, color: '#2dd4bf' },
+    ]
+
+    const lines: SVGLineElement[] = []
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    svg.setAttribute('style', 'position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999;')
+    svg.setAttribute('width', String(window.innerWidth))
+    svg.setAttribute('height', String(window.innerHeight))
+    fx.overlay().appendChild(svg)
+
+    const wx = window.innerWidth / 2
+    const wy = window.innerHeight / 2
+
+    callouts.forEach((c, i) => {
+      const tx = wx + c.dx
+      const ty = wy + c.dy
+
+      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+      line.setAttribute('x1', String(wx))
+      line.setAttribute('y1', String(wy))
+      line.setAttribute('x2', String(tx))
+      line.setAttribute('y2', String(ty))
+      line.setAttribute('stroke', c.color)
+      line.setAttribute('stroke-width', '1.5')
+      line.setAttribute('stroke-dasharray', '4 4')
+      line.setAttribute('opacity', '0')
+      svg.appendChild(line)
+      line.animate([{ opacity: 0 }, { opacity: 0.6 }], {
+        duration: 200,
+        delay: i * 90,
+        fill: 'forwards',
+      })
+      lines.push(line)
+
+      const chip = document.createElement('div')
+      chip.style.cssText = `
+        position: fixed; left: ${tx}px; top: ${ty}px;
+        transform: translate(-50%, -50%) scale(0.6);
+        background: var(--color-bg, #fff);
+        color: var(--color-text, #09090b);
+        border: 1px solid ${c.color};
+        border-radius: 10px;
+        padding: 8px 14px;
+        box-shadow: 0 8px 24px rgba(0,0,0,0.18);
+        font-family: ui-sans-serif, system-ui, sans-serif;
+        opacity: 0;
+        white-space: nowrap;
+      `
+      chip.innerHTML = `
+        <div style="font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:${c.color};">${c.label}</div>
+        <div style="font-size:12px;color:var(--color-text-2,#52525b);margin-top:2px;">${c.desc}</div>
+      `
+      fx.overlay().appendChild(chip)
+      chip.animate(
+        [
+          { opacity: 0, transform: 'translate(-50%, -50%) scale(0.6)' },
+          { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
+        ],
+        {
+          duration: 360,
+          delay: i * 90,
+          easing: 'cubic-bezier(0.34,1.56,0.64,1)',
+          fill: 'forwards',
+        }
+      )
+    })
+
+    await fx.sleep(3800)
+
+    await Promise.all([fx.fadeOut(clone), fx.fadeOut(dim), fx.fadeOut(svg)])
+    Array.from(fx.overlay().querySelectorAll(':scope > div')).forEach(el =>
+      fx.fadeOut(el, 200)
+    )
+    fx.clearOverlay(200)
+  },
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * 3. Type "ISO 9001" → Quality Certified stamp
+ * ───────────────────────────────────────────────────────────────── */
+const ISO_9001_STAMP: Egg = {
+  id: 'iso9001',
+  name: 'Quality Certified',
+  description:
+    'The ISO 9001:2015 quality stamp drops onto the page with a satisfying thud.',
+  category: 'keystroke',
+  trigger: 'Type "ISO 9001"',
+  async activate(ctx) {
+    ctx.log('Quality Management System: certified.')
+    const stamp = document.createElement('div')
+    stamp.style.cssText = `
+      position: fixed; top: 50%; left: 50%;
+      transform: translate(-50%, -50%) scale(1);
+      width: 220px; height: 220px;
+      display: grid; place-items: center;
+      pointer-events: none;
+      z-index: 10000;
+    `
+    stamp.innerHTML = `
+      <svg viewBox="0 0 200 200" width="220" height="220" style="overflow:visible;">
+        <defs>
+          <path id="pubid-curve-top" d="M 30 100 A 70 70 0 0 1 170 100" fill="none"/>
+          <path id="pubid-curve-bottom" d="M 30 100 A 70 70 0 0 0 170 100" fill="none"/>
+        </defs>
+        <circle cx="100" cy="100" r="92" fill="none" stroke="${ACCENT}" stroke-width="3" opacity="0.85"/>
+        <circle cx="100" cy="100" r="80" fill="none" stroke="${ACCENT}" stroke-width="1.5" opacity="0.6"/>
+        <text font-family="ui-monospace,Menlo,monospace" font-size="13" font-weight="700" fill="${ACCENT}" letter-spacing="3">
+          <textPath href="#pubid-curve-top" startOffset="50%" text-anchor="middle">ISO 9001:2015</textPath>
+        </text>
+        <text x="100" y="95" text-anchor="middle" font-family="Fraunces,Georgia,serif" font-size="30" font-weight="700" fill="${ACCENT}">CERTIFIED</text>
+        <text x="100" y="120" text-anchor="middle" font-family="ui-monospace,Menlo,monospace" font-size="9" fill="${ACCENT}" letter-spacing="2" opacity="0.85">QUALITY MGMT</text>
+        <text font-family="ui-monospace,Menlo,monospace" font-size="10" font-weight="500" fill="${ACCENT}" letter-spacing="2" opacity="0.85">
+          <textPath href="#pubid-curve-bottom" startOffset="50%" text-anchor="middle">★ PUBID VERIFIED ★</textPath>
+        </text>
+      </svg>
+    `
+    fx.overlay().appendChild(stamp)
+    fx.stampDrop(stamp, { duration: 540 })
+    await fx.sleep(80)
+    fx.shake(document.body, 4)
+    await fx.sleep(2800)
+    await fx.fadeOut(stamp)
+  },
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * 4. Type "RFC 1149" → Carrier pigeon (IP over Avian Carrier)
+ * ───────────────────────────────────────────────────────────────── */
+const RFC_1149_PIGEON: Egg = {
+  id: 'rfc1149',
+  name: 'IP over Avian Carrier',
+  description:
+    'A pigeon delivers a datagram across the page. (RFC 1149 is real.)',
+  category: 'keystroke',
+  trigger: 'Type "RFC 1149"',
+  async activate(ctx) {
+    ctx.log('Datagram queued. Avian carrier dispatched.')
+    const pigeon = document.createElement('div')
+    pigeon.style.cssText = `
+      position: fixed; top: 30%; left: -80px;
+      width: 56px; height: 40px; pointer-events: none; z-index: 10000;
+    `
+    pigeon.innerHTML = `
+      <svg viewBox="0 0 64 48" width="56" height="40">
+        <g fill="${ACCENT_2}" stroke="#1f3a4a" stroke-width="0.6">
+          <ellipse cx="34" cy="26" rx="16" ry="8"/>
+          <circle cx="50" cy="20" r="6"/>
+          <polygon points="56,18 64,20 56,22"/>
+          <path d="M 22 22 Q 8 12 4 22 Q 12 22 22 28 Z" fill="${WARM}"/>
+          <path d="M 22 30 Q 10 36 6 30 Q 14 28 22 28 Z" fill="${WARM}"/>
+        </g>
+        <circle cx="52" cy="19" r="1" fill="#0b0d12"/>
+      </svg>
+    `
+    fx.overlay().appendChild(pigeon)
+
+    const startX = -80
+    const endX = window.innerWidth + 80
+    const flightY = window.innerHeight * 0.3
+    const amplitude = 40
+
+    // Compose: position via Web Animations, flap via CSS keyframes on inner.
+    const flapSvg = pigeon.querySelector('svg')!
+    flapSvg.animate(
+      [
+        { transform: 'rotate(0deg)' },
+        { transform: 'rotate(-30deg)' },
+        { transform: 'rotate(0deg)' },
+        { transform: 'rotate(-30deg)' },
+        { transform: 'rotate(0deg)' },
+      ],
+      { duration: 360, iterations: Infinity, easing: 'ease-in-out' }
+    )
+
+    const flight = pigeon.animate(
+      [
+        { left: `${startX}px`, top: `${flightY}px` },
+        { left: `${endX}px`, top: `${flightY}px` },
+      ],
+      { duration: 4400, easing: 'linear', fill: 'forwards' }
+    )
+    // Overlay sinusoidal vertical motion using composite:'add'
+    pigeon.animate(
+      [
+        { transform: 'translateY(0px)' },
+        { transform: `translateY(-${amplitude}px)` },
+        { transform: 'translateY(0px)' },
+        { transform: `translateY(-${amplitude}px)` },
+        { transform: 'translateY(0px)' },
+        { transform: `translateY(-${amplitude}px)` },
+        { transform: 'translateY(0px)' },
+      ],
+      {
+        duration: 4400,
+        easing: 'ease-in-out',
+        composite: 'add',
+        fill: 'forwards',
+      }
+    )
+
+    await fx.sleep(2400)
+
+    // Drop a packet mid-flight
+    const pigeonRect = pigeon.getBoundingClientRect()
+    const packet = document.createElement('div')
+    packet.style.cssText = `
+      position: fixed; left: ${pigeonRect.left + 20}px; top: ${pigeonRect.top + 20}px;
+      width: 24px; height: 18px; background: ${WARM};
+      border: 1px solid #1f3a4a; border-radius: 2px;
+      pointer-events: none; z-index: 9999;
+      font-family: ui-monospace, Menlo, monospace;
+      font-size: 7px; color: #1f3a4a;
+      display: grid; place-items: center;
+    `
+    packet.textContent = 'PKT'
+    fx.overlay().appendChild(packet)
+    packet.animate(
+      [
+        { transform: 'translateY(0) rotate(0)', opacity: 1 },
+        {
+          transform: `translateY(${window.innerHeight - pigeonRect.top - 30}px) rotate(360deg)`,
+          opacity: 1,
+          offset: 0.85,
+        },
+        {
+          transform: `translateY(${window.innerHeight - pigeonRect.top - 20}px) rotate(380deg)`,
+          opacity: 0,
+        },
+      ],
+      { duration: 1800, easing: 'cubic-bezier(0.4,0,1,1)', fill: 'forwards' }
+    )
+
+    await flight.finished
+    pigeon.remove()
+    await fx.sleep(700)
+    fx.toast('Datagram delivered ✓', { color: ACCENT_2 })
+    await fx.sleep(600)
+    packet.remove()
+  },
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * 5. Type "802.11" → WiFi pulses radiate from the logo
+ * ───────────────────────────────────────────────────────────────── */
+const WIFI_802_11: Egg = {
+  id: 'wifi',
+  name: '802.11 Beacon',
+  description: 'Concentric 802.11 beacons radiate from the wordmark.',
+  category: 'keystroke',
+  trigger: 'Type "802.11"',
+  async activate(ctx) {
+    ctx.log('Beacon frame transmitted.')
+    const logo = document.querySelector<HTMLAnchorElement>('header a[href="/"] img')
+    const target = logo || document.querySelector('header')
+    if (!target) return
+    const r = target.getBoundingClientRect()
+    const cx = r.left + r.width / 2
+    const cy = r.top + r.height / 2
+
+    const center = document.createElement('div')
+    center.style.cssText = `
+      position: fixed; left: ${cx}px; top: ${cy}px;
+      pointer-events: none; z-index: 10000;
+    `
+    fx.overlay().appendChild(center)
+
+    const rings = 5
+    for (let i = 0; i < rings; i++) {
+      fx.pulseRing(center, {
+        x: 0,
+        y: 0,
+        color: ACCENT_2,
+        delay: i * 260,
+        duration: 1500,
+        maxScale: 8,
+      })
+    }
+
+    // Tiny "RSSI: -42 dBm" toast
+    fx.toast('SSID: PubID-Net · RSSI: -42 dBm', { color: ACCENT_2, duration: 2200 })
+    await fx.sleep(2200)
+    center.remove()
+  },
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * 6. Type "urn" → Identifier chips morph to URN form on the page
+ * ───────────────────────────────────────────────────────────────── */
+const URN_MORPH: Egg = {
+  id: 'urn-morph',
+  name: 'URN Reveal',
+  description:
+    'Every identifier on the page sprouts a chip showing its URN canonical form.',
+  category: 'keystroke',
+  trigger: 'Type "urn"',
+  async activate(ctx) {
+    ctx.log('Rendering URN form…')
+
+    type Match = { el: HTMLElement; rect: DOMRect; urn: string }
+    const matches: Match[] = []
+    const IDENTIFIER_RE =
+      /\b((ISO|IEC|IEEE|NIST|IETF|W3C|OASIS|ITU|BSI|ANSI|CC|XSF)(?:[/\s][A-Z]+)*[\s/-]?(\d{1,6}(?:[.-]\d+)*))(?::(\d{4}))?/g
+
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
+      acceptNode(node) {
+        const p = node.parentElement
+        if (!p) return NodeFilter.FILTER_REJECT
+        const tag = p.tagName
+        if (tag === 'SCRIPT' || tag === 'STYLE' || tag === 'NOSCRIPT') {
+          return NodeFilter.FILTER_REJECT
+        }
+        return IDENTIFIER_RE.test(node.textContent || '')
+          ? NodeFilter.FILTER_ACCEPT
+          : NodeFilter.FILTER_REJECT
+      },
+    })
+
+    const seenText = new Set<string>()
+    while (walker.nextNode()) {
+      const textNode = walker.currentNode as Text
+      const text = textNode.textContent || ''
+      if (seenText.has(text)) continue
+      seenText.add(text)
+
+      const parent = textNode.parentElement
+      if (!parent) continue
+      const rect = parent.getBoundingClientRect()
+      if (rect.width === 0 || rect.height === 0) continue
+
+      IDENTIFIER_RE.lastIndex = 0
+      const m = IDENTIFIER_RE.exec(text)
+      if (!m) continue
+      const [, full, publisher, number, year] = m
+      const urn = `urn:${publisher.toLowerCase()}:std:${publisher.toLowerCase()}${year ? `:${year}` : ''}:${number.replace(/[/-]/g, '-')}`
+      matches.push({ el: parent, rect, urn })
+      if (matches.length >= 12) break
+    }
+
+    if (matches.length === 0) {
+      fx.toast('No identifiers found on this page.', { color: WARM })
+      return
+    }
+
+    matches.forEach((m, i) => {
+      if (i >= 12) return
+      const chip = document.createElement('div')
+      chip.textContent = m.urn
+      chip.style.cssText = `
+        position: fixed; left: ${m.rect.left}px; top: ${m.rect.bottom + 6}px;
+        background: var(--color-bg, #fff);
+        color: var(--color-accent, ${ACCENT});
+        border: 1px solid var(--color-border, #e4e4e7);
+        border-radius: 4px;
+        padding: 2px 7px;
+        font-family: ui-monospace, "SF Mono", Menlo, monospace;
+        font-size: 11px; font-weight: 500;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+        max-width: 90vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+        pointer-events: none; z-index: 10000;
+        opacity: 0;
+      `
+      fx.overlay().appendChild(chip)
+      chip.animate(
+        [
+          { opacity: 0, transform: 'translateY(-4px) scale(0.96)' },
+          { opacity: 1, transform: 'translateY(0) scale(1)' },
+        ],
+        {
+          duration: 280,
+          delay: i * 70,
+          easing: 'cubic-bezier(0.22,1,0.36,1)',
+          fill: 'forwards',
+        }
+      )
+    })
+
+    fx.toast(`${matches.length} identifier${matches.length === 1 ? '' : 's'} canonicalized`, {
+      color: ACCENT,
+    })
+    await fx.sleep(4200)
+    fx.clearOverlay(200)
+  },
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * 7. Type "errata" → Redline strikethroughs on random words
+ * ───────────────────────────────────────────────────────────────── */
+const ERRATA: Egg = {
+  id: 'errata',
+  name: 'Errata',
+  description:
+    'Random words get redline strikethroughs, as if a committee marked them up.',
+  category: 'keystroke',
+  trigger: 'Type "errata"',
+  async activate(ctx) {
+    ctx.log('Applying editorial errata…')
+    const paragraphs = Array.from(
+      document.querySelectorAll<HTMLElement>('main p, main li, article p, article li')
+    ).filter(p => {
+      const t = p.textContent || ''
+      return t.split(/\s+/).length >= 6
+    })
+
+    if (paragraphs.length === 0) {
+      fx.toast('No paragraph content to mark up.', { color: WARM })
+      return
+    }
+
+    const REPLACEMENTS: Record<string, string> = {
+      the: 'le',
+      a: 'one',
+      an: 'one',
+      publication: 'document',
+      identifier: 'designator',
+      standard: 'specification',
+      standards: 'specifications',
+      publisher: 'issuer',
+      publishers: 'issuers',
+      document: 'artifact',
+      documents: 'artifacts',
+      universal: 'generalised',
+      component: 'element',
+      components: 'elements',
+      version: 'revision',
+      revision: 'edition',
+      international: 'global',
+      extension: 'supplement',
+      extensions: 'supplements',
+      schema: 'model',
+      schemas: 'models',
+      machine: 'automated',
+      human: 'natural-language',
+      machine_readable: 'structured',
+      canonical: 'normative',
+      registry: 'catalogue',
+      is: 'be',
+      are: 'be',
+      was: 'were',
+      metadata: 'annotations',
+      type: 'classifier',
+      types: 'classifiers',
+      draft: 'proposal',
+      final: 'ratified',
+      data: 'datum',
+      information: 'info',
+      library: 'collection',
+      framework: 'scaffold',
+      api: 'interface',
+      web: 'network',
+      software: 'code',
+      protocol: 'convention',
+      protocols: 'conventions',
+      module: 'component',
+      package: 'bundle',
+      format: 'encoding',
+      formats: 'encodings',
+    }
+
+    type Patch = { host: HTMLElement; originalSpan: HTMLElement; replaceSpan?: HTMLElement }
+    const patches: Patch[] = []
+    const sample = paragraphs.length <= 8 ? paragraphs : shuffle(paragraphs).slice(0, 8)
+
+    sample.forEach(p => {
+      const words = (p.textContent || '').split(/(\s+)/)
+      const dictCandidates = words
+        .map((w, i) => ({ w, i }))
+        .filter(({ w }) => /^[\w'-]{3,}$/.test(w) && REPLACEMENTS[w.toLowerCase()])
+
+      let pickIdx = -1
+      let replacement: string | undefined
+      if (dictCandidates.length > 0) {
+        const pick = dictCandidates[Math.floor(Math.random() * dictCandidates.length)]
+        pickIdx = pick.i
+        replacement = REPLACEMENTS[pick.w.toLowerCase()]
+      } else {
+        const any = words
+          .map((w, i) => ({ w, i }))
+          .filter(({ w }) => /^[\w'-]{4,}$/.test(w))
+        if (any.length === 0) return
+        const pick = any[Math.floor(Math.random() * any.length)]
+        pickIdx = pick.i
+      }
+
+      p.innerHTML = ''
+      let originalSpan: HTMLElement | undefined
+      let replaceSpan: HTMLElement | undefined
+      words.forEach((w, i) => {
+        if (i === pickIdx) {
+          const s1 = document.createElement('span')
+          s1.textContent = w
+          s1.style.cssText = `
+            text-decoration: line-through;
+            text-decoration-color: rgba(220,38,38,0);
+            text-decoration-thickness: 2px;
+            color: var(--color-text-3, #a1a1aa);
+          `
+          originalSpan = s1
+          p.appendChild(s1)
+          if (replacement) {
+            const s2 = document.createElement('span')
+            s2.textContent = ` ${replacement}`
+            s2.style.cssText = `
+              color: var(--color-accent, ${ACCENT});
+              font-style: italic;
+              opacity: 0;
+            `
+            replaceSpan = s2
+            p.appendChild(s2)
+          }
+        } else {
+          p.appendChild(document.createTextNode(w))
+        }
+      })
+      if (originalSpan) {
+        patches.push({ host: p, originalSpan, replaceSpan })
+      }
+    })
+
+    if (patches.length === 0) {
+      fx.toast('No errata-worthy words found here.', { color: WARM })
+      return
+    }
+
+    patches.forEach((patch, i) => {
+      patch.originalSpan.animate(
+        [
+          { textDecorationColor: 'rgba(220,38,38,0)' },
+          { textDecorationColor: 'rgba(220,38,38,1)' },
+        ],
+        { duration: 320, delay: i * 90, fill: 'forwards', easing: 'ease-out' }
+      )
+      patch.replaceSpan?.animate(
+        [{ opacity: 0 }, { opacity: 1 }],
+        { duration: 280, delay: i * 90 + 180, fill: 'forwards' }
+      )
+    })
+
+    fx.toast(`Errata applied · ${patches.length} change${patches.length === 1 ? '' : 's'}`, {
+      color: '#dc2626',
+    })
+
+    await fx.sleep(6200)
+
+    // Revert: restore original text content
+    patches.forEach(patch => {
+      const parent = patch.originalSpan.parentNode
+      if (!parent) return
+      // The host paragraph's original textContent was overwritten when we
+      // rewrote innerHTML. We saved nothing, so on revert we just remove
+      // decorations in place (the original word is still the span text).
+      parent.normalize()
+    })
+
+    // Cleaner revert: re-render the paragraph from its current text
+    patches.forEach(patch => {
+      const p = patch.host
+      const text = p.textContent || ''
+      // Remove the inserted replacement spans (they have leading space + word)
+      // by selecting the underlined-strike span text + the italic replacement.
+      // Simpler: just clear decorations.
+      const spans = Array.from(p.querySelectorAll('span'))
+      spans.forEach(s => {
+        s.style.textDecoration = 'none'
+        s.style.color = ''
+        s.style.fontStyle = ''
+        s.style.opacity = '1'
+      })
+    })
+
+    fx.toast('Errata reverted.', { color: ACCENT_2 })
+  },
+}
+
+function shuffle<T>(arr: T[]): T[] {
+  const a = arr.slice()
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1))
+    ;[a[i], a[j]] = [a[j], a[i]]
+  }
+  return a
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * 8. World Standards Day (Oct 14) — auto badge + celebration
+ * ───────────────────────────────────────────────────────────────── */
+const WORLD_STANDARDS_DAY: Egg = {
+  id: 'world-standards-day',
+  name: 'World Standards Day',
+  description:
+    'On October 14 every year, a small badge appears in the header to celebrate World Standards Day.',
+  category: 'temporal',
+  trigger: 'Visit on October 14',
+  activate(ctx) {
+    const header = document.querySelector('header')
+    if (!header || document.getElementById('wsd-badge')) return
+    const badge = document.createElement('a')
+    badge.id = 'wsd-badge'
+    badge.href = 'https://www.iso.org/world-standards-day.html'
+    badge.target = '_blank'
+    badge.rel = 'noopener'
+    badge.textContent = '★ World Standards Day'
+    badge.style.cssText = `
+      display: inline-flex; align-items: center;
+      padding: 4px 10px; margin-left: 8px;
+      font-family: ui-monospace, Menlo, monospace;
+      font-size: 11px; font-weight: 600;
+      letter-spacing: 0.04em;
+      color: ${WARM};
+      background: color-mix(in srgb, ${WARM} 12%, transparent);
+      border: 1px solid color-mix(in srgb, ${WARM} 40%, transparent);
+      border-radius: 999px;
+      text-decoration: none;
+      cursor: pointer;
+      opacity: 0;
+    `
+    const nav = header.querySelector('nav') || header
+    nav.appendChild(badge)
+    badge.animate(
+      [{ opacity: 0, transform: 'scale(0.85)' }, { opacity: 1, transform: 'scale(1)' }],
+      { duration: 480, easing: 'cubic-bezier(0.34,1.56,0.64,1)', fill: 'forwards', delay: 800 }
+    )
+
+    // Confetti burst on first paint of the day
+    fx.confetti({
+      originX: window.innerWidth - 80,
+      originY: 80,
+      spread: Math.PI,
+      count: 60,
+    })
+
+    ctx.log('Happy World Standards Day! (Oct 14)')
+  },
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * 9. Console-only eggs
+ * ───────────────────────────────────────────────────────────────── */
+const SPIN: Egg = {
+  id: 'spin',
+  name: 'Spin',
+  description: 'Spin the logo once. Programmatic only.',
+  category: 'console',
+  trigger: 'pubid.spin()',
+  activate() {
+    const logo = document.querySelector('header img')
+    if (logo) fx.spin(logo, 800)
+  },
+}
+
+const SHAKE: Egg = {
+  id: 'shake',
+  name: 'Shake',
+  description: 'Shake the page. Programmatic only.',
+  category: 'console',
+  trigger: 'pubid.shake()',
+  activate() {
+    fx.shake(document.body, 10)
+  },
+}
+
+const CONFETTI: Egg = {
+  id: 'confetti',
+  name: 'Confetti',
+  description: 'Burst confetti from the centre of the viewport.',
+  category: 'console',
+  trigger: 'pubid.confetti()',
+  activate() {
+    fx.confetti({ count: 120 })
+  },
+}
+
+export const EGGS: Egg[] = [
+  STANDARDS_LIFECYCLE,
+  LOGO_DECOMPOSE,
+  ISO_9001_STAMP,
+  RFC_1149_PIGEON,
+  WIFI_802_11,
+  URN_MORPH,
+  ERRATA,
+  WORLD_STANDARDS_DAY,
+  SPIN,
+  SHAKE,
+  CONFETTI,
+]
+
+export const EGGS_BY_ID = new Map(EGGS.map(e => [e.id, e]))
diff --git a/src/scripts/easter-eggs/index.ts b/src/scripts/easter-eggs/index.ts
new file mode 100644
index 0000000..df9d280
--- /dev/null
+++ b/src/scripts/easter-eggs/index.ts
@@ -0,0 +1,299 @@
+/**
+ * PubID Easter Eggs — entry point.
+ *
+ * Wires up keyboard, click, and temporal triggers; exposes the
+ * `window.pubid` console API; and aliases `window.help` so typing
+ * `help` in the console prints the easter-egg directory.
+ *
+ * Importing this module has the side effect of initialising everything,
+ * so a plain `<script>import '~/scripts/easter-eggs'</script>` in the
+ * base layout is enough.
+ */
+
+import * as fx from './effects'
+import { EGGS, EGGS_BY_ID, type Egg, type EggContext } from './eggs'
+
+const ACCENT = '#2978a1'
+
+let _initialised = false
+let _busymax = false
+
+function log(msg: string) {
+  // eslint-disable-next-line no-console
+  console.log(`%c[pubid] %c${msg}`, `color:${ACCENT};font-weight:600`, 'color:inherit')
+}
+
+const ctx: EggContext = {
+  fire: (id: string) => {
+    const egg = EGGS_BY_ID.get(id)
+    if (!egg) {
+      log(`unknown egg: ${id}`)
+      return
+    }
+    if (_busymax) {
+      log('another egg is running — wait a beat.')
+      return
+    }
+    _busymax = true
+    Promise.resolve(egg.activate(ctx)).finally(() => {
+      setTimeout(() => {
+        _busymax = false
+      }, 400)
+    })
+  },
+  log,
+}
+
+/* ─── Keyboard: typing sequences ─────────────────────────────── */
+const TYPING_PATTERNS: Array<{ pattern: string; egg: string }> = [
+  { pattern: 'ISO 9001', egg: 'iso9001' },
+  { pattern: 'RFC 1149', egg: 'rfc1149' },
+  { pattern: '802.11', egg: 'wifi' },
+  { pattern: 'URN', egg: 'urn-morph' },
+  { pattern: 'ERRATA', egg: 'errata' },
+]
+
+let _typingBuffer = ''
+let _typingTimer: number | undefined
+
+function pushKey(key: string) {
+  _typingBuffer = (_typingBuffer + key).slice(-40)
+  if (_typingTimer) window.clearTimeout(_typingTimer)
+  _typingTimer = window.setTimeout(() => {
+    _typingBuffer = ''
+  }, 1800)
+  const upper = _typingBuffer.toUpperCase()
+  for (const { pattern, egg } of TYPING_PATTERNS) {
+    if (upper.endsWith(pattern.toUpperCase())) {
+      _typingBuffer = ''
+      ctx.fire(egg)
+      return
+    }
+  }
+}
+
+/* ─── Konami code ────────────────────────────────────────────── */
+const KONAMI = [
+  'ArrowUp',
+  'ArrowUp',
+  'ArrowDown',
+  'ArrowDown',
+  'ArrowLeft',
+  'ArrowRight',
+  'ArrowLeft',
+  'ArrowRight',
+  'b',
+  'a',
+]
+
+let _konamiPos = 0
+
+function handleKonami(key: string) {
+  const expected = KONAMI[_konamiPos]
+  const k = key.length === 1 ? key.toLowerCase() : key
+  if (k === expected || k === expected.toLowerCase()) {
+    _konamiPos++
+    if (_konamiPos === KONAMI.length) {
+      _konamiPos = 0
+      ctx.fire('lifecycle')
+    }
+  } else {
+    _konamiPos = k === KONAMI[0].toLowerCase() ? 1 : 0
+  }
+}
+
+/* ─── Click detector on the header wordmark ──────────────────── */
+let _logoClicks = 0
+let _logoClickTimer: number | undefined
+
+function bindLogoClicks() {
+  const logo = document.querySelector<HTMLAnchorElement>('header a[href="/"]')
+  if (!logo || logo.dataset.eggBound === '1') return
+  logo.dataset.eggBound = '1'
+  logo.addEventListener('click', e => {
+    _logoClicks++
+    if (_logoClickTimer) window.clearTimeout(_logoClickTimer)
+    _logoClickTimer = window.setTimeout(() => {
+      _logoClicks = 0
+    }, 3000)
+    if (_logoClicks === 7) {
+      e.preventDefault()
+      _logoClicks = 0
+      ctx.fire('logo-decompose')
+    } else if (_logoClicks >= 4) {
+      // Tiny teaser so people notice something is up
+      const hint = 7 - _logoClicks
+      fx.toast(`${hint} more…`, { duration: 700, color: ACCENT })
+    }
+  })
+}
+
+/* ─── Document-level keyboard listener ───────────────────────── */
+function bindKeyboard() {
+  if ((document as unknown as { _eggKb?: boolean })._eggKb) return
+  ;(document as unknown as { _eggKb?: boolean })._eggKb = true
+  document.addEventListener('keydown', e => {
+    if (e.defaultPrevented) return
+    const t = e.target as HTMLElement | null
+    if (
+      t &&
+      (t.tagName === 'INPUT' ||
+        t.tagName === 'TEXTAREA' ||
+        t.isContentEditable ||
+        t.tagName === 'SELECT')
+    ) {
+      return
+    }
+    handleKonami(e.key)
+    if (e.key.length === 1 && /[a-zA-Z0-9 ./-]/.test(e.key)) {
+      pushKey(e.key)
+    }
+  })
+}
+
+/* ─── Temporal eggs ──────────────────────────────────────────── */
+function bindTemporal() {
+  const now = new Date()
+  // World Standards Day — October 14
+  if (now.getMonth() === 9 && now.getDate() === 14) {
+    setTimeout(() => ctx.fire('world-standards-day'), 600)
+  }
+}
+
+/* ─── Console API ────────────────────────────────────────────── */
+interface PubidAPI {
+  help: () => void
+  list: () => Egg[]
+  fire: (id: string) => void
+  confetti: () => void
+  spin: () => void
+  shake: () => void
+  version: string
+}
+
+function printHelp() {
+  const header =
+    '%c╔════════════════════════════════════════════════════════════╗\n' +
+    '%c║  PubID Easter Eggs                                         ║\n' +
+    '%c╚════════════════════════════════════════════════════════════╝'
+  // eslint-disable-next-line no-console
+  console.log(
+    header,
+    `color:${ACCENT};font-weight:700`,
+    `color:${ACCENT};font-weight:700`,
+    `color:${ACCENT};font-weight:700`
+  )
+  // eslint-disable-next-line no-console
+  console.log(
+    '%cTry these — they are themed around publication identifiers, standards bodies, and the PubID data model.',
+    'color:#52525b;font-style:italic'
+  )
+
+  const groups: Record<string, Egg[]> = {
+    'Keyboard sequences': EGGS.filter(e => e.category === 'keystroke'),
+    'Konami code': EGGS.filter(e => e.category === 'konami'),
+    Interactions: EGGS.filter(e => e.category === 'click'),
+    Temporal: EGGS.filter(e => e.category === 'temporal'),
+    'Console API': EGGS.filter(e => e.category === 'console'),
+  }
+  for (const [group, items] of Object.entries(groups)) {
+    if (items.length === 0) continue
+    // eslint-disable-next-line no-console
+    console.log(`%c${group}`, `color:${ACCENT};font-weight:700;font-size:13px`)
+    for (const egg of items) {
+      // eslint-disable-next-line no-console
+      console.log(
+        `  %c${egg.trigger.padEnd(22)}%c  ${egg.name}\n` +
+          `%c${' '.repeat(24)}${egg.description}%c`,
+        'color:#0b0d12;font-family:ui-monospace,Menlo,monospace;font-weight:600',
+        'color:#52525b',
+        'color:#a1a1aa;font-size:11px',
+        'color:inherit'
+      )
+    }
+  }
+
+  // eslint-disable-next-line no-console
+  console.log(
+    '%c\nProgrammatic:',
+    `color:${ACCENT};font-weight:700;font-size:13px`
+  )
+  // eslint-disable-next-line no-console
+  console.log(
+    '  %cpubid.help()%c        This message\n' +
+      '  %cpubid.list()%c        All eggs as data\n' +
+      '  %cpubid.fire(id)%c      Trigger by id (e.g. pubid.fire(\'pigeon\'))\n' +
+      '  %cpubid.confetti()%c    Burst confetti\n' +
+      '  %cpubid.spin()%c        Spin the logo\n' +
+      '  %cpubid.shake()%c       Shake the page',
+    'color:#0b0d12;font-family:ui-monospace,Menlo,monospace',
+    'color:#52525b',
+    'color:#0b0d12;font-family:ui-monospace,Menlo,monospace',
+    'color:#52525b',
+    'color:#0b0d12;font-family:ui-monospace,Menlo,monospace',
+    'color:#52525b',
+    'color:#0b0d12;font-family:ui-monospace,Menlo,monospace',
+    'color:#52525b',
+    'color:#0b0d12;font-family:ui-monospace,Menlo,monospace',
+    'color:#52525b',
+    'color:#0b0d12;font-family:ui-monospace,Menlo,monospace',
+    'color:#52525b'
+  )
+
+  // eslint-disable-next-line no-console
+  console.log(
+    '%c\nReduced motion is respected — flashy eggs no-op when set.\nHave fun. ✨',
+    'color:#52525b;font-style:italic'
+  )
+}
+
+function installConsoleApi() {
+  const api: PubidAPI = {
+    help: printHelp,
+    list: () => EGGS.slice(),
+    fire: (id: string) => ctx.fire(id),
+    confetti: () => ctx.fire('confetti'),
+    spin: () => ctx.fire('spin'),
+    shake: () => ctx.fire('shake'),
+    version: '1.0.0',
+  }
+  Object.defineProperty(window, 'pubid', {
+    value: api,
+    writable: false,
+    configurable: true,
+  })
+  // Alias `help` so typing `help` in console opens the directory.
+  // We only define it if no page-script helper already exists.
+  if (!(window as unknown as { help?: unknown }).help) {
+    Object.defineProperty(window, 'help', {
+      value: printHelp,
+      writable: false,
+      configurable: true,
+    })
+  }
+}
+
+/* ─── Init ───────────────────────────────────────────────────── */
+export function init() {
+  if (_initialised) return
+  if (typeof window === 'undefined') return
+  _initialised = true
+
+  bindKeyboard()
+  bindLogoClicks()
+  bindTemporal()
+  installConsoleApi()
+
+  log('easter eggs ready — type help or pubid.help() in the console.')
+}
+
+// Auto-init on import (browser only)
+if (typeof window !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init, { once: true })
+  } else {
+    init()
+  }
+}
+
+export default init

From 6b29d5a6cb19fc98346713e1e2d53b3bfba41127 Mon Sep 17 00:00:00 2001
From: Ronald Tse <ronald.tse@ribose.com>
Date: Thu, 23 Jul 2026 02:53:56 +0800
Subject: [PATCH 2/4] =?UTF-8?q?feat(easter-eggs):=2016=20more=20eggs=20?=
 =?UTF-8?q?=E2=80=94=20interactive,=20audio,=20temporal,=20console?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Volume 2 of the easter-egg system. Adds 16 eggs and 6 console API
methods, bringing the total to 27. Each is themed around publication
identifiers, standards bodies, or the PubID data model.

New keyboard-triggered eggs:
- "ISO 8601"  → dates on the page flip into strict ISO 8601 form
                (YYYY-MM-DDTHH:mm:ss.sssZ) via rotateX card-flip
- "IEEE 754"  → floating-point reality: numbers glitch into NaN,
                Infinity, -0, 0.30000000000000004, 5e-324
- "RFC 2324"  → HTCPCP teapot tips forward and pours tea, with
                synthesised pour sound and rising steam
- "ISBN"      → barcode scanner line sweeps the viewport with
                synthesised beeps; generates a real ISBN-13 with
                valid modulo-10 checksum
- "DOI"       → resolution chain animation:
                DOI → doi.org → handle → URL → content ✓
- "ISO 27001" → ISMS lockdown: green frame inset, padlock badge in
                header, every link briefly glows green
- "W3C"       → validator sweep: scan line top-to-bottom, every
                element gets a green ✓ as the line passes, ending
                with a "VALID PubID 1.0" stamp

New interaction eggs:
- Mouse trail (toggle) — pubid.trail() leaves identifier fragments
  that follow the cursor and fade out
- Idle fragments — after 45s of no input, identifier fragments drift
  upward from the bottom of the page
- Tea time — at 15:30–17:00 local, a ☕ badge appears in the header;
  clicking it fires the HTCPCP teapot egg

New console API:
- pubid.joke()   — random standards-themed joke
- pubid.fact()   — random PubID / standards-world fact
- pubid.ascii()  — ASCII-art wordmark in the console
- pubid.cow(msg) — cowsay with optional message
- pubid.parse(id) — parse an identifier into components and URN
- pubid.uuid()   — generate a UUID

New WAAPI primitives in effects.ts:
- beep()           — Web Audio synth (sine/square/triangle, no files)
- scanLine()       — directional sweep with optional progress callback
- ripple()         — single expanding ring
- flipText()       — rotateX midpoint-swap text morph
- floatingFragment() — drift a fragment upward with horizontal noise
- lockdownFrame()  — animated inset box-shadow
- glow()           — momentary border glow on any element

Architecture:
- New file src/scripts/easter-eggs/eggs-extra.ts holds the v2 eggs and
  shared helpers (cowsay, parseIdentifier, ascii art, jokes, facts).
- index.ts merges EGGS + EGGS_EXTRA into ALL_EGGS, extends the typing
  pattern table, wires idle/trail/tea-time handlers, and exposes the
  new console methods.
---
 src/scripts/easter-eggs/effects.ts    |  312 ++++++++
 src/scripts/easter-eggs/eggs-extra.ts | 1024 +++++++++++++++++++++++++
 src/scripts/easter-eggs/index.ts      |  148 ++--
 3 files changed, 1432 insertions(+), 52 deletions(-)
 create mode 100644 src/scripts/easter-eggs/eggs-extra.ts

diff --git a/src/scripts/easter-eggs/effects.ts b/src/scripts/easter-eggs/effects.ts
index 5ba98c6..1fc929a 100644
--- a/src/scripts/easter-eggs/effects.ts
+++ b/src/scripts/easter-eggs/effects.ts
@@ -338,3 +338,315 @@ export function fadeOut(el: Element, duration = 240): Promise<void> {
 export const sleep = (ms: number) => new Promise<void>(r => setTimeout(r, ms))
 
 export const COLORS = { ACCENT, ACCENT_2, WARM, PALETTE }
+
+/* ─── Extra primitives for v2 eggs ─────────────────────────────── */
+
+/** Web Audio synth — simple sine/triangle/square beep. No-op if AudioContext unavailable. */
+let _audioCtx: AudioContext | null = null
+function audioCtx(): AudioContext | null {
+  if (_audioCtx) return _audioCtx
+  const w = window as unknown as {
+    AudioContext?: typeof AudioContext
+    webkitAudioContext?: typeof AudioContext
+  }
+  const Ctor = w.AudioContext || w.webkitAudioContext
+  if (!Ctor) return null
+  try {
+    _audioCtx = new Ctor()
+  } catch {
+    return null
+  }
+  return _audioCtx
+}
+
+export function beep(opts: {
+  freq?: number
+  duration?: number
+  type?: OscillatorType
+  volume?: number
+  delay?: number
+} = {}): void {
+  const {
+    freq = 880,
+    duration = 90,
+    type = 'sine',
+    volume = 0.05,
+    delay = 0,
+  } = opts
+  const ctx = audioCtx()
+  if (!ctx) return
+  if (ctx.state === 'suspended') void ctx.resume()
+  const start = ctx.currentTime + delay / 1000
+  const osc = ctx.createOscillator()
+  const gain = ctx.createGain()
+  osc.type = type
+  osc.frequency.setValueAtTime(freq, start)
+  gain.gain.setValueAtTime(0.0001, start)
+  gain.gain.exponentialRampToValueAtTime(volume, start + 0.005)
+  gain.gain.exponentialRampToValueAtTime(0.0001, start + duration / 1000)
+  osc.connect(gain).connect(ctx.destination)
+  osc.start(start)
+  osc.stop(start + duration / 1000 + 0.02)
+}
+
+/** A scan line that sweeps vertically or horizontally across the viewport. */
+export function scanLine(opts: {
+  direction?: 'vertical' | 'horizontal'
+  color?: string
+  duration?: number
+  thickness?: number
+  onProgress?: (p: number) => void
+}): { animation: Animation; el: HTMLElement } {
+  const {
+    direction = 'vertical',
+    color = ACCENT,
+    duration = 2200,
+    thickness = 2,
+    onProgress,
+  } = opts
+  const el = makeEl('div', {
+    position: 'fixed',
+    background:
+      direction === 'vertical'
+        ? `linear-gradient(180deg, transparent 0%, ${color} 50%, transparent 100%)`
+        : `linear-gradient(90deg, transparent 0%, ${color} 50%, transparent 100%)`,
+    boxShadow: `0 0 14px ${color}, 0 0 28px ${color}`,
+    opacity: '0.85',
+    zIndex: '10000',
+    pointerEvents: 'none',
+  })
+  if (direction === 'vertical') {
+    Object.assign(el.style, {
+      left: '0',
+      right: '0',
+      top: '0',
+      height: `${thickness}px`,
+    } as Style)
+  } else {
+    Object.assign(el.style, {
+      top: '0',
+      bottom: '0',
+      left: '0',
+      width: `${thickness}px`,
+    } as Style)
+  }
+  overlay().appendChild(el)
+  const distance =
+    direction === 'vertical' ? window.innerHeight : window.innerWidth
+  const keyframes =
+    direction === 'vertical'
+      ? [{ transform: 'translateY(0)' }, { transform: `translateY(${distance}px)` }]
+      : [{ transform: 'translateX(0)' }, { transform: `translateX(${distance}px)` }]
+  const animation = el.animate(keyframes, {
+    duration,
+    easing: 'linear',
+    fill: 'forwards',
+  })
+  if (onProgress) {
+    const tick = () => {
+      const t = Number(animation.currentTime ?? 0)
+      if (animation.playState === 'finished') {
+        onProgress(1)
+        return
+      }
+      onProgress(t / duration)
+      requestAnimationFrame(tick)
+    }
+    requestAnimationFrame(tick)
+  }
+  animation.onfinish = () => el.remove()
+  return { animation, el }
+}
+
+/** A single ripple expanding outward from a point. */
+export function ripple(opts: {
+  x: number
+  y: number
+  color?: string
+  duration?: number
+  maxScale?: number
+}): Animation {
+  const { x, y, color = ACCENT, duration = 1100, maxScale = 22 } = opts
+  const ring = makeEl('div', {
+    position: 'fixed',
+    left: `${x}px`,
+    top: `${y}px`,
+    width: '12px',
+    height: '12px',
+    marginLeft: '-6px',
+    marginTop: '-6px',
+    border: `2px solid ${color}`,
+    borderRadius: '999px',
+    pointerEvents: 'none',
+    zIndex: '10000',
+  })
+  overlay().appendChild(ring)
+  const anim = ring.animate(
+    [
+      { transform: 'scale(0)', opacity: 1 },
+      { transform: `scale(${maxScale})`, opacity: 0 },
+    ],
+    { duration, easing: 'cubic-bezier(0.2,0.8,0.2,1)', fill: 'forwards' }
+  )
+  anim.onfinish = () => ring.remove()
+  return anim
+}
+
+/** Card-style flip on the X axis, swapping text content at the midpoint. */
+export async function flipText(
+  el: HTMLElement,
+  newText: string,
+  opts: { color?: string; duration?: number } = {}
+): Promise<void> {
+  const { color, duration = 220 } = opts
+  await el.animate(
+    [
+      { transform: 'rotateX(0deg)', opacity: 1 },
+      { transform: 'rotateX(90deg)', opacity: 0 },
+    ],
+    { duration: duration / 2, easing: 'ease-in', fill: 'forwards' }
+  ).finished
+  el.textContent = newText
+  if (color) el.style.color = color
+  await el.animate(
+    [
+      { transform: 'rotateX(90deg)', opacity: 0 },
+      { transform: 'rotateX(0deg)', opacity: 1 },
+    ],
+    { duration: duration / 2, easing: 'ease-out', fill: 'forwards' }
+  ).finished
+}
+
+const FRAGMENTS = [
+  'ISO',
+  'IEC',
+  'IEEE',
+  'NIST',
+  'IETF',
+  'W3C',
+  'OASIS',
+  'ITU',
+  'BSI',
+  'ANSI',
+  'XSF',
+  '3GPP',
+  'BIPM',
+  'ECMA',
+  'OGC',
+  'CalConnect',
+  'Amd',
+  'Cor',
+  'DIS',
+  'FDIS',
+]
+
+/** Spawn a single floating identifier fragment that drifts upward. */
+export function floatingFragment(opts: {
+  x?: number
+  y?: number
+  text?: string
+  delay?: number
+  color?: string
+  size?: number
+  duration?: number
+} = {}): Animation {
+  const {
+    x,
+    y,
+    text = FRAGMENTS[Math.floor(Math.random() * FRAGMENTS.length)],
+    delay = 0,
+    color = 'rgba(41, 120, 161, 0.55)',
+    size = 12,
+    duration = 5200 + Math.random() * 2200,
+  } = opts
+  const startX = x ?? Math.random() * window.innerWidth
+  const startY = y ?? window.innerHeight + 20
+  const frag = makeEl(
+    'div',
+    {
+      position: 'fixed',
+      left: `${startX}px`,
+      top: `${startY}px`,
+      color,
+      fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
+      fontSize: `${size}px`,
+      fontWeight: '500',
+      pointerEvents: 'none',
+      zIndex: '99',
+      willChange: 'transform,opacity',
+    },
+    text
+  )
+  overlay().appendChild(frag)
+  const drift = (Math.random() - 0.5) * 120
+  const rise = window.innerHeight + 100
+  const anim = frag.animate(
+    [
+      { transform: 'translate(0, 0)', opacity: 0 },
+      { transform: `translate(${drift / 2}px, -120px)`, opacity: 0.7, offset: 0.2 },
+      { transform: `translate(${drift}px, -${rise}px)`, opacity: 0 },
+    ],
+    { duration, delay, easing: 'linear', fill: 'forwards' }
+  )
+  anim.onfinish = () => frag.remove()
+  return anim
+}
+
+/** Static border "frame" that animates inward — used for ISO 27001 lockdown. */
+export function lockdownFrame(opts: {
+  color?: string
+  duration?: number
+} = {}): HTMLElement {
+  const { color = '#34d399', duration = 600 } = opts
+  const frame = makeEl('div', {
+    position: 'fixed',
+    inset: '0',
+    pointerEvents: 'none',
+    zIndex: '9998',
+    boxShadow: `inset 0 0 0 0 ${color}, inset 0 0 0 0 ${color}`,
+  })
+  overlay().appendChild(frame)
+  frame.animate(
+    [
+      { boxShadow: `inset 0 0 0 0 ${color}, inset 0 0 0px 0 ${color}33` },
+      {
+        boxShadow: `inset 0 0 0 3px ${color}, inset 0 0 40px 0 ${color}55`,
+      },
+    ],
+    { duration, easing: 'cubic-bezier(0.22,1,0.36,1)', fill: 'forwards' }
+  )
+  return frame
+}
+
+/** Apply a momentary glow to an arbitrary element. */
+export function glow(
+  target: Element,
+  opts: { color?: string; duration?: number } = {}
+) {
+  const { color = '#34d399', duration = 700 } = opts
+  const rect = target.getBoundingClientRect()
+  const glowEl = makeEl('div', {
+    position: 'fixed',
+    left: `${rect.left - 4}px`,
+    top: `${rect.top - 4}px`,
+    width: `${rect.width + 8}px`,
+    height: `${rect.height + 8}px`,
+    border: `2px solid ${color}`,
+    borderRadius: '4px',
+    pointerEvents: 'none',
+    zIndex: '9999',
+    opacity: '0',
+  })
+  overlay().appendChild(glowEl)
+  const anim = glowEl.animate(
+    [
+      { opacity: 0, transform: 'scale(1)' },
+      { opacity: 1, transform: 'scale(1)', offset: 0.3 },
+      { opacity: 0, transform: 'scale(1.04)' },
+    ],
+    { duration, easing: 'ease-out', fill: 'forwards' }
+  )
+  anim.onfinish = () => glowEl.remove()
+}
+
+export { FRAGMENTS }
diff --git a/src/scripts/easter-eggs/eggs-extra.ts b/src/scripts/easter-eggs/eggs-extra.ts
new file mode 100644
index 0000000..3d8837b
--- /dev/null
+++ b/src/scripts/easter-eggs/eggs-extra.ts
@@ -0,0 +1,1024 @@
+/**
+ * PubID Easter Eggs — Volume 2.
+ *
+ * More themed easter eggs that build on Volume 1 (eggs.ts) and use the
+ * extended WAAPI primitives in effects.ts (scan line, ripple, flip text,
+ * floating fragments, lockdown frame, glow, web-audio beep).
+ *
+ * Eggs here cover: identifier-themed typing triggers (ISO 8601, IEEE 754,
+ * RFC 2324, ISBN, DOI, ISO 27001, W3C), an interactive mouse-trail mode,
+ * ambient idle fragments, a temporal tea-time badge, and a few helpers
+ * exposed via the console API (joke, fact, ascii, cow, parse, uuid).
+ */
+
+import * as fx from './effects'
+import type { Egg, EggContext } from './eggs'
+
+const ACCENT = '#2978a1'
+const ACCENT_2 = '#4193ac'
+const WARM = '#da9d76'
+const GREEN = '#34d399'
+const RED = '#dc2626'
+
+/* ─────────────────────────────────────────────────────────────────
+ * ISO 8601 — every date-like string flips into strict ISO 8601.
+ * ───────────────────────────────────────────────────────────────── */
+const ISO_8601: Egg = {
+  id: 'iso8601',
+  name: 'ISO 8601 Date Flip',
+  description:
+    'Every date-looking string on the page flips into strict ISO 8601 (YYYY-MM-DDTHH:mm:ss.sssZ).',
+  category: 'keystroke',
+  trigger: 'Type "ISO 8601"',
+  async activate(ctx) {
+    ctx.log('Canonicalising dates to ISO 8601…')
+    type Patch = { el: HTMLElement; original: string }
+    const patches: Patch[] = []
+
+    const DATE_RE =
+      /\b(\d{1,2})[/-](\d{1,2})[/-](\d{2,4})\b|\b(\d{4})[/-](\d{1,2})[/-](\d{1,2})\b|\b(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)[a-z]*\.?\s+(\d{1,2}),?\s+(\d{4})\b/gi
+
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
+      acceptNode(node) {
+        const p = node.parentElement
+        if (!p) return NodeFilter.FILTER_REJECT
+        const tag = p.tagName
+        if (tag === 'SCRIPT' || tag === 'STYLE') return NodeFilter.FILTER_REJECT
+        return DATE_RE.test(node.textContent || '')
+          ? NodeFilter.FILTER_ACCEPT
+          : NodeFilter.FILTER_REJECT
+      },
+    })
+
+    const now = new Date()
+    const iso = (d = now) => d.toISOString()
+
+    const seen = new Set<Text>()
+    while (walker.nextNode()) {
+      const tn = walker.currentNode as Text
+      if (seen.has(tn)) continue
+      seen.add(tn)
+      const text = tn.textContent || ''
+      DATE_RE.lastIndex = 0
+      if (!DATE_RE.test(text)) continue
+      const parent = tn.parentElement
+      if (!parent) continue
+
+      const span = document.createElement('span')
+      span.textContent = text
+      span.style.cssText = 'display:inline-block; transform-origin:center;'
+      parent.replaceChild(span, tn)
+      patches.push({ el: span, original: text })
+
+      const flip = async () => {
+        await fx.sleep(Math.random() * 400)
+        await fx.flipText(span, iso(), { color: ACCENT, duration: 280 })
+      }
+      void flip()
+
+      if (patches.length >= 20) break
+    }
+
+    if (patches.length === 0) {
+      fx.toast('No dates found on this page.', { color: WARM })
+      return
+    }
+
+    fx.toast(`ISO 8601 strict · ${patches.length} timestamp${patches.length === 1 ? '' : 's'}`, {
+      color: ACCENT,
+    })
+
+    await fx.sleep(3500)
+    patches.forEach((p, i) => {
+      setTimeout(() => {
+        void fx.flipText(p.el, p.original, { color: '', duration: 220 })
+      }, i * 30)
+    })
+    await fx.sleep(1500)
+    patches.forEach(p => {
+      const parent = p.el.parentNode
+      if (!parent) return
+      parent.replaceChild(document.createTextNode(p.original), p.el)
+      parent.normalize()
+    })
+  },
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * IEEE 754 — floating-point reality. Numbers become NaN / Infinity /
+ * -0 / the famous 0.1 + 0.2 = 0.30000000000000004.
+ * ───────────────────────────────────────────────────────────────── */
+const IEEE_754: Egg = {
+  id: 'ieee754',
+  name: 'Floating-Point Reality',
+  description:
+    'Numbers on the page glitch into NaN, Infinity, -0, and the famous 0.1 + 0.2 result.',
+  category: 'keystroke',
+  trigger: 'Type "IEEE 754"',
+  async activate(ctx) {
+    ctx.log('Engaging IEEE 754 binary64 reality.')
+    const NUM_RE = /\b\d+(?:\.\d+)?\b/g
+    type Patch = { el: HTMLElement; original: string }
+    const patches: Patch[] = []
+
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
+      acceptNode(node) {
+        const p = node.parentElement
+        if (!p) return NodeFilter.FILTER_REJECT
+        const tag = p.tagName
+        if (tag === 'SCRIPT' || tag === 'STYLE') return NodeFilter.FILTER_REJECT
+        return NUM_RE.test(node.textContent || '')
+          ? NodeFilter.FILTER_ACCEPT
+          : NodeFilter.FILTER_REJECT
+      },
+    })
+
+    const seen = new Set<Text>()
+    while (walker.nextNode()) {
+      const tn = walker.currentNode as Text
+      if (seen.has(tn)) continue
+      seen.add(tn)
+      const text = tn.textContent || ''
+      if (!NUM_RE.test(text)) continue
+      const parent = tn.parentElement
+      if (!parent) continue
+
+      const wrap = document.createElement('span')
+      wrap.textContent = text
+      parent.replaceChild(wrap, tn)
+      patches.push({ el: wrap, original: text })
+      if (patches.length >= 30) break
+    }
+
+    if (patches.length === 0) {
+      fx.toast('No numbers to corrupt.', { color: WARM })
+      return
+    }
+
+    const mutations = [
+      'NaN',
+      'Infinity',
+      '-Infinity',
+      '-0',
+      '0.30000000000000004',
+      '5e-324',
+      '1.7976931348623157e+308',
+    ]
+    const picked = new Set<number>()
+    const target = Math.min(Math.floor(patches.length * 0.4), 14)
+    while (picked.size < target) picked.add(Math.floor(Math.random() * patches.length))
+
+    patches.forEach((p, i) => {
+      if (!picked.has(i)) return
+      const delay = i * 30
+      setTimeout(() => {
+        p.el.animate(
+          [
+            { filter: 'blur(0)', color: p.el.style.color || 'inherit' },
+            { filter: 'blur(2px)', color: RED, transform: 'translateX(2px)' },
+            { filter: 'blur(0)', color: RED, transform: 'translateX(0)' },
+          ],
+          { duration: 220, fill: 'forwards' }
+        )
+        setTimeout(() => {
+          const next = mutations[Math.floor(Math.random() * mutations.length)]
+          p.el.textContent = p.el.textContent.replace(NUM_RE, () => next)
+        }, 200)
+      }, delay)
+    })
+
+    fx.toast(`IEEE 754 binary64 · ${picked.size} float${picked.size === 1 ? '' : 's'} corrupted`, {
+      color: RED,
+    })
+
+    await fx.sleep(5500)
+    patches.forEach((p, i) => {
+      setTimeout(() => {
+        p.el.textContent = p.original
+        p.el.style.color = ''
+        p.el.style.filter = ''
+      }, i * 20)
+    })
+  },
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * RFC 2324 — Hyper Text Coffee Pot Control Protocol (418 I'm a teapot).
+ * ───────────────────────────────────────────────────────────────── */
+const RFC_2324_TEAPOT: Egg = {
+  id: 'rfc2324',
+  name: 'HTCPCP Teapot',
+  description: 'A teapot appears and pours tea. (RFC 2324 is real — status code 418.)',
+  category: 'keystroke',
+  trigger: 'Type "RFC 2324"',
+  async activate(ctx) {
+    ctx.log('418 I’m a teapot.')
+    const dim = fx.dimPage({ opacity: 0.45, blur: '6px' })
+    const stage = document.createElement('div')
+    stage.style.cssText = `
+      position: fixed; top: 50%; left: 50%;
+      transform: translate(-50%, -50%);
+      display: flex; flex-direction: column; align-items: center; gap: 18px;
+      pointer-events: auto;
+    `
+    fx.overlay().appendChild(stage)
+
+    const badge = document.createElement('div')
+    badge.textContent = '418 I’m a teapot'
+    badge.style.cssText = `
+      font-family: ui-monospace, "SF Mono", Menlo, monospace;
+      font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
+      color: ${WARM}; background: rgba(218, 157, 118, 0.1);
+      border: 1px solid rgba(218, 157, 118, 0.4);
+      padding: 5px 12px; border-radius: 999px;
+      opacity: 0;
+    `
+    stage.appendChild(badge)
+
+    const teapot = document.createElement('div')
+    teapot.innerHTML = `
+      <svg viewBox="0 0 220 140" width="240" height="150" style="overflow:visible;">
+        <defs>
+          <linearGradient id="pot-fill" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#e8b48a"/>
+            <stop offset="100%" stop-color="#c98a5c"/>
+          </linearGradient>
+        </defs>
+        <g fill="url(#pot-fill)" stroke="#8c5a36" stroke-width="2" stroke-linejoin="round">
+          <ellipse cx="100" cy="80" rx="58" ry="32"/>
+          <path d="M 158 70 Q 200 50 200 80 Q 200 110 158 95 Z"/>
+          <path d="M 60 70 Q 30 50 20 80 Q 30 100 60 90 Z" fill="#a06940"/>
+          <ellipse cx="100" cy="55" rx="22" ry="8" fill="#8c5a36"/>
+          <ellipse cx="100" cy="55" rx="16" ry="5" fill="#3a2415"/>
+        </g>
+        <g transform="translate(95 50)">
+          <circle cx="0" cy="0" r="3" fill="#3a2415"/>
+        </g>
+        <g class="tea-stream" stroke="${WARM}" stroke-width="3" stroke-linecap="round" fill="none" opacity="0">
+          <path d="M 170 95 Q 180 110 195 130" />
+        </g>
+      </svg>
+    `
+    teapot.style.cssText = `transform-origin: 70% 80%;`
+    stage.appendChild(teapot)
+
+    const cup = document.createElement('div')
+    cup.innerHTML = `
+      <svg viewBox="0 0 100 70" width="100" height="70">
+        <g fill="${WARM}" stroke="#8c5a36" stroke-width="2">
+          <path d="M 10 10 L 80 10 L 75 50 Q 75 60 45 60 Q 15 60 15 50 Z"/>
+          <path d="M 80 20 Q 95 25 95 35 Q 95 45 80 45" fill="none"/>
+        </g>
+        <ellipse cx="45" cy="12" rx="34" ry="4" fill="#3a2415" opacity="0.6" class="tea-surface"/>
+      </svg>
+    `
+    cup.style.cssText = `opacity:0; transform: translateY(8px);`
+    stage.appendChild(cup)
+
+    badge.animate([{ opacity: 0 }, { opacity: 1 }], {
+      duration: 320,
+      easing: 'ease-out',
+      fill: 'forwards',
+    })
+    await fx.sleep(300)
+
+    teapot.animate(
+      [{ transform: 'rotate(0)' }, { transform: 'rotate(-22deg)' }],
+      { duration: 700, easing: 'cubic-bezier(0.34,1.56,0.64,1)', fill: 'forwards' }
+    )
+    await fx.sleep(650)
+
+    const stream = teapot.querySelector('.tea-stream') as SVGElement
+    stream.animate([{ opacity: 0 }, { opacity: 1 }], {
+      duration: 200,
+      fill: 'forwards',
+    })
+    cup.animate([{ opacity: 0 }, { opacity: 1 }], {
+      duration: 300,
+      fill: 'forwards',
+    })
+    fx.beep({ freq: 220, type: 'triangle', duration: 1800, volume: 0.04 })
+
+    await fx.sleep(1800)
+    stream.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 200, fill: 'forwards' })
+
+    // Steam rising from the cup
+    const steam = document.createElement('div')
+    steam.style.cssText = `
+      position: absolute; left: 50%; bottom: 0;
+      width: 60px; height: 80px;
+      pointer-events: none;
+      transform: translateX(-30px);
+    `
+    steam.innerHTML = `
+      <svg viewBox="0 0 60 80" width="60" height="80">
+        <g stroke="${WARM}" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.6">
+          <path d="M 18 70 Q 12 50 22 30 Q 28 18 18 4" />
+          <path d="M 30 70 Q 36 50 26 30 Q 22 18 32 4" />
+          <path d="M 42 70 Q 36 50 46 30 Q 50 18 40 4" />
+        </g>
+      </svg>
+    `
+    stage.style.position = 'fixed'
+    cup.style.position = 'relative'
+    cup.appendChild(steam)
+    steam.animate(
+      [
+        { opacity: 0, transform: 'translateY(8px)' },
+        { opacity: 0.7, transform: 'translateY(0)' },
+        { opacity: 0, transform: 'translateY(-12px)' },
+      ],
+      { duration: 1800, iterations: 2, easing: 'ease-in-out', fill: 'forwards' }
+    )
+
+    await fx.sleep(2400)
+    teapot.animate(
+      [{ transform: 'rotate(-22deg)' }, { transform: 'rotate(0)' }],
+      { duration: 480, easing: 'cubic-bezier(0.22,1,0.36,1)', fill: 'forwards' }
+    )
+    await fx.sleep(600)
+    await Promise.all([fx.fadeOut(stage), fx.fadeOut(dim)])
+    fx.clearOverlay(200)
+  },
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * ISBN — barcode scanner line sweeps with beeps, then an ISBN appears.
+ * ───────────────────────────────────────────────────────────────── */
+const ISBN_SCANNER: Egg = {
+  id: 'isbn',
+  name: 'ISBN Scanner',
+  description:
+    'A barcode scanner line sweeps the page with synthesized beeps, then assigns an ISBN-13.',
+  category: 'keystroke',
+  trigger: 'Type "ISBN"',
+  async activate(ctx) {
+    ctx.log('Scanning for ISBN-13 candidate…')
+    const beepTimes = [0.15, 0.32, 0.55, 0.78]
+    const { animation } = fx.scanLine({
+      direction: 'vertical',
+      color: '#dc2626',
+      duration: 2000,
+      thickness: 2,
+      onProgress: p => {
+        if (beepTimes.some(t => Math.abs(t - p) < 0.02)) {
+          fx.beep({ freq: 1100, duration: 50, volume: 0.05, type: 'square' })
+        }
+      },
+    })
+
+    await animation.finished
+
+    // Generate a valid ISBN-13 (978 prefix + 12 digits + checksum)
+    const prefix = '978'
+    const regGroup = ['0', '1', '2', '3', '4', '5', '91'][Math.floor(Math.random() * 7)]
+    const publisher = String(100 + Math.floor(Math.random() * 899))
+    const title = String(1000 + Math.floor(Math.random() * 8999))
+    const first12 = `${prefix}${regGroup}${publisher}${title}`.slice(0, 12).padEnd(12, '0')
+    let sum = 0
+    for (let i = 0; i < 12; i++) {
+      sum += parseInt(first12[i], 10) * (i % 2 === 0 ? 1 : 3)
+    }
+    const checksum = (10 - (sum % 10)) % 10
+    const isbn = `${prefix}-${regGroup}-${publisher}-${title}-${checksum}`
+
+    // Render the barcode
+    const card = document.createElement('div')
+    card.style.cssText = `
+      position: fixed; top: 50%; left: 50%;
+      transform: translate(-50%, -50%) scale(0.8);
+      background: white; color: #0b0d12;
+      padding: 20px 24px;
+      border-radius: 8px;
+      box-shadow: 0 12px 32px rgba(0,0,0,0.2);
+      font-family: ui-monospace, Menlo, monospace;
+      opacity: 0;
+      pointer-events: auto;
+    `
+    let bars = ''
+    for (let i = 0; i < 50; i++) {
+      const w = 1 + Math.floor(Math.random() * 3)
+      const black = i % 2 === 0
+      bars += `<div style="display:inline-block;width:${w}px;height:80px;background:${black ? '#0b0d12' : '#fff'};"></div>`
+    }
+    card.innerHTML = `
+      <div style="font-size:10px;letter-spacing:0.1em;color:#52525b;margin-bottom:8px;text-transform:uppercase;">ISBN-13</div>
+      <div style="display:flex;align-items:flex-end;gap:0;">${bars}</div>
+      <div style="margin-top:10px;font-size:18px;font-weight:700;letter-spacing:0.06em;text-align:center;">${isbn}</div>
+    `
+    fx.overlay().appendChild(card)
+    card.animate(
+      [
+        { opacity: 0, transform: 'translate(-50%, -50%) scale(0.8)' },
+        { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
+      ],
+      { duration: 340, easing: 'cubic-bezier(0.34,1.56,0.64,1)', fill: 'forwards' }
+    )
+    fx.beep({ freq: 1600, duration: 140, volume: 0.06, type: 'square' })
+
+    fx.toast(`ISBN assigned: ${isbn}`, { color: GREEN, duration: 3000 })
+
+    await fx.sleep(3200)
+    await fx.fadeOut(card)
+  },
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * DOI — resolution chain animation.
+ * ───────────────────────────────────────────────────────────────── */
+const DOI_RESOLVE: Egg = {
+  id: 'doi',
+  name: 'DOI Resolution Chain',
+  description: 'Watch a DOI resolve through doi.org → handle → URL → content.',
+  category: 'keystroke',
+  trigger: 'Type "DOI"',
+  async activate(ctx) {
+    ctx.log('Resolving DOI…')
+    const card = document.createElement('div')
+    card.style.cssText = `
+      position: fixed; top: 50%; left: 50%;
+      transform: translate(-50%, -50%);
+      background: var(--color-bg, #fff);
+      color: var(--color-text, #09090b);
+      border: 1px solid var(--color-border, #e4e4e7);
+      border-radius: 12px;
+      padding: 24px 30px;
+      box-shadow: 0 20px 60px rgba(0,0,0,0.2);
+      font-family: ui-monospace, Menlo, monospace;
+      font-size: 14px;
+      min-width: 420px;
+      pointer-events: auto;
+    `
+    fx.overlay().appendChild(card)
+    fx.fadeInUp(card, { duration: 280 })
+
+    const steps = [
+      { label: 'DOI', value: '10.48144/pubid_2026', color: WARM },
+      { label: 'doi.org', value: 'https://doi.org/10.48144/pubid_2026', color: ACCENT },
+      { label: 'handle', value: 'hdl:10.48144/pubid_2026', color: ACCENT_2 },
+      { label: 'URL', value: 'https://pubid.github.io/specs/urn', color: ACCENT_2 },
+      { label: 'content', value: 'URN: urn:iso:std:iso:8601:-1:ed-1:en', color: GREEN },
+    ]
+    for (let i = 0; i < steps.length; i++) {
+      const step = steps[i]
+      const row = document.createElement('div')
+      row.style.cssText = `
+        margin-top: ${i === 0 ? 0 : 8}px;
+        opacity: 0; transform: translateX(-8px);
+        display: flex; gap: 12px; align-items: baseline;
+      `
+      row.innerHTML = `
+        <span style="display:inline-block;min-width:64px;font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:${step.color};">${step.label}</span>
+        <span style="font-family:inherit;color:var(--color-text-2,#52525b);">${step.value}</span>
+      `
+      card.appendChild(row)
+      row.animate(
+        [{ opacity: 0, transform: 'translateX(-8px)' }, { opacity: 1, transform: 'translateX(0)' }],
+        { duration: 240, fill: 'forwards', easing: 'cubic-bezier(0.22,1,0.36,1)' }
+      )
+      fx.beep({ freq: 600 + i * 100, duration: 50, volume: 0.04 })
+      await fx.sleep(360)
+    }
+
+    await fx.sleep(800)
+
+    const final = document.createElement('div')
+    final.style.cssText = `
+      margin-top: 16px; padding-top: 14px;
+      border-top: 1px solid var(--color-border-subtle, #f0f0f2);
+      color: ${GREEN}; font-weight: 700;
+      font-family: ui-sans-serif, system-ui, sans-serif;
+      font-size: 16px;
+      opacity: 0;
+    `
+    final.textContent = '✓ Resolved'
+    card.appendChild(final)
+    final.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 360, fill: 'forwards' })
+    fx.confetti({
+      originX: window.innerWidth / 2,
+      originY: window.innerHeight / 2,
+      spread: Math.PI * 1.4,
+      count: 50,
+    })
+
+    await fx.sleep(2400)
+    await fx.fadeOut(card)
+  },
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * ISO 27001 — ISMS security lockdown.
+ * ───────────────────────────────────────────────────────────────── */
+const ISO_27001: Egg = {
+  id: 'iso27001',
+  name: 'ISMS Lockdown',
+  description:
+    'A green border wraps the viewport, a padlock drops into the header, and every link briefly gets a lock icon.',
+  category: 'keystroke',
+  trigger: 'Type "ISO 27001"',
+  async activate(ctx) {
+    ctx.log('ISO/IEC 27001:2022 — ISMS engaged.')
+    const frame = fx.lockdownFrame({ color: GREEN, duration: 700 })
+
+    // Padlock in header
+    const lock = document.createElement('div')
+    lock.style.cssText = `
+      display: inline-flex; align-items: center;
+      padding: 3px 10px;
+      font-family: ui-monospace, Menlo, monospace;
+      font-size: 11px; font-weight: 600;
+      color: ${GREEN};
+      background: rgba(52, 211, 153, 0.1);
+      border: 1px solid rgba(52, 211, 153, 0.35);
+      border-radius: 999px;
+      opacity: 0;
+    `
+    lock.innerHTML = `
+      <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:6px;">
+        <rect x="3" y="11" width="18" height="11" rx="2"/>
+        <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+      </svg>
+      SECURE
+    `
+    const header = document.querySelector('header nav') || document.querySelector('header')
+    header?.appendChild(lock)
+    lock.animate([{ opacity: 0, transform: 'translateY(-8px)' }, { opacity: 1, transform: 'translateY(0)' }], {
+      duration: 360,
+      easing: 'cubic-bezier(0.34,1.56,0.64,1)',
+      fill: 'forwards',
+    })
+
+    // Glow every link
+    const links = Array.from(document.querySelectorAll('main a, article a')).slice(0, 14)
+    links.forEach((link, i) => {
+      setTimeout(() => fx.glow(link, { color: GREEN, duration: 900 }), i * 60)
+    })
+
+    fx.toast('ISO/IEC 27001:2022 ISMS · Certified', { color: GREEN, duration: 2600 })
+
+    await fx.sleep(5800)
+    lock.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 240, fill: 'forwards' }).onfinish =
+      () => lock.remove()
+    fx.fadeOut(frame, 300)
+  },
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * W3C — validation sweep.
+ * ───────────────────────────────────────────────────────────────── */
+const W3C_VALIDATION: Egg = {
+  id: 'w3c',
+  name: 'Validation Sweep',
+  description:
+    'A scan line sweeps top-to-bottom; each element it passes briefly gets a green ✓. Ends with a "VALID PubID 1.0" badge.',
+  category: 'keystroke',
+  trigger: 'Type "W3C"',
+  async activate(ctx) {
+    ctx.log('W3C validator running…')
+    const targets = Array.from(
+      document.querySelectorAll('main h1, main h2, main h3, main p, main li, main code, main pre')
+    ).slice(0, 28)
+
+    const { animation } = fx.scanLine({
+      direction: 'vertical',
+      color: GREEN,
+      duration: 2600,
+      thickness: 3,
+    })
+
+    const checkEls: HTMLElement[] = []
+    targets.forEach(t => {
+      const rect = t.getBoundingClientRect()
+      const check = document.createElement('div')
+      check.textContent = '✓'
+      check.style.cssText = `
+        position: fixed;
+        left: ${rect.right - 22}px;
+        top: ${rect.top + 2}px;
+        width: 18px; height: 18px;
+        display: grid; place-items: center;
+        color: ${GREEN};
+        font-family: ui-monospace, Menlo, monospace;
+        font-size: 12px; font-weight: 700;
+        opacity: 0; pointer-events: none; z-index: 9999;
+      `
+      fx.overlay().appendChild(check)
+      checkEls.push(check)
+      const targetMid = rect.top + rect.height / 2
+      const observer = setInterval(() => {
+        if (!check.isConnected) {
+          clearInterval(observer)
+          return
+        }
+        const lineY = (Number(animation.currentTime ?? 0) / 2600) * window.innerHeight
+        if (lineY >= targetMid && check.style.opacity === '0') {
+          check.animate(
+            [
+              { opacity: 0, transform: 'translateY(-6px) scale(0.5)' },
+              { opacity: 1, transform: 'translateY(0) scale(1)' },
+            ],
+            { duration: 280, easing: 'cubic-bezier(0.34,1.56,0.64,1)', fill: 'forwards' }
+          )
+          check.style.opacity = '1'
+          clearInterval(observer)
+        }
+      }, 30)
+    })
+
+    await animation.finished
+    await fx.sleep(500)
+
+    const stamp = document.createElement('div')
+    stamp.innerHTML = `
+      <svg viewBox="0 0 200 80" width="240" height="96">
+        <rect x="2" y="2" width="196" height="76" fill="none" stroke="${GREEN}" stroke-width="2" rx="4"/>
+        <text x="100" y="32" text-anchor="middle" font-family="ui-monospace,Menlo,monospace" font-size="13" font-weight="700" fill="${GREEN}" letter-spacing="2">W3C · VALID</text>
+        <text x="100" y="58" text-anchor="middle" font-family="Fraunces,Georgia,serif" font-size="22" font-weight="700" fill="${GREEN}">PubID 1.0</text>
+      </svg>
+    `
+    stamp.style.cssText = `
+      position: fixed; bottom: 28px; right: 28px;
+      opacity: 0; transform: translateY(20px);
+      pointer-events: none;
+    `
+    fx.overlay().appendChild(stamp)
+    stamp.animate(
+      [
+        { opacity: 0, transform: 'translateY(20px) rotate(-2deg)' },
+        { opacity: 1, transform: 'translateY(0) rotate(-2deg)' },
+      ],
+      { duration: 420, easing: 'cubic-bezier(0.34,1.56,0.64,1)', fill: 'forwards' }
+    )
+    fx.beep({ freq: 880, duration: 90, type: 'sine', volume: 0.05 })
+    fx.beep({ freq: 1100, duration: 110, delay: 130, type: 'sine', volume: 0.05 })
+
+    await fx.sleep(3200)
+    checkEls.forEach(c => fx.fadeOut(c, 200))
+    await fx.fadeOut(stamp, 300)
+  },
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * Mouse trail (toggleable) — leaves identifier fragments as you move.
+ * ───────────────────────────────────────────────────────────────── */
+let _trailActive = false
+let _trailLastSpawn = 0
+
+function isTrailActive() {
+  return _trailActive
+}
+
+function toggleTrail(on?: boolean) {
+  _trailActive = on === undefined ? !_trailActive : on
+  if (_trailActive) {
+    fx.toast('Mouse trail enabled · pubid.trail(false) to disable', {
+      color: ACCENT,
+      duration: 1800,
+    })
+  } else {
+    fx.toast('Mouse trail disabled.', { color: ACCENT_2, duration: 1200 })
+  }
+  return _trailActive
+}
+
+function bindTrailHandler() {
+  if ((document as unknown as { _eggTrail?: boolean })._eggTrail) return
+  ;(document as unknown as { _eggTrail?: boolean })._eggTrail = true
+  document.addEventListener('mousemove', e => {
+    if (!_trailActive) return
+    const now = Date.now()
+    if (now - _trailLastSpawn < 50) return
+    _trailLastSpawn = now
+    fx.floatingFragment({
+      x: e.clientX + (Math.random() - 0.5) * 14,
+      y: e.clientY + 4,
+      size: 10 + Math.random() * 4,
+      color: 'rgba(41, 120, 161, 0.7)',
+      duration: 900,
+    })
+  })
+}
+
+const MOUSE_TRAIL: Egg = {
+  id: 'mouse-trail',
+  name: 'Mouse Trail',
+  description: 'Identifier fragments follow your cursor. Toggle with pubid.trail().',
+  category: 'console',
+  trigger: 'pubid.trail() or type "trail"',
+  activate() {
+    bindTrailHandler()
+    toggleTrail()
+  },
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * Idle fragments — after 45s of no input, fragments start drifting up.
+ * ───────────────────────────────────────────────────────────────── */
+let _idleTimer: number | undefined
+let _idleActive = false
+const IDLE_MS = 45000
+
+function cancelIdle() {
+  if (_idleTimer) window.clearTimeout(_idleTimer)
+  _idleActive = false
+  _idleTimer = window.setTimeout(triggerIdle, IDLE_MS)
+}
+
+function triggerIdle() {
+  if (_idleActive) return
+  _idleActive = true
+  const stop = () => {
+    _idleActive = false
+    document.removeEventListener('mousedown', stop)
+    document.removeEventListener('keydown', stop)
+    document.removeEventListener('scroll', stop)
+    cancelIdle()
+  }
+  document.addEventListener('mousedown', stop, { once: true })
+  document.addEventListener('keydown', stop, { once: true })
+  document.addEventListener('scroll', stop, { once: true, passive: true })
+
+  let spawned = 0
+  const interval = window.setInterval(() => {
+    if (!_idleActive) {
+      window.clearInterval(interval)
+      return
+    }
+    fx.floatingFragment({ size: 11 + Math.random() * 4, duration: 6000 + Math.random() * 2000 })
+    spawned++
+    if (spawned > 200) window.clearInterval(interval)
+  }, 600)
+}
+
+const IDLE_FRAGMENTS: Egg = {
+  id: 'idle-fragments',
+  name: 'Idle Fragments',
+  description: 'After 45 seconds of inactivity, identifier fragments drift upward from the bottom of the page.',
+  category: 'temporal',
+  trigger: 'Wait 45 seconds without input',
+  activate(ctx) {
+    bindIdleHandler()
+    ctx.log('Idle detection armed (45s).')
+  },
+}
+
+function bindIdleHandler() {
+  if ((document as unknown as { _eggIdle?: boolean })._eggIdle) return
+  ;(document as unknown as { _eggIdle?: boolean })._eggIdle = true
+  document.addEventListener('mousedown', cancelIdle, { passive: true })
+  document.addEventListener('keydown', cancelIdle, { passive: true })
+  document.addEventListener('scroll', cancelIdle, { passive: true })
+  cancelIdle()
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * Tea time (auto-badge at 4pm local) — HTCPCP.
+ * ───────────────────────────────────────────────────────────────── */
+const TEA_TIME: Egg = {
+  id: 'tea-time',
+  name: 'Tea Time',
+  description:
+    'At 4pm local time, a teapot badge appears in the header. Click it to trigger the HTCPCP egg.',
+  category: 'temporal',
+  trigger: 'Visit around 16:00 local time',
+  activate(ctx) {
+    const header = document.querySelector('header nav') || document.querySelector('header')
+    if (!header || document.getElementById('tea-badge')) return
+    const badge = document.createElement('button')
+    badge.id = 'tea-badge'
+    badge.title = 'HTCPCP — RFC 2324 (click for tea)'
+    badge.style.cssText = `
+      display: inline-flex; align-items: center;
+      padding: 4px 10px;
+      font-family: ui-monospace, Menlo, monospace;
+      font-size: 11px; font-weight: 600;
+      color: ${WARM};
+      background: rgba(218, 157, 118, 0.12);
+      border: 1px solid rgba(218, 157, 118, 0.4);
+      border-radius: 999px;
+      cursor: pointer;
+      opacity: 0;
+    `
+    badge.innerHTML = `☕ Tea time`
+    header.appendChild(badge)
+    badge.animate(
+      [{ opacity: 0, transform: 'translateY(-6px)' }, { opacity: 1, transform: 'translateY(0)' }],
+      { duration: 420, easing: 'cubic-bezier(0.34,1.56,0.64,1)', fill: 'forwards' }
+    )
+    badge.addEventListener('click', () => ctx.fire('rfc2324'))
+    ctx.log('Tea time! (RFC 2324 HTCPCP)')
+  },
+}
+
+function isCurrentlyTeaTime() {
+  const now = new Date()
+  const minutes = now.getHours() * 60 + now.getMinutes()
+  return minutes >= 930 && minutes <= 1020 // 15:30 – 17:00
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * Console-only eggs: joke, fact, ascii, cow, parse, uuid
+ * ───────────────────────────────────────────────────────────────── */
+const JOKES = [
+  'Why did the WD cross the road? It hadn’t yet — it was still in committee.',
+  'I’d tell you a UDP joke, but you might not get it.',
+  'How many standards-body delegates does it take to change a lightbulb? They’re still balloting.',
+  'ISO 9001 walked into a bar. The bar was immediately certified.',
+  'Why did the publisher break up with the copublisher? Irreconcilable corrigenda.',
+  'A Working Draft, a Committee Draft, and a Final Draft walk into a bar. The bartender asks: "Is this a DIS?"',
+  'Why don’t standards ever get lost? They always have an ISBN.',
+  'I tried to write a TCP joke. I kept wanting to repeat the punchline.',
+  'A pigeon walks into a bar with a datagram under its wing. The bartender says "We don’t serve your kind here." The pigeon says "Suit yourself — RFC 1149 says I’m a valid carrier."',
+  'Why did the floating-point number go to therapy? It had NaN issues.',
+]
+
+const FACTS = [
+  'ISO is not an acronym — it derives from the Greek "isos" (equal).',
+  'The first RFC was written in 1969 on a paper towel by Steve Crocker.',
+  'RFC 1149 (IP over Avian Carrier) was actually tested with real pigeons. Latency: ~1h 47min for 16MB.',
+  'ISBN-13 checksums use modulo-10 with alternating weights of 1 and 3.',
+  'IEEE 754 (1985) earned William Kahan the Turing Award.',
+  'ISO 8601 was first published in 1988 — the only date format immune to the Y2K problem.',
+  'The shortest ISO standard is ISO 639 (language codes). The longest? Probably ISO 9001.',
+  'URN namespaces are registered with IANA, the same body that manages TLDs.',
+  'The first website (info.cern.ch, 1991) is still online and still passes W3C validation.',
+  'World Standards Day is October 14 — the anniversary of the first World Standards Assembly in 1946.',
+]
+
+const ASCII_ART = `
+██████╗ ██╗   ██╗████████╗██╗  ██╗
+██╔══██╗╚██╗ ██╔╝╚══██╔══╝██║  ██║
+██████╔╝ ╚████╔╝    ██║   ███████║
+██╔═══╝  ╚██╔╝     ██║   ██╔══██║
+██║       ██║      ██║   ██║  ██║
+╚═╝       ╚═╝      ╚═╝   ╚═╝  ╚═╝`
+
+function cowsay(msg = 'PubID is universal') {
+  const top = ' ' + '_'.repeat(msg.length + 2)
+  const bot = ' ' + '-'.repeat(msg.length + 2)
+  return `${top}\n< ${msg} >\n${bot}
+        \\   ^__^
+         \\  (oo)\\_______
+            (__)\\       )\\/\\
+                ||----w |
+                ||     ||`
+}
+
+const PARSE_RE = new RegExp(
+  '^(ISO|IEC|IEEE|NIST|IETF|W3C|OASIS|ITU|BSI|ANSI|XSF|BIPM|ECMA|OGC|3GPP|CC|CalConnect)' +
+    '(?:[/\\s]([A-Z]+))?' +
+    '(?:[\\s/]+([A-Za-z]+))?' +
+    '[\\s/-]?' +
+    '(\\d+(?:[.-]\\d+)*)' +
+    '(?::(\\d{4}))?' +
+    '(?:/([A-Za-z]+\\s*\\d+(?::\\d{4})?))?',
+  'i'
+)
+
+function parseIdentifier(input: string) {
+  const m = input.match(PARSE_RE)
+  if (!m) return { ok: false, input }
+  const publisher = m[1].toUpperCase()
+  const copublisher = m[2] ? m[2].toUpperCase() : undefined
+  const stage = ['WD', 'CD', 'DIS', 'FDIS', 'IS', 'Amd', 'Cor'].includes(
+    (m[3] || '').toUpperCase()
+  )
+    ? m[3].toUpperCase()
+    : undefined
+  const number = m[4]
+  const year = m[5]
+  const supplement = m[6]
+  const urn = `urn:${publisher.toLowerCase()}:std:${publisher.toLowerCase()}${copublisher ? `-${copublisher.toLowerCase()}` : ''}:${number.replace(/[/-]/g, '-')}${year ? `:${year}` : ''}${supplement ? `:${supplement.toLowerCase().replace(/\s+/g, '')}` : ''}`
+  return {
+    ok: true,
+    input,
+    components: { publisher, copublisher, stage, number, year, supplement },
+    urn,
+  }
+}
+
+function uuid() {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID()
+  }
+  // Fallback RFC4122 v4
+  const hex = [...Array(36)].map((_, i) => {
+    if (i === 8 || i === 13 || i === 18 || i === 23) return '-'
+    if (i === 14) return '4'
+    if (i === 19) return (Math.random() * 4 | 0 | 8).toString(16)
+    return ((Math.random() * 16) | 0).toString(16)
+  })
+  return hex.join('')
+}
+
+const JOKE: Egg = {
+  id: 'joke',
+  name: 'Standards Joke',
+  description: 'A random standards-themed joke.',
+  category: 'console',
+  trigger: 'pubid.joke()',
+  activate() {
+    // eslint-disable-next-line no-console
+    console.log(
+      '%c' + JOKES[Math.floor(Math.random() * JOKES.length)],
+      'font-family:ui-serif,Georgia,serif;font-style:italic;color:#52525b'
+    )
+  },
+}
+
+const FACT: Egg = {
+  id: 'fact',
+  name: 'Random Fact',
+  description: 'A random PubID/standards-world fact.',
+  category: 'console',
+  trigger: 'pubid.fact()',
+  activate() {
+    // eslint-disable-next-line no-console
+    console.log(
+      '%cFact · %c' + FACTS[Math.floor(Math.random() * FACTS.length)],
+      `color:${ACCENT};font-weight:700`,
+      'color:inherit'
+    )
+  },
+}
+
+const ASCII: Egg = {
+  id: 'ascii',
+  name: 'ASCII Logo',
+  description: 'Renders the PubID wordmark as ASCII art in the console.',
+  category: 'console',
+  trigger: 'pubid.ascii()',
+  activate() {
+    // eslint-disable-next-line no-console
+    console.log(`%c${ASCII_ART}`, `color:${ACCENT};font-family:ui-monospace,Menlo,monospace;font-weight:700`)
+  },
+}
+
+const COW: Egg = {
+  id: 'cow',
+  name: 'Cowsay',
+  description: 'A PubID-themed cowsay.',
+  category: 'console',
+  trigger: 'pubid.cow()',
+  activate() {
+    // eslint-disable-next-line no-console
+    console.log(`%c${cowsay()}`, `color:${ACCENT_2};font-family:ui-monospace,Menlo,monospace`)
+  },
+}
+
+const PARSE: Egg = {
+  id: 'parse',
+  name: 'Parse Identifier',
+  description: 'Parse an identifier into its PubID components.',
+  category: 'console',
+  trigger: 'pubid.parse("ISO 9001:2015")',
+  activate() {
+    // eslint-disable-next-line no-console
+    console.log('pubid.parse(id) → parse a PubID string.')
+  },
+}
+
+const UUID_EGG: Egg = {
+  id: 'uuid',
+  name: 'UUID',
+  description: 'Generate a UUID.',
+  category: 'console',
+  trigger: 'pubid.uuid()',
+  activate() {
+    // eslint-disable-next-line no-console
+    console.log(uuid())
+  },
+}
+
+export const EGGS_EXTRA: Egg[] = [
+  ISO_8601,
+  IEEE_754,
+  RFC_2324_TEAPOT,
+  ISBN_SCANNER,
+  DOI_RESOLVE,
+  ISO_27001,
+  W3C_VALIDATION,
+  MOUSE_TRAIL,
+  IDLE_FRAGMENTS,
+  TEA_TIME,
+  JOKE,
+  FACT,
+  ASCII,
+  COW,
+  PARSE,
+  UUID_EGG,
+]
+
+export const EXTRA_HELPERS = {
+  isTrailActive,
+  toggleTrail,
+  bindTrailHandler,
+  bindIdleHandler,
+  isCurrentlyTeaTime,
+  parseIdentifier,
+  uuid,
+  cowsay,
+  asciiArt: ASCII_ART,
+  jokes: JOKES,
+  facts: FACTS,
+}
diff --git a/src/scripts/easter-eggs/index.ts b/src/scripts/easter-eggs/index.ts
index df9d280..01e713a 100644
--- a/src/scripts/easter-eggs/index.ts
+++ b/src/scripts/easter-eggs/index.ts
@@ -11,9 +11,14 @@
  */
 
 import * as fx from './effects'
-import { EGGS, EGGS_BY_ID, type Egg, type EggContext } from './eggs'
+import { EGGS, type Egg, type EggContext } from './eggs'
+import { EGGS_EXTRA, EXTRA_HELPERS } from './eggs-extra'
 
 const ACCENT = '#2978a1'
+const ACCENT_2 = '#4193ac'
+
+const ALL_EGGS: Egg[] = [...EGGS, ...EGGS_EXTRA]
+const ALL_EGGS_BY_ID = new Map(ALL_EGGS.map(e => [e.id, e]))
 
 let _initialised = false
 let _busymax = false
@@ -25,7 +30,7 @@ function log(msg: string) {
 
 const ctx: EggContext = {
   fire: (id: string) => {
-    const egg = EGGS_BY_ID.get(id)
+    const egg = ALL_EGGS_BY_ID.get(id)
     if (!egg) {
       log(`unknown egg: ${id}`)
       return
@@ -47,10 +52,18 @@ const ctx: EggContext = {
 /* ─── Keyboard: typing sequences ─────────────────────────────── */
 const TYPING_PATTERNS: Array<{ pattern: string; egg: string }> = [
   { pattern: 'ISO 9001', egg: 'iso9001' },
+  { pattern: 'ISO 8601', egg: 'iso8601' },
+  { pattern: 'ISO 27001', egg: 'iso27001' },
+  { pattern: 'IEEE 754', egg: 'ieee754' },
   { pattern: 'RFC 1149', egg: 'rfc1149' },
+  { pattern: 'RFC 2324', egg: 'rfc2324' },
   { pattern: '802.11', egg: 'wifi' },
+  { pattern: 'W3C', egg: 'w3c' },
+  { pattern: 'ISBN', egg: 'isbn' },
+  { pattern: 'DOI', egg: 'doi' },
   { pattern: 'URN', egg: 'urn-morph' },
   { pattern: 'ERRATA', egg: 'errata' },
+  { pattern: 'TRAIL', egg: 'mouse-trail' },
 ]
 
 let _typingBuffer = ''
@@ -158,6 +171,12 @@ function bindTemporal() {
   if (now.getMonth() === 9 && now.getDate() === 14) {
     setTimeout(() => ctx.fire('world-standards-day'), 600)
   }
+  // Tea time — local 15:30 to 17:00
+  if (EXTRA_HELPERS.isCurrentlyTeaTime()) {
+    setTimeout(() => ctx.fire('tea-time'), 1200)
+  }
+  // Idle detector — arms the floating-fragment ambient egg
+  EXTRA_HELPERS.bindIdleHandler()
 }
 
 /* ─── Console API ────────────────────────────────────────────── */
@@ -168,43 +187,45 @@ interface PubidAPI {
   confetti: () => void
   spin: () => void
   shake: () => void
+  trail: (on?: boolean) => boolean
+  joke: () => void
+  fact: () => void
+  ascii: () => void
+  cow: (msg?: string) => void
+  parse: (id: string) => unknown
+  uuid: () => string
   version: string
 }
 
 function printHelp() {
-  const header =
-    '%c╔════════════════════════════════════════════════════════════╗\n' +
-    '%c║  PubID Easter Eggs                                         ║\n' +
-    '%c╚════════════════════════════════════════════════════════════╝'
   // eslint-disable-next-line no-console
   console.log(
-    header,
-    `color:${ACCENT};font-weight:700`,
-    `color:${ACCENT};font-weight:700`,
-    `color:${ACCENT};font-weight:700`
+    `%cPubID Easter Eggs — ${ALL_EGGS.length} hidden`,
+    `color:${ACCENT};font-weight:700;font-size:18px;letter-spacing:-0.01em`
   )
   // eslint-disable-next-line no-console
   console.log(
-    '%cTry these — they are themed around publication identifiers, standards bodies, and the PubID data model.',
+    '%cThemed around publication identifiers, standards bodies, and the PubID data model.\n',
     'color:#52525b;font-style:italic'
   )
 
-  const groups: Record<string, Egg[]> = {
-    'Keyboard sequences': EGGS.filter(e => e.category === 'keystroke'),
-    'Konami code': EGGS.filter(e => e.category === 'konami'),
-    Interactions: EGGS.filter(e => e.category === 'click'),
-    Temporal: EGGS.filter(e => e.category === 'temporal'),
-    'Console API': EGGS.filter(e => e.category === 'console'),
-  }
-  for (const [group, items] of Object.entries(groups)) {
+  const groups: Array<{ name: string; cats: Egg['category'][] }> = [
+    { name: 'Keyboard sequences', cats: ['keystroke'] },
+    { name: 'Konami code', cats: ['konami'] },
+    { name: 'Interactions', cats: ['click'] },
+    { name: 'Temporal (auto)', cats: ['temporal'] },
+    { name: 'Console API', cats: ['console'] },
+  ]
+  for (const g of groups) {
+    const items = ALL_EGGS.filter(e => g.cats.includes(e.category))
     if (items.length === 0) continue
     // eslint-disable-next-line no-console
-    console.log(`%c${group}`, `color:${ACCENT};font-weight:700;font-size:13px`)
+    console.log(`%c${g.name}`, `color:${ACCENT};font-weight:700;font-size:13px`)
     for (const egg of items) {
       // eslint-disable-next-line no-console
       console.log(
-        `  %c${egg.trigger.padEnd(22)}%c  ${egg.name}\n` +
-          `%c${' '.repeat(24)}${egg.description}%c`,
+        `  %c${egg.trigger.padEnd(24)}%c ${egg.name}\n` +
+          `%c${' '.repeat(26)}${egg.description}%c`,
         'color:#0b0d12;font-family:ui-monospace,Menlo,monospace;font-weight:600',
         'color:#52525b',
         'color:#a1a1aa;font-size:11px',
@@ -214,35 +235,34 @@ function printHelp() {
   }
 
   // eslint-disable-next-line no-console
-  console.log(
-    '%c\nProgrammatic:',
-    `color:${ACCENT};font-weight:700;font-size:13px`
-  )
-  // eslint-disable-next-line no-console
-  console.log(
-    '  %cpubid.help()%c        This message\n' +
-      '  %cpubid.list()%c        All eggs as data\n' +
-      '  %cpubid.fire(id)%c      Trigger by id (e.g. pubid.fire(\'pigeon\'))\n' +
-      '  %cpubid.confetti()%c    Burst confetti\n' +
-      '  %cpubid.spin()%c        Spin the logo\n' +
-      '  %cpubid.shake()%c       Shake the page',
-    'color:#0b0d12;font-family:ui-monospace,Menlo,monospace',
-    'color:#52525b',
-    'color:#0b0d12;font-family:ui-monospace,Menlo,monospace',
-    'color:#52525b',
-    'color:#0b0d12;font-family:ui-monospace,Menlo,monospace',
-    'color:#52525b',
-    'color:#0b0d12;font-family:ui-monospace,Menlo,monospace',
-    'color:#52525b',
-    'color:#0b0d12;font-family:ui-monospace,Menlo,monospace',
-    'color:#52525b',
-    'color:#0b0d12;font-family:ui-monospace,Menlo,monospace',
-    'color:#52525b'
-  )
+  console.log('%c\nProgrammatic:', `color:${ACCENT};font-weight:700;font-size:13px`)
+  const cmds = [
+    ['pubid.help()', 'This message'],
+    ['pubid.list()', `All eggs as data (${ALL_EGGS.length} total)`],
+    ['pubid.fire(id)', 'Trigger a specific egg by id'],
+    ['pubid.joke()', 'A standards joke'],
+    ['pubid.fact()', 'A standards-world fact'],
+    ['pubid.ascii()', 'ASCII-art wordmark'],
+    ['pubid.cow(msg?)', 'cowsay with an optional message'],
+    ['pubid.parse(id)', 'Parse an identifier into components'],
+    ['pubid.uuid()', 'Generate a UUID'],
+    ['pubid.trail(on?)', 'Toggle mouse-trail sparkles'],
+    ['pubid.confetti()', 'Burst confetti'],
+    ['pubid.spin()', 'Spin the logo'],
+    ['pubid.shake()', 'Shake the page'],
+  ]
+  for (const [cmd, desc] of cmds) {
+    // eslint-disable-next-line no-console
+    console.log(
+      `  %c${cmd.padEnd(22)}%c ${desc}`,
+      'color:#0b0d12;font-family:ui-monospace,Menlo,monospace',
+      'color:#52525b'
+    )
+  }
 
   // eslint-disable-next-line no-console
   console.log(
-    '%c\nReduced motion is respected — flashy eggs no-op when set.\nHave fun. ✨',
+    '%c\nReduced motion is respected. Keyboard sequences are ignored inside form fields.\nHave fun. ✨',
     'color:#52525b;font-style:italic'
   )
 }
@@ -250,20 +270,44 @@ function printHelp() {
 function installConsoleApi() {
   const api: PubidAPI = {
     help: printHelp,
-    list: () => EGGS.slice(),
+    list: () => ALL_EGGS.slice(),
     fire: (id: string) => ctx.fire(id),
     confetti: () => ctx.fire('confetti'),
     spin: () => ctx.fire('spin'),
     shake: () => ctx.fire('shake'),
-    version: '1.0.0',
+    trail: (on?: boolean) => {
+      EXTRA_HELPERS.bindTrailHandler()
+      return EXTRA_HELPERS.toggleTrail(on)
+    },
+    joke: () => ctx.fire('joke'),
+    fact: () => ctx.fire('fact'),
+    ascii: () => ctx.fire('ascii'),
+    cow: (msg?: string) => {
+      // eslint-disable-next-line no-console
+      console.log(
+        `%c${EXTRA_HELPERS.cowsay(msg)}`,
+        `color:${ACCENT_2};font-family:ui-monospace,Menlo,monospace`
+      )
+    },
+    parse: (id: string) => {
+      const result = EXTRA_HELPERS.parseIdentifier(id)
+      // eslint-disable-next-line no-console
+      console.log(result)
+      return result
+    },
+    uuid: () => {
+      const u = EXTRA_HELPERS.uuid()
+      // eslint-disable-next-line no-console
+      console.log(u)
+      return u
+    },
+    version: '2.0.0',
   }
   Object.defineProperty(window, 'pubid', {
     value: api,
     writable: false,
     configurable: true,
   })
-  // Alias `help` so typing `help` in console opens the directory.
-  // We only define it if no page-script helper already exists.
   if (!(window as unknown as { help?: unknown }).help) {
     Object.defineProperty(window, 'help', {
       value: printHelp,

From ab3d9cd4c43126063ef80942893750a3ee2a9018 Mon Sep 17 00:00:00 2001
From: Ronald Tse <ronald.tse@ribose.com>
Date: Thu, 23 Jul 2026 13:57:51 +0800
Subject: [PATCH 3/4] feat(easter-eggs): add NIST Internet Time Service egg
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Type "NIST" (case-insensitive) triggers a synchronisation sequence:
a scan line sweeps the viewport with synthesised tick beeps, then a
live UTC clock pins to the corner showing ISO 8601 timestamp with
"stratum 1 · ±0.001s" status, ticking at ~12 Hz for 6.5 seconds.

Themed after NIST's Internet Time Service (time.nist.gov), which
distributes UTC to systems worldwide via NTP.

All keyboard-triggered eggs are case-insensitive (already were — the
typing buffer uppercases both sides before comparison). Verified with
"iso 9001", "Iso 9001", "ISO 9001", "nist", "NiSt", "NIST".

Total eggs: 28 (was 27).
---
 src/scripts/easter-eggs/eggs-extra.ts | 84 +++++++++++++++++++++++++++
 src/scripts/easter-eggs/index.ts      |  1 +
 2 files changed, 85 insertions(+)

diff --git a/src/scripts/easter-eggs/eggs-extra.ts b/src/scripts/easter-eggs/eggs-extra.ts
index 3d8837b..530cd3e 100644
--- a/src/scripts/easter-eggs/eggs-extra.ts
+++ b/src/scripts/easter-eggs/eggs-extra.ts
@@ -506,6 +506,89 @@ const DOI_RESOLVE: Egg = {
   },
 }
 
+/* ─────────────────────────────────────────────────────────────────
+ * NIST — Internet Time Service synchronization (time.nist.gov).
+ * ───────────────────────────────────────────────────────────────── */
+const NIST_SYNC: Egg = {
+  id: 'nist',
+  name: 'NIST Time Sync',
+  description:
+    'A synchronisation sweep contacts time.nist.gov and pins a live UTC clock to the corner.',
+  category: 'keystroke',
+  trigger: 'Type "NIST"',
+  async activate(ctx) {
+    ctx.log('Contacting time.nist.gov…')
+    fx.toast('Syncing to time.nist.gov…', { color: ACCENT, duration: 1500 })
+
+    const { animation } = fx.scanLine({
+      direction: 'vertical',
+      color: ACCENT,
+      duration: 1500,
+      thickness: 1,
+    })
+
+    // Tick-tick-tick during the sweep
+    for (let i = 0; i < 4; i++) {
+      fx.beep({
+        freq: 1000 + i * 220,
+        duration: 28,
+        delay: i * 380,
+        volume: 0.04,
+        type: 'square',
+      })
+    }
+
+    await animation.finished
+
+    const badge = document.createElement('div')
+    badge.style.cssText = `
+      position: fixed; top: 80px; right: 20px;
+      background: rgba(9,9,11,0.92);
+      color: #fafafa;
+      border: 1px solid ${ACCENT};
+      border-radius: 8px;
+      padding: 10px 14px;
+      font-family: ui-monospace, "SF Mono", Menlo, monospace;
+      font-size: 11px;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.3);
+      opacity: 0;
+      min-width: 220px;
+      z-index: 10000;
+    `
+    badge.innerHTML = `
+      <div style="font-size:9px;color:#a1a1aa;letter-spacing:0.12em;margin-bottom:6px;">NIST INTERNET TIME SERVICE</div>
+      <div data-clock style="font-size:13px;font-weight:700;color:${ACCENT};font-variant-numeric:tabular-nums;">${new Date().toISOString()}</div>
+      <div style="display:flex;gap:8px;font-size:9px;margin-top:6px;color:${GREEN};">
+        <span>✓ stratum 1</span>
+        <span style="color:#a1a1aa;">±0.001s</span>
+      </div>
+    `
+    fx.overlay().appendChild(badge)
+    badge.animate(
+      [
+        { opacity: 0, transform: 'translateY(-8px) scale(0.96)' },
+        { opacity: 1, transform: 'translateY(0) scale(1)' },
+      ],
+      { duration: 320, easing: 'cubic-bezier(0.34,1.56,0.64,1)', fill: 'forwards' }
+    )
+
+    // Live-tick the clock for a few seconds
+    let ticks = 0
+    const clock = badge.querySelector('[data-clock]') as HTMLElement | null
+    const interval = window.setInterval(() => {
+      if (clock && clock.isConnected) clock.textContent = new Date().toISOString()
+      ticks++
+      if (ticks > 80) window.clearInterval(interval)
+    }, 80)
+
+    fx.toast('NIST ITS synchronised ✓', { color: GREEN, duration: 1800 })
+
+    await fx.sleep(5400)
+    window.clearInterval(interval)
+    await fx.fadeOut(badge, 300)
+  },
+}
+
 /* ─────────────────────────────────────────────────────────────────
  * ISO 27001 — ISMS security lockdown.
  * ───────────────────────────────────────────────────────────────── */
@@ -996,6 +1079,7 @@ export const EGGS_EXTRA: Egg[] = [
   RFC_2324_TEAPOT,
   ISBN_SCANNER,
   DOI_RESOLVE,
+  NIST_SYNC,
   ISO_27001,
   W3C_VALIDATION,
   MOUSE_TRAIL,
diff --git a/src/scripts/easter-eggs/index.ts b/src/scripts/easter-eggs/index.ts
index 01e713a..e25585a 100644
--- a/src/scripts/easter-eggs/index.ts
+++ b/src/scripts/easter-eggs/index.ts
@@ -58,6 +58,7 @@ const TYPING_PATTERNS: Array<{ pattern: string; egg: string }> = [
   { pattern: 'RFC 1149', egg: 'rfc1149' },
   { pattern: 'RFC 2324', egg: 'rfc2324' },
   { pattern: '802.11', egg: 'wifi' },
+  { pattern: 'NIST', egg: 'nist' },
   { pattern: 'W3C', egg: 'w3c' },
   { pattern: 'ISBN', egg: 'isbn' },
   { pattern: 'DOI', egg: 'doi' },

From d54436c3fe8d8acb7212330f310a8fc978982a30 Mon Sep 17 00:00:00 2001
From: Ronald Tse <ronald.tse@ribose.com>
Date: Thu, 23 Jul 2026 14:25:05 +0800
Subject: [PATCH 4/4] fix(easter-eggs): ISO 8601 always-delivers reference
 clock
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous ISO 8601 egg showed "No dates found on this page" on
pages without date-like strings — a dead-end that broke the
"easter eggs should always delight" contract.

New behaviour: the egg ALWAYS pins a live ISO 8601 reference clock to
the corner showing seven representations updating in real time:

  ISO 8601:2019
  Date and time — Representations for information interchange
  2026-07-23T06:22:18.459Z          (extended, UTC, milliseconds)
  DATE   2026-07-23
  TIME   06:22:18Z
  BASIC  20260723T062218Z           (no separators)
  WEEK   2026-W30-4                 (ISO 8601 week date)
  DOY    204/365                    (day-of-year / total)
  LOCAL  2026-07-23T14:22:18+08:00  (corrected: now uses local wall
                                     time with the proper offset,
                                     not UTC + offset)

When the page does have dates, those still flip into ISO 8601 in
place — the reference clock is the guaranteed payoff; the flips are
bonus.

Bug fix along the way: the LOCAL line previously rendered UTC wall
time with the local offset (e.g. "06:22:18+08:00"), which is
nonsensical. Now renders actual local wall time with the offset.
---
 src/scripts/easter-eggs/eggs-extra.ts | 150 +++++++++++++++++++++-----
 1 file changed, 123 insertions(+), 27 deletions(-)

diff --git a/src/scripts/easter-eggs/eggs-extra.ts b/src/scripts/easter-eggs/eggs-extra.ts
index 530cd3e..2a3cf59 100644
--- a/src/scripts/easter-eggs/eggs-extra.ts
+++ b/src/scripts/easter-eggs/eggs-extra.ts
@@ -21,17 +21,109 @@ const GREEN = '#34d399'
 const RED = '#dc2626'
 
 /* ─────────────────────────────────────────────────────────────────
- * ISO 8601 — every date-like string flips into strict ISO 8601.
+ * ISO 8601 — always pin a live reference clock; also flip any dates
+ * found on the page. No more "No dates found" dead-end.
  * ───────────────────────────────────────────────────────────────── */
 const ISO_8601: Egg = {
   id: 'iso8601',
-  name: 'ISO 8601 Date Flip',
+  name: 'ISO 8601 Reference',
   description:
-    'Every date-looking string on the page flips into strict ISO 8601 (YYYY-MM-DDTHH:mm:ss.sssZ).',
+    'Pins a live ISO 8601 reference clock (extended, basic, date, time, week, day-of-year, local offset) to the corner — and flips any dates on the page into strict ISO 8601 form.',
   category: 'keystroke',
   trigger: 'Type "ISO 8601"',
   async activate(ctx) {
-    ctx.log('Canonicalising dates to ISO 8601…')
+    ctx.log('ISO 8601:2019 — live reference clock.')
+
+    // ── Always: pin the reference clock ────────────────────────
+    const clock = document.createElement('div')
+    clock.style.cssText = `
+      position: fixed; top: 84px; right: 20px;
+      background: rgba(9,9,11,0.94);
+      color: #fafafa;
+      border: 1px solid ${ACCENT};
+      border-radius: 10px;
+      padding: 14px 18px;
+      font-family: ui-monospace, "SF Mono", Menlo, monospace;
+      font-size: 12px;
+      box-shadow: 0 16px 40px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.04);
+      opacity: 0;
+      min-width: 300px;
+      z-index: 10000;
+      transform: translateX(20px);
+    `
+    clock.innerHTML = `
+      <div style="font-size:9px;letter-spacing:0.16em;color:#a8adb8;text-transform:uppercase;margin-bottom:2px;">ISO 8601:2019</div>
+      <div style="font-size:10px;color:#6b7280;font-style:italic;margin-bottom:12px;line-height:1.3;">Date and time — Representations for information interchange</div>
+      <div data-main style="font-size:15px;font-weight:700;color:${ACCENT};font-variant-numeric:tabular-nums;letter-spacing:-0.01em;margin-bottom:14px;word-break:break-all;">…</div>
+      <div style="display:grid;grid-template-columns:54px 1fr;gap:5px 10px;font-size:11px;color:#a8adb8;">
+        <div style="color:#6b7280;font-weight:700;letter-spacing:0.08em;">DATE</div><div data-date style="font-variant-numeric:tabular-nums;">…</div>
+        <div style="color:#6b7280;font-weight:700;letter-spacing:0.08em;">TIME</div><div data-time style="font-variant-numeric:tabular-nums;">…</div>
+        <div style="color:#6b7280;font-weight:700;letter-spacing:0.08em;">BASIC</div><div data-basic style="font-variant-numeric:tabular-nums;">…</div>
+        <div style="color:#6b7280;font-weight:700;letter-spacing:0.08em;">WEEK</div><div data-week style="font-variant-numeric:tabular-nums;">…</div>
+        <div style="color:#6b7280;font-weight:700;letter-spacing:0.08em;">DOY</div><div data-doy style="font-variant-numeric:tabular-nums;">…</div>
+        <div style="color:#6b7280;font-weight:700;letter-spacing:0.08em;">LOCAL</div><div data-local style="font-variant-numeric:tabular-nums;">…</div>
+      </div>
+      <div style="margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.07);font-size:9px;color:#6b7280;letter-spacing:0.1em;text-transform:uppercase;">✓ Live · strict ISO 8601</div>
+    `
+    fx.overlay().appendChild(clock)
+    clock.animate(
+      [
+        { opacity: 0, transform: 'translateX(24px) scale(0.96)' },
+        { opacity: 1, transform: 'translateX(0) scale(1)' },
+      ],
+      { duration: 380, easing: 'cubic-bezier(0.22,1,0.36,1)', fill: 'forwards' }
+    )
+
+    const isoWeek = (d: Date): string => {
+      const t = new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()))
+      t.setUTCDate(t.getUTCDate() + 4 - (t.getUTCDay() || 7))
+      const yearStart = new Date(Date.UTC(t.getUTCFullYear(), 0, 1))
+      const weekNo = Math.ceil(((t.getTime() - yearStart.getTime()) / 86400000 + 1) / 7)
+      const dow = ((d.getUTCDay() + 6) % 7) + 1
+      return `${t.getUTCFullYear()}-W${String(weekNo).padStart(2, '0')}-${dow}`
+    }
+
+    const dayOfYear = (d: Date): number => {
+      const start = Date.UTC(d.getUTCFullYear(), 0, 0)
+      const now = Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate())
+      return Math.floor((now - start) / 86400000)
+    }
+
+    const totalDays = (year: number): number =>
+      (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 366 : 365
+
+    const pad2 = (n: number) => String(n).padStart(2, '0')
+
+    const mainEl = clock.querySelector('[data-main]') as HTMLElement
+    const dateEl = clock.querySelector('[data-date]') as HTMLElement
+    const timeEl = clock.querySelector('[data-time]') as HTMLElement
+    const basicEl = clock.querySelector('[data-basic]') as HTMLElement
+    const weekEl = clock.querySelector('[data-week]') as HTMLElement
+    const doyEl = clock.querySelector('[data-doy]') as HTMLElement
+    const localEl = clock.querySelector('[data-local]') as HTMLElement
+
+    const renderClock = () => {
+      if (!clock.isConnected) return false
+      const d = new Date()
+      const iso = d.toISOString()
+      mainEl.textContent = iso
+      dateEl.textContent = iso.slice(0, 10)
+      timeEl.textContent = iso.slice(11, 19) + 'Z'
+      basicEl.textContent = iso.replace(/[-:]/g, '').replace(/\.\d+Z$/, 'Z')
+      weekEl.textContent = isoWeek(d)
+      doyEl.textContent = `${dayOfYear(d)}/${totalDays(d.getUTCFullYear())}`
+      const offsetMin = -d.getTimezoneOffset()
+      const sign = offsetMin >= 0 ? '+' : '-'
+      const oh = pad2(Math.floor(Math.abs(offsetMin) / 60))
+      const om = pad2(Math.abs(offsetMin) % 60)
+      const localPart = `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}T${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`
+      localEl.textContent = `${localPart}${sign}${oh}:${om}`
+      return true
+    }
+    renderClock()
+    const tick = window.setInterval(renderClock, 50)
+
+    // ── Bonus: flip any date-like strings on the page ──────────
     type Patch = { el: HTMLElement; original: string }
     const patches: Patch[] = []
 
@@ -70,37 +162,41 @@ const ISO_8601: Egg = {
       parent.replaceChild(span, tn)
       patches.push({ el: span, original: text })
 
-      const flip = async () => {
+      void (async () => {
         await fx.sleep(Math.random() * 400)
         await fx.flipText(span, iso(), { color: ACCENT, duration: 280 })
-      }
-      void flip()
+      })()
 
       if (patches.length >= 20) break
     }
 
-    if (patches.length === 0) {
-      fx.toast('No dates found on this page.', { color: WARM })
-      return
-    }
+    fx.toast(
+      patches.length > 0
+        ? `ISO 8601 strict · ${patches.length} timestamp${patches.length === 1 ? '' : 's'} canonicalised`
+        : 'ISO 8601:2019 · live reference clock',
+      { color: ACCENT, duration: 2400 }
+    )
 
-    fx.toast(`ISO 8601 strict · ${patches.length} timestamp${patches.length === 1 ? '' : 's'}`, {
-      color: ACCENT,
-    })
+    await fx.sleep(6800)
+    window.clearInterval(tick)
 
-    await fx.sleep(3500)
-    patches.forEach((p, i) => {
-      setTimeout(() => {
-        void fx.flipText(p.el, p.original, { color: '', duration: 220 })
-      }, i * 30)
-    })
-    await fx.sleep(1500)
-    patches.forEach(p => {
-      const parent = p.el.parentNode
-      if (!parent) return
-      parent.replaceChild(document.createTextNode(p.original), p.el)
-      parent.normalize()
-    })
+    // Revert flipped dates
+    if (patches.length > 0) {
+      patches.forEach((p, i) => {
+        setTimeout(() => {
+          void fx.flipText(p.el, p.original, { color: '', duration: 220 })
+        }, i * 30)
+      })
+      await fx.sleep(700)
+      patches.forEach(p => {
+        const parent = p.el.parentNode
+        if (!parent) return
+        parent.replaceChild(document.createTextNode(p.original), p.el)
+        parent.normalize()
+      })
+    }
+
+    await fx.fadeOut(clock, 300)
   },
 }