@TechUI/Scifi Introduction

TechUI Scifi (Sci-fi Component Library) is the visual centerpiece of the TechUI ecosystem and the core weapon for building futuristic Web interfaces.

If Admin is the skeleton and Base represents the cells, then Scifi is the prosthetic skin. It is a dynamic SVG component library developed based on Vue 3. Unlike traditional static image slicing, it uses code to calculate and draw complex geometric shapes and sci-fi elements in real-time.

Summary in one sentence: The pinnacle of TechUI's aesthetics, using dynamic SVG to endow interfaces with movie-grade sci-fi textures.

Free Component Library

To give back to the community and pay tribute to the spirit of open source, @techui/scifi has evolved from the original paid project TechUI-Vue2 and is now completely open for free. When used independently, it supports free commercial use.

• ✅ Dynamic Rendering: Say goodbye to blurry bitmaps; all components are drawn as SVG vectors, ensuring no distortion when scaled arbitrarily.
• ✅ No Mandatory Keys: Can be used directly without purchasing a License Key.
• ✅ Ecosystem Consistency: Shares the same underlying dependencies with Admin and Base for seamless integration.

💡 The Only Constraint

When using the free version of Scifi, please retain the copyright output information in the Console and at the end of the HTML.

"TechUI Scifi supports free commercial applications. Powered by a built-in Wasm licensing mechanism, upgrading to a formal license grants you exclusive access to 6 advanced components, taking your project's capabilities to the next level.

Core Highlight

The core of Scifi lies in its "dynamism". It is not a collection of static SVG files, but a runtime rendering engine.

• Real-time Calculation: Line thickness, aperture rotation, and border chamfers are all generated in real-time via mathematical formulas.
• FUI Design Language: Built-in with a full suite of FUI elements such as scifiButton (interactive buttons), scifiDeco (decorative elements), and scifiGeome (geometric figures), making it easy to build command centers or data dashboards.
• Theme Responsiveness: Deeply integrated with @techui/themes, supporting one-click switching between themes like "Firmament," "Late Night," and "Blackstone". All dynamic SVG UI components change accordingly.

Revolutionary Adaptation

In the Scifi component library, we have built in our proud TuiAdaptive component—currently the most powerful adaptive/fitting solution on the market.

It adopts a proportional scaling scheme, thoroughly solving the adaptation challenges for large screens and management backends under different resolutions.

• Multiple Adaptation Modes: Perfectly adapts to various scenarios such as full screen, wide screen, and browsers with zoom.
• GIS/Map Specific Optimization:
  • Solves the industry pain point where traditional transform scaling causes click coordinate offsets in map components like Cesium and Leaflet.
  • Features original "Synchronous Penetration Container" technology to ensure map interaction remains precise and error-free even under scaling.
• Drag Mode: Supports activating drag-and-drop debugging via the browser zoom function, making the restoration of design drafts painless.

Comprehensive Infrastructure

Scifi does not exist in isolation; it aggregates the universal capabilities of the TechUI ecosystem's base, shielding you from underlying complexity:

• @techui/fonts: A unified font library ensuring consistency, introducing open-source free Chinese fonts, with built-in selection and preview functions.
• @techui/icons: An icon library designed and organized by TechUI, featuring built-in icon preview and selection.
• @techui/colors: A unified color system to ensure visual consistency, with built-in color table preview and selection.
• @techui/themes: A flexible theme system supporting light/dark mode switching.
• @techui/locales: Built-in internationalization support to handle multi-language environments.
• @techui/utils: Integrates a large number of high-frequency utility functions.
• @techui/libs: Integrates a large number of encapsulated third-party libraries (to prevent TechUI library anomalies caused by breaking updates).
• @techui/lessmixins: Provides a powerful LESS mixin library to improve style development efficiency.

Application Scenarios

@techui/scifi is specifically designed for projects that require strong visual impact:

• Data Visualization Dashboards: City brains, command centers, and monitoring panels.
• High-tech Style Official Websites: Official websites for blockchain, AI, and e-sports/gaming.
• FUI/HUD Interfaces: Simulating game interfaces or movie-grade user interaction layers.

Relationships

In the TechUI pyramid structure, Scifi is positioned on the visual side of the middle layer:

• Scifi (This Library): npm i @techui/scifi -> Provides sci-fi visuals + TuiAdaptive -> Free Commercial Use.
• Prime: Integrates Scifi -> Perfectly merges Scifi + Admin + Base -> Requires Paid Authorization.

License

TechUI license categories are divided into:

• Heavy License: Dual joint decryption, Client Key + Npm Keychain.
• Lite License: Single keychain, Client Key.

The Scifi component library adopts a Lite License with a one-way verification mechanism. Its core Wasm module directly decrypts and verifies the incoming license string, ensuring lightweight deployment of the system.

• Convenience: No need to introduce additional key packages; simple configuration.
• Compatibility: Supports free mode; automatically switches to the free version status when no valid license is detected.

🚀 Start Exploring

If you want to wrap your project in a layer of cyberpunk or futuristic technology, @techui/scifi will be an essential choice.