feat: Symbol Flow

fezcode · fezcode · commit 800eb8ba45c5 · 2025-12-20T03:58:44.000+03:00
diff --git a/public/apps/apps.json b/public/apps/apps.json
@@ -319,15 +319,7 @@
         "description": "Blend background environments to create your ideal focus space.",
         "icon": "SpeakerHighIcon",
         "created_at": "2025-12-20T14:00:00+03:00"
-      }
-    ]
-  },
-  "Generators": {
-    "name": "Generators",
-    "description": "Tools for generating various types of data and content.",
-    "icon": "MagicWandIcon",
-    "order": 3,
-    "apps": [
+      },
       {
         "slug": "poster-loom",
         "to": "/apps/poster-loom",
@@ -338,14 +330,21 @@
         "pinned_order": 23
       },
       {
-        "slug": "blend-lab",
-        "to": "/apps/blend-lab",
-        "title": "Blend Lab",
-        "description": "Create abstract color fields with noise, blur, and custom typography.",
-        "icon": "SelectionIcon",
-        "created_at": "2025-12-20T15:00:00+03:00",
-        "pinned_order": 21
-      },
+        "slug": "symbol-flow",
+        "to": "/apps/symbol-flow",
+        "title": "Symbol Flow",
+        "description": "Generative stream visualizer using technical symbol protocols and procedural noise fields.",
+        "icon": "WindIcon",
+        "created_at": "2025-12-20T18:00:00+03:00"
+      }
+    ]
+  },
+  "Generators": {
+    "name": "Generators",
+    "description": "Tools for generating various types of data and content.",
+    "icon": "MagicWandIcon",
+    "order": 3,
+    "apps": [
       {
         "slug": "fractal-flora",
         "to": "/apps/fractal-flora",
@@ -438,6 +437,15 @@
         "icon": "LockKeyIcon",
         "created_at": "2025-12-20T12:00:00+03:00"
       },
+      {
+        "slug": "blend-lab",
+        "to": "/apps/blend-lab",
+        "title": "Blend Lab",
+        "description": "Create abstract color fields with noise, blur, and custom typography.",
+        "icon": "SelectionIcon",
+        "created_at": "2025-12-20T15:00:00+03:00",
+        "pinned_order": 21
+      },
       {
         "slug": "cron-job-generator",
         "to": "/apps/cron-job-generator",
diff --git a/src/components/AnimatedRoutes.js b/src/components/AnimatedRoutes.js
@@ -144,6 +144,7 @@ const TaskGridPage = lazy(() => import('../pages/apps/TaskGridPage'));
 const BlendLabPage = lazy(() => import('../pages/apps/BlendLabPage'));
 const AssetStudioPage = lazy(() => import('../pages/apps/AssetStudioPage'));
 const PosterLoomPage = lazy(() => import('../pages/apps/PosterLoomPage'));
+const SymbolFlowPage = lazy(() => import('../pages/apps/SymbolFlowPage'));
 const RoadmapViewerPage = lazy(() => import('../pages/roadmap/FezzillaPage'));
 const RoadmapItemDetailPage = lazy(
   () => import('../pages/roadmap/RoadmapItemDetailPage'),
@@ -1794,6 +1795,22 @@ const AnimatedRoutes = ({
             </motion.div>
           }
         />
+        <Route
+          path="/apps/symbol-flow"
+          element={
+            <motion.div
+              initial="initial"
+              animate="in"
+              exit="out"
+              variants={pageVariants}
+              transition={pageTransition}
+            >
+              <Suspense fallback={<Loading />}>
+                <SymbolFlowPage />
+              </Suspense>
+            </motion.div>
+          }
+        />
         <Route
           path="/apps/lorem-ipsum-generator"
           element={
@@ -1989,17 +2006,33 @@ const AnimatedRoutes = ({
         <Route
           path="/apps/topographic-maps"
           element={
-            <Suspense fallback={<Loading />}>
-              <TopographicMapPage />
-            </Suspense>
+            <motion.div
+              initial="initial"
+              animate="in"
+              exit="out"
+              variants={pageVariants}
+              transition={pageTransition}
+            >
+              <Suspense fallback={<Loading />}>
+                <TopographicMapPage />
+              </Suspense>
+            </motion.div>
           }
         />
         <Route
           path="/apps/rotary-phone"
           element={
-            <Suspense fallback={<Loading />}>
-              <RotaryPhonePage />
-            </Suspense>
+            <motion.div
+              initial="initial"
+              animate="in"
+              exit="out"
+              variants={pageVariants}
+              transition={pageTransition}
+            >
+              <Suspense fallback={<Loading />}>
+                <RotaryPhonePage />
+              </Suspense>
+            </motion.div>
           }
         />
         <Route
diff --git a/src/pages/apps/SymbolFlowPage.js b/src/pages/apps/SymbolFlowPage.js
