ScifiDecoOrb

⚡WASM Powered

⭐Star

ScifiDecoOrb (Intelligent Core/智核) is the circular badge component in the TechUI Scifi Deco series.

It focuses on geometric constructions of the "Perfect Circle" and "Mechanical Ring". Compared to the minimalist base of A1, B1 features more complex mechanical textures and multi-layered concentric structures.

It simulates border forms common in sci-fi interfaces, such as Reactor Cores, radar oscilloscopes, or precision instrument panels. This high-density detail design provides strong visual gravity, making it ideal for core function entries (e.g., Start/Launch buttons), user avatar containers, or key status indicators (e.g., system integrity).

Tip: This component can be invoked via ScifiDecoB1 or its semantic alias ScifiDecoOrb.

Basic Usage

Default Form

By default (appearance="A"), B1 renders as a thick ring with decorative mechanical details at the top and bottom. The default slot automatically centers content horizontally and vertically.

<template>
  <div class="reactor-group">
    <ScifiDecoOrb>
      <icon name="bi-radioactive" />
    </ScifiDecoOrb>
    
    <ScifiDecoOrb>
      <span class="counter">99</span>
    </ScifiDecoOrb>
  </div>
</template>

Appearance

B1 provides four ring structure variants suitable for different UI density scenarios.

Mode Comparison

• Type A (Default): Standard Energy Ring. Features a wide ring body with symmetrical mechanical buckle decorations at the top and bottom, offering high visual weight.
• Type B: Segmented Scanning Ring. The ring is cut into multiple arc segments, creating a dynamic sense of "scanning" or "loading".
• Type C: Minimal Locking Ring. Features thinner lines and emphasizes locking points at four positions; suitable for wrapping dense small icons.
• Type D: Heavy Reactor. Features more solid background filling and complex internal textures; often used for Boss health bar icons or ultimate skills.

<template>
  <div class="grid">
    <ScifiDecoOrb appearance="A">Standard</ScifiDecoOrb>
    <ScifiDecoOrb appearance="B">Segmented</ScifiDecoOrb>
    <ScifiDecoOrb appearance="C">Minimal</ScifiDecoOrb>
    <ScifiDecoOrb appearance="D">Heavy</ScifiDecoOrb>
  </div>
</template>

Size & Layout

Fixed Size and Scaling (Scale)

The ScifiDeco series is drawn based on an 80px x 80px coordinate system. Do not use CSS to modify width and height; you must use the scale property for lossless scaling to maintain smooth ring curvature.

• scale="1": 80px (Default)
• scale="1.5": 120px (Suitable for primary buttons)
• scale="0.5": 40px (Suitable for list status lights)

<template>
  <ScifiDecoOrb appearance="D" :scale="1.5" :glow="true">
    START
  </ScifiDecoOrb>
</template>

Visual

Glow & Atmosphere

• glow: Enables the glow filter. The ring structure is ideal for glowing effects, creating a neon tube texture.
• glowRange: Controls the diffusion degree of the halo.
• backgroundOpacity: Adjusts the transparency of the background fill inside the circle.

Color Variants (Color Alt)

• decorationColorAlt: Swaps the highlight color and focus color.
• When enabled, the primary color of the ring changes, which can represent "overload," "warning," or "standby" states.

<template>
  <ScifiDecoOrb 
    appearance="A" 
    :decorationColorAlt="true"
    :glowRange="15"
  >
    <icon name="alert" />
  </ScifiDecoOrb>
</template>

CSS Variable

Using CSS variables, you can customize B1 into different styles of gauges.

Case Study: Biohazard Green

This example defines a biohazard-style ring with a fluorescent green color scheme.

<template>
  <ScifiDecoOrb 
    appearance="B" 
    className="deco-bio"
    :scale="1.2"
  >
    <icon name="virus" />
  </ScifiDecoOrb>
</template>

<style lang="less">
.deco-bio {
  /* Base Colors */
  --sf-deco-hlite: #4ade80;  /* Fluorescent green highlight */
  --sf-deco-bd: #14532d;     /* Dark green border */
  --sf-deco-bg: rgba(20, 83, 45, 0.4); /* Venom green background */
  
  /* Content Text */
  --sf-deco-fc: #86efac;     /* Light green text */
  
  /* Glow Enhancement */
  --sf-deco-glow: #22c55e;   /* Green halo */
  --sf-deco-glowop: 0.6;
}
</style>

Variable Dictionary

Major CSS variables supported by ScifiDecoOrb:

Variable Name	Description	Default Value
Base Appearance
--sf-deco-size	Component base size (Fixed)	80px
--sf-deco-bg	Background fill color inside the circle	var(--scifi-bg)
--sf-deco-bgop	Background opacity	1
--sf-deco-bd	Ring line color	var(--scifi-bd)
Decoration & Highlight
--sf-deco-hlite	Primary ring color (SVG stroke)	var(--scifi-hlite)
--sf-deco-focus	Auxiliary scale/buckle 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', 'B', 'C', 'D'	String	'A'
scale	Scaling Ratio (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 ring lines	Boolean	true
decorationColorAlt	Decoration Variant: Swaps highlight and focus colors	Boolean	false
backgroundOpacity	Background opacity	Number	—
className	Custom class name	String	—

Slots

Slot Name	Description
default	Component content; automatically absolutely centered.