ScifiPanelReactor

⚡WASM Powered

⭐Star

🧬Ported from [DataV]

ScifiPanelReactor is a dynamic and active container within the TechUI Scifi panel series.

It was ported and reconstructed from the open-source project @jiaminghi/data-view (original prototype dv-border-box-1). It adopts a classic "Four-corner Energy Containment" design language. The visual focus is dispersed to the four corners of the panel, where multiple sets of precise geometric lines construct a stable "mechanical gripper" form, featuring built-in breathing flicker animations.

This design provides a clear sense of boundaries while continuously attracting user attention through the dynamic rhythm of the corners. Acting like a small running reactor, it is ideal for Key Performance Indicator (KPI) cards, independent functional modules, or floating pop-ups, injecting a continuous sense of energy into static pages.

Note: This component can be invoked via ScifiPanelDV2 or its semantic alias ScifiPanelReactor.

Basic Usage

Default Form

By default, DV2 renders complex sci-fi decorations at the four corners with an automatic breathing flicker effect. The connecting lines of the border are relatively thin, emphasizing the visual weight of the corners.

<template>
  <div style="width: 400px; height: 300px;">
    <ScifiPanelReactor>
      <div class="card-content">
        <span class="label">MODULE 01</span>
      </div>
    </ScifiPanelReactor>
  </div>
</template>

Visual Variants

The morphological changes of DV2 mainly revolve around "decorative complexity" and "dynamic effects".

Animation Control

The decorative lines at the four corners feature a breathing animation (periodic change in opacity) by default.

• True (Default): Enables the breathing effect, making the interface more lifelike.
• False: Static display, suitable for low-power modes or scenarios where user distraction should be minimized.

<template>
  <div class="grid">
    <ScifiPanelReactor />

    <ScifiPanelReactor :animation="false" />
  </div>
</template>

Minimalism and Borders (Decoration & Border)

• borderd: Controls whether the thin borders connecting the four corners are displayed. If set to false, only the corner decorations remain, creating a more open visual.
• decoration: Controls the details of the corner decorations.
• borderWidth: Adjusts the thickness of the border lines.

<template>
  <ScifiPanelReactor 
    :borderd="false" 
    :backgroundOpacity="0.5"
  >
    <div class="content">OPEN VIEW</div>
  </ScifiPanelReactor>
  
  <ScifiPanelReactor :borderWidth="3" />
</template>

Glow

When glow is enabled, the breathing light effect at the four corners superimposes a highlight halo, creating a visual impact similar to an "energy pulse".

<template>
  <ScifiPanelReactor 
    :glow="true" 
    className="dv2-pulse"
  />
</template>

CSS Variable

The corner decorations of DV2 are defined by two main colors (border color + highlight color), which can be easily customized via CSS variables.

Case Study: Phantom Purple Style

This style utilizes a deep purple background and highlighted borders to create a mysterious high-tech feel.

<template>
  <ScifiPanelReactor 
    className="panel-phantom"
    :glow="true"
    :backgroundOpacity="0.9"
  >
    <div class="info-box">
      SYSTEM LOCKED
    </div>
  </ScifiPanelReactor>
</template>

<style lang="less">
.panel-phantom {
  /* Base Border Color: Purple */
  --sf-panel-bd: #7c3aed;
  
  /* Corner Decoration/Highlight Color: Bright Cyan (contrast) or Light Purple */
  --sf-panel-hlite: #a78bfa;
  
  /* Background Color: Deep Purple-Black */
  --sf-panel-bg: rgba(20, 0, 30, 0.9);
  
  /* Glow Color */
  --sf-panel-glow: #8b5cf6;
}
</style>

API Reference

Props

Property	Description	Type	Default
animation	Animation Toggle. Whether to enable breathing/flicker animations at the corners	Boolean	true
decoration	Decoration Toggle. Whether to show complex details at the corners	Boolean	true
borderd	Border Toggle. Whether to show the thin lines connecting the four corners	Boolean	true
borderWidth	Border line width (px)	Number	—
backgroundOpacity	Background opacity (0-1)	Number	—
backgroundBlur	Whether to enable background glassmorphism	Boolean	false
glow	Whether to enable outer glow	Boolean	false
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)

Credits

JiaMing

Github

This component is ported from the open-source library jiaminghi/data-view. On this foundation, deep customization has been performed based on the TechUI global theme, and numerous APIs have been added to significantly enhance the component's capabilities.

We would like to express our sincere gratitude and respect to the author, JiaMing!