ScifiParallelogram

⚡WASM Powered

👑Pioneer

A dynamic slanting component from the TechUI Scifi Geometry series.

ScifiParallelogram is a parameterized parallelogram container. Unlike the static CSS transform: skew(), it calculates four precise vertex coordinates using mathematical formulas to draw an SVG path. This ensures that while the shape is slanted, the border strokes maintain pixel-perfect clarity without the edge blurring or aliasing common in CSS transformations.

It is commonly used to build list backgrounds, navigation menus, or progress bar tracks, providing a visual suggestion of "moving forward" or "high-speed motion."

Basic Usage

Default Form

By default, ScifiParallelogram renders as a right-leaning parallelogram. Its height and width are fully controllable, and the slant angle is automatically optimized based on the height to maintain aesthetic proportions.

<template>
  <div class="list-group">
    <ScifiParallelogram />
    
    <ScifiParallelogram :width="300" :height="60" />
  </div>
</template>

Visual Features and Variants

ScifiParallelogram provides direction control and corner detail modifications to adapt to different layout requirements.

Slant Direction

Controls the slant angle of the parallelogram.

• Default (False): Slants to the right (typically represents "forward" or "progress").
• True: Slants to the left (typically represents "reverse," "back," or acts as a right-aligned container).

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

Mechanical Clipped Corners (Corner Alt)

When cornerAlt is enabled, the two acute angles of the parallelogram are "clipped," forming a hexagonal variant (while still maintaining the primary parallelogram silhouette). This design adds an industrial feel, suitable for representing "armor" or "mechanical components."

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

Double-Layer Phantom (Decoration Alt)

Enabling decorationAlt generates a semi-transparent "ghost layer" beneath the main graphic. Combined with decoAltScale (scale) and decoAltTransX (displacement), it can create a ghosting effect that conveys a sense of speed.

<template>
  <ScifiParallelogram 
    :decorationAlt="true"
    :decoAltScale="1.04"
    :decoAltTransX="10" 
    :decoAltTransY="0"
  />
</template>

Gradient Flow

Supports linear gradient fills to enhance the dynamic atmosphere.

<template>
  <ScifiParallelogram 
    :gradientBackground="true" 
    :gradientReverse="true"
  />
</template>

Dynamic Calculation

The geometric calculation formulas of ScifiParallelogram ensure that at any aspect ratio, the slant angle remains within a visually comfortable zone, preventing the angle from becoming too sharp when the height is low.

• Width: Total width of the container (including the slanted portion).
• Height: Vertical height.

CSS Variable

You can define the theme colors of the parallelogram via CSS variables.

Case Study: Speed Runner Style

This case defines a blue-purple tone with a strong sense of motion.

<template>
  <ScifiParallelogram 
    className="geom-speed" 
    :width="300" 
    :height="80"
    :directionAlt="true"
  />
</template>

<style lang="less">
.geom-speed {
  /* Border and Highlights */
  --sf-geom-bd: #8b5cf6;     /* Purple border */
  --sf-geom-hlite: #c4b5fd;  /* Light purple decoration */
  
  /* Background Gradient */
  --sf-geom-bg: rgba(76, 29, 149, 0.4);
  --sf-geom-bg_alt: rgba(124, 58, 237, 0.1);
  
  /* Glow */
  --sf-geom-glow: #a78bfa;
}
</style>

Variable Dictionary

Below are the primary CSS variables supported by ScifiParallelogram:

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	Slant direction. false=Right, true=Left	Boolean	false
cornerAlt	Mechanical corner. Clips 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 parallelogram boundaries.