Dynamic SciFi Dashboard Kit: JavaScript Library for Futuristic UIs

This Dynamic SciFi Dashboard Kit transforms standard HTML containers into dynamic, sci-fi-themed dashboard panels.

It’s built for developers who need to quickly assemble interfaces with a distinct futuristic look, complete with animations and effects, without getting bogged down in heavy dependencies.

Key Features:

• 13 Pre-built Panel Components – Including log displays, gauges, graphs, LED indicators, and action buttons
• Sci-Fi Visual Effects – Built-in scanlines, sparks, and futuristic styling
• CSS Variable Customization – Easy theming through CSS custom properties
• ES6+ Modern JavaScript – Clean, dependency-free code (Bootstrap optional for layouts)
• Responsive Design Support – Works with existing responsive frameworks
• Canvas-based Graphics – Hardware-accelerated rendering for smooth animations

How to use it:

1. Download and load the Dynamic SciFi Dashboard Kit’s JavaScript & CSS files in the document.

<link rel="stylesheet" href="/path/to/DynamicSciFiDashboardKit.css">
<script src="/path/to/DynamicSciFiDashboardKit.js"></script>

2. Create a container element and initialize any panel component:

document.addEventListener('DOMContentLoaded', function() {
  const DSDK = DynamicSciFiDashboardKit; // Alias for convenience
  // Initialize panels here
});

3. Available Panel Components. For a full list of all 13 panels and their specific options/methods, check the official documentation.

• LogDisplayPanel – Scrolling log display with color-coded entries
• CriticalWarningTextPanel – Animated warning messages with emphasis effects
• KeyValueListPanel – Data tables with sci-fi styling
• LedDisplayPanel – Digital LED-style text displays
• DynamicTextPanel – Animated text with typewriter effects
• ActionButtonsPanel – Styled button groups with hover effects
• CanvasGraphPanel – Basic line/bar charts with custom rendering
• IntegrityPulsePanel – Animated status indicators with pulse effects
• CircularGaugePanel – Radial progress indicators and meters
• StatusIndicatorLedPanel – Multi-state LED status lights
• HorizontalBarGaugePanel – Progress bars with sci-fi styling
• TrueCanvasGraphPanel – Advanced charting with multiple data series
• ImageDisplayPanel – Image containers with sci-fi frame effects

4. Override the default styles by redefining CSS variables:

:root {
  --dsdk-font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --dsdk-font-mono: 'Consolas', 'Menlo', 'Monaco', monospace;
  --dsdk-text-color: #e0e0e0;
  --dsdk-text-color-darker: #a0a0a0;
  --dsdk-text-color-dim: #707070;
  --dsdk-accent-color-main: #8A2BE2; 
  --dsdk-accent-color-secondary: #00E5E5;
  --dsdk-warning-color: #FFD700; 
  --dsdk-danger-color: #FF4500; 
  --dsdk-success-color: #32CD32;
  --dsdk-rgb-warning-color: 255, 215, 0;
  --dsdk-rgb-danger-color: 255, 69, 0;
  --dsdk-rgb-success-color: 50, 205, 50;
  --dsdk-rgb-accent-secondary: 0, 229, 229;
  --dsdk-panel-bg: rgba(10, 10, 20, 0.7);
  --dsdk-panel-border-default: rgba(0, 229, 229, 0.2);
  --dsdk-panel-border-critical: rgba(var(--dsdk-rgb-danger-color), 0.4);
  --dsdk-panel-border-warning: rgba(var(--dsdk-rgb-warning-color), 0.4);
  --dsdk-panel-border-stable: rgba(var(--dsdk-rgb-success-color), 0.3);
  --dsdk-panel-header-bg-default: rgba(0, 229, 229, 0.1);
  --dsdk-panel-header-bg-critical: rgba(var(--dsdk-rgb-danger-color), 0.2);
  --dsdk-panel-header-bg-warning: rgba(var(--dsdk-rgb-warning-color), 0.2);
  --dsdk-panel-header-bg-stable: rgba(var(--dsdk-rgb-success-color), 0.2);
  --dsdk-scanline-halo-color-default: rgba(var(--dsdk-rgb-danger-color), 0.15);
  --dsdk-scanline-thickness-default: 4px; 
  --dsdk-pulse-bar-color: var(--dsdk-accent-color-secondary);
  --dsdk-pulse-bar-min-height: 20%;
  --dsdk-pulse-bar-max-height: 80%;
  --dsdk-pulse-bar-opacity-min: 0.6;
  --dsdk-pulse-bar-opacity-max: 1;
  --dsdk-pulse-bar-shadow-intensity: 3px;
  --dsdk-gauge-bg-color: rgba(0, 0, 0, 0.1); 
  --dsdk-gauge-arc-background: rgba(255, 255, 255, 0.08);
  --dsdk-gauge-arc-normal: var(--dsdk-accent-color-secondary);
  --dsdk-gauge-arc-warning: var(--dsdk-warning-color);
  --dsdk-gauge-arc-critical: var(--dsdk-danger-color);
  --dsdk-gauge-arc-stable: var(--dsdk-success-color);
  --dsdk-gauge-value-color-normal: var(--dsdk-text-color);
  --dsdk-gauge-value-color-warning: var(--dsdk-warning-color);
  --dsdk-gauge-value-color-critical: var(--dsdk-danger-color);
  --dsdk-gauge-value-color-stable: var(--dsdk-success-color);
  --dsdk-gauge-label-color: var(--dsdk-text-color-dim);
  --dsdk-gauge-units-color: var(--dsdk-text-color-darker);
  --dsdk-gauge-target-marker-color: rgba(255, 255, 255, 0.6);
  --dsdk-status-led-size: 10px;
  --dsdk-status-led-shadow-intensity: 4px;
  --dsdk-status-led-color-green: var(--dsdk-success-color);
  --dsdk-status-led-color-yellow: var(--dsdk-warning-color);
  --dsdk-status-led-color-red: var(--dsdk-danger-color);
  --dsdk-status-led-color-blue: var(--dsdk-accent-color-secondary);
  --dsdk-status-led-color-orange: #FFA500;
  --dsdk-status-led-color-purple: #8A2BE2;
  --dsdk-status-led-color-cyan: #00FFFF;
  --dsdk-status-led-color-white: #FFFFFF;
  --dsdk-status-led-color-off: #4a4a52;
  --dsdk-status-led-rgb-green: var(--dsdk-rgb-success-color);
  --dsdk-status-led-rgb-yellow: var(--dsdk-rgb-warning-color);
  --dsdk-status-led-rgb-red: var(--dsdk-rgb-danger-color);
  --dsdk-status-led-rgb-blue: var(--dsdk-rgb-accent-secondary);
  --dsdk-status-led-rgb-orange: 255, 165, 0;
  --dsdk-status-led-rgb-purple: 138, 43, 226;
  --dsdk-status-led-rgb-cyan: 0, 255, 255;
  --dsdk-status-led-rgb-white: 255, 255, 255;
  --dsdk-status-led-rgb-off: 74, 74, 82;
  --dsdk-gauge-h-track-bg: rgba(255, 255, 255, 0.08);
  --dsdk-gauge-h-bar-normal: var(--dsdk-accent-color-secondary);
  --dsdk-gauge-h-bar-warning: var(--dsdk-warning-color);
  --dsdk-gauge-h-bar-critical: var(--dsdk-danger-color);
  --dsdk-gauge-h-bar-stable: var(--dsdk-success-color);
  --dsdk-gauge-h-value-color: var(--dsdk-text-color);
  --dsdk-gauge-h-label-color: var(--dsdk-text-color-dim);
  --dsdk-gauge-h-units-color: var(--dsdk-text-color-darker);
  --dsdk-tv-noise-svg-uri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='dsdk-noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23dsdk-noise)'/%3E%3C/svg%3E");
  --dsdk-rolling-bar-color: rgba(0, 0, 0, 0.6);
  --dsdk-current-rolling-bar-height: 2px; 
  --dsdk-current-rolling-bar-speed: 4s;   
  --dsdk-particle-color-normal-primary-base: 0, 200, 220;
  --dsdk-particle-color-normal-secondary-base: 150, 220, 255;
  --dsdk-particle-color-warning-primary-base: 255, 215, 0;
  --dsdk-particle-color-warning-secondary-base: 255, 165, 0;
  --dsdk-particle-color-critical-primary-base: 255, 69, 0;
  --dsdk-particle-color-critical-secondary-base: 220, 20, 60;
  --dsdk-particle-color-stable-primary-base: 50, 205, 50;
  --dsdk-particle-color-stable-secondary-base: 0, 180, 180;
  --dsdk-particle-opacity-primary: 0.8;
  --dsdk-particle-opacity-secondary: 0.8;
  --dsdk-particle-opacity-tertiary: 0.8;
  --dsdk-particle-opacity-faint: 0.8;
  --dsdk-current-particle-primary: rgba(var(--dsdk-particle-color-normal-primary-base), var(--dsdk-particle-opacity-primary));
  --dsdk-current-particle-secondary: rgba(var(--dsdk-particle-color-normal-secondary-base), var(--dsdk-particle-opacity-secondary));
  --dsdk-current-particle-tertiary: rgba(var(--dsdk-particle-color-normal-primary-base), var(--dsdk-particle-opacity-tertiary));
  --dsdk-current-particle-faint: rgba(var(--dsdk-particle-color-normal-secondary-base), var(--dsdk-particle-opacity-faint));
  --dsdk-particle-speed-slow: 18s;
  --dsdk-particle-speed-medium: 15s;
  --dsdk-particle-speed-fast: 12s;
  --dsdk-particle-burst-speed: 3s;
  --dsdk-radar-sweep-color-base-normal: var(--dsdk-accent-color-secondary);
  --dsdk-radar-sweep-color-base-warning: var(--dsdk-warning-color);
  --dsdk-radar-sweep-color-base-critical: var(--dsdk-danger-color);
  --dsdk-radar-sweep-color-base-stable: var(--dsdk-success-color);
  --dsdk-radar-grid-color-base-normal: rgba(var(--dsdk-rgb-accent-secondary), 0.3);
  --dsdk-radar-grid-color-base-warning: rgba(var(--dsdk-rgb-warning-color), 0.3);
  --dsdk-radar-grid-color-base-critical: rgba(var(--dsdk-rgb-danger-color), 0.3);
  --dsdk-radar-grid-color-base-stable: rgba(var(--dsdk-rgb-success-color), 0.3);
  --dsdk-radar-point-color-base-normal: var(--dsdk-text-color);
  --dsdk-radar-point-color-base-warning: var(--dsdk-warning-color);
  --dsdk-radar-point-color-base-critical: var(--dsdk-danger-color);
  --dsdk-radar-point-color-base-stable: var(--dsdk-success-color);
  --dsdk-radar-point-highlight-color: #FFFFFF;
  --dsdk-radar-sweep-opacity: 0.25;
  --dsdk-radar-grid-line-width: 0.5px;
  --dsdk-radar-grid-dash: 2, 3;
  --dsdk-radar-outer-circle-line-width: 1.5px;
}