Skip to content

feat: Retro CRT arcade theme for Wordle#8

Open
devin-ai-integration[bot] wants to merge 1 commit into
mainfrom
devin/1776436749-retro-theme
Open

feat: Retro CRT arcade theme for Wordle#8
devin-ai-integration[bot] wants to merge 1 commit into
mainfrom
devin/1776436749-retro-theme

Conversation

@devin-ai-integration
Copy link
Copy Markdown

@devin-ai-integration devin-ai-integration Bot commented Apr 17, 2026

Summary

Complete visual overhaul replacing the modern Wordle design with a retro CRT arcade aesthetic. Changes are purely CSS/SCSS with one minor JSX tweak (adding a ▶ character to the header title).

Key visual changes:

  • Font: Swapped Baloo 2 / Poppins for Press Start 2P (Google Fonts pixel font)
  • Color palette: Neon green (#00ff41) on near-black (#0a0a0a) CRT-monitor style
  • CRT effects: Scanline overlay (body::before, z-index 9999) and edge vignette (body::after, z-index 9998) via pseudo-elements with pointer-events: none
  • Geometry: All border-radius values set to 0 for a pixelated/blocky feel; cells and keys use solid 2px green borders
  • Glow effects: text-shadow and box-shadow neon glow on title, cells, keys, and buttons
  • Header: Flickering title animation (titleFlicker keyframe)
  • Accent colors: Magenta (#ff00ff) share button, cyan (#00ffff) stat bars, amber (#d4a017) for "present" status
  • High contrast mode: Changed from cyan/orange to pink/cyan

Review & Testing Checklist for Human

  • Run locally and visually verify the retro theme — no screenshots are included in this PR. Start the dev server (npm start) and check the grid, keyboard, all three modals (info, stats, settings), and alert toasts
  • Light/dark mode toggle is now a no-op — the default root CSS variables and the [data-theme='dark'] block are identical. Verify this is acceptable or if the light theme should offer a different retro palette
  • Readability of pixel font at small sizes — font sizes were reduced significantly (e.g., 0.45rem for labels, 0.5rem for descriptions). Check on mobile viewports (≤480px) that text is still legible
  • High contrast mode accessibility — colors changed from #06b6d4/#f97316 (cyan/orange) to #ff6ec7/#00ffff (pink/cyan). Confirm these still provide sufficient contrast for users with color vision deficiencies
  • CRT scanline z-index (9999) layering — the scanline overlay renders above modals (z-index 500) and alerts (z-index 1000). Verify modals are still visually clear through the scanline effect

Notes

  • Many new colors are hardcoded rather than using CSS variables (e.g., hover states, glow values). Future theme work may want to extract these.
  • The old fonts (Baloo 2, Poppins) are fully removed from index.html. If Press Start 2P fails to load from Google Fonts, the fallback is generic monospace.
  • Cell reveal animations now also transition border-color alongside background-color, and correct cells get an additional box-shadow glow at the end of the animation.

Link to Devin session: https://app.devin.ai/sessions/c25ae88fdd7840aab7de963ba5b75242
Requested by: @matthewguerra-cog


Open with Devin

- Replace fonts with Press Start 2P pixel font
- CRT scanline overlay and vignette effects
- Neon green on black color scheme
- Pixel-perfect square borders (no border-radius)
- Glowing text shadows and neon box shadows
- Arcade-style header with flicker animation
- Retro keyboard with hover glow effects
- Terminal-style modals with green border glow
- Magenta share button with neon effects
- Cyan stat bars for retro feel
- Retro toggle switches with pixel borders

Co-Authored-By: Matthew Guerra <matthew.guerra@cognition.ai>
@devin-ai-integration
Copy link
Copy Markdown
Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

Copy link
Copy Markdown
Author

@devin-ai-integration devin-ai-integration Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 4 additional findings.

Open in Devin Review

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