ScifiDecoRune

⚡WASM Powered

⭐Star

🏅Original

ScifiDecoRune (Rune) is the foundational geometric totem component within the TechUI Scifi Deco series.

It serves as a collection of miniature containers centered around classic geometric aesthetics. Rather than pursuing complex border structures, it returns to pure "Geometric Runes"—consisting of three basic variants: Hexagon, Triangle, and Circle.

This compact, highly symbolic design makes it a perfect "Energy Base." It features a pre-set, perfectly centered content slot, ideal for carrying skill icons, core attribute values (such as level or battery), or acting as a status indicator light. Unlike the adaptive logic of the Panel series, it uses a Standard Size by default and utilizes the scale property for overall zooming to ensure pixel-perfect rendering at small dimensions.

Tip: This component can be invoked via ScifiDecoA1 or its semantic alias ScifiDecoRune.

Basic Usage

Default Form

By default (appearance="A"), A1 renders as a circular sci-fi base. The component's default slot automatically centers content both vertically and horizontally; you can directly insert an Icon or text.

<template>
  <div class="box">
    <ScifiDecoRune>
      <icon name="bi-hdd-network" />
    </ScifiDecoRune>
    
    <ScifiDecoRune>
      <span class="counter">95%</span>
    </ScifiDecoRune>
  </div>
</template>

Appearance

A1 includes three completely different geometric constructions toggled via the appearance property.

Mode Comparison

• Type A (Default): Circle. The most universal form, similar to a radar or energy ring; suitable for most icons.
• Type B: Hexagon. A classic honeycomb structure with the strongest sci-fi feel; ideal for skill trees or attribute points.
• Type C: Triangle. Provides a sense of direction; often used for warning signs or special attribute markers.

<template>
  <div class="grid">
    <ScifiDecoRune appearance="A">Circle</ScifiDecoRune>
    <ScifiDecoRune appearance="B">Hexagon</ScifiDecoRune>
    <ScifiDecoRune appearance="C">Triangle</ScifiDecoRune>
  </div>
</template>

Size & Layout

Fixed Size and Scaling (Scale)

Note: The internal SVG paths for the ScifiDeco series are drawn based on an 80px x 80px coordinate system. Do not directly modify width or height, as this will cause line proportion distortion. Please use the scale property for lossless scaling.

• scale="1": 80px (Default)
• scale="0.5": 40px
• scale="1.5": 120px

<template>
  <ScifiDecoRune appearance="B" :scale="0.6">
    <icon name="item-01" />
  </ScifiDecoRune>
</template>

Visual

Glow & Direction

• glow: Toggles the SVG filter glow. Turning it off results in a flatter visual and better performance.
• glowRange: The diffusion range of the glow, defaulting to 10.
• directionAlt: Mirroring/Rotation.
• For Appearance B (Hexagon) and C (Triangle), enabling this rotates the graphic (e.g., inverting the triangle), which can be used to distinguish hierarchical relationships.

Color Variants (Color Alt)

• decorationColorAlt: Swaps the highlight and focus colors.
• Default: Highlight color for strokes, focus color for accents.
• Enabled: Focus color for strokes. Commonly used for "Red Alert" or "Disabled" status icons.

<template>
  <ScifiDecoRune 
    appearance="C" 
    :decorationColorAlt="true"
    :glowRange="20"
  >
    !
  </ScifiDecoRune>
</template>

CSS Variable

The ScifiDeco series uses an independent CSS variable system. You can create entirely new styles by overriding these variables via a custom class name.

Case Study: Quantum Ghost Style

This example defines a purple-toned, high-transparency style simulating a holographic projection effect.

<template>
  <ScifiDecoRune 
    appearance="B" 
    className="deco-quantum"
    :scale="1.2"
  >
    <icon name="ghost" />
  </ScifiDecoRune>
</template>

<style lang="less">
.deco-quantum {
  /* Base Colors */
  --sf-deco-hlite: #a855f7;  /* Highlight Purple */
  --sf-deco-bd: #6b21a8;     /* Dark Purple Border */
  --sf-deco-bg: rgba(88, 28, 135, 0.3); /* Background Fill */
  
  /* Content Text */
  --sf-deco-fc: #e9d5ff;     /* Light Purple Text */
  --sf-deco-fz: 28px;        /* Increased Font Size */
  
  /* Glow Enhancement */
  --sf-deco-glow: #d8b4fe;   /* Glow Color */
  --sf-deco-glowop: 0.8;     /* Glow Intensity */
}
</style>

Variable Dictionary

The primary CSS variables supported by ScifiDecoRune:

Variable Name	Description	Default Value
Base Appearance
--sf-deco-size	Component base size (modification discouraged; use scale)	80px
--sf-deco-bg	Background fill color	var(--scifi-bg)
--sf-deco-bgop	Background opacity	1
--sf-deco-bd	Border line color	var(--scifi-bd)
Decoration & Highlight
--sf-deco-hlite	Primary decoration color (SVG stroke/highlight)	var(--scifi-hlite)
--sf-deco-focus	Secondary decoration color	var(--scifi-focus)
--sf-deco-glow	Glow filter color	var(--scifi-hlite)
--sf-deco-glowop	Glow opacity	0.5
Content Slot
--sf-deco-fc	Text/Icon color within the slot	var(--font-strong)
--sf-deco-fz	Default text size in the slot	24px
--sf-deco-fw	Font weight in the slot	—

API Reference

Props

Property	Description	Type	Default
appearance	Appearance Variant. 'A'(Circle), 'B'(Hex), 'C'(Triangle)	String	'A'
scale	Scaling Ratio. Multiplier based on 80px.	Number	1
glow	Glow Switch. Toggles filter halo.	Boolean	true
glowRange	Glow range.	Number	10
glowOpacity	Glow opacity.	Number	—
borderd	Whether to display the border.	Boolean	true
decorationColorAlt	Decoration Variant. Swaps highlight and focus colors.	Boolean	false
directionAlt	Direction Variant. Rotates/Mirrors the geometry.	Boolean	false
backgroundOpacity	Background opacity.	Number	—
className	Custom class name.	String	—

Slots

Slot Name	Description
default	Component content. Automatically displayed as absolutely centered.