feat(theme): add Rick and Morty theme#295
Draft
functionstackx wants to merge 1 commit intomasterfrom
Draft
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
6 tasks
…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>
fd5c997 to
d0eb9df
Compare
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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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):
#97ce4c#f0e14a#0bb4e4#0d1525#dceea0#e63946Overlay-run palette (8 slots, character-coded)
#97ce4c#f0e14a#0bb4e4#e89ac7#c1f762#ffb78c#b388eb#ff6e54Wiring
themes={[…, 'rick-morty']}registered inlayout.tsx.mode-toggle.tsx: lucideAtom(portal-gun / mad-scientist vibe), positioned after the minecraft Pickaxe in the cycle.useThemeColors,chart-utils.generateVendorColors,GPUGraphcolor generator,ModelArchitectureDiagramrendering,useChartExportwatermark bar) now treatrick-mortyas a dark theme so vendor colors, architecture diagrams, and exported watermarks all match the dark base.circuit-bgis kept (not hidden like minecraft) buthue-rotate(60deg) saturate(1.4) brightness(0.85)shifts it toward portal green for cohesion.text-shadowglow onh1/h2/h3and.brand-nameunder.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
#1a1a2e).🤖 Generated with Claude Code