ScifiPanelInfinity

⚡WASM Powered

🏅Original

ScifiPanelInfinity is a fully enclosed immersive container within the TechUI Scifi panel series.

Its core design philosophy is derived from the concepts of the "Infinity Mirror" and "Dimensional Layering." Unlike ordinary single-line borders, it utilizes a precise superposition of multiple concentric rectangular lines to construct a sense of visual depth on a 2D screen, as if leading into the distance.

This unique nested structure grants the container a powerful sense of isolation and ritual. It acts like a multi-layered reinforced display case, making it ideal for carrying core data dashboards, holographic image carriers, or main control windows that require extremely high visual weight. It ensures that content stands out in complex interfaces and becomes the absolute focal point of the vision.

Note: This component can be invoked via ScifiPanelB4 or its semantic alias ScifiPanelInfinity.

Basic Usage

Default Form

By default, B4 renders a closed border with double or multi-layered line details. It acts like a window to the future, perfectly isolating internal content from the external environment.

<template>
  <div style="width: 100%; height: 300px;">
    <ScifiPanelInfinity>
      <div class="main-window">
        <RealtimeMap />
      </div>
    </ScifiPanelInfinity>
  </div>
</template>

Visual Variants

The morphological changes of B4 are mainly reflected in the adjustment of "depth."

Depth and Minimalism (Decoration)

The "infinite" feel of B4 comes from its internal decorative lines (decoration).

• True (Default): Displays the internal second/third layer borders, strengthening the "infinity mirror" tunnel effect.
• False: Turns off the internal lines, keeping only the outermost frame for a flatter, cleaner visual.

<template>
  <div class="grid">
    <ScifiPanelInfinity :decoration="true" :borderWidth="2">
      <div class="p-4">Infinity Mode</div>
    </ScifiPanelInfinity>

    <ScifiPanelInfinity :decoration="false" :borderWidth="1">
      <div class="p-4">Flat Mode</div>
    </ScifiPanelInfinity>
  </div>
</template>

Holographic Glassmorphism (Glassmorphism)

Combined with backgroundBlur and low-opacity backgrounds, B4 can simulate a thick glass plate suspended in the air. The multi-layered borders act like the frosted edges of the glass pane.

<template>
  <div class="modal-layer">
    <ScifiPanelInfinity 
      :backgroundBlur="true" 
      :backgroundOpacity="0.3"
      :borderd="false"
    >
      <div class="glass-content">
        System Prompt: Data synchronization complete
      </div>
    </ScifiPanelInfinity>
  </div>
</template>

Glow

The closed rectangular structure of B4 is the perfect carrier for the Glow effect. When glow is enabled, the multi-layered borders illuminate simultaneously, creating a visual impact similar to neon tubes or laser etching.

<template>
  <ScifiPanelInfinity 
    :glow="true" 
    :glowOpacity="1"
    className="neon-frame"
  >
    <div class="content">CORE SYSTEM</div>
  </ScifiPanelInfinity>
</template>

CSS Variable

The closed structure of B4 is well-suited for deep color schemes. Through CSS variables, we can define a "Deep Space Purple" or "Black Hole" style.

Case Study: Deep Space Neon Style

This style uses a deep purple background coupled with high-brightness purple borders to create a mysterious, high-tech atmosphere.

<template>
  <ScifiPanelInfinity 
    className="panel-deep-space"
    :glow="true"
    :backgroundOpacity="0.9"
  >
    <div class="neon-content">
      HYPER LOOP
    </div>
  </ScifiPanelInfinity>
</template>

<style lang="less">
/* Custom Deep Space Neon Style */
.panel-deep-space {
  /* Border: Purple */
  --sf-panel-bd: #d946ef;
  
  /* Background: Ultra-deep purple (near black) */
  --sf-panel-bg: rgba(10, 0, 20, 0.95);
  
  /* Glow: Purple halo */
  --sf-panel-glow: #a855f7;
  
  /* Decoration Highlight: Cyan (accent) */
  --sf-panel-hlite: #22d3ee;
}
</style>

Combined Usage

Card Layout

Since B4 provides the most complete physical boundary, it is ideal as a base for a Card. You can nest titles, charts, and action bars within it to build an independent business unit.

<template>
  <div class="card-module">
    <ScifiPanelInfinity>
      <div class="card-inner">
        <ScifiHeaderPhantom text="SYSTEM LOG" :width="200" :scale="0.8" />
        
        <div class="card-body">
          Log content area...
        </div>
      </div>
    </ScifiPanelInfinity>
  </div>
</template>

API Reference

Props

Property	Description	Type	Default
decoration	Whether to show internal hierarchical decorative lines (core of the infinity mirror effect)	Boolean	true
decorationAlt	Decorative Variant. Switches the line style	Boolean	false
borderd	Whether to show the outermost border	Boolean	true
borderWidth	Border line width (px)	Number	—
backgroundOpacity	Background opacity (0-1)	Number	—
backgroundBlur	Whether to enable the background glassmorphism effect	Boolean	false
glow	Whether to enable outer glow	Boolean	false
glowOpacity	Outer glow opacity (0-1)	Number	—
scale	Overall scaling 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)