ScifiPanelFlow

⚡WASM Powered

🧬Ported from [DataV]

ScifiPanel-Flow is a dynamic cruising container within the TechUI Scifi Panel series.

It is ported and refactored from the open-source project @jiaminghi/data-view (originally dv-border-box-8). It adopts an ultra-minimalist "Path Circulation" design language. While its physical structure is a standard rectangular closed loop, its visual soul lies in a "highlighted light strip" that cycles infinitely along the border path.

This dynamic effect, resembling a "comet cruise," gives the container a strong sense of life. It is not just a border, but an "active operation" status indicator, making it ideal for wrapping monitored footage being scanned, real-time data streams, or task progress panels to clearly convey that the system is actively functioning.

Tip: This component can be invoked via ScifiPanelDV9 or its semantic alias ScifiPanelFlow.

Basic Usage

Default Form

By default, DV9 renders a translucent base border overlaid with a bright light strip flowing clockwise.

<template>
  <div style="width: 400px; height: 300px;">
    <ScifiPanelFlow>
      <div class="process-box">
        <h3>SCANNING...</h3>
      </div>
    </ScifiPanelFlow>
  </div>
</template>

Visual Variants

The core of DV9 lies in controlling the movement of the "light strip."

Animation Control

You can finely control the speed and direction of the light strip through parameters.

• aniDuration: Time for the animation to cycle once (seconds). Smaller values result in faster speeds.
• reverse: Controls animation direction.
• false (default): Clockwise flow.
• true: Counter-clockwise flow.

<template>
  <div class="grid">
    <ScifiPanelFlow :aniDuration="2">
      <div class="p-4">Fast Forward</div>
    </ScifiPanelFlow>

    <ScifiPanelFlow 
      :aniDuration="6" 
      :reverse="true"
    >
      <div class="p-4">Slow Reverse</div>
    </ScifiPanelFlow>
  </div>
</template>

Minimal Background (Minimal)

If you only need a flowing light frame, you can disable backgroundOpacity or hide the base border.

• borderd: false: Hides the underlying gray trajectory line, leaving only the flowing light strip for a purer visual effect.

<template>
  <ScifiPanelFlow 
    :borderd="false" 
    :backgroundOpacity="0"
    :glow="true"
  >
    <div class="content">PURE LIGHT</div>
  </ScifiPanelFlow>
</template>

Cyber Glow

DV9 is one of the best components to showcase the glow effect. When enabled, the flowing light strip leaves a long trail of halo, creating a strong sense of technology.

<template>
  <ScifiPanelFlow 
    :glow="true" 
    className="dv9-neon"
  />
</template>

CSS Variable

The color scheme of DV9 mainly consists of two parts: Track Color (bd) and Light Path Color (hlite).

Case: Tron Legacy Style

This style uses a deep black background with high-saturation cyan light flow, simulating a circuit board in an electronic world.

<template>
  <ScifiPanelFlow 
    className="panel-tron"
    :borderWidth="2"
    :aniDuration="2"
    :glow="true"
  >
    <div class="tron-content">
      SYSTEM CYCLE
    </div>
  </ScifiPanelFlow>
</template>

<style lang="less">
.panel-tron {
  /* Track base color: Dark cyan-gray */
  --sf-panel-bd: #155e75;
  
  /* Flowing light strip: Bright cyan */
  --sf-panel-hlite: #22d3ee;
  
  /* Background: Pure black */
  --sf-panel-bg: #000000;
  
  /* Glow: Cyan halo */
  --sf-panel-glow: #67e8f9;
}
</style>

API Reference

Props

Prop	Description	Type	Default
aniDuration	Animation Duration (seconds). Controls the speed of the light strip cycle	Number	3
reverse	Reverse Animation. true for counter-clockwise flow	Boolean	false
borderd	Track Switch. Whether to show the base border trajectory	Boolean	true
borderWidth	Border line width (px)	Number	—
backgroundOpacity	Background opacity (0-1)	Number	—
backgroundBlur	Whether to enable background frosted glass effect	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!