fchym

fchym

Electrelic

たかなろぐ a.k.a. Yokogoya

関勝寿

MotionViz

MotionViz

@Motion_Viz

Feb 28

Replying to @Idrawcircle5

# Glass Box: Neural ## Product Overview **The Pitch:** Glass Box transforms black-box AI curation into a tangible, bioluminescent neural network. Users do not toggle settings; they guide a living thought process, physically pruning and nurturing connections to shape their content feed. **For:** Power users and information architects who demand transparency and tactile control over the algorithms dictating their digital consumption. **Device:** Desktop (optimized for mouse interaction and WebGL rendering) **Design Direction:** **Bioluminescent Deep Sea.** Dark, viscous backgrounds where logic nodes float like jellyfish or synapses. High contrast neon accents, heavy use of backdrop-blur, variable opacity, and physics-based fluid motion. **Inspired by:** *Obsidian (Graph View)*, *Cyberpunk 2077 (Netrunning UI)*, *Minority Report (Precog Interface)* --- ## Screens - **Screen 1: The Neural Core:** Main dashboard. A live, breathing force-directed graph of current content interests. - **Screen 2: Node Inspector:** Focused detail view overlay when a specific node (topic) is selected. - **Screen 3: The Pruning Mode:** High-contrast interaction state for severing or reducing connection weights. - **Screen 4: Feed Preview:** A split-view pane showing real-time content results based on current network configuration. - **Screen 5: History / Evolution:** A timeline view visualizing how the network has morphed over time. --- ## Key Flows **Flow 1: Dampening a Topic** 1. User sees "Politics" node pulsing violently (high confidence) in the center. 2. User clicks and holds the connection thread between "User" and "Politics". 3. User performs a "pinch" gesture (drag mouse inwards/scroll wheel down). 4. The connection thins and dims. The "Politics" node drifts to the periphery. "Design" nodes gravitate inward to fill the void. **Flow 2: discovering Origins** 1. User spots a "Crypto" node they didn't ask for. 2. Hovering over "Crypto" illuminates the path back to the source node "Tech News". 3. User right-clicks "Crypto" -> selects "Sever". 4. The node dissolves into particles; the network elastically snaps back into a new equilibrium. --- Design System ## Color Palette - **Background:** `#050508` - Near-black, "Deep Void" - **Surface:** `#0F0F16` - Glass panels, 30% opacity, `backdrop-filter: blur(20px)` - **Primary Node:** `#FFFFFF` - Core anchor (User), glowing white - **High Confidence:** `#00FF94` - Neon Spring Green (Strong pulse) - **Medium Confidence:** `#5EBCFF` - Electric Blue - **Low Confidence/Dying:** `#5B5B6E` - Muted Slate (fading out) - **Danger/Sever:** `#FF2A6D` - Radical Red ## Typography Fonts chosen for a technical, yet futuristic biological feel. - **Headings:** *Space Mono*, 700, 24px (uppercase, tracking 2px) - **Data/Labels:** *JetBrains Mono*, 400, 12px (tabular nums) - **Body:** *Satoshi*, 400, 15px (clean sans for readability in panels) **Style Notes:** - **Neumorphism 2.0:** Glassmorphism mixed with glowing borders. - **Glow:** `box-shadow: 0 0 15px var(--color-accent)`. - **Motion:** All transitions use spring physics (stiff: 120, damping: 14), no linear eases. ## Design Tokens ```css :root { --bg-deep: #050508; --glass-surface: rgba(15, 15, 22, 0.4); --glass-border: rgba(255, 255, 255, 0.1); --neon-green: #00FF94; --neon-blue: #5EBCFF; --neon-red: #FF2A6D; --font-mono: 'Space Mono', monospace; --font-sans: 'Satoshi', sans-serif; --blur-heavy: blur(24px); --ease-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55); } ``` --- Screen Specifications ### Screen 1: The Neural Core **Purpose:** The "Home" screen. Provides an immediate, visual overview of the algorithm's current state. **Layout:** Full-screen canvas. No fixed headers. Floating HUD elements in corners. **Key Elements:** - **The Graph (Center):** WebGL-rendered force-directed graph. - **Central Node:** "You". Fixed position, white glow. - **Satellite Nodes:** Topics (e.g., "Tech", "Art"). Size = Importance. Distance = Relevance. - **Edges:** Lines connecting nodes. Brightness = Confidence. Animation speed = Activity volume. - **HUD - Bottom Left:** `Stats Module`. - 3 lines of monospaced text: "Nodes: 42 | Active Paths: 12 | Entropy: 84%". - 12px font, 50% opacity. - **HUD - Top Right:** `Search / Add`. - Pill-shaped input. `background: transparent`, `border: 1px solid #333`. - Text: "Inject Topic..." **States:** - **Idle:** Nodes gently bob (Perlin noise movement). - **Active:** Edges pulse with packets of light moving from Center to Satellites. **Interactions:** - **Drag Node:** Moves the node. Upon release, physics springs it back to a calculated position based on edge weights. - **Scroll Wheel:** Zoom in/out of the infinite canvas. --- ### Screen 2: Node Inspector **Purpose:** Precise data readout for a single selected topic. **Layout:** Slide-over glass panel from the right edge (30% width). **Key Elements:** - **Glass Panel:** `#0F0F16` background, `backdrop-filter: blur(40px)`, `border-left: 1px solid rgba(255,255,255,0.1)`. - **Header:** Node Title (e.g., "Architecture"). 32px Space Mono. - **Confidence Meter:** A circular SVG chart. - `stroke-dasharray` controlled by value. - Color: `#00FF94`. - Label: "Confidence: 94%". - **Source List:** Vertical list of items informing this node. - "Liked: 'Brutalist House' (2d ago)" - "Shared: 'Zaha Hadid Retrospective'" - Font: JetBrains Mono, 12px, `#888`. **Interactions:** - **Click 'Lock':** Pins the node's importance (prevents AI from downgrading it). Adds a padlock icon to the graph node. --- ### Screen 3: The Pruning Mode **Purpose:** Editing the weights of connections. The "Negotiation" phase. **Layout:** Visual shift in the main graph. Background dims to pure black (`#000000`). Nodes desaturate. Edges become the focus. **Key Elements:** - **Edges (Enhanced):** Lines become thicker (3px). Handles appear at midpoints. - **Cursor:** Changes to a precision crosshair. - **Weight Slider (Floating):** Appears near cursor when hovering an edge. - Vertical range slider. - Top: "Amplify" (Green). - Bottom: "Dampen" (Red). **Interactions:** - **Drag Edge Handle:** - Drag **Away** from center: Lengthens edge (reduces relevance). Physics engine pushes node away. - Drag **Toward** center: Shortens edge (increases relevance). Node creates gravitational pull on neighbors. - **Right Click Edge:** Context menu -> "Sever Connection". - Visual: Line snaps with a flash of red light. --- ### Screen 4: Feed Preview **Purpose:** Verifying the output. "If I change the graph, what do I see?" **Layout:** Split screen. Left 60%: Graph. Right 40%: Feed. **Key Elements:** - **Feed Container:** Vertical scroll area. Glass morphism background. - **Content Cards:** Minimalist. - Image (16:9), Title (Satoshi Bold), Source (Mono). - **Why-Label:** Small pill on card: "Because: [Node Name]". - **Hover Effect:** Hovering a card highlights the corresponding Node on the graph (Left side). **Interactions:** - **Real-time Sync:** Dragging a node on the left immediately re-orders the list on the right. --- ### Screen 5: History / Evolution **Purpose:** Understanding how the AI has changed over time. **Layout:** Bottom timeline overlay. **Key Elements:** - **Scrubber:** Horizontal track along bottom viewport. - Ticks represent "Pruning Events" or "Major Ingests". - **Ghost Nodes:** When scrubbing to the past, the graph shows "Ghost" positions of nodes (dotted outlines) vs current positions. **Interactions:** - **Click Tick:** Reverts the visual state of the graph to that timestamp. - **"Restore State" Button:** Available when viewing past states to rollback the AI logic. --- Build Guide **Stack:** HTML, Tailwind CSS v3, **Three.js / React-Force-Graph** (Critical for physics). **Build Order:** 1. **Screen 1 (The Neural Core):** This is the MVP. Establish the `Three.js` canvas, the node rendering shader, and the physics engine (d3-force or ngraph). Without the "feel" of the living network, the UI fails. 2. **Screen 3 (Pruning):** Implement the interaction logic. The "pinch" gesture requires mapping mouse deltas to edge link distances in the physics simulation. 3. **Screen 2 (Inspector):** Standard DOM overlay on top of the WebGL canvas. Tailwind implementation. 4. **Screen 4 (Feed):** Connecting the graph state to a dummy JSON feed to demonstrate sorting logic.

264