ScifiRectangle

⚡WASM Powered

👑Pioneer

A general-purpose foundational component from the TechUI Scifi Geometry series.

ScifiRectangle provides a rectangular container with physical chamfers. In sci-fi interface design, "clipped corners" are often used to convey an industrial and rugged feel, avoiding the monotony of sharp right angles and the softness of rounded corners.

This component dynamically calculates the coordinates of the four corners using mathematical formulas. It supports standard chamfers and complex mechanical corner variants, making it ideal for general information cards, pop-up backgrounds, or text containers.

Basic Usage

Default Form

By default, ScifiRectangle renders as a rectangle with all four corners clipped. The size of the chamfers is optimized via an algorithm and adjusts automatically based on the container's dimensions to ensure visual balance.

<template>
  <div class="card-group">
    <ScifiRectangle />
    
    <ScifiRectangle :width="400" :height="300" />
  </div>
</template>

Visual Features and Variants

ScifiRectangle offers a rich variety of corner treatments and decorative options, allowing it to adapt to scenarios ranging from minimalist to complex.

Mechanical Clipped Corners (Corner Alt)

This is the most significant variant feature of ScifiRectangle.

• Default (False): Standard Chamfer. The four corners are simple straight-line cuts.
• True: Mechanical Chamfer. The corners become more complex, taking on a form similar to "brackets" or "reinforcements," providing a greater sense of defense and weight visually.

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

Double-Layer Phantom (Decoration Alt)

When decorationAlt is enabled, a semi-transparent "ghost layer" is generated beneath the main border. When used in conjunction with cornerAlt, the double-layer structure creates a very precise sense of mechanical interlocking.

• decoAltScale: Scaling ratio (e.g., 1.03).
• decoAltTransX/Y: Fine-tuned displacement.

<template>
  <ScifiRectangle 
    :cornerAlt="true"
    :decorationAlt="true"
    :decoAltScale="1.03"
    :decoAltTransX="5"
    :decoAltTransY="5"
  />
</template>

Gradient Background

Supports linear gradient fills, commonly used for creating holographic projection-style panel backgrounds.

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

Dynamic Calculation

The chamfer dimensions of ScifiRectangle are not fixed pixels but are dynamic chamfers based on mathematical formulas. This means that regardless of how large or small you set the rectangle, the proportions of the chamfers remain harmonious, avoiding the inconsistency of a "giant rectangle with tiny chamfers."

• Width/Height: Defines the overall boundaries of the rectangle.
• BorderWidth: The thickness of the border lines.

CSS Variable

You can define the color style of the rectangle via CSS variables.

Case Study: Deep Space Pad

This case defines an information board style with deep blue tones and low transparency.

<template>
  <ScifiRectangle 
    className="geom-pad" 
    :width="350" 
    :height="200"
    :cornerAlt="true"
  />
</template>

<style lang="less">
.geom-pad {
  /* Border and Highlights */
  --sf-geom-bd: #1e3a8a;     /* Deep blue border */
  --sf-geom-hlite: #3b82f6;  /* Bright blue decoration */
  
  /* Background */
  --sf-geom-bg: rgba(15, 23, 42, 0.8); /* Dark solid base */
  
  /* Glow */
  --sf-geom-glow: #60a5fa;
  --sf-geom-glowop: 0.5;
}
</style>

Variable Dictionary

Below are the primary CSS variables supported by ScifiRectangle:

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
cornerAlt	Mechanical corner. false=Standard chamfer, true=Mechanical reinforced chamfer	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 clipped rectangle boundaries.