ScifiTriangle

⚡WASM Powered

👑Pioneer

A warning and directional component from the TechUI Scifi Geometry series.

ScifiTriangle provides a fully parameterized triangular container. Unlike static images, it calculates vertices in real-time based on mathematical formulas, supporting free switching between "regular triangle" and "inverted triangle," and handling chamfer details.

In sci-fi UI, triangles are typically bound to semantics such as Danger, Warning, or Lock, making them essential elements for building HUD tactical interfaces.

Basic Usage

Default Form

By default, ScifiTriangle renders as a regular triangle (tip pointing up). Its center of gravity is lower, making it suitable for wrapping icons or numbers.

<template>
  <div class="alert-zone">
    <ScifiTriangle />
    
    <ScifiTriangle :width="100" :height="100" />
  </div>
</template>

Visual Features and Variants

ScifiTriangle provides direction inversion and unique corner cutting functions.

Direction Inversion

Controls the orientation of the triangle.

• Default (False): Regular Triangle (tip pointing up). Often used for pyramid charts or upgrade arrows.
• True: Inverted Triangle (tip pointing down). Often used for "selection" pointers, map markers, or danger warnings.

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

Mechanical Flat Top (Corner Alt)

When cornerAlt is enabled, the sharpest tip of the triangle is "chamfered," turning it into a trapezoidal variant with a flat top edge. This treatment eliminates visual "stinging," adds a sense of industrial mechanical stability, and is suitable for use as button backgrounds or nameplates.

<template>
  <ScifiTriangle 
    :cornerAlt="true" 
    :borderWidth="2"
  />
</template>

Double-Layer Phantom (Decoration Alt)

Enabling decorationAlt generates a semi-transparent "ghost layer" beneath the main graphic. In warning scenarios, this ghosting effect effectively simulates visual jitter or the instability of holographic projections during emergency states.

<template>
  <ScifiTriangle 
    :decorationAlt="true"
    :decoAltScale="1.1"
    :decoAltTransY="5"
  />
</template>

Gradient Flow

Supports linear gradient fills, commonly used for creating energy crystals or charging states.

<template>
  <ScifiTriangle 
    :gradientBackground="true" 
    :borderd="false"
  />
</template>

Dynamic Calculation

The geometric calculation formula for ScifiTriangle is based on the base width and vertical height.

• Width: The length of the triangle's base.
• Height: The vertical distance from the base to the vertex.

Layout Suggestion: Since the top space of the triangle is narrow, if used as a container, it is recommended to shift the content's center of gravity downward using Flex layout or use padding to avoid the sharp corner area.

CSS Variable

You can define the color theme of the triangle via CSS variables.

Case Study: Crimson Alert

This case defines a warning style with red tones and high flicker frequency.

<template>
  <ScifiTriangle 
    className="geom-alert" 
    :width="150" 
    :height="130"
    :directionAlt="true"
  />
</template>

<style lang="less">
.geom-alert {
  /* Border and Highlights */
  --sf-geom-bd: #991b1b;     /* Dark red border */
  --sf-geom-hlite: #ef4444;  /* Bright red decoration */
  
  /* Background */
  --sf-geom-bg: rgba(69, 10, 10, 0.6);
  
  /* Glow */
  --sf-geom-glow: #f87171;
  --sf-geom-glowop: 0.8;
}
</style>

Variable Dictionary

Below are the primary CSS variables supported by ScifiTriangle:

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. Triangle base width (px)	Number	300
height	Height. Vertical height (px)	Number	150
directionAlt	Direction inversion. false=Regular (tip up), true=Inverted (tip down)	Boolean	false
cornerAlt	Mechanical flat top. Sharp corners are chamfered when enabled	Boolean	false
decorationAlt	Double-layer deco. Enables the ghost layer	Boolean	false
decoAltScale	Decoration layer scale	Number	—
decoAltTransX	Decoration layer X-axis displacement	Number	—
decoAltTransY	Decoration layer Y-axis displacement	Number	—
gradientBackground	Gradient switch	Boolean	false
borderd	Whether to display the border	Boolean	true
borderWidth	Border width	Number	—
glow	Glow switch	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 exceed the triangle boundaries.