ScifiTrapezoid

⚡WASM Powered

👑Pioneer

A support-type component from the TechUI Scifi Geometry series.

ScifiTrapezoid provides a fully parameterized trapezoidal container. Unlike standard CSS clip-path, it uses an SVG path with vertices calculated via mathematical formulas. This enables support for complex SVG filter effects such as strokes, inner shadows, and outer glows, ensuring no blurring occurs at any scale.

It is commonly used to build data trays, tabs, console bases, or floating title backgrounds.

Basic Usage

Default Form

By default, ScifiTrapezoid renders as a regular trapezoid (narrower at the top, wider at the bottom). This form is visually stable, resembling a "pedestal" for carrying data.

<template>
  <div class="hud-group">
    <ScifiTrapezoid />
    
    <ScifiTrapezoid :width="400" :height="60" />
  </div>
</template>

Visual Features and Variants

ScifiTrapezoid offers directional inversion and corner detail modifications to adapt to different layout requirements for tops and bottoms.

Direction Inversion

Controls the opening direction of the trapezoid.

• Default (False): Regular Trapezoid (top narrow, bottom wide). Suitable for bottom layouts like trays and bases.
• True: Inverted Trapezoid (top wide, bottom narrow). Suitable for top layouts like navigation bars, ceiling decorations, or title backgrounds.

<template>
  <ScifiTrapezoid :directionAlt="true" :width="300" :height="50" />
</template>

Mechanical Clipped Corners (Corner Alt)

When cornerAlt is enabled, additional clipped corner details are added to the acute angles. This makes them appear less sharp and increases the perceived weight of the mechanical structure, which is useful for creating "heavy armor" style interfaces.

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

Double-Layer Phantom (Decoration Alt)

Enabling decorationAlt generates a semi-transparent "ghost layer" beneath the main graphic. When combined with an inverted trapezoid, it can create a layered holographic levitation platform effect.

<template>
  <ScifiTrapezoid 
    :directionAlt="true"
    :decorationAlt="true"
    :decoAltScale="1.05"
    :decoAltTransY="5"
  />
</template>

Gradient Flow

Supports linear gradient fills to enhance the sci-fi atmosphere.

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

Dynamic Calculation

The geometric calculation formula for ScifiTrapezoid automatically adjusts the slope of the sides based on the height.

• Width: The length of the widest side of the trapezoid (the bottom for a regular trapezoid, the top for an inverted one).
• Height: Vertical height.

Note: To maintain visual aesthetics, the component has internal constraints on the slope. If the height is too great relative to a narrow width, the trapezoid may degrade into a rectangle or triangle.

CSS Variable

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

Case Study: Amber Console

This case defines an amber-toned, highlighted base style.

<template>
  <ScifiTrapezoid 
    className="geom-console" 
    :width="400" 
    :height="100"
    :cornerAlt="true"
  />
</template>

<style lang="less">
.geom-console {
  /* Border and Highlights */
  --sf-geom-bd: #92400e;     /* Dark brown border */
  --sf-geom-hlite: #f59e0b;  /* Amber decoration */
  
  /* Background */
  --sf-geom-bg: rgba(69, 26, 3, 0.6);
  
  /* Glow */
  --sf-geom-glow: #fbbf24;
  --sf-geom-glowop: 0.6;
}
</style>

Variable Dictionary

Below are the primary CSS variables supported by ScifiTrapezoid:

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. Width of the widest side (px)	Number	300
height	Height. Container height (px)	Number	150
directionAlt	Direction inversion. false=Regular (top narrow), true=Inverted (top wide)	Boolean	false
cornerAlt	Mechanical corner. Adds extra clipping to acute angles 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 trapezoid boundaries.