ScifiHeader 科幻标题

专为数据可视化大屏、指挥舱系统以及具有强科技感风格的 UI 界面设计的标题组件系列。

与传统的静态图片标题不同，ScifiHeader 系列组件完全基于 SVG 构建，结合 WASM (WebAssembly) 进行动态几何计算，确保了组件在任意尺寸下都能保持完美的边缘锐利度和视觉比例，同时支持灵活的色彩定制与动态光效。

核心特性

🚀 核心技术：WASM 动态计算

本系列组件的几何路径并非静态预设。组件会根据您传入的 width 和 height 参数，通过底层的 WebAssembly 模块 实时计算 SVG 节点路径。这意味着无论您如何拉伸或缩放，图形结构都会自动适应，绝无变形或模糊。

矢量构建: 全 SVG 结构，支持无损缩放，完美适配 4K/8K 超高分辨率屏幕。
动态响应: 宽度可动态指定，组件会自动调整两侧装饰线条与中间文本区域的比例。
丰富视觉: 内置流光渐变、外发光 (Glow)、3D 投影等多种视觉增强效果。
深度定制: 开放了极其详尽的 CSS 变量系统，可轻松配合现有主题实现换肤。

关于命名与别名

为了平衡开发稳定性与代码可读性，TechUI Scifi 标头组件采用了双重命名策略。每个组件都拥有一个固定的原始序列名和一个语义化的别名。

原始序列名 (Fixed Serial Name)
- 例如：ScifiHeaderA1、ScifiHeaderA2
- 这是组件的底层物理 ID，基于开发序列命名。它是永久固定且不可变更的。如果您希望您的代码在未来的版本迭代中保持绝对的向后兼容性，建议优先使用此名称。
语义化别名 (Semantic Alias)
- 例如：ScifiHeaderSurge、ScifiHeaderRazor
- 这是基于外观风格或设计隐喻命名的快捷方式（例如：Surge/涌动、Razor/剃刀），旨在提高代码的可读性。

注意：随着设计语言的演进，个别别名可能会在后期版本中进行语义微调或更名。虽然我们会尽量保持兼容，但在跨大版本升级时请留意相关变更日志。

通用配置

虽然每个组件可能具有独特的特性（如 A1 的动画），但它们共享一套标准化的配置接口，使得开发体验高度一致。

属性名	说明	类型	默认值
width	组件总宽度 (px)。WASM 引擎将基于此值计算几何路径	`Number`	—
scale	整体缩放比例	`Number`	`1`
animation	是否流光动画 (仅A1组件支持)	`Boolean`	`true`
decoration	是否显示装饰元素	`Boolean`	`true`
decorationAlt	是否启用装饰元素的变体样式	`Boolean`	`false`
gradientBackground	是否开启背景渐变填充	`Boolean`	`true`
gradientReverse	是否反转渐变色的方向	`Boolean`	`false`
glow	是否开启外发光效果 (耗性能，建议按需开启)	`Boolean`	`false`
glowOpacity	外发光透明度	`Number`	—
shadowType	阴影类型。可选 `'drop'` (投影), `'t3d'` (立体), `'none'`	`String`	`'drop'`
className	自定义类名，用于覆盖 CSS 变量	`String`	—

CSS变量

ScifiHeader 组件不仅支持 Props 配置，还暴露了细粒度的 CSS 变量，允许您通过 CSS (.className) 批量修改颜色主题。

css

.my-custom-header {
  /* 基础尺寸与字体 */
  --sf-header-lh: 60px;       /* 行高/高度参考 */
  --sf-header-ff: Impact;     /* 字体族 */
  --sf-header-scale: 1;       /* 缩放比例 */

  /* 核心色彩 */
  --sf-header-bg: #00eeff;    /* 主背景色 */
  --sf-header-bg_alt: #0099aa;/* 辅助背景色 */
  --sf-header-fc: #ffffff;    /* 文字颜色 */
  --sf-header-fc_alt: #aaddff;/* 辅助文字色 */
  
  /* 边框与装饰 */
  --sf-header-bd: #00ffff;    /* 边框颜色 */
  --sf-header-bdw: 1px;       /* 边框宽度 */
  
  /* 光效与氛围 */
  --sf-header-hlite: #ccffff; /* 高光/装饰色 */
  --sf-header-focus: #ff0000; /* 焦点/强调色 */
  --sf-header-glow: #00ffff;  /* 内发光颜色 */
  --sf-header-glowop: 0.5;    /* 发光强度 */
  
  /* 动画 */
  --sf-header-anidur: 6s;     /* 动画周期时长 */
}

ScifiHeader 科幻标题 ​

核心特性 ​

关于命名与别名 ​

通用配置 ​

CSS变量 ​

ScifiHeader 科幻标题

核心特性

关于命名与别名

通用配置

CSS变量