|
| 1 | +Websites should be **fun**. While optimizing performance and fixing bugs is satisfying, sometimes you just want to flip the table -or in this case-, the entire viewport. |
| 2 | + |
| 3 | +Today, I'm excited to introduce a suite of new **Visual Modes** to Fezcodex. These are persistent, purely aesthetic toggles that let you experience the site in a completely different light (or lack thereof). |
| 4 | + |
| 5 | +## The New Modes |
| 6 | + |
| 7 | +### 1. Invert Colors (The Upside Down) |
| 8 | +Ever wondered what the site looks like in negative? This mode inverts all colors but cleverly rotates the hue by 180 degrees. This prevents photos from looking like scary X-rays and instead creates a cool, alternative color palette. |
| 9 | + |
| 10 | +### 2. Retro Mode (Cyberpunk 2077) |
| 11 | +Feeling nostalgic? Enable Retro Mode to overlay a CRT scanline effect and chromatic aberration (that red/blue text split). It gives the entire UI a gritty, 80s sci-fi terminal vibe. |
| 12 | + |
| 13 | +### 3. Party Mode (RGB Everywhere) |
| 14 | +Boots and cats and boots and cats. This mode continuously cycles the screen's hue through the entire rainbow. Warning: It's colorful. Very colorful. |
| 15 | + |
| 16 | +### 4. Mirror Mode (Through the Looking Glass) |
| 17 | +For those who want a challenge. This flips the entire website horizontally. Text is backwards, layouts are reversed, and your mouse muscle memory will be thoroughly confused. Good luck navigating! |
| 18 | + |
| 19 | +### 5. Noir Mode (Dramatic Effect) |
| 20 | +It was a dark and stormy night... This mode applies a high-contrast grayscale filter, turning the site into a scene from a classic detective film. |
| 21 | + |
| 22 | +## How to Access Them |
| 23 | + |
| 24 | +You can unlock these modes in two ways: |
| 25 | + |
| 26 | +### 1. The Command Palette (For the Power User) |
| 27 | +Press `Alt + K` (or click the "Commands" button in the sidebar) to open the Command Palette. Then, simply type: |
| 28 | +* `Toggle Invert Colors` |
| 29 | +* `Toggle Retro Mode` |
| 30 | +* `Party Mode` |
| 31 | +* `Toggle Mirror Mode` |
| 32 | +* `Toggle Noir Mode` |
| 33 | +* ...or try `Do a Barrel Roll` for a quick spin! |
| 34 | + |
| 35 | +### 2. The Settings Page (For the Clicker) |
| 36 | +Head over to the [Settings page](/#/settings) (accessible from the Sidebar). Scroll down to the new **Visual Effects** section, where you'll find toggle switches for all persistent modes. |
| 37 | + |
| 38 | +## Under the Hood |
| 39 | + |
| 40 | +Implementing these was a fun exercise in CSS filters and React context. |
| 41 | +* **Persistence:** We use a custom `usePersistentState` hook (wrapper around `localStorage`) to remember your choices, so your Retro Mode stays on even after you refresh. |
| 42 | +* **CSS Magic:** Most effects use `backdrop-filter` on a fixed pseudo-element (`body::after`). This was crucial to ensure that `position: fixed` elements (like the Sidebar) didn't break or scroll away when the filters were applied. |
| 43 | +* **Global Context:** A new `VisualSettingsContext` manages the state application-wide, ensuring that the Settings page and Command Palette stay in sync. |
| 44 | + |
| 45 | +Go ahead, break the UI. It's a feature, not a bug. |
0 commit comments