Hacker IDE Screen

Visual simulation of a developer IDE in VS Code style. Press any key — code appears by itself. Pure eye candy. No real network activity.

---

What it is

A browser toy that looks like a real dev environment: file explorer, editor with syntax highlighting, fake terminal, node graph, right-side metrics panel. You press any key and pre-written code streams into the editor as if you are typing it. Useful for demos, presentations, streaming backgrounds, or just looking cool.

Everything is fake. No real code runs. No network requests. No data is collected or sent anywhere.

---

Features

Editor

• VS Code-style dark theme interface
• Left sidebar file explorer with clickable files
• File tabs: main.js, network.js, payload.json, access.log
• Code editor with line numbers and syntax highlighting (JS, JSON, log)
• Blinking cursor and smooth auto-scroll
• Pre-filled with 25 lines on load
• Per-file scroll position preserved when switching tabs

Fake typing

• Any keypress advances pre-written code (no real input)
• Configurable speed: 1–12 characters per keypress
• Loops with a reconnect message at the end
• ACCESS GRANTED flash when the buffer completes

Terminal (bottom pane — 4 tabs)

Tab	Contents
TERMINAL	Live decorative logs: Jest, ESLint, git, npm, tsc sequences
NODE MAP	Full SVG network map of the node cluster
PROCESSES	Animated fake process table (PID, CPU%, MEM)
SECURITY	Decorative security event stream

Node Graph window

A floating, draggable, resizable node editor in the style of ComfyUI / Unreal Blueprints:

• 9 preset nodes with 8 connections (Input Stream → Parser → Router → Logger, etc.)
• 12 node types: Input Stream, Parser, Router, Filter, Logger, Alert, Output, Monitor, Sandbox Gate, Decoder, Packet Source, Visual Payload
• Pan (drag on empty canvas) and zoom (scroll wheel)
• Drag nodes to reposition; edges follow automatically
• Connect ports by dragging output → input (Bezier curves)
• Select and delete edges with Delete
• Run — animates each node RUNNING → DONE (some randomly get WARNING), pulses edges, pushes logs to terminal, updates statusbar
• Auto Layout (topological sort), Fit View, Zoom 100%, Clear Edges, Add Node

Right panel — NODE SYSTEM

• 5 fake nodes: node-alpha, node-beta, node-gamma, node-delta, core-router
• Statuses: ONLINE / SYNCING / IDLE / WARNING / OFFLINE
• Live metrics: CPU%, MEM%, packet count, latency — drift every 2–4 s
• Mini SVG network map with pulsing connection lines

Statusbar

CONNECTED · current file · Node: alpha · CPU · MEM · Latency · language · line/char count · theme

Themes

Name	Key color
VS Code Dark	default grey/blue
Terminal Green	phosphor green
Cyber Blue	electric blue

Controls

Action	How
Type fake code	Any key
Speed down / up	[-] / [+] buttons
Fullscreen	Esc or F11 or button
Clear editor	Ctrl+L or button
Next file	Ctrl+K
Toggle sidebar	Ctrl+B
Toggle terminal	`Ctrl+``
Toggle Node System panel	Command Palette
Open/close Node Graph	Nodes button or Ctrl+Shift+N
Command Palette	Ctrl+Shift+P or Palette button
Panic mode	button

Command Palette (Ctrl+Shift+P)

• Run Visual Trace
• Toggle Node System
• Open Node Graph
• Simulate Access Granted
• Clear Terminal
• Switch Theme
• Trigger Panic

---

Tech stack

Layer	Technology
Bundler	Vite (v8)
Language	Vanilla JS (ES modules)
Rendering	DOM + SVG (no canvas, no React, no Vue)
Styling	Plain CSS with CSS custom properties
Backend	none
Network	none

---

Project structure

hacker-ide-screen/
├── index.html              # App shell: all layout HTML
├── package.json
└── src/
    ├── main.js             # Entry point: editor, typing engine, shortcuts, themes
    ├── codeSamples.js      # Fake code content for each file tab
    ├── fakeTerminal.js     # Terminal log sequences and single-line entries
    ├── nodeSystem.js       # Right panel: node list, mini map, processes, security
    ├── nodeGraph.js        # Floating node graph window engine
    ├── nodeGraphData.js    # Node type definitions and initial graph preset
    └── styles.css          # All styles (3 themes, all components)

---

Getting started

# Install
npm install

# Dev server (hot reload)
npm run dev
# Open http://localhost:5173

# Production build
npm run build

# Preview production build
npm run preview

No environment variables. No backend. No API keys. Works fully offline after npm install.

---

Keyboard reference

Any key         advance fake code in editor
Esc / F11       toggle fullscreen
Ctrl+L          clear editor
Ctrl+K          switch to next file
Ctrl+B          toggle left sidebar
Ctrl+`          toggle terminal pane
Ctrl+Shift+P    command palette
Ctrl+Shift+N    toggle node graph window
Delete          delete selected edge in node graph

---

Security & disclaimer

This project is a visual simulation only.

• No real network requests are made
• No data is collected or transmitted
• No real hacking tools, exploits, or attack commands are included
• All code snippets are decorative and non-functional
• All node/IP references are fictional

The disclaimer is visible in the UI at all times.

---

License

MIT