glass-studio-ui-pro

v1.1.6

Published

3 days ago

Premium Liquid Glass UI Library for Vue 3

Downloads

3,571

0High
0Medium
0Low

bachmatri2

💎 Glass Studio UI Pro (Cg View Studio)

Premium Liquid Glass UI Library (Crystal Glass) for Vue 3

[!IMPORTANT] HỆ THỐNG ĐANG TRONG GIAI ĐOẠN BETA: Đã mở dùng thử miễn phí đến ngày 01/05/2026. Sau thời gian này, các tính năng Pro sẽ yêu cầu Giấy phép (License Key) chính thức.

Glass Studio Preview

glass-studio-ui-pro is a high-performance Vue 3 UI library specialized in advanced Glassmorphism effects. It features real-time Liquid Distortion filters, multi-layered reflection systems, and professional-grade presets for crafting state-of-the-art premium interfaces with the new Cg (Crystal Glass) design system.

✨ Key Features

Liquid Glass Distortion: Physically accurate glass distortion filters (Mist, Grain, Frosted, Ripple, Wavy).
Professional Presets: 6 specialized material presets (Glass Frost, Grain Frost, Soft Mist, Light Frost, Fine Frost, Heavy Frost).
Advanced Shadow Engine: Realistic elevation-based reflections (Reflex) and ambient glints (Mist).
Neon Glow System: Integrated liquid glow effects for buttons and interactive states.
License Guard: Real-time security and license verification system for enterprise use.
TypeScript Native: Full type safety and optimized Developer Experience (DX).

🚀 Getting Started

1. Installation

npm install glass-studio-ui-pro
# or
yarn add glass-studio-ui-pro

2. Plugin Configuration (`main.ts`)

To unlock all Pro features, register the plugin and provide your License Key:

import { createApp } from "vue";
import { GlassUI } from "glass-studio-ui-pro";
import "glass-studio-ui-pro/style.css";

const app = createApp(App);

// Initialize GlassUI with your Pro License Key
app.use(GlassUI, {
  licenseKey: "YOUR-PRO-LICENSE-KEY",
});

app.mount("#app");

3. Global SVG Filters (`App.vue`)

The liquid distortion engine requires the CgFilters component to be present at the root level (usually in App.vue):

<script setup>
import { CgFilters } from "glass-studio-ui-pro";
</script>

<template>
  <div id="app">
    <router-view />
    <CgFilters />
    <!-- The core engine for glass distortion effects -->
  </div>
</template>

🔑 PRO License Registration

To purchase a PRO license and unlock all premium glass effects, please visit https://finzo.duckdns.org/ and follow these steps:

Register an account: Create your developer account on the platform.
Purchase: Navigate to the NPM Libraries section, select Glass Studio UI Pro, and complete the payment process.
Get your Key: After successful payment, you will receive a unique licenseKey.
Renewal: If your license expires, you can renew it directly on the dashboard to immediately restore all premium effects.

🎨 Component Usage

CgCard (Glass Surface)

A versatile container with backdrop blur and texture.

<template>
  <CgCard type="heavy-frost" shadow="mist" distortion="wavy">
    <h3>Liquid Glass Performance</h3>
    <p>Content rendered with premium glass optics.</p>
  </CgCard>
</template>

CgButton (Glass Controls)

Interactive buttons with material presets and liquid glow.

<template>
  <CgButton variant="primary" glow :blur="20" distortion="frosted">
    Explore Pro
  </CgButton>
</template>

CgCheckbox (Liquid Selection)

Neon-lit checkboxes with animated state transitions.

<template>
  <CgCheckbox v-model="isChecked" label="Enable Reflections" />
</template>

CgToolbar (Adaptive Navigation)

Glass toolbars with multiple layout modes (Full, Floating, Fit).

<template>
  <CgToolbar width="floating" type="fine-frost" shadow="reflex">
    <template #left><span>Logo</span></template>
    <CgButton variant="ghost">Home</CgButton>
    <template #right><CgButton variant="primary">Login</CgButton></template>
  </CgToolbar>
</template>

📖 API Reference

CgCard Props

CgButton Props

CgCheckbox Props

CgModal Props

CgToolbar Props

🔐 Security & License Guard

This is the Pro version of the library. If a valid License Key is not detected or has expired:

Components will enter Secure Lock state (Blackout/Restricted UI).
Interactive elements will show a "LICENSE_REQUIRED" message.
Console warnings will be triggered (e.g., "SECURITY_ALERT: Components Locked").
Advanced SVG Filters and material presets will be disabled to protect intellectual property.

You can check the current license status programmatically:

import { getLicenseStatus } from "glass-studio-ui-pro";

const status = getLicenseStatus();
if (!status.isValid) {
  console.warn("License Issue:", status.message);
}