ScifiHeader

A series of header components designed specifically for data visualization large screens, command center systems, and UI interfaces with a strong high-tech style.

Unlike traditional static image headers, the ScifiHeader series is built entirely on SVG, combined with WASM (WebAssembly) for dynamic geometric calculations. This ensures perfect edge sharpness and visual proportions at any size, while supporting flexible color customization and dynamic lighting effects.

Core Features

🚀 Core Technology: WASM Dynamic Calculation

The geometric paths of this component series are not statically preset. The component calculates SVG node paths in real-time based on the width and height parameters you pass in, via the underlying WebAssembly module. This means no matter how you stretch or scale, the graphical structure adapts automatically without distortion or blurring.

• Vector Construction: Full SVG structure, supporting lossless scaling, perfectly adapted to 4K/8K ultra-high-resolution screens.
• Dynamic Response: Width can be dynamically specified; the component automatically adjusts the ratio between side decorative lines and the central text area.
• Rich Visuals: Built-in flowing gradients, outer glow (Glow), 3D projection, and other visual enhancements.
• Deep Customization: An extremely detailed CSS variable system is exposed, making it easy to change skins to match existing themes.

Naming and Aliases

To balance development stability and code readability, TechUI Scifi header components adopt a dual naming strategy. Each component has a fixed serial name and a semantic alias.

• Fixed Serial Name
  • Example: ScifiHeaderA1, ScifiHeaderA2
  • This is the component's underlying physical ID, based on the development sequence. It is permanently fixed and immutable. If you wish for your code to maintain absolute backward compatibility in future version iterations, it is recommended to prioritize using this name.
• Semantic Alias
  • Example: ScifiHeaderSurge, ScifiHeaderRazor
  • These are shortcuts named based on visual style or design metaphors (e.g., Surge, Razor), aiming to improve code readability.

Note: With the evolution of the design language, individual aliases might undergo semantic fine-tuning or renaming in later versions. Although we strive to maintain compatibility, please pay attention to relevant changelogs during major version upgrades.

General Configuration

Although each component may have unique characteristics (like A1's animation), they share a set of standardized configuration interfaces, making the development experience highly consistent.

Property Name	Description	Type	Default
width	Total component width (px). The WASM engine will calculate geometric paths based on this value.	Number	—
scale	Overall scaling ratio.	Number	1
animation	Whether to enable flowing light animation (Only supported by A1 component).	Boolean	true
decoration	Whether to show decorative elements.	Boolean	true
decorationAlt	Whether to enable variant styles for decorative elements.	Boolean	false
gradientBackground	Whether to enable background gradient fill.	Boolean	true
gradientReverse	Whether to reverse the direction of gradient colors.	Boolean	false
glow	Whether to enable outer glow effect (Performance intensive, enable as needed).	Boolean	false
glowOpacity	Opacity of the outer glow.	Number	—
shadowType	Shadow type. Options: 'drop' (Drop Shadow), 't3d' (3D), 'none'.	String	'drop'
className	Custom class name, used to override CSS variables.	String	—

CSS Variables

ScifiHeader components not only support Props configuration but also expose fine-grained CSS variables, allowing you to batch modify color themes via CSS (.className).

.my-custom-header {
  /* Basic Size & Font */
  --sf-header-lh: 60px;       /* Line height / Base height reference */
  --sf-header-ff: Impact;     /* Font Family */
  --sf-header-scale: 1;       /* Scaling ratio */

  /* Core Colors */
  --sf-header-bg: #00eeff;    /* Main background color */
  --sf-header-bg_alt: #0099aa;/* Auxiliary background color */
  --sf-header-fc: #ffffff;    /* Text color */
  --sf-header-fc_alt: #aaddff;/* Auxiliary text color */
  
  /* Borders & Decoration */
  --sf-header-bd: #00ffff;    /* Border color */
  --sf-header-bdw: 1px;       /* Border width */
  
  /* Lighting & Atmosphere */
  --sf-header-hlite: #ccffff; /* Highlight / Decoration color */
  --sf-header-focus: #ff0000; /* Focus */
  --sf-header-glow: #00ffff;  /* Inner glow color */
  --sf-header-glowop: 0.5;    /* Glow intensity */
  
  /* Animation */
  --sf-header-anidur: 6s;     /* Animation cycle duration */
}