ScifiHexagon

⚡WASM Powered

👑Pioneer

The core geometric component of the TechUI Scifi Geometry series.

ScifiHexagon provides a standard, parameterizable hexagonal container. Unlike static image assets, its six vertex coordinates are dynamically calculated based on width and height. This means you can stretch it freely (e.g., into a long, flat hexagonal bar) without causing edge pixelation or blurring.

It features built-in dual-layer decoration, directional rotation, and smart gradient functions, making it ideal for core metric bases, radar chart backgrounds, or honeycomb arrays.

Basic Usage

Default Form

By default, ScifiHexagon renders as a hexagon with a sci-fi style border and a subtle glow. Its geometric center is aligned with the container center, making it perfect for overlaying content via absolute positioning.

<template>
  <div class="center-stage">
    <ScifiHexagon />
    
    <ScifiHexagon :width="200" :height="200" />
  </div>
</template>

Visual Features and Variants

ScifiHexagon offers a rich set of configuration options to adapt to various UI complexities.

Directional Rotation

There are two classic orientations for the hexagon: Pointy Top or Flat Top.

• Default (False): Points face left and right (horizontal hexagon), suitable for landscape layouts.
• True: Rotates 30 degrees (or recalculates vertices) so points face up and down (vertical hexagon), ideal for honeycomb stacking.

<template>
  <ScifiHexagon :directionAlt="true" />
</template>

Double-Layer Phantom (Decoration Alt)

When decorationAlt is enabled, the component generates a translucent "ghost layer" beneath the main shape. You can use the decoAltScale and decoAltTrans properties to fine-tune the position of this layer, creating 3D layering or mechanical offset visual effects.

• decoAltScale: Scale ratio (e.g., 1.03 represents a 3% enlargement).
• decoAltTransX/Y: Displacement values in pixels.

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

Gradient Background

Supports linear gradient fills. When enabled, the background color will transition between the primary color (--sf-geom-bg) and the secondary color (--sf-geom-bg_alt).

<template>
  <ScifiHexagon 
    :gradientBackground="true" 
    :borderWidth="2"
  />
</template>

Dynamic Calculation

Since it is rendered in real-time based on mathematical formulas, ScifiHexagon perfectly supports non-regular hexagons (unequal sides). You can set any width and height, and the component will automatically adjust the vertex angles to fit the container.

• Flattened: Set width=400, height=100 to use it as a title background bar.
• Regular Hexagon: Set a specific aspect ratio (depends on mathematical constants; typically a width-to-height ratio of approximately 1:0.866 results in a near-regular hexagon).

CSS Variable

You can define the hexagon's color theme using CSS variables.

Case Study: Reactor Core

This example defines a high-brightness cyan core style.

<template>
  <ScifiHexagon 
    className="geom-reactor" 
    :width="200" 
    :height="200"
    :glowRange="15"
  />
</template>

<style lang="less">
.geom-reactor {
  /* Border and Highlights */
  --sf-geom-bd: #22d3ee;     /* Cyan Border */
  --sf-geom-hlite: #67e8f9;  /* Bright Cyan Decoration */
  
  /* Background Gradient */
  --sf-geom-bg: rgba(6, 182, 212, 0.2);
  --sf-geom-bg_alt: rgba(8, 145, 178, 0.6);
  
  /* Glow */
  --sf-geom-glow: #06b6d4;
  --sf-geom-glowop: 0.8;
}
</style>

Variable Dictionary

Below are the primary CSS variables supported by ScifiHexagon:

Variable Name	Description	Default Value
--sf-geom-bg	Main Background Color	var(--scifi-bg)
--sf-geom-bg_alt	Secondary Background Color (for gradients)	var(--scifi-bg_alt)
--sf-geom-bd	Border Color	var(--scifi-bd)
--sf-geom-hlite	Decoration Layer / Highlight Color	var(--scifi-hlite)
--sf-geom-focus	Focus Color	var(--scifi-focus)
--sf-geom-glow	Glow Color	var(--scifi-hlite)

API Reference

Props

Property	Description	Type	Default
width	Width. Container width (px)	Number	300
height	Height. Container height (px)	Number	150
directionAlt	Direction Rotation. false=Pointy sides, true=Pointy top/bottom	Boolean	false
decorationAlt	Dual-layer Decoration. Enables ghost layer	Boolean	false
decoAltScale	Decoration layer scale	Number	—
decoAltTransX	Decoration layer X-axis offset	Number	—
decoAltTransY	Decoration layer Y-axis offset	Number	—
gradientBackground	Gradient Toggle	Boolean	false
borderd	Whether to show border	Boolean	true
borderWidth	Border width	Number	—
glow	Glow Toggle	Boolean	true
backgroundOpacity	Background opacity	Number	—
className	Custom class name	String	—

Slots

Slot Name	Description
default	Component content. Content is clipped by an SVG mask to ensure it does not overflow the hexagonal boundaries.