ScifiPanelDeck

⚡WASM Powered

🏅Original

ScifiPanelDeck is the horizontally expanding container in the TechUI Scifi panel series.

Its design is inspired by the "Widescreen Format". Unlike traditional fully enclosed panels, its visual focus is highly concentrated on the horizontal beams at the top or bottom, while the left and right sides remain open or retain only minimalist connections.

These horizontal beams can serve as a base for titles or as a top bar.

Note: This component can be invoked using ScifiPanelB2 or its semantic alias ScifiPanelDeck.

Basic Usage

Default Morphology

By default, B2 renders two horizontal beams with sci-fi chamfers at the top and bottom. When the component loads, these two beams automatically execute an entry animation expanding from the center to the sides, instantly enhancing the technological dynamism of the interface.

<template>
  <div style="width: 100%; height: 150px;">
    <ScifiPanelDeck>
      <div class="data-stream">
        <span>> System Logs Loading... [Done]</span>
        <span>> Establishing Connection... [Success]</span>
      </div>
    </ScifiPanelDeck>
  </div>
</template>

<style scoped>
.data-stream {
  padding: 20px;
  color: #00eeff;
  font-family: monospace;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>

Visual Variants

The morphological changes of B2 mainly revolve around "dynamics" and "simplicity".

Entry Animation

The signature feature of B2 is its line entry animation.

• animation: Controls whether to enable the entry animation (default is true).
• aniDuration: Controls the duration of the line expansion (in seconds).

For scenes requiring rapid information display, the animation time can be shortened; for large-screen openings emphasizing a sense of ceremony, it can be appropriately extended.

<template>
  <div class="grid">
    <ScifiPanelDeck :aniDuration="1">
      <div class="p-4">Fast Boot</div>
    </ScifiPanelDeck>

    <ScifiPanelDeck :aniDuration="3">
      <div class="p-4">System Initialization...</div>
    </ScifiPanelDeck>
    
    <ScifiPanelDeck :animation="false">
      <div class="p-4">Static View</div>
    </ScifiPanelDeck>
  </div>
</template>

Minimalist Mode (Decoration & Border)

The horizontal beams of B2 feature fine geometric decorations (thickened endpoints or scales) at both ends by default.

• decoration: false: After turning off decorations, the panel becomes two pure straight lines, creating a more minimalist style.
• borderWidth: Increasing the line thickness reinforces the physical feel of a "clamp".

<template>
  <ScifiPanelDeck 
    :decoration="false" 
    :borderWidth="3"
  >
    <div class="simple-content">Minimal & Heavy</div>
  </ScifiPanelDeck>
</template>

Cyber Glow

When glow is enabled, the top and bottom beams produce a strong halo, making them appear like floating neon tubes.

<template>
  <ScifiPanelDeck 
    :glow="true" 
    className="neon-bar"
    :backgroundOpacity="0.8"
  >
    <div class="status-bar">SYSTEM ONLINE</div>
  </ScifiPanelDeck>
</template>

CSS Variable

The horizontal structure of B2 is perfect for simulating "movie subtitles" or "holographic banners". Through CSS variables, we can define a futuristic violet style.

Case: Violet Stream

This style uses a gradient of purple and magenta, suitable as a display container for secondary information.

<template>
  <ScifiPanelDeck 
    className="panel-violet"
    :aniDuration="2"
    :glow="true"
    :backgroundBlur="true"
  >
    <div class="stream-content">
      Upload: 890 MB/s | Download: 1.2 GB/s
    </div>
  </ScifiPanelDeck>
</template>

<style lang="less">
/* Custom Violet Style */
.panel-violet {
  /* Border: Purple */
  --sf-panel-bd: #a855f7;
  
  /* Background: Deep Purple semi-transparent */
  --sf-panel-bg: rgba(20, 0, 40, 0.6);
  
  /* Glow: Magenta halo */
  --sf-panel-glow: #d946ef;
  
  /* Decoration highlight: Pink */
  --sf-panel-hlite: #f5d0fe;
}
</style>

Combined Usage

Pair with Floating Titles

ScifiPanelDeck is perfectly suited for use with ScifiPanelTitle. A classic layout involves floating the title component in the center or left of B2's top border, creating the effect of a "monitor with an independent nameplate".

<template>
  <div class="combo-box" style="position: relative; margin-top: 20px;">
    <div style="position: absolute; top: -12px; left: 20px; z-index: 2;">
      <ScifiPanelTitle text="DATA LOGS" :scale="0.8" />
    </div>

    <ScifiPanelDeck :backgroundBlur="true">
      <div class="logs-area">
        [10:00:01] Auth Check passed.<br>
        [10:00:02] Module loaded.
      </div>
    </ScifiPanelDeck>
  </div>
</template>

API Reference

Props

Property	Description	Type	Default
animation	Entry Animation. Whether to enable the line expansion animation	Boolean	true
aniDuration	Animation Duration. Duration of the line expansion (seconds)	Number	—
decoration	Whether to display decorative endpoints at both ends of the lines	Boolean	true
borderd	Whether to display top and bottom border lines	Boolean	true
borderWidth	Border line width (px)	Number	—
backgroundOpacity	Opacity of the background color (0-1)	Number	—
backgroundBlur	Whether to enable the background glass morphism effect	Boolean	false
glow	Whether to enable the outer glow filter	Boolean	false
glowOpacity	Opacity of the outer glow (0-1)	Number	—
rotate	Rotation/Mirror mode (x, y, etc.)	String	—
scale	Overall scale ratio	Number	1
className	Custom container class name	String	—

CSS Variables

You can override the following variables at the component's parent level or via className to control the component's color scheme and appearance.

Variable Name	Description	Default Reference
--sf-panel-bg	Panel background fill color	var(--scifi-bg)
--sf-panel-bgop	Background opacity	var(--cpt-panel-bgop, 1)
--sf-panel-bd	Border line color	var(--scifi-bd)
--sf-panel-bdw	Border line width	var(--cpt-panel-bdw, 1px)
--sf-panel-fc	Title text color	var(--scifi-fc)
--sf-panel-hlite	highlight color	var(--scifi-hlite)
--sf-panel-focus	Focus color	var(--scifi-focus)
--sf-panel-glow	Inner glow color	var(--scifi-focus)
--sf-panel-glowop	Inner glow opacity	var(--cpt-panel-glowop, .5)
--sf-panel-shadow	Container shadow	var(--shadow-weak)
--sf-panel-scale	Overall scaling ratio	var(--cpt-panel-scale)