ScifiDeco Decorative Containers

Micro-decorative containers within the TechUI Scifi series.

Unlike ScifiPanel, which is used to wrap large blocks of content, ScifiDeco is specifically designed for micro-elements. They typically maintain a fixed aspect ratio (default 1:1) and use SVG geometry to wrap Icons or Key Numbers (Counters). They are core components for building HUD (Heads-Up Display) interface details.

Core Features

• Fixed Size & Scaling: Except for the C series, all internal SVG nodes of Deco components have a fixed size (default 80px). Instead of adjusting width/height, it is recommended to use the scale attribute for overall lossless scaling.
• Absolute Centering: Components have pre-set absolute-positioned slots that automatically center content (icons/text) vertically and horizontally.
• Geometric Classification: Provides various basic geometric shapes such as circles, hexagons, and triangles, making it easy to build arrays.

Naming & Aliases

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

• Original Serial Name (Fixed Serial Name)
  • Examples: ScifiDecoA1, ScifiDecoB2
  • This is the underlying physical ID of the component, based on the development sequence (Series A for basic types, Series B for badge types, Series C for adaptive types). It is permanently fixed and immutable.
• Semantic Alias
  • Examples: ScifiDecoRune, ScifiDecoHive
  • These are shortcuts named based on visual style or design metaphors (e.g., Rune, Hive) to improve code readability.

Note: As the design language evolves, individual aliases may undergo semantic fine-tuning or renaming in later versions. While we try to maintain compatibility, please check the relevant changelogs during major version upgrades.

Component Family

ScifiDecoRune (Geometric Base)

Keywords: Hexagon · Triangle · Circle · Basic

ScifiDecoRune is a collection of basic geometric shapes. It includes minimalist variants of hexagons, triangles, and circles. It is perfectly suited for skill icon bases, attribute point containers, or simple status indicators.

• Appearance: Includes A / B / C modes, corresponding to different geometric constructions (e.g., solid, stroke, double-layer).

<template>
  <div class="hud-group">
    <ScifiDecoRune appearance="B" :scale="1.2">
      <icon name="bi-hexagon" />
    </ScifiDecoRune>
    
    <ScifiDecoRune appearance="C">
      <span class="num">39</span>
    </ScifiDecoRune>
  </div>
</template>

ScifiDecoB Series (Tech Badge)

Keywords: High-Tech · Frame · Status

The B series consists of heavyweight badges with high design complexity. They add intricate mechanical details, energy slots, and glowing circuits to basic geometry, carrying higher visual weight.

ScifiDecoOrb (Circular Core)

• Form: Circular / Ring design.
• Variants: Supports A / B / C / D appearances.
• Scenarios: Suitable for core energy orbs, radar thumbnails, or frames for Start buttons.

ScifiDecoHive (Hexagonal Hive)

• Form: Hexagonal design.
• Variants: Supports A / B / C / D appearances.
• Scenarios: Suitable for skill trees in a hive layout or tech upgrade icons.

ScifiDecoPrism (Triangular Warning)

• Form: Triangular design.
• Variants: Supports A / B / C / D appearances.
• Scenarios: Suitable for hazard warnings, direction indicators, or special attribute markers.

<template>
  <div class="status-bar">
    <ScifiDecoOrb appearance="A" :glow="true">
      <icon name="nuclear" />
    </ScifiDecoOrb>
    
    <ScifiDecoHive appearance="C" :scale="0.8">
      <span class="level">LV.9</span>
    </ScifiDecoHive>
  </div>
</template>

ScifiDecoPair (Adaptive Brackets)

Keywords: Adaptive · Brackets · HUD · Label

ScifiDecoPair is an exception in the Deco series.

• Adaptive Width: It has no fixed background geometry; instead, it consists of "brackets" or "cursors" on the left and right sides. The container width is variable and will automatically expand based on the internal text length (similar to a Button).
• No Background: No background fill by default, emphasizing transparency.
• Scenarios: Suitable for wrapping labels of varying lengths, numerical readings, or as modifiers for titles.
• Variants: Supports A / B / C / D / E appearances.

<template>
  <ScifiDecoPair appearance="A">
    <span class="label">SYSTEM ONLINE</span>
  </ScifiDecoPair>
  
  <ScifiDecoPair appearance="B" :decorationColorAlt="true">
    <span class="warning">ERROR: 404</span>
  </ScifiDecoPair>
</template>

Visual

Dimensions & Scaling (Scale)

For the A and B series, do not set CSS width/height. Use the scale attribute instead.

• scale="1" (Default): Corresponds to 80px size.
• scale="0.5": Corresponds to 40px size.
• scale="1.5": Corresponds to 120px size.

<template>
  <ScifiDecoOrb :scale="0.5">
    <icon name="small" />
  </ScifiDecoOrb>
</template>

Decoration Color

• decorationColorAlt: Swaps the highlight color and the focus color.
• False (Default): Borders/main body use Highlight color; auxiliary details use Focus color.
• True: Inverts the color scheme. Commonly used to represent "warning" or "special status."

Glow & Direction

• glow: Enables SVG filter glow.
• directionAlt: Some components (like certain variants of A1) support direction inversion or rotation.

API Reference

Props

Property	Description	Type	Default
appearance	Visual variant. Different components support different ranges (A-E).	String	'A'
scale	Scaling ratio. Recommended way to adjust size for A/B series.	Number	1
borderd	Whether to display borders/decorative lines.	Boolean	true
glow	Whether to enable the glow filter.	Boolean	true
glowRange	Glow diffusion range.	Number	10
glowOpacity	Glow opacity.	Number	—
decorationColorAlt	Decorative variant. Whether to swap Highlight and Focus colors.	Boolean	false
directionAlt	Direction variant. Some components support mirroring or rotation.	Boolean	false
backgroundOpacity	Background opacity.	Number	—
className	Custom class name.	String	—

CSS Variables

Variable	Description	Default
--sf-deco-hlite	Decoration highlight color.	var(--scifi-hlite)
--sf-deco-focus	Auxiliary decoration color.	var(--scifi-focus)
--sf-deco-bg	Background fill color.	var(--scifi-bg)
--sf-deco-bd	Border color.	var(--scifi-bd)
--sf-deco-fc	Content slot text color.	var(--font-strong)
--sf-deco-fz	Content slot default font size.	24px
--sf-deco-size	Component base size (A/B series).	80px