ScifiHeaderEcho

⚡WASM Powered

👑Pioneer

Scifi Header - Echo is a streamlined dynamic header component in the TechUI Scifi series.

Its design inspiration comes from "Aircraft Wings" and "Acoustic Echo". The decorations on both sides present a unique layered form of outward extension and upward lifting. Visually, it not only possesses strong aerodynamic beauty but also carries a sense of light levitation.

This form has strong visual guidance. Like a pair of spread wings, it naturally focuses the user's vision from the top and guides it downward to the content area. It is very suitable as a secondary header at the top of a page, a header for long chart blocks, or any scenario requiring emphasized smooth transitions rather than forceful division.

Tip: This component can be invoked via ScifiHeaderA3 or its semantic alias ScifiHeaderEcho.

Basic Usage

Default Form (Default)

In the default state, A3 presents a standard flying wing structure. The title content is passed through the default slot.

<template>
  <div class="box">
    <ScifiHeaderEcho>Flight Dynamics</ScifiHeaderEcho>
  </div>
</template>

Appearance Variant (Decoration Alt)

When decorationAlt is enabled, the solid wing tips transform into hollow line structures, reducing visual weight. This is more suitable for hovering over complex maps or 3D scenes.

<template>
  <ScifiHeaderEcho :decorationAlt="true">
    Map Overlay
  </ScifiHeaderEcho>
</template>

Background Opacity

A3 supports fine control of the background color block's opacity via backgroundOpacity, allowing it to blend better into dark backgrounds.

<template>
  <ScifiHeaderEcho 
    :scale="0.7"
    :backgroundOpacity="0.6"
    :decorationColorAlt="true"
  >
    Sub System
  </ScifiHeaderEcho>
</template>

Advanced Configuration

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>
  <ScifiHeaderEcho className="sfh-danger">
    WARNING
  </ScifiHeaderEcho>
</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	A3 Feature Remarks
width	Total header width (px). WASM will redraw paths based on this value	Number	null	Also supports WASM dynamic redrawing.
decoration	Whether to show the decorative strip at the bottom	Boolean	true	—
decorationAlt	Appearance variant	Boolean	false	Significant impact. Switches solid flying wings to hollow line flying wings.
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	—
backgroundOpacity	Background opacity	Number	1	Decimal between 0-1. A3 is often used in semi-transparent overlay scenarios.
glow	Whether to enable SVG outer glow filter	Boolean	false	—
glowOpacity	Opacity of the outer glow (0-1)	Number	—	—
shadowType	Shadow mode: 'drop', 't3d', '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)