Skip to content

feat(theme): add Rick and Morty theme#295

Draft
functionstackx wants to merge 1 commit intomasterfrom
feat/rick-morty-theme
Draft

feat(theme): add Rick and Morty theme#295
functionstackx wants to merge 1 commit intomasterfrom
feat/rick-morty-theme

Conversation

@functionstackx
Copy link
Copy Markdown
Contributor

Summary

Adds a fourth theme alongside light / dark / minecraft, cycling in the header toggle as light → dark → minecraft → rick-morty.

Palette

Anchored on the canonical Rick and Morty palette (color-hex/9134, colorswall/243091, colorswall/242810):

  • Primary — portal green #97ce4c
  • Secondary — Morty yellow #f0e14a
  • Accent — Rick lab-coat blue #0bb4e4
  • Background — deep-space dark #0d1525
  • Foreground — pale yellow-green #dceea0
  • Destructive#e63946

Overlay-run palette (8 slots, character-coded)

# Color Character / source
0 #97ce4c portal green
1 #f0e14a Morty yellow
2 #0bb4e4 Rick lab coat
3 #e89ac7 Summer pink
4 #c1f762 schwifty bright green
5 #ffb78c Jerry skin
6 #b388eb Beth purple
7 #ff6e54 Birdperson red

Wiring

  • themes={[…, 'rick-morty']} registered in layout.tsx.
  • Toggle icon in mode-toggle.tsx: lucide Atom (portal-gun / mad-scientist vibe), positioned after the minecraft Pickaxe in the cycle.
  • All existing dark-equivalence checks (useThemeColors, chart-utils.generateVendorColors, GPUGraph color generator, ModelArchitectureDiagram rendering, useChartExport watermark bar) now treat rick-morty as a dark theme so vendor colors, architecture diagrams, and exported watermarks all match the dark base.
  • circuit-bg is kept (not hidden like minecraft) but hue-rotate(60deg) saturate(1.4) brightness(0.85) shifts it toward portal green for cohesion.
  • Cheap identity flourish: a subtle portal-green text-shadow glow on h1/h2/h3 and .brand-name under .rick-morty.

Out of scope (deliberately)

No 3D scene, audio, or splash component — keeping the first theme PR strictly to color tokens so it lands cleanly. Heavier flourishes (Get-Schwifty splash text, portal-themed background scene à la minecraft's floating blocks) can follow as separate PRs the way minecraft did.

Test plan

  • Click the theme toggle in the header repeatedly — order is light → dark → minecraft → rick-morty → light.
  • On rick-morty: page background is deep navy, text reads green/yellow, links/buttons take portal-green or Morty-yellow accents.
  • Inference scatter chart renders with portal-green / Morty-yellow / Rick-blue / Summer-pink overlay-run colors.
  • Switch from rick-morty to light — colors revert cleanly without leftover dark surfaces.
  • Export a chart PNG while in rick-morty — watermark bar is dark (#1a1a2e).
  • Open the model architecture diagram — renders the dark variant.

🤖 Generated with Claude Code

@vercel
Copy link
Copy Markdown

vercel Bot commented May 3, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
inferencemax-app Ready Ready Preview, Comment May 4, 2026 5:19am

Request Review

…ro song

Adds a fourth theme alongside light / dark / minecraft, cycling in the
header toggle as light → dark → minecraft → rick-morty. Builds on top
of the minecraft theme's pattern (theme-class observer, lazy-loaded
audio iframe, music toggle in the header).

Visuals
- Color tokens anchored on the canonical Rick and Morty palette: portal
  green primary, Morty yellow secondary, Rick lab-coat blue accent,
  deep-space dark background, pale yellow-green foreground. 8-slot
  overlay-run palette is character-coded (portal, Morty, Rick, Summer,
  schwifty, Jerry, Beth, Birdperson).
- All existing dark-equivalence checks (vendor colors, architecture
  diagrams, watermark export) treat rick-morty as a dark theme so the
  site stays cohesive when switching.
- circuit background is kept (unlike minecraft, which hides it) but
  hue-rotated toward portal green so it sits coherently on the deep-
  space dark surface.
- Five static character cutouts scattered around the viewport corners
  (Rick smile, Pickle Rick, Rick & Morty Inc, dance, portal). pickle-
  rick.png was alpha-cut locally — its source had a baked-in
  checkerboard rendered in pixels, which flood-fill from the borders
  fixed.
- One-shot Jerry top→bottom fall GIF on each theme activation. Mirrors
  the Ender Dragon fly-across in PR #297 but oriented vertically; keyed
  on a nonce so off→on transitions replay the animation. Respects
  prefers-reduced-motion.

Audio
- Streams Adult Swim's official "Seasons 1-3 Opening Credits" upload
  (DLaqu2QJYPY) via an invisible 1×1 YT iframe, looped at volume 35.
  Mirrors minecraft-background.tsx exactly: autoplay nudge on first
  user gesture, sessionStorage position save so playback survives
  in-app navigations, retry interval when the user has already
  interacted with the page.
- Header music toggle (lucide Music icon, crossed out when muted) only
  appears in the rick-morty theme. localStorage `rick-morty-music`
  defaults on. PostHog event `rick_morty_music_toggled`.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@functionstackx functionstackx force-pushed the feat/rick-morty-theme branch from fd5c997 to d0eb9df Compare May 4, 2026 05:18
adibarra added a commit that referenced this pull request May 4, 2026
…oss (#297)

* feat(theme): scatter Minecraft assets + Ender Dragon fly-across on minecraft theme

Adds a `MinecraftDecorations` client component that renders six iconic
Minecraft assets at fixed corner positions when the minecraft theme is
active, plus a one-shot Ender Dragon GIF that flies right-to-left across
the viewport every time the theme is activated:

  - top-left:    Creeper mob render
  - top-right:   Diamond pickaxe (rotated 35°, mining vibe)
  - mid-right:   Technoblade body render (RIP — pig-king skin)
  - bottom-left: Grass block
  - bottom-mid:  TNT
  - bottom-right: Diamond
  - top stripe:  Ender Dragon, fly-across once per activation

Mirrors the `RickMortyDecorations` pattern from PR #295: a
MutationObserver on `document.documentElement` toggles the cast live
with the mode picker, all images are `pointer-events: none` at z-0, and
the static cutouts are hidden below `lg` so narrow chart layouts stay
clean.

The dragon uses a `dragonNonce` React key so its `<img>` remounts on
every off→on theme transition, restarting the CSS animation. Keyframe
`mc-dragon-flyacross` lives in globals.css next to the existing
splash-bounce animation, takes ~9s, and respects
`prefers-reduced-motion: reduce`.

Asset provenance: minecraft.wiki (CC BY-NC-SA 3.0) for blocks/items
and the Ender Dragon GIF; mc-heads.net body render for the Technoblade
skin (decorative use).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(theme): drop Technoblade cutout from minecraft decorations

Removes the mid-right Technoblade body render and its asset. Six
remaining decorations (creeper, diamond pickaxe, grass block, TNT,
diamond, dragon) keep the spread of the cast unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(theme): swap creeper for zombified piglin facing inward

Replace the top-left creeper with a Zombified Piglin sprite from the
Minecraft Wiki. The canonical render faces left (sword arm out the
viewer's left), which on a top-left anchor would point AWAY from the
chart. Mirror it with `scaleX(-1)` so the sword-arm faces toward the
middle of the viewport, where the user's attention actually is.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(theme): add CC BY-NC-SA 3.0 attribution for minecraft assets

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: adibarra <93070681+adibarra@users.noreply.github.com>
lalithsagar10 pushed a commit to lalithsagar10/InferenceX-app that referenced this pull request May 5, 2026
…oss (SemiAnalysisAI#297)

* feat(theme): scatter Minecraft assets + Ender Dragon fly-across on minecraft theme

Adds a `MinecraftDecorations` client component that renders six iconic
Minecraft assets at fixed corner positions when the minecraft theme is
active, plus a one-shot Ender Dragon GIF that flies right-to-left across
the viewport every time the theme is activated:

  - top-left:    Creeper mob render
  - top-right:   Diamond pickaxe (rotated 35°, mining vibe)
  - mid-right:   Technoblade body render (RIP — pig-king skin)
  - bottom-left: Grass block
  - bottom-mid:  TNT
  - bottom-right: Diamond
  - top stripe:  Ender Dragon, fly-across once per activation

Mirrors the `RickMortyDecorations` pattern from PR SemiAnalysisAI#295: a
MutationObserver on `document.documentElement` toggles the cast live
with the mode picker, all images are `pointer-events: none` at z-0, and
the static cutouts are hidden below `lg` so narrow chart layouts stay
clean.

The dragon uses a `dragonNonce` React key so its `<img>` remounts on
every off→on theme transition, restarting the CSS animation. Keyframe
`mc-dragon-flyacross` lives in globals.css next to the existing
splash-bounce animation, takes ~9s, and respects
`prefers-reduced-motion: reduce`.

Asset provenance: minecraft.wiki (CC BY-NC-SA 3.0) for blocks/items
and the Ender Dragon GIF; mc-heads.net body render for the Technoblade
skin (decorative use).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(theme): drop Technoblade cutout from minecraft decorations

Removes the mid-right Technoblade body render and its asset. Six
remaining decorations (creeper, diamond pickaxe, grass block, TNT,
diamond, dragon) keep the spread of the cast unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(theme): swap creeper for zombified piglin facing inward

Replace the top-left creeper with a Zombified Piglin sprite from the
Minecraft Wiki. The canonical render faces left (sword arm out the
viewer's left), which on a top-left anchor would point AWAY from the
chart. Mirror it with `scaleX(-1)` so the sword-arm faces toward the
middle of the viewport, where the user's attention actually is.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(theme): add CC BY-NC-SA 3.0 attribution for minecraft assets

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: adibarra <93070681+adibarra@users.noreply.github.com>
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