ScifiPanelPawn

⚡WASM Powered

🏅Original

ScifiPanelPawn is the lightweight tactical container in the TechUI Scifi panel series.

It adopts a minimalist "Symmetric Chamfer" design language. By default, it consists only of Diagonal Slits at two corners. This extremely restrained design significantly reduces visual interference, preserving the maximum transparency of the content within the container.

Note: This component can be invoked using ScifiPanelB3 or its semantic alias ScifiPanelPawn.

Basic Usage

Default Morphology

By default, B3 renders diagonal slits at the four corners. It automatically adapts to the size of the internal content. This diagonal design is more dynamic than right angles, possessing a sense of "locking-on" movement.

<template>
  <div style="width: 300px; height: 200px;">
    <ScifiPanelPawn>
      <div class="target-box">
        <span class="label">TARGET DETECTED</span>
      </div>
    </ScifiPanelPawn>
  </div>
</template>

<style scoped>
.target-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #00eeff;
  letter-spacing: 2px;
}
</style>

Visual Variants

The core of B3 lies in the switching of corner shapes, allowing it to transition freely between "agile" and "stable" styles.

Decoration Alt

The decorationAlt property is the key attribute for switching the B3 style.

• False (Default): Diagonal Chamfers. Sharper visual, strong tech feel, resembling an aircraft HUD interface.
• True: Right-angle L-shaped Corners. More stable visual, similar to traditional viewfinder frames, providing a stronger sense of enclosure.

<template>
  <div class="grid">
    <ScifiPanelPawn>
      <div class="p-4">Agile Mode</div>
    </ScifiPanelPawn>

    <ScifiPanelPawn :decorationAlt="true">
      <div class="p-4">Stable Mode</div>
    </ScifiPanelPawn>
  </div>
</template>

Minimalism and Boldness (Border Width)

By adjusting borderWidth, you can change the visual weight of the corner marks.

• Decoration: False: If decoration is turned off, B3 degrades into a more stealthy dot-like or miniature corner mark style.

<template>
  <ScifiPanelPawn :borderWidth="3" :decorationAlt="true">
    <div class="p-4">Lock Frame</div>
  </ScifiPanelPawn>
</template>

Cyber Glow

The corner marks of B3 are perfectly suited for glow effects. When glow is enabled, the cursors at the four corners present a highlighted halo, much like the "item highlight" effect in video games.

<template>
  <ScifiPanelPawn 
    :glow="true" 
    :glowOpacity="1"
    className="neon-cursor"
  >
    <div class="item-slot">ITEM SELECTED</div>
  </ScifiPanelPawn>
</template>

CSS Variable

The lightweight nature of B3 makes it ideal for various high-saturation neon color schemes. Through CSS variables, we can define styles such as "Void Neon" or "Stealth Gray".

Case: Void Neon Style

This style uses contrasting purple and cyan to simulate neon sign frames in cyberpunk aesthetics.

<template>
  <ScifiPanelPawn 
    className="panel-void"
    rotate="z"
    :decorationAlt="true"
    :glow="true"
    :backgroundOpacity="0.8"
  >
    <div class="neon-content">
      NEON CITY
    </div>
  </ScifiPanelPawn>
</template>

<style lang="less">
/* Custom Void Neon Style */
.panel-void {
  /* Border: Purple */
  --sf-panel-bd: #d946ef;
  
  /* Background: Extremely deep purple background */
  --sf-panel-bg: rgba(20, 0, 30, 0.9);
  
  /* Glow: Strong purple halo */
  --sf-panel-glow: #a855f7;
  
  /* Decoration Highlight: Cyan (creating contrast) */
  --sf-panel-hlite: #22d3ee;
}
</style>

Combined Usage

Lists and Grids

Because B3 has minimal visual interference, it is an excellent choice for creating nine-square menus or dense data lists.

<template>
  <div class="grid-menu" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
    <ScifiPanelPawn v-for="i in 6" :key="i" :backgroundOpacity="0.5">
      <div class="grid-item">Module {{ i }}</div>
    </ScifiPanelPawn>
  </div>
</template>

API Reference

Props

Property	Description	Type	Default
decoration	Whether to display corner mark decorations	Boolean	true
decorationAlt	Decoration Variant. false for diagonal chamfers, true for L-shaped right angles	Boolean	false
borderd	Whether to display corner mark lines	Boolean	true
borderWidth	Line width (px)	Number	—
backgroundOpacity	Background color opacity (0-1)	Number	—
backgroundBlur	Whether to enable background glass morphism	Boolean	false
glow	Whether to enable the outer glow filter	Boolean	false
glowOpacity	Outer glow opacity (0-1)	Number	—
rotate	Rotation/Mirror. x/y/z can change the direction of diagonal chamfers	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)