flashist · ChrisLally · Jan 30, 2026
diff --git a/src/modern-pixi8/.gitignore b/src/modern-pixi8/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+dist/
+package-lock.json
diff --git a/src/modern-pixi8/README.md b/src/modern-pixi8/README.md
@@ -0,0 +1,56 @@
+# PixiJS v8 + FConsole Foundation Demo
+
+A high-performance, modern graphics demonstration showcasing the **Flashist Foundation** stack. This project serves as a reference implementation for **PixiJS v8** integrated with **FConsole** for real-time debugging and performance monitoring.
+
+## 🚀 Key Features
+
+- **Native PixiJS v8**: Built from the ground up to utilize the latest PixiJS v8 features, including the new rendering pipeline (WebGPU/WebGL).
+- **Physics-Based Interactivity**: A custom particle simulation using vector physics for fluid, organic movement.
+- **Neon Bloom Aesthetics**: Leveraging PixiJS filters and additive blending to create a premium, "next-gen" visual style.
+- **FConsole Integration (Preview)**: Pre-configured for real-time debugging. Note: Full runtime integration is pending an update to the `@flashist/fconsole` package for PixiJS v8 support.
+- **Modern Tooling**: Powered by **Vite** and **TypeScript** for the fastest possible development cycle and type-safe graphics code.
+
+## 🎮 Interactions
+
+This demo is designed to be highly interactive:
+- **Move Cursor**: Generates a gravitational pull that attracts the particle field.
+- **Click/Tap**: Triggers a high-velocity particle "burst" at the cursor location.
+- **Hover Boxes**: The interactive neon containers react to focus and mouse proximity.
+- **Backquote (`)**: Toggle the **FConsole** overlay (Note: functionality currently awaiting library update).
+
+## 🛠 Tech Stack
+
+- **Core Engine**: [PixiJS v8](https://pixijs.com/)
+- **Debugging**: [@flashist/fconsole](https://github.com/flashist/fconsole)
+- **Framework**: [@flashist/appframework](https://github.com/flashist/appframework)
+- **Build System**: [Vite](https://vitejs.dev/)
+- **Language**: [TypeScript](https://www.typescriptlang.org/)
+
+## 📦 Getting Started
+
+### 1. Installation
+Navigate to this project directory:
+```bash
+cd fexamples/src/modern-pixi8
+```
+Then install the dependencies:
+```bash
+npm install
+```
+
+### 2. Development
+Start the local development server:
+```bash
+npm run dev
+```
+The application will be available at `http://localhost:3000`.
+
+### 3. Build & Production
+To generate a production-ready bundle:
+```bash
+npm run build
+```
+
+---
+
+*Part of the [Flashist Ecosystem](https://github.com/flashist).*
diff --git a/src/modern-pixi8/index.html b/src/modern-pixi8/index.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FConsole: Modern Pixi.js v8 Demo</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            background: #000;
+        }
+
+        canvas {
+            display: block;
+        }
+    </style>
+</head>
+
+<body>
+    <script type="module" src="/src/main.ts"></script>
+
+    <!-- UI Overlay -->
+    <div class="ui-overlay">
+        <h1>Modern PixiJS v8 Foundation</h1>
+        <p class="subtitle">Next-Gen Tooling & Technical Implementation Preview of the Flashist Ecosystem</p>
+
+        <p class="instruction"
+            style="border-top: none; padding-top: 0; margin-bottom: 16px; font-size: 13px; color: rgba(255, 255, 255, 0.8);">
+            <strong>MOVE</strong> to attract • <strong>CLICK</strong> to burst • <strong>HOVER</strong> to react
+        </p>
+
+        <div class="repo-links">
+            <a href="https://github.com/flashist/fconsole" target="_blank">@flashist/fconsole</a>
+            <span class="divider">•</span>
+            <a href="https://github.com/flashist/appframework" target="_blank">@flashist/appframework</a>
+            <span class="divider">•</span>
+            <a href="https://github.com/flashist/flibs" target="_blank">@flashist/flibs</a>
+        </div>
+
+        <div class="repo-links">
+            <a href="https://github.com/flashist/" target="_blank">Mark Dolbyrev</a>
+            <span class="divider">•</span>
+            <a href="https://github.com/flashist/" target="_blank">flashist.github.io</a>
+        </div>
+        <p class="instruction">
+            <strong>Vite</strong> • <strong>TypeScript</strong> • <strong>Native v8 WebGL/WebGPU</strong>
+        </p><br>
+    </div>
+
+    <style>
+        .ui-overlay {
+            position: absolute;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+
+            background: rgba(20, 20, 35, 0.6);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 16px;
+
+            padding: 20px 40px;
+            text-align: center;
+            color: #ffffff;
+            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+            pointer-events: auto;
+
+            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+            transition: opacity 0.3s ease;
+            z-index: 100;
+        }
+
+        .ui-overlay:hover {
+            background: rgba(20, 20, 35, 0.8);
+        }
+
+        h1 {
+            margin: 0 0 4px 0;
+            font-size: 20px;
+            font-weight: 600;
+            letter-spacing: 0.5px;
+        }
+
+        .subtitle {
+            margin: 0 0 16px 0;
+            font-size: 13px;
+            color: rgba(255, 255, 255, 0.6);
+        }
+
+        .repo-links {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 12px;
+            font-size: 13px;
+        }
+
+        .repo-links a {
+            color: #4da6ff;
+            text-decoration: none;
+            font-weight: 500;
+            transition: color 0.2s;
+        }
+
+        .repo-links a:hover {
+            color: #80c1ff;
+            text-decoration: underline;
+        }
+
+        .divider {
+            color: rgba(255, 255, 255, 0.2);
+        }
+
+        .instruction {
+            margin: 0;
+            font-size: 11px;
+            color: rgba(255, 255, 255, 0.4);
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            padding-top: 12px;
+        }
+
+        strong {
+            color: #fff;
+        }
+    </style>
+</body>
+
+</html>
diff --git a/src/modern-pixi8/package.json b/src/modern-pixi8/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "modern-pixi8-demo",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "pixi.js": "^8.15.0",
+    "@flashist/fconsole": "^0.0.102",
+    "@flashist/flibs": "^0.0.385",
+    "gsap": "^3.12.0",
+    "howler": "^2.2.0",
+    "eventemitter3": "^5.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.3",
+    "vite": "^5.0.0"
+  }
+}