Fragify 🎥⚡

Automated CS2 demo parser and background cinematic renderer.

Fragify is a local desktop application (Electron + React) that parses CS2 .dem files, identifies highlights (kills/rounds/clutches) based on player nicknames, and automatically renders POV clips in premium quality (up to 4K 240fps with motion blur) in the background using a virtual display, without interrupting your main workflow.

---

🎨 Design Read & Aesthetic Guide

• Design Read: Consumer-focused gaming utility, dark-hacker/cyberpunk style language, relying on high contrast, monospace typography, and responsive micro-interactions.
• Dials Configuration:
  • DESIGN_VARIANCE: 7 (clean structured layout with neon/techno panels)
  • MOTION_INTENSITY: 8 (buttery smooth layout transitions, tactile button pushes, spring physics)
  • VISUAL_DENSITY: 5 (clean space, prominent typography, visual status steps)
• Colors:
  • Base: Background #09090b (zinc-950), Cards/Panels #18181b (zinc-900), Borders #27272a (zinc-800).
  • Accent: Primary #f59e0b (Amber-500) or #06b6d4 (Cyan-500).
• Typography:
  • Headings: Geist Display or Cabinet Grotesk (tracking-tight, high-contrast white).
  • Data/Numbers: Geist Mono or JetBrains Mono (terminal aesthetic).
• Tactile Feedback:
  • Active button states: scale-[0.98] transition-transform duration-100.
  • Status changes: Spring animated borders or soft ambient glows.

---

🛠️ Architecture & Pipeline (Local & Headless)

The application utilizes a background process to run the game without grabbing mouse or keyboard focus:

[ .dem File Input ] 
       │
       ▼
[ parser.py / js ] ──(Extract kills, rounds, ticks, players)
       │
       ▼
[ GUI Selection ] ──(User chooses player, rounds, FPS, Resolution, and Output mode)
       │
       ▼
[ Xvfb Virtual Screen ] ──(Headless display server running on :99)
       │
       ▼
[ Proton Wineprefix ] ──(Isolated environment with recording movie.cfg & HLAE)
       │
 ┌─────┴──────────────────────────────────┐
 │                                        │
 ▼ (Mode A: OBS)                          ▼ (Mode B: TGA Sequence)
[ OBS WebSocket ]                        [ HLAE mirv_streams ] ──(TGA frames + WAV)
 │                                        │
 ▼                                        ▼
[ high-bitrate MP4 ]                     [ FFMPEG blending ] ──(Frame blend for motion blur)
                                          │
                                          ▼
                                         [ clean up TGA files ]

---

📂 Project Structure

fragify/
├── package.json
├── README.md               # This project specification
├── src/
│   ├── main/               # Electron Main Process (IPC, OS/Xvfb launchers)
│   │   └── launcher.js     # Launches Xvfb, Proton, HLAE, OBS, and FFMPEG
│   ├── renderer/           # Electron Renderer Process (React + Tailwind v4)
│   │   ├── index.html
│   │   ├── index.css       # Core Tailwind & custom scrollbar/neon styles
│   │   └── App.jsx         # Main UI Router (Dashboard, Settings, Process Monitor)
│   └── shared/
│       └── utils.js
├── backend/                # Python or Node scripts for demo analysis
│   ├── parser.js           # Uses 'demofile' or 'demoparser2' to find rounds/kills
│   └── movie.cfg           # CS2 config with ultra graphics & disabled HUD
└── scripts/
    └── render_sequence.sh  # FFMPEG sequence compiler script

---

📋 Implementation Plan

Phase 1: Core CLI & Parser

• Initialize Node.js/Python environment.
• Implement .dem parser using @openskills/demoparser2 or Python equivalent.
• Write a script that inputs a demo file and player name, then outputs a JSON structure of highlights:

  {
    "player": "qwertyonek",
    "highlights": [
      {
        "round": 12,
        "kills": 5,
        "ticks": { "start": 142050, "stop": 148900 }
      }
    ]
  }

Phase 2: Headless CS2 & Proton Runner

• Script the launch of Xvfb (Virtual Framebuffer) on a custom display identifier (e.g. :99).
• Set up isolated Wineprefix and Steam Proton environment paths to launch the Windows version of CS2 offline (-insecure).
• Test the injection of HLAE (AdvancedFX) inside the Proton environment to load the custom movie.cfg.
• Verify that CS2 loads and plays the demo inside the virtual screen without crashing Vulkan (leveraging RTX 4070 on the host).

Phase 3: Recording & Rendering Engine

• Option A (OBS):
  • Implement OBS WebSocket protocol connection.
  • Write logic to start recording -> play demo -> stop recording -> fetch recorded file.
• Option B (TGA Sequence - Recommended for Ultimate Quality):
  • Write HLAE command triggers (mirv_streams record start/stop) at the exact start and end ticks.
  • Build a script using ffmpeg to:
    1. Read the TGA sequence and the WAV audio file.
    2. Resample/Blend frames (e.g., render at 240fps and compress to 60fps with motion blur).
    3. Output the final high-quality .mp4 file.
    4. Automatically delete the giant TGA cache folder to preserve disk space.

Phase 4: Electron UI & Settings Panel

• Scaffold Electron + Vite React template.
• Style the app according to the Aesthetic Guide (restrained neon, glass panels, monospace readouts, micro-animations on interactive states).
• Build the file picker for .dem and music tracks.
• Render the parsed player list and highlight events in an elegant table.
• Build the configuration view:
  • Render Mode: OBS WebSocket OR FFMPEG Sequence (TGA).
  • Resolution: 1080p / 1440p / 4K.
  • FPS: 60 / 120 / 240 / 360.
  • Motion Blur: None / Minterpolate / Frame Blending.
• Build the render progress viewer tracking the queue and processing state.