11 self-contained micro-interactions for the RelayCTX app, console, and marketing site. Each egg is a drop-in <style> + <script> block — no build step, no dependencies, no layout impact.
prefers-reduced-motion. All animations collapse to instant or crossfade.aria-hidden on decorative elements. role + aria-live on status changes.#0d9488 only. JetBrains Mono for Codes; Outfit for UI labels.<style> + <script> drop-in. No external CSS, no build step.position:fixed, opacity, transform only. No reflow.Full-width teal gradient beam sweeps left→right. A Code fades in at center. ~0.9 s, self-resetting. Wire Code to real active Code in production.
→ View demo#relay-konami-beam overlay to <body>QNHC2C with real active CodeRays spin 135°. “Context, carried.” fades in in Cormorant italic. Auto-resets after 3 s.
→ View demo.relay-mark-wrap.relay-mark-reveal span belowStyled console.log: teal RelayCTX header, “Context in. Context out.”, Loop link. Curious devs find it.
main.js or app entry%c CSS injection for teal colorCharacters scramble through random alphanumeric, cascade back to real Code left→right over ~800 ms. Skipped on reduced-motion.
→ View demodata-relay-code attr to Code elementinitCodeScramble() after DOM readyrunning flag prevents mid-scramble re-triggerAmber dot snaps to green with scale bounce (1→1.7→0.88→1). Label: “Awaiting receipt” → “Received”. After 2.2 s dims to grey “Code spent”.
→ View demorelayStatusSnap(dotEl, labelEl) to receive success callbackVertical teal beam sweeps top→bottom; 14 particles scatter radially; “Context received.” fades up and out. ~1.1 s total.
→ View demo#relay-receive-beam overlay to app shellrelayReceiveBeam() on first receive eventsessionStorage for once-per-sessionCard fades to 38% opacity, grayscale 70%. Code text goes grey + line-through. † glyph fades in after 300 ms.
<span class="relay-gravestone" aria-hidden="true">†</span> inside Code value elementrelayExpireCode(cardEl, statusEl) on state changeRelay mark breathes (opacity .55→.85, scale 1→1.06, 4 s loop). Three copy variants: relay list, pulse feed, first-time user.
→ View demo.relay-empty markupRelay mark breathes dimly above Code-typography 404. Headline: “This context didn’t transfer.” Home + back CTAs.
Dark frosted banner slides down. “Working late? Relay it — pick up fresh tomorrow.” Dismissable. One per session.
→ View demo#relay-late-banner div to app/console shellsessionStorageMark’s 8 rays pulse sequentially (350 ms stagger). Stops immediately on any activity. Multiple marks on a page share one listener.
→ View democlass="relay-mark-idle" to mark SVGclass="ray" to each line elementIDLE_MS from 5000 (demo) to 90000 (prod)| Priority | Egg | Surface | Reason |
|---|---|---|---|
| P0 | E — Status Snap | App, Console, Marketing home | High-visibility state; marketing Code figure is already the right markup |
| P0 | H — Empty State | App relay list, Pulse feed | Every new user hits this; current state is a dead end |
| P0 | I — 404 | App + marketing site | Ties broken pages to product language |
| P1 | D — Code Scramble | App Code display, Marketing | Reinforces Code as a product primitive |
| P1 | C — Console Greeting | App entry point | One IIFE; targets developer users |
| P1 | G — Gravestone | App relay list | Spent Codes are currently undifferentiated |
| P1 | F — Receive Beam | App first receive | Celebration moment; once-per-session |
| P2 | K — Idle Pulse | App nav mark | Adds life; triggers only at 90 s idle |
| P2 | J — Late-Night Banner | App + console | Contextual, once-per-session, builds habit |
| P2 | B — Mark × 5 | Nav mark everywhere | Classic discovery egg |
| P3 | A — Konami | Any Relay page | For the devs who know |