ScifiPanelArc

⚡WASM Powered

🧬Ported from [DataV]

ScifiPanel-Arc is a modern soft-style container within the TechUI Scifi Panel series.

It is ported and refactored from the open-source project @jiaminghi/data-view (originally dv-border-box-12). It breaks the "hard-edged right-angle" stereotype of typical sci-fi interfaces, opting instead for a design language of "Rounded Geometry" and "Breath Light."

The component features smooth R-angle transitions at all four corners, complemented by form-fitting L-shaped rounded brackets. Combined with a built-in breathing animation, it creates an advanced yet elegant technological feel. These soft lines allow it to perfectly adapt to modern Card UI designs—especially Dashboard systems that utilize heavy border-radius—eliminating visual sharpness while maintaining a high-tech identity.

Tip: This component can be invoked via ScifiPanelDV7 or its semantic alias ScifiPanelArc.

Basic Usage

Default Form

By default, DV7 renders a border with rounded brackets, and the lines perform a looping streamer animation (line trajectory flow).

<template>
  <div style="width: 400px; height: 300px;">
    <ScifiPanelArc>
      <div class="card-content">
        <h3>MODERN CARD</h3>
      </div>
    </ScifiPanelArc>
  </div>
</template>

Visual Variants

The configuration of DV7 focuses on the balance between "dynamics" and "structure."

Streamer Animation

DV7 features built-in SVG path animations.

• animation: Controls whether the line flow effect is enabled.

• true (default): Lines will have periodic light flows passing through, adding a sense of technological agility.

• false: Static display, suitable for quiet information presentation.

• aniDuration: Controls the time (in seconds) for the light flow to complete one cycle. Smaller values result in faster speeds.

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

    <ScifiPanelArc :animation="false">
      <div class="p-4">Static Round</div>
    </ScifiPanelArc>
  </div>
</template>

Minimalist Structure (Decoration & Border)

• borderd: Controls whether to display the thin border connecting the four corners.
• decoration: Controls whether to display the rounded brackets at the four corners.

<template>
  <ScifiPanelArc 
    :borderd="false" 
    :backgroundOpacity="0.5"
  >
    <div class="content">OPEN ROUND</div>
  </ScifiPanelArc>
</template>

Cyber Glow

When glow is enabled, the rounded brackets emit a soft halo. Due to the rounded lines, the glow effect is more delicate than that of right-angled components.

<template>
  <ScifiPanelArc 
    :glow="true" 
    className="dv7-neon"
  />
</template>

CSS Variable

The rounded style of DV7 is ideal for high-brightness candy colors or aurora gradients.

Case: Aurora Dream Style

This style uses cyan and purple gradients combined with the rounded structure to create a dreamy, futuristic feel.

<template>
  <ScifiPanelArc 
    className="panel-aurora"
    :aniDuration="3"
    :backgroundBlur="true"
    :backgroundOpacity="0.4"
  >
    <div class="dream-info">
      NEURAL LINK ACTIVE
    </div>
  </ScifiPanelArc>
</template>

<style lang="less">
.panel-aurora {
  /* Base border: Deep Cyan */
  --sf-panel-bd: #0891b2;
  
  /* Rounded brackets: Bright Cyan/White */
  --sf-panel-hlite: #67e8f9;
  
  /* Background: Deep Blue-Purple Gradient */
  --sf-panel-bg: rgba(15, 23, 42, 0.6);
  
  /* Glow: Cyan */
  --sf-panel-glow: #22d3ee;
}
</style>

API Reference

Props

Prop	Description	Type	Default
animation	Animation Switch. Whether to enable the line streamer animation	Boolean	true
aniDuration	Animation Duration (seconds). Controls streamer cycle speed	Number	—
decoration	Decoration Switch. Whether to show the corner rounded brackets	Boolean	true
borderd	Border Switch. Whether to show the connecting lines	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!