# OpenParanormal UI Examples - Visual Reference **Design Theme:** Professional High-Tech Paranormal Interface --- ## 🎨 Color Palette Reference ``` BACKGROUND: Pure Black (#000000) ├─ Deep, mysterious base └─ Maximum contrast for readability in dark environments CYAN (Primary Tech): (#00FFFF) ├─ Headers and borders ├─ Technical readouts └─ System status MATRIX GREEN (Paranormal): (#00FF00) ├─ Active scanning indicators ├─ Environmental readings └─ "Anomaly detected" states MAGENTA (Mystical): (#FF00FF) ├─ Ovilus word display ├─ Special paranormal elements └─ Eye symbols and mystical borders ORANGE (Warning): (#FFA500) ├─ Elevated readings ├─ REM Pod proximity alerts └─ Caution indicators RED (Critical): (#FF0000) ├─ High anomaly alerts ├─ Critical EMF levels └─ Emergency indicators ``` --- ## 📱 Main Menu Mockup (ASCII Art) ``` ╔════════════════════════════════════════════════════════════╗ ║ ║ ║ ╔══════════════════════════════════════════════╗ ║ ║ ║ 🔷 PARANORMAL TOOLKIT 🔷 ║ ║ ║ ╚══════════════════════════════════════════════╝ ║ ║ ║ ║ ⚡ SELECT DETECTION MODE ⚡ ║ ║ ║ ║ ┌─────────────────┐ ┌─────────────────┐ ┌──────────┐║ ║ │ │ │ │ │ │║ ║ │ ⚡ │ │ 〰〰〰 │ │ 👁️ │║ ║ │ │ │ │ │ │║ ║ │ E M F │ │ S P I R I T │ │ O V I L U S│ ║ │ M E T E R │ │ B O X │ │ S C A N │║ ║ │ │ │ │ │ │║ ║ └─────────────────┘ └─────────────────┘ └──────────┘║ ║ ║ ║ ┌─────────────────┐ ┌─────────────────┐ ║ ║ │ │ │ │ ║ ║ │ ◉ ◉ ◉ │ │ ⦿ ╱ ⦿ │ ║ ║ │ ● │ │ ╱ │ ║ ║ │ R E M │ │ F U L L │ ║ ║ │ P O D │ │ S C A N N E R │ ║ ║ │ │ │ │ ║ ║ └─────────────────┘ └─────────────────┘ ║ ║ ║ ║ [Hexagonal grid pattern visible in background] ║ ║ [Horizontal scanline slowly moving down] ║ ║ ║ ║━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━║ ║ 🔋 PWR: 87% │ ⏱️ UPTIME: 00:12:34 │ ✅ ACTIVE ║ ╚════════════════════════════════════════════════════════════╝ ``` **Visual Description:** - Black background with subtle hex grid - Each button has double-line border (glow effect) - Icons are simple geometric shapes - Status bar at bottom with system info - CRT-style scanline effect --- ## 📊 EMF Meter Mode Mockup ``` ╔════════════════════════════════════════════════════════════╗ ║ ╔══════════════════════════════════════════════════╗ ║ ║ ║ ⚡ EMF DETECTOR ⚡ ║ ║ ║ ╚══════════════════════════════════════════════════╝ ║ ║ ║ ║ ╔═══════╗ ║ ║ ╔═══╝ ╚═══╗ ║ ║ ╔═╝ ╚═╗ ║ ║ ╔═╝ ╚═╗ ║ ║ ║ ║ ║ ║ ║ 1 2 4 7 ║ [PULSING RED] ║ ║ ║ ║ ║ ║ ║ A N O M A L Y ! ║ ║ ║ ╚═╗ ╔═╝ ║ ║ ╚═╗ ╔═╝ ║ ║ ╚═══╗ ╔═══╝ ║ ║ ╚═══════╝ ║ ║ ║ ║ ┌────────────────────────────────────────────────────┐ ║ ║ │ [REAL-TIME GRAPH - Matrix Green Waveform] │ ║ ║ │ │ ║ ║ │ ╱╲ ╱╲ ╱╲ ╱╲ │ ║ ║ │ ╱ ╲ ╱ ╲ ╱ ╲ ╱ ╲ │ ║ ║ │ ╱ ╲ ╱ ╲╱ ╲ ╱ ╲ │ ║ ║ │ ─╯ ╲──╯ ╲╱ ╲─── │ ║ ║ │ │ ║ ║ └────────────────────────────────────────────────────┘ ║ ║ ║ ║ ┌─────────┐ ║ ║ │ < BACK │ ║ ║ └─────────┘ ║ ║━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━║ ║ 🌡️ T: 72°F │ 💧 H: 45% │ 🧲 MAG: 1247 │ 🚨 CRITICAL ║ ╚════════════════════════════════════════════════════════════╝ ``` **Visual Description:** - Large circular "radar" display for EMF value - Number pulses with glow effect - Real-time scrolling graph (like oscilloscope) - Color changes based on threat level - LED ring on device mirrors colors --- ## 📻 Spirit Box Mode Mockup ``` ╔════════════════════════════════════════════════════════════╗ ║ ╔╔════════════════════════════════════════════════╗╗ ║ ║ ║║ 〰 SPIRIT BOX 〰 ║║ ║ ║ ╚╚════════════════════════════════════════════════╝╝ ║ ║ ║ ║ [SCAN ANIMATION] ║ ║ ║ ║ ║ ║ ║ ║ ║ 9 8 . 5 M H z ║ ║ ║ ║ ║ ║ ║ ║ [Vertical line moves →] ║ ║ ║ ║ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌─────────┐ ║ ║ │ │ │ │ │ │ │ │ ║ ║ │ SCAN │ │ REV │ │ FAST │ │ VOL+ │ ║ ║ │ │ │ │ │ │ │ │ ║ ║ └──────────┘ └──────────┘ └──────────┘ └─────────┘ ║ ║ ║ ║ SWEEP: ▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒ 50ms ║ ║ VOLUME: ▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒ 8/15 ║ ║ ║ ║ ┌─────────┐ ║ ║ │ < BACK │ ║ ║ └─────────┘ ║ ║━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━║ ║ 📡 SCANNING FM BAND │ 🔊 WHITE NOISE ACTIVE ║ ╚════════════════════════════════════════════════════════════╝ ``` **Visual Description:** - Animated scan line moves across screen - Large frequency display - Touch buttons with rounded corners - Slider bars show settings - Double-line border on header (glow effect) --- ## 🔮 Ovilus Mode Mockup ``` ╔════════════════════════════════════════════════════════════╗ ║ ╔╔═══════════════════════════════════════════════╗╗ ║ ║ ║║ 👁️ OVILUS SCAN 👁️ ║║ ║ ║ ╚╚═══════════════════════════════════════════════╝╝ ║ ║ ║ ║ ┌──────────┐ ┌──────────┐ ┌──────────┐ ║ ║ │ DICT │ │ PHON │ │ ENRG │ ║ ║ └──────────┘ └──────────┘ └──────────┘ ║ ║ ║ ║ ╔═══════════════════════════════════╗ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ H E L L O ║ [PULSING] ║ ║ ║ ║ [MAGENTA] ║ ║ ║ ║ ║ ║ ╚═══════════════════════════════════╝ ║ ║ ║ ║ 👁️ Environmental Resonance Active ║ ║ ║ ║ TEMP: 72°F │ HUM: 45% │ MAG: 234 ║ ║ ║ ║ ┌─────────┐ ║ ║ │ < BACK │ ║ ║ └─────────┘ ║ ║━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━║ ║ 🔮 DICTIONARY MODE │ 📚 2048 WORDS LOADED ║ ╚════════════════════════════════════════════════════════════╝ ``` **Visual Description:** - Mystical double-border on header (magenta) - Large word display with pulsing glow effect - Eye icon blinks occasionally - Mode selection buttons at top - Environmental readings at bottom - Most "paranormal" looking mode --- ## 🎯 REM Pod Mode Mockup ``` ╔════════════════════════════════════════════════════════════╗ ║ ╔═══════════════════════════════════════════════╗ ║ ║ ║ ◉ REM POD ◉ ║ ║ ║ ╚═══════════════════════════════════════════════╝ ║ ║ ║ ║ ◯ Proximity Field ◯ ║ ║ ◯ ◯ ║ ║ ◯ ◯ ║ ║ ◯ ╱ ◯ ║ ║ ◯ ╱ ◯ ║ ║ ◯ ╱ ◯ ║ ║ ◯ ╱ ◯ ║ ║ ◯ ╱ [SWEEP] ◯ ║ ║ ◯ ╱ ◯ ║ ║ ◯ ╱ ◯ ║ ║ ● ║ ║ ◯ ◯ ◯ ║ ║ ║ ║ M O N I T O R I N G ║ ║ ║ ║ SENSITIVITY: ▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒ ║ ║ ║ ║ ┌─────────┐ ║ ║ │ < BACK │ ║ ║ └─────────┘ ║ ║━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━║ ║ ✅ NO ANOMALIES DETECTED │ 📊 BASELINE ║ ╚════════════════════════════════════════════════════════════╝ ``` **Visual Description:** - Radar-style circular display - Animated sweep line rotates clockwise - Concentric circles (proximity zones) - When triggered: circles flash red - LED ring mimics display --- ## 📈 Full Scanner Mode Mockup ``` ╔════════════════════════════════════════════════════════════╗ ║ FULL SPECTRUM SCAN ║ ╠════════════════════════════════════════════════════════════╣ ║ ║ ║ EMF: ▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ 127 mG ║ ║ TEMP: ▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒ 72.3°F ║ ║ HUMIDITY: ▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒ 45% ║ ║ PRESSURE: ▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒ 1013 hPa ║ ║ MOTION: ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ NONE ║ ║ MAGNETIC: ▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒ 234 μT ║ ║ ║ ║ ┌──────────────────────────────────────────────────────┐ ║ ║ │ [Multi-line Real-time Graphs] │ ║ ║ │ │ ║ ║ │ EMF: ─────╱╲╱╲╱╲─────╱╲─── │ ║ ║ │ TEMP: ────────────────────── │ ║ ║ │ MAG: ────╱╲───────╱╲─────── │ ║ ║ │ │ ║ ║ └──────────────────────────────────────────────────────┘ ║ ║ ║ ║ ┌──────────┐ ┌──────────┐ ┌──────────┐ ║ ║ │START LOG │ │ EXPORT │ │CALIBRATE │ ║ ║ └──────────┘ └──────────┘ └──────────┘ ║ ║ ║ ║ ┌─────────┐ ║ ║ │ < BACK │ ║ ║ └─────────┘ ║ ║━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━║ ║ ✅ ALL SYSTEMS NOMINAL │ 💾 LOGGING ACTIVE ║ ╚════════════════════════════════════════════════════════════╝ ``` **Visual Description:** - All sensors displayed at once - Color-coded bar graphs - Multi-line scrolling graphs - Professional data logger appearance - Export to SD card option --- ## 🎬 Animation Examples ### Boot Sequence ``` Frame 1: Frame 2: Frame 3: ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ OPEN │ │ OPENPAR │ │ │ → │ │ → │ │ │ │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ Frame 4: Frame 5 (final): ┌──────────┐ ┌──────────────────────────┐ │ OPENPAR │ │ OPENPARANORMAL │ │ ANORMAL │ → │ MULTI-SPECTRUM │ │ │ │ > Init sensors... │ └──────────┘ └──────────────────────────┘ ``` ### Scanline Effect ``` Frame 1: Frame 2: Frame 3: ┌──────────┐ ┌──────────┐ ┌──────────┐ │ ═════════│ │ Content │ │ Content │ │ Content │ → │ ═════════│ → │ │ │ │ │ │ │ ═════════│ └──────────┘ └──────────┘ └──────────┘ [Horizontal line moves down continuously] ``` ### Pulse Effect ``` Frame 1: Frame 2: Frame 3: Frame 4: HELLO HELLO HELLO HELLO (dim) (bright) (brighter) (bright) [Brightness oscillates using sine wave] ``` --- ## 🎨 Physical LED Ring Sync ``` Device Front View: ┌─────────────────┐ │ │ │ [TOUCHSCREEN] │ │ │ │ │ └─────────────────┘ ◉ ◉ ◉ ← LED Ring (12 LEDs) ◉ ◉ ◉ ● ◉ ← Center (sensor area) ◉ ◉ ◉ ◉ ◉ LED States: - Ambient: Slow cyan pulse - Scanning: Green chase animation - Anomaly: Red flash - Low battery: Orange blink ``` --- ## 💡 Design Impact ### What Makes This Special: 1. **Professional**: Scientific readouts, precise layouts 2. **High-Tech**: Neon colors, scanlines, hex grids 3. **Paranormal**: Mystical symbols, pulsing effects, dramatic alerts ### Looks Like: - Ghost hunting TV shows - Sci-fi movie props - Military/research equipment - NOT toy-like or cheap ### User Experience: - Easy to read in dark environments - Large touch targets - Clear visual hierarchy - Immediate feedback - Immersive atmosphere --- **This UI transforms your DIY project into something that looks and feels like professional paranormal investigation equipment!** 👻⚡🔬