Documentation
Getting Started
Authentication
Livewire
Dashboard & Widgets
Applications
UI Components
Data Visualization
E-commerce
Job Board
Cryptocurrency
Advanced

HUD Components - Futuristic UI System

HUD Components - Futuristic UI System

A complete suite of reusable Laravel Blade components for creating beautiful, futuristic HUD-style interfaces with glassmorphism effects, neon borders, and SVG decorations.

Table of Contents

HUD Modal Component

A reusable modal component with customizable header dropdown, footer actions, and futuristic styling.

Basic Usage

Simple Modal

<x-hud.modal id="myModal" title="My HUD Modal">
    <p>Your modal content goes here!</p>
</x-hud.modal>

<!-- Trigger button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    Open Modal
</button>

With Custom Size

<x-hud.modal id="largeModal" title="Large Modal" size="xl">
    <p>Extra large modal content</p>
</x-hud.modal>

Available sizes: sm, lg, xl, fullscreen

Advanced Modal Features

1. Header Dropdown Menu

Add a dropdown menu to the header with action items:

<x-hud.modal 
    id="systemModal" 
    title="System Status"
    :show-header-dropdown="true"
    :dropdown-items="[
        ['label' => 'Refresh Data', 'icon' => 'refresh', 'url' => '#'],
        ['label' => 'Export Report', 'icon' => 'download', 'url' => '#'],
        ['divider' => true],
        ['label' => 'Settings', 'icon' => 'settings', 'url' => '#'],
    ]">

    <p>Modal content with header dropdown</p>
</x-hud.modal>

2. Custom Header Actions

Use the headerActions slot for complete control:

<x-hud.modal id="customModal" title="Custom Actions">
    <x-slot:headerActions>
        <button class="btn btn-cyber btn-sm me-2">
            <i class="material-symbols-rounded">favorite</i>
        </button>
        <button class="btn btn-cyber btn-sm">
            <i class="material-symbols-rounded">share</i>
        </button>
    </x-slot:headerActions>

    <p>Modal with custom header actions</p>
</x-hud.modal>

3. Custom Footer Buttons

Replace the default close button with custom actions:

<x-hud.modal id="confirmModal" title="Confirm Action">
    <x-slot:footerActions>
        <button type="button" class="btn btn-cyber" data-bs-dismiss="modal">
            <i class="material-symbols-rounded me-2">close</i>Cancel
        </button>
        <button type="button" class="btn btn-primary">
            <i class="material-symbols-rounded me-2">check</i>Confirm
        </button>
    </x-slot:footerActions>

    <p>Are you sure you want to proceed?</p>
</x-hud.modal>

4. Form Modal

<x-hud.modal id="formModal" title="User Settings">
    <x-slot:footerActions>
        <button type="button" class="btn btn-cyber" data-bs-dismiss="modal">
            <i class="material-symbols-rounded me-2">close</i>Cancel
        </button>
        <button type="submit" class="btn btn-primary" form="settingsForm">
            <i class="material-symbols-rounded me-2">save</i>Save Changes
        </button>
    </x-slot:footerActions>

    <form id="settingsForm" method="POST" action="/settings">
        @csrf
        <div class="mb-3">
            <label for="username" class="form-label">Username</label>
            <input type="text" class="form-control" id="username" name="username">
        </div>
        <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email" name="email">
        </div>
    </form>
</x-hud.modal>

Modal Component Properties

Property Type Default Description
id string 'hudModal' Unique ID for the modal
title string 'HUD Modal' Modal title text
size string 'lg' Modal size: sm, lg, xl, fullscreen
centered boolean true Center modal vertically
showHeaderDropdown boolean false Show dropdown menu in header
dropdownItems array [] Array of dropdown menu items
closeButtonText string 'Close Terminal' Text for default close button

Dropdown Item Structure

[
    'label' => 'Menu Item',          // Required: Display text
    'icon' => 'icon_name',           // Optional: Material icon name
    'url' => '#',                    // Optional: Link URL (default: 'javascript:;')
    'target' => '_blank',            // Optional: Link target
    'divider' => false               // Optional: Set to true for divider
]

Modal Named Slots

  • headerActions - Custom content in the header (appears before close button)
  • footerActions - Custom footer buttons (replaces default close button)
  • Default slot - Modal body content

HUD Offcanvas Component

Create futuristic side panels with SVG decorations and glassmorphism effects.

Basic Offcanvas

<div class="offcanvas offcanvas-start offcanvas-hud" tabindex="-1" id="hudMenu">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title orbitron">System Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>

    <div class="hud-divider-top" aria-hidden="true">
        @include('components.hud.offcanvas-divider-top')
    </div>

    <div class="offcanvas-body">
        <div class="menu-header orbitron">Navigation</div>
        <div class="list-group list-group-flush">
            <a href="#" class="list-group-item list-group-item-action">
                <span class="material-symbols-rounded">dashboard</span>
                Dashboard
            </a>
            <a href="#" class="list-group-item list-group-item-action">
                <span class="material-symbols-rounded">settings</span>
                Settings
            </a>
        </div>

        <div class="hud-divider-bottom" aria-hidden="true">
            @include('components.hud.offcanvas-divider-bottom')
        </div>
    </div>
</div>

<!-- Trigger -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#hudMenu">
    Open Menu
</button>

Offcanvas Positions

  • offcanvas-start - Left side
  • offcanvas-end - Right side
  • offcanvas-top - Top
  • offcanvas-bottom - Bottom

Multi-Section Offcanvas

<div class="offcanvas offcanvas-end offcanvas-hud" tabindex="-1" id="systemInterface">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title orbitron">System Interface</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>

    <div class="hud-divider-top" aria-hidden="true">
        @include('components.hud.offcanvas-divider-top')
    </div>

    <div class="offcanvas-body">
        <!-- Section 1 -->
        <div class="menu-header orbitron">Core Systems</div>
        <div class="list-group list-group-flush">
            <a href="#" class="list-group-item list-group-item-action">
                <span class="material-symbols-rounded">memory</span>
                Primary Core
            </a>
            <a href="#" class="list-group-item list-group-item-action">
                <span class="material-symbols-rounded">storage</span>
                Data Storage
            </a>
        </div>

        <!-- Section 2 -->
        <div class="menu-header orbitron mt-4">Communications</div>
        <div class="list-group list-group-flush">
            <a href="#" class="list-group-item list-group-item-action">
                <span class="material-symbols-rounded">wifi</span>
                Network Status
            </a>
            <a href="#" class="list-group-item list-group-item-action">
                <span class="material-symbols-rounded">router</span>
                Proximal Relays
            </a>
        </div>

        <div class="hud-divider-bottom" aria-hidden="true">
            @include('components.hud.offcanvas-divider-bottom')
        </div>
    </div>
</div>

HUD Card Component

Glassmorphic cards with neon borders and glow effects.

Basic HUD Card

<div class="hud-card">
    <h5 class="orbitron mb-3">System Status</h5>
    <p class="mb-0">All systems operational</p>
</div>

HUD Card with Content

<div class="hud-card">
    <div class="d-flex align-items-center mb-3">
        <span class="material-symbols-rounded text-cyan me-2">terminal</span>
        <h5 class="orbitron mb-0">Terminal Access</h5>
    </div>

    <div class="mb-3">
        <div class="d-flex justify-content-between mb-1">
            <span>CPU Usage</span>
            <span class="text-cyan">47%</span>
        </div>
        <div class="progress" style="height: 4px;">
            <div class="progress-bar bg-cyan" style="width: 47%"></div>
        </div>
    </div>

    <div class="mb-3">
        <div class="d-flex justify-content-between mb-1">
            <span>Memory</span>
            <span class="text-magenta">82%</span>
        </div>
        <div class="progress" style="height: 4px;">
            <div class="progress-bar bg-magenta" style="width: 82%"></div>
        </div>
    </div>

    <button class="btn btn-cyber w-100">
        <i class="material-symbols-rounded me-2">refresh</i>Refresh Status
    </button>
</div>

HUD Card Grid

<div class="row g-3">
    <div class="col-md-4">
        <div class="hud-card text-center">
            <i class="material-symbols-rounded text-cyan mb-2" style="font-size: 3rem;">speed</i>
            <h3 class="orbitron text-cyan mb-1">98.4%</h3>
            <p class="text-muted mb-0">Uptime</p>
        </div>
    </div>

    <div class="col-md-4">
        <div class="hud-card text-center">
            <i class="material-symbols-rounded text-success mb-2" style="font-size: 3rem;">check_circle</i>
            <h3 class="orbitron text-success mb-1">Active</h3>
            <p class="text-muted mb-0">System Status</p>
        </div>
    </div>

    <div class="col-md-4">
        <div class="hud-card text-center">
            <i class="material-symbols-rounded text-warning mb-2" style="font-size: 3rem;">memory</i>
            <h3 class="orbitron text-warning mb-1">47 GB</h3>
            <p class="text-muted mb-0">Available</p>
        </div>
    </div>
</div>

HUD Button Component

Futuristic buttons with glow effects on hover.

Basic Cyber Button

<button type="button" class="btn btn-cyber">
    <i class="material-symbols-rounded me-2">power_settings_new</i>
    Initialize System
</button>

Button Variants

<!-- Standard cyber button -->
<button class="btn btn-cyber">Standard</button>

<!-- Cyber button with primary glow -->
<button class="btn btn-cyber btn-cyber-primary">Primary</button>

<!-- Small cyber button -->
<button class="btn btn-cyber btn-sm">Small</button>

<!-- Large cyber button -->
<button class="btn btn-cyber btn-lg">Large</button>

<!-- Full-width cyber button -->
<button class="btn btn-cyber w-100">Full Width</button>

Button Groups

<div class="btn-group" role="group">
    <button type="button" class="btn btn-cyber">
        <i class="material-symbols-rounded">chevron_left</i>
    </button>
    <button type="button" class="btn btn-cyber">System Control</button>
    <button type="button" class="btn btn-cyber">
        <i class="material-symbols-rounded">chevron_right</i>
    </button>
</div>

Icon-Only Buttons

<button type="button" class="btn btn-cyber" aria-label="Settings">
    <i class="material-symbols-rounded">settings</i>
</button>

<button type="button" class="btn btn-cyber" aria-label="Refresh">
    <i class="material-symbols-rounded">refresh</i>
</button>

<button type="button" class="btn btn-cyber" aria-label="Notifications">
    <i class="material-symbols-rounded">notifications</i>
</button>

SVG Decorations

Pre-built SVG decorations for HUD-style interfaces.

Available SVG Components

  1. Modal Header SVG - components.hud.modal-header-svg
  2. Modal Footer SVG - components.hud.modal-footer-svg
  3. Offcanvas Top Divider - components.hud.offcanvas-divider-top
  4. Offcanvas Bottom Divider - components.hud.offcanvas-divider-bottom

Usage in Custom Components

<!-- Header decoration -->
<div class="hud-header-svg-container" aria-hidden="true">
    @include('components.hud.modal-header-svg')
</div>

<!-- Footer decoration -->
<div class="hud-footer-svg-container" aria-hidden="true">
    @include('components.hud.modal-footer-svg')
</div>

<!-- Top divider -->
<div class="hud-divider-top" aria-hidden="true">
    @include('components.hud.offcanvas-divider-top')
</div>

<!-- Bottom divider -->
<div class="hud-divider-bottom" aria-hidden="true">
    @include('components.hud.offcanvas-divider-bottom')
</div>

Customizing SVG Colors

The SVG elements use the .hud-svg-fill class for their fill color. Customize in your SCSS:

.hud-svg-fill {
    fill: rgba(255, 0, 255, 0.8); // Magenta
}

// Or use CSS variables
:root {
    --hud-svg-color: rgba(0, 255, 255, 0.8); // Cyan
}

.hud-svg-fill {
    fill: var(--hud-svg-color);
}

Background Animation System

Add animated backgrounds to HUD interfaces.

Quick Start

<!-- Add canvas element -->
<canvas id="background-canvas"></canvas>

<!-- Include the script -->
<script src="{{ asset('js/hui-background.js') }}"></script>

<!-- Initialize -->
<script>
    HUIBackground.init('starfield', {
        count: 800,
        speed: 1.5,
        starColor: 'rgba(255, 255, 255, 0.8)',
        backgroundColor: 'rgba(13, 2, 33, 1)'
    });
</script>

Available Modes

  • starfield - 3D starfield with perspective depth
  • waves - Flowing wave patterns
  • circles - Animated floating circles
  • lines - Moving geometric lines

Auto-initialization

<canvas id="background-canvas" 
        data-mode="starfield" 
        data-config='{"count": 600, "speed": 1.2}'></canvas>

JavaScript Methods

// Change mode dynamically
HUIBackground.changeMode('waves');

// Destroy animation
HUIBackground.destroy();

// Check status
if (HUIBackground.isInitialized()) {
    console.log('Current mode:', HUIBackground.getMode());
}

CSS Classes Reference

Layout Classes

Class Description
.modal-hud HUD styling for modals
.offcanvas-hud HUD styling for offcanvas panels
.hud-card Glassmorphic card with neon border

Typography Classes

Class Description
.orbitron Orbitron font (weight 400)
.orbitron-bold Orbitron font (weight 700)

Color Classes

Class Description
.text-cyan Cyan text color
.text-magenta Magenta text color
.bg-cyan Cyan background
.bg-magenta Magenta background
.hud-svg-fill Fill color for HUD SVG elements

Component Classes

Class Description
.btn-cyber Futuristic button with glow effect
.menu-header Section header in offcanvas/sidebar
.hud-header-svg-container Container for modal header SVG
.hud-footer-svg-container Container for modal footer SVG
.hud-divider-top Top divider with SVG
.hud-divider-bottom Bottom divider with SVG

Full Example: System Status Dashboard

<!-- Background -->
<canvas id="background-canvas" data-mode="starfield"></canvas>

<!-- HUD Cards Grid -->
<div class="container py-5">
    <h1 class="orbitron text-center mb-5">System Status Dashboard</h1>

    <div class="row g-4 mb-4">
        <div class="col-md-4">
            <div class="hud-card text-center">
                <i class="material-symbols-rounded text-cyan mb-3" style="font-size: 3rem;">memory</i>
                <h3 class="orbitron text-cyan mb-2">8.2 GB</h3>
                <p class="text-muted mb-3">Memory Used</p>
                <div class="progress" style="height: 4px;">
                    <div class="progress-bar bg-cyan" style="width: 64%"></div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="hud-card text-center">
                <i class="material-symbols-rounded text-success mb-3" style="font-size: 3rem;">check_circle</i>
                <h3 class="orbitron text-success mb-2">Optimal</h3>
                <p class="text-muted mb-3">System Health</p>
                <button class="btn btn-cyber btn-sm" data-bs-toggle="modal" data-bs-target="#statusModal">
                    View Details
                </button>
            </div>
        </div>

        <div class="col-md-4">
            <div class="hud-card text-center">
                <i class="material-symbols-rounded text-warning mb-3" style="font-size: 3rem;">speed</i>
                <h3 class="orbitron text-warning mb-2">47%</h3>
                <p class="text-muted mb-3">CPU Usage</p>
                <div class="progress" style="height: 4px;">
                    <div class="progress-bar bg-warning" style="width: 47%"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="text-center">
        <button class="btn btn-cyber me-2" data-bs-toggle="offcanvas" data-bs-target="#systemMenu">
            <i class="material-symbols-rounded me-2">menu</i>System Menu
        </button>
        <button class="btn btn-cyber" data-bs-toggle="modal" data-bs-target="#statusModal">
            <i class="material-symbols-rounded me-2">info</i>Full Report
        </button>
    </div>
</div>

<!-- Status Modal -->
<x-hud.modal 
    id="statusModal" 
    title="System Status Report"
    size="lg"
    :show-header-dropdown="true"
    :dropdown-items="[
        ['label' => 'Refresh', 'icon' => 'refresh'],
        ['label' => 'Export PDF', 'icon' => 'picture_as_pdf'],
        ['divider' => true],
        ['label' => 'Settings', 'icon' => 'settings'],
    ]">

    <div class="row g-3">
        <div class="col-md-6">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="orbitron">Laravel Version</span>
                <span class="badge bg-primary">{{ app()->version() }}</span>
            </div>
            <div class="progress" style="height: 4px;">
                <div class="progress-bar bg-primary" style="width: 100%"></div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="orbitron">System Health</span>
                <span class="badge bg-success">Optimal</span>
            </div>
            <div class="progress" style="height: 4px;">
                <div class="progress-bar bg-success" style="width: 98%"></div>
            </div>
        </div>
    </div>
</x-hud.modal>

<!-- System Menu Offcanvas -->
<div class="offcanvas offcanvas-start offcanvas-hud" tabindex="-1" id="systemMenu">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title orbitron">System Interface</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>

    <div class="hud-divider-top" aria-hidden="true">
        @include('components.hud.offcanvas-divider-top')
    </div>

    <div class="offcanvas-body">
        <div class="menu-header orbitron">Core Systems</div>
        <div class="list-group list-group-flush">
            <a href="#" class="list-group-item list-group-item-action">
                <span class="material-symbols-rounded">dashboard</span>
                Dashboard
            </a>
            <a href="#" class="list-group-item list-group-item-action">
                <span class="material-symbols-rounded">memory</span>
                System Resources
            </a>
            <a href="#" class="list-group-item list-group-item-action">
                <span class="material-symbols-rounded">settings</span>
                Configuration
            </a>
        </div>

        <div class="hud-divider-bottom" aria-hidden="true">
            @include('components.hud.offcanvas-divider-bottom')
        </div>
    </div>
</div>

<script src="{{ asset('js/hui-background.js') }}"></script>

Tips & Best Practices

  1. Multiple Modals: Each modal needs a unique id prop
  2. Orbitron Font: Use class .orbitron on headings for the futuristic look
  3. Cyber Buttons: Use .btn-cyber instead of standard Bootstrap buttons for HUD interfaces
  4. Progress Bars: Use thin progress bars (4px height) for status indicators
  5. Material Icons: Use material-symbols-rounded class for icons
  6. Color Consistency: Stick to cyan and magenta for HUD elements
  7. Glassmorphism: The .hud-card class works best on dark backgrounds
  8. Performance: Background animations use requestAnimationFrame for smooth 60fps

Controller Integration

Pass dropdown items from your controller:

public function dashboard()
{
    $modalActions = [
        ['label' => 'Refresh', 'icon' => 'refresh', 'url' => route('refresh')],
        ['label' => 'Export', 'icon' => 'download', 'url' => route('export')],
        ['divider' => true],
        ['label' => 'Settings', 'icon' => 'settings', 'url' => route('settings')],
    ];

    return view('admin.dashboard', compact('modalActions'));
}

Then in your view:

<x-hud.modal 
    id="dynamicModal" 
    title="Dynamic Modal"
    :show-header-dropdown="true"
    :dropdown-items="$modalActions">

    Content here
</x-hud.modal>

Color Palette

The HUD system uses a cyberpunk-inspired color palette:

  • Primary Cyan: rgba(0, 255, 255, 0.8)
  • Primary Magenta: rgba(255, 0, 255, 0.8)
  • Background: rgba(13, 2, 33, 1)
  • Card Background: rgba(13, 2, 33, 0.08)
  • Border Glow: rgba(0, 255, 255, 0.3)

Dependencies

  • Bootstrap 5.3.8
  • Material Symbols Rounded (Google Fonts)
  • Orbitron Font (Google Fonts)
  • Laravel Blade templating

Browser Compatibility

  • Modern Browsers: Full support with backdrop-filter and CSS animations
  • Fallback: Basic styling without backdrop blur on older browsers
  • Performance: Optimized with requestAnimationFrame and debounced resize handlers

Related Documentation

A huement.com Original Project