ScifiGeometry Overview

TechUI Scifi Geometry is a set of pure geometric background components based on SVG rendering.

Unlike ScifiPanel, which is used for building the main layout framework of a page, the ScifiGeometry series is positioned as HUD (Head-Up Display) style auxiliary information containers. They possess purer geometric forms (hexagons, trapezoids, parallelograms, etc.), are lightweight, and are specifically designed for building complex data dashboards and visualization interfaces.

Dynamic Geometry

The biggest difference between the ScifiGeometry series and traditional SVG image assets lies in its Parametric Modeling.

The components do not contain any static SVG path data. All graphic paths (Path Data) are generated in real-time using mathematical formulas based on the width and height parameters you provide.

• Dynamic Calculation: The component listens for changes in width and height, using trigonometric functions and linear algebra formulas to solve for the (x, y) coordinates of every vertex in real-time. This means you can arbitrarily change the aspect ratio of the container (e.g., stretching a hexagon into a long bar), and the graphic will still maintain correct geometric logic without the stretching distortion seen in ordinary images.
• Intelligent Constraints: Built-in algorithms include geometric constraint logic. For example, when a rectangle is extremely small, the chamfer size is automatically restricted to prevent the shape from "breaking"; the tilt angle of a parallelogram is automatically compensated based on height to ensure visual consistency.
• Infinite Precision: Because it is rendered in real-time based on mathematical formulas, the graphic edges always remain absolutely sharp and clear, whether on a 1080P screen or an 8K ultra-large display.

Component Family

This series includes 5 basic components, using a "what you see is what you get" shape naming convention.

ScifiHexagon

Keywords: Honeycomb · Core · Stable

The most classic sci-fi element. The hexagonal structure is stable and easy to arrange in arrays.

• Calculation Logic: Dynamically calculates the coordinates of six vertices based on width and height to maintain central symmetry.
• Use Cases: Backgrounds for core metric values, honeycomb-style data arrays, radar chart bases.
• Variants: Supports directionAlt for rotating the orientation (pointy top vs. flat top).

ScifiParallelogram

Keywords: Speed · List · Dynamic

A rectangle with slanted angles, providing a sense of visual motion.

• Calculation Logic: Calculates the skew offset based on height and tilt angle formulas to dynamically generate four vertices.
• Use Cases: List item backgrounds, timeline nodes, data blocks with directional guidance.
• Variants: directionAlt controls the tilt direction (left-leaning vs. right-leaning).

ScifiRectangle

Keywords: Card · General · Chamfer

A general-purpose rectangular background, but with special chamfered corner processing implemented via SVG.

• Calculation Logic: Dynamically calculates the coordinates for four corner chamfers. When cornerAlt is enabled, the algorithm adds extra vertices to form complex mechanical chamfers.
• Use Cases: General information cards, popup backgrounds, text block containers.

ScifiTrapezoid

Keywords: Base · Support · Tab

Forms that are narrow at the top and wide at the bottom (or vice versa), providing a strong sense of support.

• Calculation Logic: Dynamically calculates the width difference between the top and bottom edges based on a set "waist" slope.
• Use Cases: Bottom data trays, top navigation tabs (Tab), floating title bases.
• Variants: directionAlt toggles between a standard trapezoid and an inverted one.

ScifiTriangle

Keywords: Warning · Pointer · Sharp

A sharp geometric form with strong visual impact.

• Calculation Logic: Calculates vertex positions using trigonometric geometry based on base width and height.
• Use Cases: Warning information backgrounds, directional pointers, special status indicators.
• Variants: directionAlt toggles between a standard triangle and an inverted one.

Visual

Gradient Background

When gradientBackground is enabled, the component background will transition from bg (primary background color) to bg_alt (secondary background color).

• gradientReverse: Reverses the direction of the gradient.
• Configuration: Define colors using CSS variables --sf-geom-bg and --sf-geom-bg_alt.

<template>
  <ScifiHexagon 
    :gradientBackground="true" 
    className="geom-grad"
  />
</template>

<style>
.geom-grad {
  --sf-geom-bg: rgba(0, 100, 255, 0.2);
  --sf-geom-bg_alt: rgba(0, 255, 200, 0.8); /* Gradient target color */
}
</style>

Double-Layer Decoration (Decoration Alt)

Enabling decorationAlt replicates a "ghost layer" (.sf-deco-b-elem) beneath the main graphic. This decoration layer is typically used to create double borders, shadow offsets, or floating effects.

Fine-tuning API: Since the geometric shapes are dynamically calculated, we provide the following Props for fine-tuning the position of the decoration layer relative to the main shape:

• decoAltScale: Scale ratio of the decoration layer (e.g., 1.04).
• decoAltTransX: X-axis displacement (px).
• decoAltTransY: Y-axis displacement (px).

<template>
  <ScifiHexagon 
    :decorationAlt="true"
    :decoAltScale="1.04"
    :decoAltTransX="5"
    :decoAltTransY="3"
  />
</template>

API Reference

Universal Props

All ScifiGeometry components share the following property configurations.

Property Name	Description	Type	Default
width / height	Dimensions. Baseline dimensions used for geometric calculations	Number	300 / 150
borderWidth	Border width (px)	Number	—
borderd	Whether to display the border	Boolean	true
glow	Glow Toggle. Enables Gaussian blur halo	Boolean	true
glowRange	Glow range	Number	—
backgroundOpacity	Background opacity	Number	—
gradientBackground	Gradient Toggle. Enables linear gradient	Boolean	false
gradientReverse	Reverses gradient direction	Boolean	false
directionAlt	Direction Variant. Rotates/Inverts/Tilts direction	Boolean	false
decorationAlt	Dual-layer Decoration. Enables ghost decoration layer	Boolean	false
decoAltScale	Scale ratio of the decoration layer	Number	—
decoAltTransX/Y	Displacement of the decoration layer (X/Y)	Number	—
cornerAlt	Corner Variant. Toggles chamfer/reinforced styles	Boolean	false
shadowType	Shadow type. 'drop', 't3d', 'none'	String	'drop'
className	Custom class name	String	—

CSS Variables

Variable Name	Description	Default Value
--sf-geom-bg	Primary background color (and gradient start)	var(--scifi-bg)
--sf-geom-bg_alt	Secondary background color (gradient end)	var(--scifi-bg_alt)
--sf-geom-bd	Border color	var(--scifi-bd)
--sf-geom-hlite	Highlight color (usually for Decoration)	var(--scifi-hlite)
--sf-geom-focus	Focus color (usually for decoration layers)	var(--scifi-focus)
--sf-geom-glow	Glow color	var(--scifi-hlite)
--sf-geom-shadow	Shadow color	var(--shadow-weak)