feat: Glitch Mode.

fezcode · fezcode · commit c5389fb68d66 · 2025-11-28T22:52:50.000+03:00
diff --git a/src/components/CommandPalette.js b/src/components/CommandPalette.js
@@ -63,7 +63,8 @@ const CommandPalette = ({isOpen, setIsOpen, openGenericModal, toggleDigitalRain}
     isGameboy, toggleGameboy,
     isComic, toggleComic,
     isSketchbook, toggleSketchbook,
-    isHellenic, toggleHellenic
+    isHellenic, toggleHellenic,
+    isGlitch, toggleGlitch
   } = useVisualSettings();
 
   const filteredItems = filterItems(items, searchTerm);
@@ -286,6 +287,14 @@ const CommandPalette = ({isOpen, setIsOpen, openGenericModal, toggleDigitalRain}
             duration: 2000
           });
           break;
+        case 'toggleGlitchMode':
+          toggleGlitch();
+          addToast({
+            title: !isGlitch ? 'Glitch Mode On' : 'Glitch Mode Off',
+            message: !isGlitch ? 'System corruption detected.' : 'Signal stabilized.',
+            duration: 2000
+          });
+          break;
         case 'showTime': {
           openGenericModal('Current Time', <LiveClock/>);
           break;
diff --git a/src/context/VisualSettingsContext.js b/src/context/VisualSettingsContext.js
@@ -22,6 +22,7 @@ export const VisualSettingsProvider = ({children}) => {
   const [isComic, setIsComic] = usePersistentState('is-comic', false);
   const [isSketchbook, setIsSketchbook] = usePersistentState('is-sketchbook', false);
   const [isHellenic, setIsHellenic] = usePersistentState('is-hellenic', false);
+  const [isGlitch, setIsGlitch] = usePersistentState('is-glitch', false);
 
   useEffect(() => {
     if (isInverted) {
@@ -135,6 +136,14 @@ export const VisualSettingsProvider = ({children}) => {
     }
   }, [isHellenic]);
 
+  useEffect(() => {
+    if (isGlitch) {
+      document.body.classList.add('glitch-mode');
+    } else {
+      document.body.classList.remove('glitch-mode');
+    }
+  }, [isGlitch]);
+
   const toggleInvert = () => setIsInverted(prev => !prev);
   const toggleRetro = () => setIsRetro(prev => !prev);
   const toggleParty = () => setIsParty(prev => !prev);
@@ -149,6 +158,7 @@ export const VisualSettingsProvider = ({children}) => {
   const toggleComic = () => setIsComic(prev => !prev);
   const toggleSketchbook = () => setIsSketchbook(prev => !prev);
   const toggleHellenic = () => setIsHellenic(prev => !prev);
+  const toggleGlitch = () => setIsGlitch(prev => !prev);
 
   return (
     <VisualSettingsContext.Provider value={{
@@ -165,7 +175,8 @@ export const VisualSettingsProvider = ({children}) => {
       isGameboy, toggleGameboy,
       isComic, toggleComic,
       isSketchbook, toggleSketchbook,
-      isHellenic, toggleHellenic
+      isHellenic, toggleHellenic,
+      isGlitch, toggleGlitch
     }}>
       {children}
     </VisualSettingsContext.Provider>);
diff --git a/src/hooks/useSearchableData.js b/src/hooks/useSearchableData.js
@@ -118,6 +118,7 @@ const useSearchableData = () => {
           { title: 'Toggle Comic Book Mode', type: 'command', commandId: 'toggleComicMode' },
           { title: 'Toggle Sketchbook Mode', type: 'command', commandId: 'toggleSketchbookMode' },
           { title: 'Toggle Hellenic Mode', type: 'command', commandId: 'toggleHellenicMode' },
+          { title: 'Toggle Dystopian Glitch Mode', type: 'command', commandId: 'toggleGlitchMode' },
         ];
 
         setItems([...staticRoutes, ...customCommands, ...allPosts, ...allProjects, ...allLogs, ...allApps]);
diff --git a/src/index.css b/src/index.css
@@ -557,3 +557,60 @@ body.hellenic-mode h3 {
   letter-spacing: 2px;
   text-shadow: 1px 1px 0 #d4af37;
 }
+
+/* Dystopian Glitch Mode */
+body.glitch-mode {
+  background-color: #0a0a0a !important;
+  color: #dcdcdc !important;
+  font-family: 'VT323', 'Courier New', monospace !important;
+}
+
+body.glitch-mode::before {
+  content: " ";
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: repeating-linear-gradient(transparent 0px, transparent 2px, #222 3px);
+  pointer-events: none;
+  z-index: 1000;
+  opacity: 0.3;
+}
+
+body.glitch-mode * {
+  border-color: #333 !important;
+  box-shadow: -2px 0 0 rgba(255,0,0,.5), 2px 0 0 rgba(0,255,255,.5);
+}
+
+body.glitch-mode a {
+  color: #ff003c !important;
+  text-shadow: 2px 0 #00fff9, -2px 0 #ff00c1;
+  text-decoration: line-through;
+}
+
+body.glitch-mode a:hover {
+  text-decoration: none;
+  background: #ff003c;
+  color: #fff !important;
+}
+
+body.glitch-mode img {
+  filter: grayscale(100%) contrast(2);
+  mix-blend-mode: hard-light;
+  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
+}
+
+@keyframes glitch-anim {
+  0% { transform: translate(0) }
+  20% { transform: translate(-2px, 2px) }
+  40% { transform: translate(-2px, -2px) }
+  60% { transform: translate(2px, 2px) }
+  80% { transform: translate(2px, -2px) }
+  100% { transform: translate(0) }
+}
+
+body.glitch-mode h1, body.glitch-mode h2, body.glitch-mode h3 {
+  animation: glitch-anim 2s infinite;
+}
diff --git a/src/pages/CommandsPage.js b/src/pages/CommandsPage.js
@@ -61,6 +61,7 @@ const commandsData = [
       { title: "Toggle Comic Book Mode", description: "Switch to a vibrant pop-art comic style. (Easter Egg)", color: "red" },
       { title: "Toggle Sketchbook Mode", description: "Switch to a hand-drawn sketchbook style. (Easter Egg)", color: "stone" },
       { title: "Toggle Hellenic Mode", description: "Switch to a classical Greek architecture style. (Easter Egg)", color: "amber" },
+      { title: "Toggle Dystopian Glitch Mode", description: "Switch to a corrupted digital data style. (Easter Egg)", color: "slate" },
     ]
   },
   {
diff --git a/src/pages/SettingsPage.js b/src/pages/SettingsPage.js
@@ -47,7 +47,8 @@ const SettingsPage = () => {
     isGameboy, toggleGameboy,
     isComic, toggleComic,
     isSketchbook, toggleSketchbook,
-    isHellenic, toggleHellenic
+    isHellenic, toggleHellenic,
+    isGlitch, toggleGlitch
   } = useVisualSettings();
 
   const {addToast} = useToast();
@@ -273,6 +274,13 @@ const SettingsPage = () => {
                   checked={isHellenic}
                   onChange={toggleHellenic}
                 />
+                <div className="mb-4"></div>
+                <CustomToggle
+                  id="enable-glitch-mode"
+                  label="> Dystopian Glitch Mode"
+                  checked={isGlitch}
+                  onChange={toggleGlitch}
+                />
               </div>
               {/* Sidebar Stuff */}
               <h1 className="text-3xl font-arvo font-normal mb-4 text-app">

Original file line number	Diff line number	Diff line change
`@@ -61,6 +61,7 @@ const commandsData = [`
`61`	`61`	`{ title: "Toggle Comic Book Mode", description: "Switch to a vibrant pop-art comic style. (Easter Egg)", color: "red" },`
`62`	`62`	`{ title: "Toggle Sketchbook Mode", description: "Switch to a hand-drawn sketchbook style. (Easter Egg)", color: "stone" },`
`63`	`63`	`{ title: "Toggle Hellenic Mode", description: "Switch to a classical Greek architecture style. (Easter Egg)", color: "amber" },`
	`64`	`+ { title: "Toggle Dystopian Glitch Mode", description: "Switch to a corrupted digital data style. (Easter Egg)", color: "slate" },`
`64`	`65`	`]`
`65`	`66`	`},`
`66`	`67`	`{`