### Build a Complete Glass UI Application Source: https://context7.com/dashersw/liquid-glass-js/llms.txt A full implementation example demonstrating how to initialize containers, add buttons, and apply global glass presets. ```html

``` -------------------------------- ### Configure Advanced Button Options Source: https://github.com/dashersw/liquid-glass-js/blob/main/README.md Example of initializing a Button with custom styling, distortion effects, and click handlers. ```javascript const button = new Button({ text: 'Save Changes', size: 28, type: 'pill', tintOpacity: 0.4, warp: true, onClick: text => { console.log(`${text} was clicked!`) } }) ``` -------------------------------- ### Create Navigation Bar with Buttons Source: https://github.com/dashersw/liquid-glass-js/blob/main/README.md Example demonstrating how to create a navigation bar using Container and Button components, with click handlers for navigation. ```javascript const navContainer = new Container({ type: 'rounded', borderRadius: 20, tintOpacity: 0.1 }) ;['Home', 'About', 'Contact'].forEach(text => { const navButton = new Button({ text: text, size: 16, type: 'pill', onClick: text => navigate(text) }) navContainer.addChild(navButton) }) ``` -------------------------------- ### Clone Repository and Serve Locally Source: https://github.com/dashersw/liquid-glass-js/blob/main/README.md Steps to clone the repository and start a local development server using 'npx serve'. Requires a local server for WebGL. ```bash # Clone the repository git clone https://github.com/your-username/liquid-glass-js.git cd liquid-glass-js # Open in browser (requires local server for WebGL) # For example, using serve npx serve . ``` -------------------------------- ### Apply Dark Theme to Glass Button Source: https://github.com/dashersw/liquid-glass-js/blob/main/README.md Example CSS for a dark theme, adjusting box-shadow and text color for glass buttons. ```css /* Dark theme example */ .glass-button { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4); } .glass-button-text { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } ``` -------------------------------- ### Initialize Container Instances Source: https://context7.com/dashersw/liquid-glass-js/llms.txt Demonstrates creating various glass container shapes including rounded rectangles, pills, and circles with custom styling. ```javascript // Basic glass container with default settings const basicContainer = new Container() document.body.appendChild(basicContainer.element) // Customized rounded rectangle container const roundedContainer = new Container({ borderRadius: 24, // Corner radius in pixels type: 'rounded', // Shape type: 'rounded', 'circle', or 'pill' tintOpacity: 0.3 // Gradient overlay strength (0-1) }) document.body.appendChild(roundedContainer.element) // Pill-shaped container for horizontal layouts const pillContainer = new Container({ borderRadius: 24, type: 'pill', tintOpacity: 0.2 }) document.body.appendChild(pillContainer.element) // Circle container (automatically enforces square dimensions) const circleContainer = new Container({ type: 'circle', tintOpacity: 0.4 }) document.body.appendChild(circleContainer.element) ``` -------------------------------- ### Initialize a Basic Glass Button Source: https://github.com/dashersw/liquid-glass-js/blob/main/README.md Demonstrates the basic HTML structure and JavaScript instantiation required to render a glass button. ```html ``` -------------------------------- ### Container Class Initialization Source: https://context7.com/dashersw/liquid-glass-js/llms.txt Demonstrates how to initialize and append basic and customized Container elements to the DOM. ```APIDOC ## Container Class Initialization ### Description Initializes and appends `Container` elements to the DOM. Supports various shape types and customization options. ### Method `new Container(options)` ### Parameters #### Options Object - **borderRadius** (number) - Optional - Corner radius in pixels for rounded or pill shapes. - **type** (string) - Optional - Shape type: 'rounded', 'circle', or 'pill'. Defaults to 'rounded'. - **tintOpacity** (number) - Optional - Strength of the gradient overlay (0-1). Defaults to 0. ### Request Example ```javascript // Basic glass container with default settings const basicContainer = new Container() document.body.appendChild(basicContainer.element) // Customized rounded rectangle container const roundedContainer = new Container({ borderRadius: 24, type: 'rounded', tintOpacity: 0.3 }) document.body.appendChild(roundedContainer.element) // Pill-shaped container for horizontal layouts const pillContainer = new Container({ borderRadius: 24, type: 'pill', tintOpacity: 0.2 }) document.body.appendChild(pillContainer.element) // Circle container (automatically enforces square dimensions) const circleContainer = new Container({ type: 'circle', tintOpacity: 0.4 }) document.body.appendChild(circleContainer.element) ``` ### Response N/A (This is a constructor) ``` -------------------------------- ### Initialize Button Components Source: https://context7.com/dashersw/liquid-glass-js/llms.txt Create various button types with custom text, sizing, and interaction handlers. ```javascript // Simple rounded button const saveButton = new Button({ text: 'Save', size: 28, // Font size in pixels (affects overall button size) type: 'rounded', // Shape: 'rounded', 'circle', or 'pill' tintOpacity: 0.2, // Glass tint strength onClick: (text) => { console.log(`Button clicked: ${text}`) } }) document.body.appendChild(saveButton.element) // Icon button with circle shape const playButton = new Button({ text: '▶', size: 32, type: 'circle', onClick: () => console.log('Play pressed') }) document.body.appendChild(playButton.element) // Pill-shaped button with center warp effect const actionButton = new Button({ text: 'Click Me!', size: 24, type: 'pill', warp: true, // Enable center distortion effect tintOpacity: 0.4, onClick: (text) => alert(`Action: ${text}`) }) document.body.appendChild(actionButton.element) ``` -------------------------------- ### Create a Container with Nested Glass Elements Source: https://github.com/dashersw/liquid-glass-js/blob/main/README.md Shows how to instantiate a Container and add child Button elements to create a nested glass effect. ```javascript // Create a glass container const container = new Container({ borderRadius: 24, type: 'pill', tintOpacity: 0.3 }) // Add glass buttons to container const button1 = new Button({ text: 'Action', size: 24, type: 'pill' }) const button2 = new Button({ text: '✓', size: 24, type: 'circle' }) container.addChild(button1) container.addChild(button2) document.body.appendChild(container.element) ``` -------------------------------- ### Create a Control Panel Source: https://github.com/dashersw/liquid-glass-js/blob/main/README.md This JavaScript snippet demonstrates how to create a rounded control panel with a play button using the Container and Button components. ```javascript const controlPanel = new Container({ type: 'rounded', borderRadius: 12, tintOpacity: 0.6 }) const playButton = new Button({ text: '▶', size: 24, type: 'circle', onClick: () => player.play() }) controlPanel.addChild(playButton) ``` -------------------------------- ### Create Glass Presets Source: https://context7.com/dashersw/liquid-glass-js/llms.txt Define reusable visual presets by modifying global controls and triggering an update. ```javascript // Example: Create a custom glass preset function applyFrostyPreset() { window.glassControls.blurRadius = 12.0 window.glassControls.tintOpacity = 0.4 window.glassControls.edgeIntensity = 0.015 window.glassControls.rimIntensity = 0.08 window.glassControls.rippleEffect = 0.15 updateAllGlassInstances() } // Example: Create a subtle glass preset function applySubtlePreset() { window.glassControls.blurRadius = 3.0 window.glassControls.tintOpacity = 0.15 window.glassControls.edgeIntensity = 0.005 window.glassControls.rimIntensity = 0.03 window.glassControls.rippleEffect = 0.05 updateAllGlassInstances() } ``` -------------------------------- ### Configure Global Glass Parameters Source: https://context7.com/dashersw/liquid-glass-js/llms.txt Adjust rendering properties globally and apply them to all instances. ```javascript // Global glass parameters (all instances share these) window.glassControls = { edgeIntensity: 0.01, // Refraction strength at shape edges (0-0.1) rimIntensity: 0.05, // Intensity of rim lighting effects (0-0.2) baseIntensity: 0.01, // Center distortion strength (0-0.05) edgeDistance: 0.15, // Falloff curve for edge effects (0.05-0.5) rimDistance: 0.8, // Falloff curve for rim effects (0.1-2.0) baseDistance: 0.1, // Falloff curve for base effects (0.05-0.3) cornerBoost: 0.02, // Additional corner enhancement (0-0.1) rippleEffect: 0.1, // Surface texture simulation (0-0.5) blurRadius: 5.0, // Background blur amount (1-15) tintOpacity: 0.2, // Gradient overlay strength (0-1.0) warp: false, // Enable center warping effect hideButtons: false // Toggle visibility of demo elements } // Modify parameters window.glassControls.blurRadius = 10.0 window.glassControls.tintOpacity = 0.5 window.glassControls.edgeIntensity = 0.03 // Apply changes to all glass instances updateAllGlassInstances() ``` -------------------------------- ### Configure Global Glass Parameters Source: https://github.com/dashersw/liquid-glass-js/blob/main/README.md Set global parameters for glass effects. These can be updated dynamically to affect all instances. ```javascript // Global glass parameters window.glassControls = { edgeIntensity: 0.02, rimIntensity: 0.08, blurRadius: 7.0, tintOpacity: 0.3 } // Update all instances function updateAllGlassInstances() { Container.instances.forEach(instance => { if (instance.gl_refs && instance.gl_refs.gl) { const gl = instance.gl_refs.gl gl.uniform1f(instance.gl_refs.edgeIntensityLoc, window.glassControls.edgeIntensity) // ... update other uniforms if (instance.render) instance.render() } }) } ``` -------------------------------- ### Apply Base Glass Container Styles Source: https://github.com/dashersw/liquid-glass-js/blob/main/README.md CSS class for base glass container styles. ```css /* Glass containers */ .glass-container { /* Base container styles */ } .glass-container-circle { /* Circle-specific styles */ } .glass-container-pill { /* Pill-specific styles */ } ``` -------------------------------- ### Apply Base Glass Button Styles Source: https://github.com/dashersw/liquid-glass-js/blob/main/README.md CSS class for base glass button styles. ```css /* Glass buttons */ .glass-button { /* Base button styles */ } .glass-button-circle { /* Circle button styles */ } .glass-button-text { /* Button text overlay */ } ``` -------------------------------- ### Create Pill/Capsule Button Source: https://github.com/dashersw/liquid-glass-js/blob/main/README.md Instantiate a Button with a 'pill' type. The 'text' property allows for auto-sizing. ```javascript const pill = new Button({ type: 'pill', text: 'Elongated Button' // Auto-sizing }) ``` -------------------------------- ### Create Perfect Circle Button Source: https://github.com/dashersw/liquid-glass-js/blob/main/README.md Instantiate a Button with a 'circle' type. The 'size' property determines its diameter. ```javascript const circle = new Button({ type: 'circle', size: 32 // Determines circle diameter }) ``` -------------------------------- ### Access Container Static Properties Source: https://context7.com/dashersw/liquid-glass-js/llms.txt Use these static properties to monitor active glass instances, access the current page snapshot, and check the capture status. ```javascript // Access all glass instances Container.instances.forEach(instance => { console.log('Glass instance:', instance) console.log(' Width:', instance.width) console.log(' Height:', instance.height) console.log(' Type:', instance.type) console.log(' WebGL initialized:', instance.webglInitialized) }) // Access page snapshot (html2canvas result) if (Container.pageSnapshot) { const dataUrl = Container.pageSnapshot.toDataURL() console.log('Page snapshot captured') } // Check capture status console.log('Is capturing:', Container.isCapturing) console.log('Waiting instances:', Container.waitingForSnapshot.length) ``` -------------------------------- ### Randomize Glass Effects Source: https://context7.com/dashersw/liquid-glass-js/llms.txt Apply randomized visual parameters to all glass instances. ```javascript // Randomize all glass effects randomizeGlassEffects() // Console output: "Glass effects randomized!" with the generated values // The function generates values in these ranges: // edgeIntensity: 0.005 to 0.03 // rimIntensity: 0.02 to 0.15 // baseIntensity: 0.005 to 0.03 // edgeDistance: 0.1 to 0.4 // rimDistance: 0.3 to 1.5 // baseDistance: 0.08 to 0.25 // cornerBoost: 0.01 to 0.06 // rippleEffect: 0.05 to 0.3 // blurRadius: 2 to 12 // tintOpacity: 0.1 to 0.8 // warp: 30% chance of being enabled ``` -------------------------------- ### Add Nested Glass Elements Source: https://context7.com/dashersw/liquid-glass-js/llms.txt Configures nested glass-on-glass effects by adding Button instances as children to a Container. ```javascript // Create a container with nested glass buttons const navContainer = new Container({ type: 'pill', borderRadius: 24, tintOpacity: 0.2 }) // Create buttons to add as children const homeButton = new Button({ text: 'Home', size: 20, type: 'pill', onClick: () => console.log('Navigate home') }) const settingsButton = new Button({ text: 'Settings', size: 20, type: 'pill', onClick: () => console.log('Open settings') }) // Add buttons to container - nested glass is set up automatically navContainer.addChild(homeButton) // Returns the child element navContainer.addChild(settingsButton) // Append container (with all children) to DOM document.body.appendChild(navContainer.element) ``` -------------------------------- ### Container Class API Source: https://github.com/dashersw/liquid-glass-js/blob/main/README.md Reference for the Container class, used to create glass effect containers with customizable shapes and properties. ```APIDOC ## Container Class ### Constructor Options | Option | Type | Default | Description | | -------------- | -------- | ----------- | ------------------------------------------------ | | `borderRadius` | `number` | `48` | Corner radius in pixels | | `type` | `string` | `'rounded'` | Shape type: `'rounded'`, `'circle'`, or `'pill'` | | `tintOpacity` | `number` | `0.2` | Tint overlay opacity (0-1) | ### Methods ```javascript // Add child element (enables nested glass) container.addChild(childElement) // Remove child element container.removeChild(childElement) // Force size update from DOM container.updateSizeFromDOM() ``` ``` -------------------------------- ### Container.updateSizeFromDOM() Source: https://context7.com/dashersw/liquid-glass-js/llms.txt Forces the container to recalculate its dimensions from the actual DOM layout. ```APIDOC ## Container.updateSizeFromDOM() ### Description Forces the container to recalculate its dimensions based on its current DOM layout. This is typically called automatically when children are added or removed, but can be invoked manually if external CSS changes affect the container's size. ### Method `container.updateSizeFromDOM()` ### Parameters N/A ### Request Example ```javascript const container = new Container({ type: 'rounded', borderRadius: 16 }) document.body.appendChild(container.element) // After external CSS changes that affect container size container.element.style.padding = '20px' container.updateSizeFromDOM() // Updates canvas, WebGL viewport, and child textures ``` ### Response N/A (This method updates the container's internal state) ``` -------------------------------- ### Manage Container Elements Source: https://github.com/dashersw/liquid-glass-js/blob/main/README.md Common methods for manipulating child elements and updating container dimensions. ```javascript // Add child element (enables nested glass) container.addChild(childElement) // Remove child element container.removeChild(childElement) // Force size update from DOM container.updateSizeFromDOM() ``` -------------------------------- ### Container.addChild() Source: https://context7.com/dashersw/liquid-glass-js/llms.txt Adds a child element to a container, enabling nested glass rendering. When a Button is added, it samples the parent's output. ```APIDOC ## Container.addChild() ### Description Adds a child element to the container and sets up nested glass rendering. Child elements, particularly `Button` instances, will sample the parent container's rendered output. ### Method `container.addChild(childElement)` ### Parameters #### Path Parameters - **childElement** (object) - Required - The child element (e.g., a `Button` instance) to add to the container. ### Request Example ```javascript // Create a container with nested glass buttons const navContainer = new Container({ type: 'pill', borderRadius: 24, tintOpacity: 0.2 }) // Create buttons to add as children const homeButton = new Button({ text: 'Home', size: 20, type: 'pill', onClick: () => console.log('Navigate home') }) const settingsButton = new Button({ text: 'Settings', size: 20, type: 'pill', onClick: () => console.log('Open settings') }) // Add buttons to container - nested glass is set up automatically navContainer.addChild(homeButton) // Returns the child element navContainer.addChild(settingsButton) // Append container (with all children) to DOM document.body.appendChild(navContainer.element) ``` ### Response #### Success Response (200) - **childElement** (object) - The added child element. ``` -------------------------------- ### Button Class API Source: https://github.com/dashersw/liquid-glass-js/blob/main/README.md Reference for the Button class, which extends Container and adds button-specific functionality like text and click handlers. ```APIDOC ## Button Class Extends `Container` with button-specific functionality. ### Constructor Options | Option | Type | Default | Description | | ------------- | ---------- | ----------- | ------------------------------------------------ | | `text` | `string` | `'Button'` | Button text content | | `size` | `number` | `48` | Font size in pixels | | `type` | `string` | `'rounded'` | Shape type: `'rounded'`, `'circle'`, or `'pill'` | | `onClick` | `function` | `null` | Click event handler | | `warp` | `boolean` | `false` | Enable center distortion effect | | `tintOpacity` | `number` | `0.2` | Tint overlay opacity (0-1) | ### Example ```javascript const button = new Button({ text: 'Save Changes', size: 28, type: 'pill', tintOpacity: 0.4, warp: true, onClick: text => { console.log(`${text} was clicked!`) } }) ``` ``` -------------------------------- ### Create Rounded Rectangle Button Source: https://github.com/dashersw/liquid-glass-js/blob/main/README.md Instantiate a Button with a 'rounded' type and specify a custom border radius. ```javascript const rounded = new Button({ type: 'rounded', borderRadius: 16 // Custom radius }) ``` -------------------------------- ### Define Button Shapes Source: https://context7.com/dashersw/liquid-glass-js/llms.txt Configure button geometry using rounded, circle, or pill types. ```javascript // Rounded Rectangle - Classic iOS-style with customizable corners const roundedButton = new Button({ text: 'Rounded', size: 24, type: 'rounded' // Border radius defaults to fontSize }) // Perfect Circle - Square dimensions, ideal for icons const circleButton = new Button({ text: '✓', size: 32, type: 'circle' // Automatically enforces square dimensions (2.5x fontSize) // Border radius = 50% for perfect circle }) // Pill/Capsule - Elongated with semicircular ends const pillButton = new Button({ text: 'Elongated Button Text', size: 24, type: 'pill' // Border radius automatically set to half height // Width auto-sizes based on text content }) ``` -------------------------------- ### Update Container Size Source: https://context7.com/dashersw/liquid-glass-js/llms.txt Manually triggers a recalculation of the container's dimensions and WebGL viewport after external CSS changes. ```javascript const container = new Container({ type: 'rounded', borderRadius: 16 }) document.body.appendChild(container.element) // After external CSS changes that affect container size container.element.style.padding = '20px' container.updateSizeFromDOM() // Updates canvas, WebGL viewport, and child textures ``` -------------------------------- ### Container.removeChild() Source: https://context7.com/dashersw/liquid-glass-js/llms.txt Removes a child element from the container and updates the container's sizing. ```APIDOC ## Container.removeChild() ### Description Removes a child element from the container and updates the container's sizing. The removed child's parent reference is cleared, and its DOM element is removed from the container. ### Method `container.removeChild(childElement)` ### Parameters #### Path Parameters - **childElement** (object) - Required - The child element to remove from the container. ### Request Example ```javascript const container = new Container({ type: 'pill' }) const button = new Button({ text: 'Remove Me', size: 24 }) container.addChild(button) document.body.appendChild(container.element) // Later, remove the button container.removeChild(button) // button.parent is now null // button.element is removed from container.element ``` ### Response N/A (This method modifies the container state) ``` -------------------------------- ### Remove Child Elements Source: https://context7.com/dashersw/liquid-glass-js/llms.txt Removes a child element from a container, clearing its parent reference and updating the DOM. ```javascript const container = new Container({ type: 'pill' }) const button = new Button({ text: 'Remove Me', size: 24 }) container.addChild(button) document.body.appendChild(container.element) // Later, remove the button container.removeChild(button) // button.parent is now null // button.element is removed from container.element ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.