Package Exports

smonthl
smonthl/smonthl-api.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (smonthl) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

SmonthlAPI - HTML/JavaScript Version

Pure HTML and JavaScript implementation of SmonthlAPI - a flexible configuration system for creating glass UI components with custom sizes, shapes, icons, and effects.

📦 Installation

Via npm

npm install smonthl

🚀 Quick Start

const api = new SmonthlAPI();

// Option 1: Use default configuration (easiest)
api.loadConfig().then(config => {
  console.log('Configuration loaded:', config);
});

// Option 2: Load the included glass-config.json
// api.loadConfig('./node_modules/smonthl/glass-config.json');

// Option 3: Copy and customize your own config
// cp node_modules/smonthl/glass-config.json ./my-config.json
// api.loadConfig('./my-config.json');

🎨 Create Custom Components

SmonthlAPI is flexible - create any glass component with custom sizes and shapes:

const api = new SmonthlAPI();
await api.loadConfig();

// Create a small circular icon button (60x60)
api.updateConfig('glass.width', 60);
api.updateConfig('glass.height', 60);
api.updateConfig('glass.borderRadius', 30);
api.updateConfig('content.icon', '🎨');

// Create a large card (500x300)
api.updateConfig('glass.width', 500);
api.updateConfig('glass.height', 300);
api.updateConfig('glass.borderRadius', 20);
api.updateConfig('content.title', 'My Card');

// Create a custom window (800x600)
api.updateConfig('glass.width', 800);
api.updateConfig('glass.height', 600);
api.updateConfig('glass.borderRadius', 12);

Features

Liquid glass effects with magnifying lens
Jelly physics animations
Magnetic cursor following
Dynamic cursor lights
Real-time configuration controls
Import/Export JSON configuration

Running

Option 1: Direct Browser

Simply open index.html in your browser.

Option 2: Electron (Recommended)

npm install
npm start

Or for development:

npm run dev

Files

index.html - Main HTML file with all functionality
smonthl-api.js - SmonthlAPI JavaScript implementation
glass-config.json - Configuration file
package.json - Electron package configuration

Configuration

Edit glass-config.json to customize:

Glass transparency and blur
Magnifying lens effects
Jelly physics parameters
Magnetic following strength
Cursor light effects
Background images

Controls

Use the control panel on the right to adjust:

Transparency (0-30%)
Blur Amount (10-150px)
Magnifying Blur (10-80px)
Magnifying Brightness (100-150%)
Lens Size (20-80px)
Border Radius (8-60px)
Jelly Elasticity (0-100%)
Magnetic Strength (0-100%)

Export/Import

Export JSON: Save current configuration
Import JSON: Load configuration from file
Reset: Restore default settings