ScifiPanel Overview

TechUI Scifi Panel is a library of container components specifically designed for building high-density, futuristic data dashboards.

These components are more than just simple borders; they serve as the fundamental building blocks for creating Cyberpunk, Sci-Fi, and Tactical interfaces. Utilizing SVG path calculation, WASM rendering acceleration, and extreme CSS performance optimization, ScifiPanel provides comprehensive solutions ranging from lightweight decorations to heavy armored styles.

Design Philosophy

• SVG and CSS Hybrid Power: Core complex geometric paths are calculated in real-time using SVG to ensure clarity at any size, while high-performance dynamic effects like glow and blur leverage CSS3 hardware acceleration.
• Highly Configurable: Unlike traditional "rigid" dashboard image slices, nearly all panels support properties such as borderWidth, backgroundOpacity, glow, and geometric transformations like rotation or mirroring.
• Theming Adaptation: All components feature built-in CSS variable interfaces. By modifying just a few CSS variables, the interface can instantly switch from "Federation Blue" to "Crimson Storm" or "Hacker Matrix" styles.

Regarding Naming and Aliases

To balance development stability with code readability, TechUI Scifi Panel components employ a dual naming strategy. Every component possesses a fixed original serial name and a semantic alias.

• Fixed Serial Name
  • Examples: ScifiPanelA1, ScifiPanelDV5.
  • This is the underlying physical ID based on the development sequence. It is permanently fixed and cannot be changed. For absolute backward compatibility in future iterations, using this name is recommended.
• Semantic Alias
  • Examples: ScifiPanelAlpha, ScifiPanelZone.
  • These are shortcuts named based on visual style or design metaphors to improve code readability.

Note: As design languages evolve, specific aliases may undergo semantic adjustments or renaming in later versions. Please refer to the changelogs during major version upgrades.

Component Family

ScifiPanel currently consists of four major series with over 20 independent components to meet various layout requirements.

ScifiPanelA Series (Chamfers and Notches)

Keywords: Title · Chamfer · Notch

This series is designed specifically for "independent modules with titles". They feature complex geometric chamfers or physical notches to accommodate title text.

• A1 (Chamfer Panel): The flagship component supporting 16 types of geometric transformations, allowing the title to be placed in any corner.
• A2 (Industrial Notch): Features a rugged inset title slot, ideal for heavy industrial or military styles.
• A3 (Triangular Badge): A minimalist corner badge suitable for serial numbers (e.g., No.1) or status indicators.

ScifiPanelB Series (Decorations and Boundaries)

Keywords: Focus · Brackets · Infinity

This series consists of "titleless decorative containers". They use the sense of enclosure provided by lines to reinforce the independence of the content.

• B1 (Four-Corner Protection): Classic L-shaped corner enclosures that create a sense of focus.
• B2 (Top-Bottom Clamps): Cinematic top and bottom beams suitable for widescreen content.
• B3 (Tactical Badge): Agile beveled or right-angled positioning points, ideal for dense lists.
• B4 (Infinite Horizon): Fully enclosed multi-layer borders that create a deep infinite mirror effect.

ScifiPanelDV Series (DataV Port Enhancements)

Keywords: Dynamic · Animation · DataV

This series is ported from the excellent open-source project @jiaminghi/data-view. We have retained the classic dynamic SVG path animations (such as streamer, breath, and flicker) from the original dv-border-box while performing a deep refactor:

• Unified API: Standardized the original snake_case naming (e.g., title_width) into camelCase (titleWidth).
• Style Enhancements: Added TechUI-specific features such as background frosted glass (backgroundBlur), global glow (glow), and CSS variable skinning support.
• Component Mapping:
• DV1 ~ DV3: Dynamic titles and heavy decorations.
• DV4 ~ DV6: Various variants of anchors and brackets.
• DV7 ~ DV9: Rounded streamers and dynamic cruising.

TuiPanel Series (Pure CSS Lightweight)

Keywords: Performance · Border-Radius · Lightweight

• TuiPanelA1 (Alias TuiPanelZero): The only pure CSS implementation. It supports Border Radius and has extremely low rendering overhead, making it ideal for wrapping buttons, input boxes, or for use in large-scale long lists.

Quick Start

<template>
  <div class="dashboard-grid">
    <ScifiPanelAlpha title="SYSTEM STATUS" :borderWidth="2">
      <div class="content">NORMAL</div>
    </ScifiPanelAlpha>

    <ScifiPanelFlow :aniDuration="2" :glow="true">
      <div class="content">SCANNING...</div>
    </ScifiPanelFlow>
  </div>
</template>