ScifiPanelSentinel

⚡WASM Powered

🏅Original

ScifiPanelSentinel is the focus-oriented decorative container in the TechUI Scifi panel series.

It adopts the classic "Four-corner Armor" and "Optical Lock-on" design languages. The four corners of the panel are wrapped in precisely calculated L-shaped geometric armor, while the middle of the border is left blank. This unique visual structure creates a strong "gaze-locking sensation," resembling a camera viewfinder or the locking interface of a weapon system.

This component subconsciously directs the user's attention to the geometric center of the container. By abandoning the constraints of a top title bar, it is an excellent choice for wrapping high-weight independent content (such as real-time monitoring streams, 3D model previews, or core key metrics), providing strong military-industrial style decoration without interfering with the content itself.

Note: This component can be invoked using ScifiPanelB1 or its semantic alias ScifiPanelSentinel.

Basic Usage

Default Morphology

By default, ScifiPanelSentinel renders solid L-shaped borders at the four corners. It automatically adapts to the size of the internal content or follows the dimensions of its parent container.

<template>
  <div style="width: 400px; height: 300px;">
    <ScifiPanelSentinel>
      <div class="content-box">
        <span class="text">System Ready</span>
      </div>
    </ScifiPanelSentinel>
  </div>
</template>

<style scoped>
.content-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
</style>

Visual Variants

Although B1 has a simple structure, it can present entirely different textures by adjusting border thickness and decoration styles.

Border Width

The thickness of the four-corner lines can be controlled via borderWidth.

• 1-2px: Precision instrument style, suitable for displaying charts.
• 3-5px: Heavy armor style, suitable for emphasizing defensive attributes.

<template>
  <div class="grid">
    <ScifiPanelSentinel :borderWidth="1">
      <div class="p-4">Precision Mode</div>
    </ScifiPanelSentinel>

    <ScifiPanelSentinel :borderWidth="4">
      <div class="p-4">Armor Mode</div>
    </ScifiPanelSentinel>
  </div>
</template>

Decoration Alt

The decorationAlt property controls the specific rendering logic of the corners.

• False (Default): Standard solid L-shaped corner blocks.
• True: Switches to a hollow line or double-line cut style, which is visually lighter and more breathable, suitable for overlaying on complex map backgrounds.

<template>
  <ScifiPanelSentinel :decorationAlt="true">
    <MapComponent />
  </ScifiPanelSentinel>
</template>

Cyber Glow

When the glow property is enabled, the panel edges generate a highlighted outer glow effect. This is a key attribute for creating "Cyberpunk" or "Holographic Projection" styles.

<template>
  <ScifiPanelSentinel 
    :glow="true" 
    :glowOpacity="0.8"
    :backgroundOpacity="0.6"
  >
    <div class="warning-text">HOLOGRAPHIC VIEW</div>
  </ScifiPanelSentinel>
</template>

CSS Variable

The "locking frame" form of B1 is very suitable for creating tactical-style interfaces. By passing a className and overriding CSS variables, we can easily define "Night Vision" or "Tactical Terminal" styles.

Case: Tactical Night Style

This style uses high-saturation fluorescent green to simulate the visual effect of night vision goggles or old-fashioned radar.

<template>
  <ScifiPanelSentinel 
    className="panel-tactical"
    :decorationAlt="true"
    :glow="true"
    :backgroundBlur="true"
  >
    <div class="radar-view">
      <icon name="target" /> TARGET LOCKED
    </div>
  </ScifiPanelSentinel>
</template>

<style lang="less">
/* Custom Tactical Night Style */
.panel-tactical {
  /* Border: Fluorescent Green */
  --sf-panel-bd: #00ff00;
  
  /* Background: Extremely dark green semi-transparent */
  --sf-panel-bg: rgba(0, 20, 0, 0.6);
  
  /* Glow: Green halo */
  --sf-panel-glow: #00ff00;
  
  /* Decoration highlight: White-green */
  --sf-panel-hlite: #ccffcc;
}
</style>

Combined Usage

Pair with Title Components

Since B1 itself does not include a title, you can use it in combination with ScifiPanelTitle to achieve a layout where the "title floats above the container".

<template>
  <div class="complex-module">
    <div class="module-header">
      <ScifiPanelTitle text="MONITOR FEED" />
    </div>
    
    <ScifiPanelSentinel :decorationAlt="true">
      <VideoPlayer />
    </ScifiPanelSentinel>
  </div>
</template>

API Reference

Props

Property	Description	Type	Default
decoration	Whether to display decoration elements at the four corners	Boolean	true
decorationAlt	Decoration Variant. Whether to switch to hollow/line corner styles	Boolean	false
borderd	Whether to display the border lines connecting the four corners	Boolean	true
borderWidth	Width of the border/corner lines (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	—
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)