ScifiHeaderSurge

⚡WASM Powered

⭐Star

👑Pioneer

Scifi Header - Surge is the debut flagship header component in the TechUI Scifi series.

It represents the pinnacle of the series' visual hierarchy. It adopts a complex design language featuring "Multi-layer Geometry" and "Surging Motion". Structurally, it is built from multiple groups of precise SVG graphics, flanked by iconic energy scale decorations, appearing as if data is surging towards the center.

As a heavy-duty component with independent entrance animations and continuous dynamic lighting effects, it is born to command the scene. It is perfectly suited as the Main Title for Data Visualization Screens or a System Core Header, capable of instantly establishing the sci-fi tone of the interface and becoming the absolute visual anchor.

Tip: This component can be invoked via ScifiHeaderA1 or its semantic alias ScifiHeaderSurge.

Basic Usage

Default Form (Default)

By default, the component enables entrance animations and flowing light effects. Pass the title text through the default slot.

<template>
  <div class="box">
    <ScifiHeaderSurge>TechUI Visualization</ScifiHeaderSurge>
  </div>
</template>

Dashboard Style (Dashboard)

By adjusting decorationColorAlt (decoration color variant) and gradientReverse (gradient reverse), you can achieve a more stable visual style suitable for dashboards.

<template>
  <ScifiHeaderSurge 
    :width="550"
    :decorationColorAlt="true"
    :gradientReverse="true"
  >
    Dashboard Monitor
  </ScifiHeaderSurge>
</template>

Static & Glow (Static & Glow)

In performance-sensitive scenarios or where low distraction is needed, you can disable animation and the background gradient, and instead enable the glow (outer glow) effect to create a quiet sense of technology.

<template>
  <ScifiHeaderSurge 
    :animation="false"
    :gradientBackground="false"
    :glow="true"
    :glowOpacity="0.6"
  >
    System Status
  </ScifiHeaderSurge>
</template>

Advanced Configuration

Minimalist Mode

By turning off the decorative elements decoration and combining it with scale scaling, it can be used as a header for ordinary modules.

<template>
  <ScifiHeaderSurge 
    :decoration="false"
    :scale="0.7"
    :aniDuration="1" 
  >
    Module A
  </ScifiHeaderSurge>
</template>

Custom Styles

The component exposes a full set of CSS variables. You can easily modify the color scheme to match specific themes (such as a red warning theme) via a custom class name.

<template>
  <ScifiHeaderSurge className="sfh-danger">
    WARNING
  </ScifiHeaderSurge>
</template>

<style lang="less">
.sfh-danger {
  --sf-header-bg: #4a0000;      /* Dark red background */
  --sf-header-bg_alt: #ff0000;  /* Bright red auxiliary */
  --sf-header-bd: #ff4d4f;      /* Red border */
  --sf-header-fc: #ffffff;
  --sf-header-fc_alt: #eba447;
  --sf-header-glow: #ff0000;    /* Red glow */
  --sf-header-hlite: #b81f14;
  --sf-header-focus: #eba447;
}
</style>

API Reference

Props

Property Name	Description	Type	Default
width	Total header width (px). WASM will redraw paths based on this value	Number	null (Adaptive)
animation	Whether to enable surging animation	Boolean	true
aniDuration	Animation cycle duration (seconds)	Number	null (Default CSS 6s)
decoration	Whether to show the decorative strip at the center bottom	Boolean	true
decorationColorAlt	Whether to enable variant coloring for decorations	Boolean	false
gradientBackground	Whether to enable background gradient color	Boolean	true
gradientReverse	Whether to reverse the direction of the background gradient	Boolean	false
glow	Whether to enable SVG outer glow filter (High performance cost, use as needed)	Boolean	false
glowOpacity	Opacity of the outer glow (0-1)	Number	—
shadowType	Shadow mode: 'drop' (Drop shadow), 't3d' (3D thickness), 'none'	String	'drop'
scale	Overall component scaling ratio	Number	1
className	Custom container class name	String	—

Slots

Slot Name	Description
default	Title text content

CSS Variables

Variable Name	Description	Default Reference
--sf-header-lh	Header line height / Base height	60px
--sf-header-ff	Font Family	Impact
--sf-header-bg	Main background color (Gradient start)	var(--scifi-header-bg)
--sf-header-bg_alt	Auxiliary background color (Gradient end)	var(--scifi-header-bg_alt)
--sf-header-bgop	Background opacity	var(--cpt-header-bgop, 1)
--sf-header-bd	Border line color	var(--scifi-bd)
--sf-header-bdw	Border line width	var(--scifi-bdw, 1px)
--sf-header-fc	Main text color	var(--scifi-header-fc)
--sf-header-fc_alt	Auxiliary text / Decoration element color	var(--scifi-header-fc_alt)
--sf-header-hlite	Highlight Color.	var(--scifi-header-hlite)
--sf-header-focus	Focus Color.	var(--scifi-header-focus)
--sf-header-glow	Inner glow color	var(--scifi-hlite)
--sf-header-glowop	Inner glow opacity	var(--cpt-header-glowop, var(--shadow-inset-op, .5))
--sf-header-shadow	Container shadow	var(--shadow-weak)
--sf-header-scale	Overall scaling ratio (CSS level)	var(--cpt-header-scale, 1)
--sf-header-anidur	Animation loop duration	var(--cpt-header-anidur, 6s)