ScifiDecoPair

⚡WASM Powered

ScifiDecoPair (Twins/双子) is the adaptive annotation component in the TechUI Scifi Deco series.

ScifiDecoC1 (ScifiDecoPair) is the only decorator in this series that employs "Content-Aware" logic. Unlike the fixed 80px physical size of the A and B series, the core design philosophy of C1 lies in "Bidirectional Constraint".

Visually, it consists of independent SVG mechanical brackets on the left and right sides. These brackets act like twin pairs, automatically snapping to both sides of the internal content. Whether the content is a short icon or long dynamic numbers, it achieves a perfect elastic wrap.

This No-Background and strong wrapping design is the soul of building HUD (Heads-Up Display) style interfaces. It is ideal for displaying long values with dynamic changes, system status labels, or key tactical commands. Without obscuring the underlying screen, the visual收束力 (convergence) of the brackets imparts strong readability and a sense of technological ritual to the information.

Tip: This component can be invoked via ScifiDecoC1 or its semantic alias ScifiDecoPair.

Basic Usage

Default Form

By default (appearance="A"), C1 renders as a pair of minimalist curved brackets. The component has no background fill and is visually transparent, focusing entirely on highlighting the content.

<template>
  <div class="hud-layer">
    <ScifiDecoPair>
      <span class="data">369,842</span>
    </ScifiDecoPair>
    
    <ScifiDecoPair appearance="B">
      <span class="label">TARGET LOCKED</span>
    </ScifiDecoPair>
  </div>
</template>

Appearance

C1 provides five different bracket styles to suit UI styles ranging from minimalist to heavy-duty.

Mode Comparison

• Type A (Default): Curved Brackets. A technological variant of standard parentheses ( ) with soft lines; suitable for general data.
• Type B: Chevron Brackets. Similar to angle brackets < >, with hard lines and a sense of direction.
• Type C: Square Clamps. Similar to square brackets [ ], featuring distinct mechanical buckle details; suitable for system logs or parameters.
• Type D: Dual Aiming. A double-layer line structure simulating the scales of a precision aiming sight.
• Type E: Heavy Clamp. Features greater vertical height and mechanical wings extending upward and downward; suitable for wrapping multi-line content or large titles.

<template>
  <div class="list">
    <ScifiDecoPair appearance="A">Type A</ScifiDecoPair>
    <ScifiDecoPair appearance="B">Type B</ScifiDecoPair>
    <ScifiDecoPair appearance="C">Type C</ScifiDecoPair>
    <ScifiDecoPair appearance="D">Type D</ScifiDecoPair>
    <ScifiDecoPair appearance="E">Type E</ScifiDecoPair>
  </div>
</template>

Size & Adaptation

Width Adaptation

The width of C1 is completely determined by its content.

• If the content is short (like an icon), the brackets will be very close together.
• If the content is long (like a line of text), the brackets will automatically extend to the sides.

Overall Scaling (Scale)

While the width is dynamic, the "size" of the brackets themselves (line thickness, height, curvature) can be scaled using the scale property.

• scale="1": Default size.
• scale="1.5": Brackets become larger and thicker, suitable for decorating primary titles.

<template>
  <ScifiDecoPair appearance="D" :scale="1.5">
    <h1 class="title">WARNING</h1>
  </ScifiDecoPair>
</template>

Visual

Glow & Atmosphere

• glow: Enables the glow filter. Since C1 has thin lines and no background, enabling glow significantly improves visibility on dark backgrounds.
• decorationColorAlt: Swaps the highlight color and focus color. This can be used to distinguish between "normal values" and "abnormal values".

No-Background Design

C1 is designed to be Transparent by default, meaning it won't block underlying maps or models. This makes it ideal for hovering over 3D scenes. If you manually set backgroundOpacity, it usually only affects faint decorative textures (depending on the specific appearance) rather than creating a solid block of color.

<template>
  <ScifiDecoPair 
    appearance="B" 
    :decorationColorAlt="true" 
    :glowRange="15"
  >
    <span class="error">CRITICAL FAILURE</span>
  </ScifiDecoPair>
</template>

CSS Variable

You can adjust bracket colors via CSS variables to match the overall HUD tone.

Case Study: Tactical Blue

This example defines a classic blue HUD style.

<template>
  <ScifiDecoPair 
    appearance="C" 
    className="deco-hud"
  >
    <span>COORDINATES: 45.91, 12.04</span>
  </ScifiDecoPair>
</template>

<style lang="less">
.deco-hud {
  /* Base Colors */
  --sf-deco-hlite: #38bdf8;  /* Sky Blue Highlight */
  --sf-deco-bd: #0c4a6e;     /* Deep Blue Auxiliary Line */
  
  /* Content Text */
  --sf-deco-fc: #e0f2fe;     /* Very Light Blue Text */
  --sf-deco-fz: 16px;        /* Font Size Adjustment */
  
  /* Glow Enhancement */
  --sf-deco-glow: #0ea5e9;   /* Blue Halo */
  --sf-deco-glowop: 0.8;
}
</style>

Variable Dictionary

Major CSS variables supported by ScifiDecoPair:

Variable Name	Description	Default Value
Base Appearance
--sf-deco-bg	(Usually ineffective) Faint background texture in rare variants	var(--scifi-bg)
--sf-deco-bd	Auxiliary line color	var(--scifi-bd)
Decoration & Highlight
--sf-deco-hlite	Primary bracket color (SVG stroke)	var(--scifi-hlite)
--sf-deco-focus	Auxiliary buckle/decoration point color	var(--scifi-focus)
--sf-deco-glow	Glow filter color	var(--scifi-hlite)
Content Slot
--sf-deco-fc	Text/Icon color in slot	var(--font-strong)
--sf-deco-fz	Default text size in slot	24px

API Reference

Props

Property	Description	Type	Default
appearance	Appearance Variant: 'A' - 'E' (Five bracket styles)	String	'A'
scale	Scaling Ratio: Scales overall size and thickness	Number	1
glow	Glow Switch: Toggles filter halo	Boolean	true
glowRange	Glow range	Number	10
glowOpacity	Glow opacity	Number	—
decorationColorAlt	Decoration Variant: Swaps highlight and focus colors	Boolean	false
className	Custom class name	String	—

Slots

Slot Name	Description
default	Component content. Container width will automatically scale with this content.