⚝ SENTINEL - Spectral Network Forensics Dashboard ⚝

Inspiration

The inspiration for SENTINEL came from a simple question: What if cybersecurity could be both powerful and beautiful?

Traditional network forensics tools are often intimidating, cluttered with technical jargon, and visually uninspiring. We wanted to create something different - a tool that transforms the abstract concept of network threats into something tangible, visual, and even artistic.

Drawing inspiration from Arkham Horror and H.P. Lovecraft's cosmic horror, we reimagined network packets as spectral entities - ghosts that drift through a haunted digital realm. Each packet becomes a character in a gothic narrative: benign traffic manifests as peaceful Spirits, suspicious patterns appear as erratic Wraiths, and malicious attacks take form as aggressive Revenants.

The goal was to make cybersecurity analysis not just functional, but immersive - where understanding network threats feels like consulting an ancient oracle rather than reading spreadsheets.

What it does

SENTINEL is a haunted cybersecurity forensics dashboard that analyzes network traffic and visualizes threats as spectral entities.

Core Features:

🔍 Intelligent Threat Detection

Uploads PCAP files or JSON network logs (up to 500MB)
Uses Isolation Forest machine learning to detect anomalies
Classifies network events into three entity types:
- Spirits (Benign) - Normal traffic, ghostly green
- Wraiths (Suspicious) - Unusual patterns, sickly yellow
- Revenants (Malicious) - Confirmed threats, blood red

👻 Dual Visualization Modes

Network Map: Graph-based visualization showing IP relationships
Spectral Stream: Animated SVG ghosts traveling from source to destination IPs
- Each ghost has unique shapes and behaviors based on threat level
- Smooth floating for benign traffic
- Erratic wobbling for suspicious patterns
- Aggressive shaking for malicious attacks

🔮 AI-Powered Insights

Gemini AI integration generates gothic-themed threat analysis
Provides contextual security recommendations
Identifies attack patterns and vectors
Written in atmospheric, occult-inspired language

🎨 Arkham Horror Aesthetic

Vintage occult typography (Cinzel + Crimson Text)
Aged parchment textures and tarnished brass accents
Film grain overlay and vignette effects
Gothic color palette: deep blacks, aged browns, spectral greens

How we built it

Architecture

Frontend (React + TypeScript)

React 18 with TypeScript for type safety
Custom SVG ghost rendering system
React Flow for network graph visualization
Context API for state management
Tailwind CSS for styling with custom horror theme

Backend (FastAPI + Python)

FastAPI for high-performance REST API
Scapy for PCAP file parsing
scikit-learn's Isolation Forest for anomaly detection
Custom feature extraction from network packets
Google Gemini AI for threat analysis

Machine Learning Pipeline

PCAP/JSON → Parser → Feature Extractor → Isolation Forest → 
Threat Analyzer → Entity Classification → Spectral Profiles

Key Technical Achievements

1. Ghost Visualization System

Hand-crafted SVG paths for three distinct ghost shapes
Physics-based motion using easing functions
Path interpolation from source to destination IPs
Entity-specific behaviors (smooth, erratic, aggressive)
Perlin noise for realistic erratic movement

2. Real-time Anomaly Detection

Extracts 5+ features from network traffic
Unsupervised learning (no training data needed)
Configurable contamination rate (expected anomaly %)
Anomaly scores mapped to threat tiers

3. AI Integration

Structured prompts for consistent gothic-themed output
Context-aware analysis based on threat summary
Actionable security recommendations
Error handling and retry logic

4. Horror Theme Implementation

Custom CSS variables for consistent theming
Google Fonts integration (Cinzel, Crimson Text)
SVG noise filters for film grain effect
Radial gradients for atmospheric vignette
Parchment texture using fractal noise

Tech Stack

Frontend:
├── React 18
├── TypeScript
├── Vite
├── Tailwind CSS
├── React Flow
└── Custom SVG Rendering

Backend:
├── FastAPI
├── Python 3.10+
├── Scapy (packet parsing)
├── scikit-learn (ML)
├── Google Gemini AI
└── python-dotenv

Deployment:
├── Vercel (Frontend)
└── Render (Backend)

Challenges we ran into

1. Ghost Path Animation

Challenge: Making ghosts travel meaningfully from source to destination IPs instead of random floating.

Solution:

Arranged all unique IPs in a circle around the screen
Calculated paths using easing functions for smooth acceleration/deceleration
Added entity-specific wobble perpendicular to the path
Implemented screen wrapping and loop-back behavior

2. React Hooks Violations

Challenge: Conditional hook calls causing "Rendered more hooks than during the previous render" errors.

Solution:

Moved all hooks to the top of components before any conditional returns
Used useMemo for expensive calculations
Ensured hooks always execute in the same order

3. Gemini API Integration

Challenge: Initial 404 errors due to incorrect API endpoint and model names.

Solution:

Tested available models using the API's model listing endpoint
Updated to use gemini-2.5-flash instead of deprecated gemini-pro
Implemented robust error handling and response parsing
Added debug logging for API responses

4. Performance with Large Datasets

Challenge: Rendering 1000+ animated ghosts caused frame rate drops.

Solution:

Used CSS transforms for GPU acceleration
Implemented will-change hints for browser optimization
Batched state updates in React
Optimized SVG rendering with reusable definitions

5. CORS Configuration

Challenge: Frontend couldn't communicate with deployed backend.

Solution:

Configured specific allowed origins instead of wildcard
Added environment variables for API URLs
Updated both local and production configurations
Tested cross-origin requests thoroughly

6. Horror Aesthetic Balance

Challenge: Making the UI spooky without sacrificing usability.

Solution:

Maintained WCAG AAA contrast ratios (12:1 for parchment text)
Used readable serif fonts (Crimson Text)
Kept animations subtle (no flashing or strobing)
Provided clear visual hierarchy

Accomplishments that we're proud of

🎨 Unique Visual Identity

Created a truly distinctive cybersecurity tool that looks like nothing else in the space. The Arkham Horror aesthetic isn't just decoration - it makes threat analysis more intuitive and engaging.

👻 Ghost Visualization Innovation

Built a custom SVG animation system where each ghost:

Has a unique shape based on entity type
Travels along meaningful paths (source → destination)
Exhibits behavior that reflects threat level
Creates an intuitive visual language for network traffic

🤖 AI Integration Done Right

Successfully integrated Gemini AI to generate contextual, gothic-themed security insights that are both atmospheric AND actionable. The AI understands the horror theme while providing real security value.

📊 End-to-End ML Pipeline

Implemented a complete machine learning pipeline from raw packets to classified threats:

Parses PCAP and JSON formats
Extracts relevant features
Detects anomalies without training data
Generates spectral profiles
Provides threat summaries

🎭 Attention to Detail

Hand-crafted three distinct ghost SVG shapes
Custom gothic typography with wide letter-spacing
Aged parchment textures using fractal noise
Film grain animation with 8-second loop
Ornate dividers with occult symbols
Typewriter effect for dramatic reveals

🚀 Full Deployment

Successfully deployed both frontend and backend:

Frontend on Vercel: https://sentinel-ai.vercel.app/
Backend on Render: https://sentinal-asvj.onrender.com
Configured CORS and environment variables
Working end-to-end in production

What we learned

Technical Learnings

1. SVG Animation at Scale

Learned to optimize SVG rendering for hundreds of elements
Discovered the power of CSS transforms for GPU acceleration
Understood the importance of will-change hints

2. Machine Learning in Production

Isolation Forest is perfect for unsupervised anomaly detection
Feature engineering is crucial for network traffic analysis
Contamination rate significantly impacts classification

3. AI Prompt Engineering

Structured prompts produce more consistent results
Context matters - providing threat data improves relevance
Balancing creativity (gothic theme) with accuracy (security advice)

4. React Performance Optimization

Hook order matters - always call hooks unconditionally
useMemo and useCallback prevent unnecessary re-renders
Batching state updates improves animation smoothness

5. Deployment Challenges

Environment variables need different handling in dev vs. prod
CORS must be configured explicitly for security
API endpoints need to be environment-aware

Design Learnings

1. Theme Consistency

CSS custom properties make theming manageable
Typography choices dramatically impact atmosphere
Color psychology: green = safe, yellow = caution, red = danger

2. Accessibility in Dark Themes

High contrast is possible with dark backgrounds
Serif fonts can be readable with proper sizing
Animations should be subtle, not distracting

3. User Experience

Visual metaphors (ghosts) make abstract concepts concrete
Progressive disclosure: show summary first, details on demand
Loading states should match the theme (crystal ball, not spinner)

Project Management

1. Iterative Development

Started with basic functionality, added polish incrementally
User feedback (even from ourselves) drove improvements
Refactoring is necessary - first version is rarely best

2. Documentation Matters

Good README helps others understand the project
Code comments explain "why", not just "what"
Architecture diagrams clarify system design

What's next for Sentinel

Short-term Enhancements

🎵 Sound Design

Ambient horror soundscape
Whispers for suspicious activity
Chains rattling for malicious threats
Spatial audio based on ghost positions

📊 Enhanced Analytics

Historical trend analysis
Multi-file comparison
Export reports as PDF with gothic styling
Custom anomaly thresholds per IP

🎨 Visual Improvements

More ghost variants (10+ unique shapes)
Particle effects (spectral dust, ectoplasm)
3D visualization mode using Three.js
Custom cursors (gothic pointer designs)

Medium-term Features

🔴 Real-time Monitoring

Live packet capture integration
Streaming analysis (not just file upload)
Real-time ghost spawning
Alert system for critical threats

🧠 Advanced ML

Custom model training on user data
Supervised learning for known threats
Behavioral analysis over time
Threat prediction (not just detection)

👥 Collaboration Features

Multi-user workspaces
Shared threat investigations
Comments and annotations
Team dashboards

Long-term Vision

🌐 Enterprise Platform

Multi-tenant architecture
Role-based access control
Integration with SIEM systems
Compliance reporting (SOC 2, ISO 27001)

🎓 Educational Tool

Interactive tutorials
Capture-the-flag challenges
Threat scenario simulations
Cybersecurity training platform

🔬 Research Applications

Dataset generation for ML research
Visualization techniques for academic papers
Open-source threat intelligence
Community-driven threat signatures

🎮 Gamification

"Exorcise" threats by clicking ghosts
Achievement system for threat hunters
Leaderboards for fastest threat detection
Narrative-driven investigation mode

Impact & Vision

SENTINEL represents a new approach to cybersecurity tools - one that prioritizes user experience alongside technical capability. By making threat analysis visually engaging and thematically cohesive, we hope to:

Lower the barrier to entry for cybersecurity professionals
Make threat hunting more intuitive through visual metaphors
Demonstrate that security tools can be beautiful without sacrificing functionality
Inspire others to rethink how we visualize complex data

The future of cybersecurity doesn't have to be boring spreadsheets and terminal windows. It can be immersive, artistic, and effective all at once.

"In darkness, we find the truth" ⚝

SENTINEL - Where network forensics meets gothic horror

Live Demo: https://sentinel-ai.vercel.app/

GitHub: [Your Repository URL]

Est. MMXXIV