Skip to content

feat(site): add ghost easter egg to the navbar logo - #31719

Open
tracyjohnsonux wants to merge 2 commits into
mainfrom
halloween-ghost-logo
Open

tracyjohnsonux wants to merge 2 commits into
mainfrom
halloween-ghost-logo

Conversation

@tracyjohnsonux

@tracyjohnsonux tracyjohnsonux commented Nov 3, 2026 •

Copy link
Copy Markdown
Contributor

Hovering the navbar Coder logo turns it into a "Ghost in the shell". It glitches into a backlit black silhouette with TV-style horizontal tearing and scanlines, and two eyes open and blink every few seconds. When the pointer leaves, it glitches back.

There's nothing to configure: it's a hover easter egg, off for prefers-reduced-motion and for custom logos (Appearance > Logo URL always wins). Whether and when to ship it, and the timings in GHOST_LOGO_TIMING, are left to reviewers. It's driven imperatively on the SVG nodes (ghostLogoController.ts), so glitch frames don't re-render React.

To try it: hover the logo in Storybook components/Icons/GhostLogo or on any dashboard page.

For reviewers:

  • In the light theme the silhouette uses fill-surface-primary, so it reads as a white ghost with a dark halo, the inverse of the dark-theme look.
  • Pixel snapshots are unchanged because the effect only runs on hover.
Verification and decision log

Checks (all passed): pnpm check, pnpm lint, unit tests (including ghostLogoController.test.ts), the pre-commit hook, and the pre-push hook (make pre-push, including tests).

Browser checks (headless Chromium, Playwright, Storybook):

  • Idle: stays plain.
  • Hover: glitches dark in about 450ms, the eyes open about 200ms later, and the blink loop runs.
  • Leave: back to light in about 600ms.
  • A quick hover in and out ends light, with no flash of open eyes.
  • With reduced motion, hover does nothing.

History:

  • The first version was Halloween-only: date-gated to Oct 24 to 31 with a ?halloween override, and it played on its own every 9s.
  • That was cut back to a plain hover easter egg to keep it simple. The cycle scheduling, the rolling scanline bar, and the backlight bloom are gone, and the blink is a looping Web Animation instead of a timer chain.

Fixes carried over:

  • Each sleep() used to leave an abort listener on the shared signal until the logo unmounted.
  • Leaving during the glitch-in used to flash the eyes open.
  • Both have regression tests.

frontend-deep-review: findings fixed in the earlier round. One was rejected: making the ProductLogo prop required, because ProductLogo has eight other call sites that don't pass it. doc-check (author self-check): no blocking findings. docs/admin/setup/appearance.md ("The default is the Coder logo.") is still accurate.


Generated by Coder Agents on behalf of @tracyjohnsonux.

From Oct 24 to 31, the navbar Coder logo periodically glitches into a
backlit silhouette, blinks, and glitches back; hovering holds it dark.
?halloween=1 and ?halloween=0 force it on or off. It is off for reduced
motion, custom logos, and pixel snapshots.
Drop the Halloween date window, the ?halloween override, and the
automatic cycle. The navbar logo now glitches into the ghost only while
hovered. The effect logic is reduced to one settle loop, and the blink is
a looping Web Animation instead of a timer chain.
@tracyjohnsonux tracyjohnsonux changed the title feat(site): add Halloween ghost easter egg to the navbar logo feat(site): add ghost easter egg to the navbar logo Nov 3, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant