### Install @specy/liquid-glass Source: https://github.com/specy/liquid-glass/blob/main/packages/liquid-glass/README.md Installs the @specy/liquid-glass package using npm. This is the first step to use the library in your project. ```bash npm install @specy/liquid-glass ``` -------------------------------- ### Install @specy/liquid-glass-react Source: https://github.com/specy/liquid-glass/blob/main/README.md Installs the @specy/liquid-glass-react package using npm. This is the first step to using the component in your React project. ```bash npm install @specy/liquid-glass-react ``` -------------------------------- ### Local Package Build Commands Source: https://github.com/specy/liquid-glass/blob/main/packages/liquid-glass/README.md Provides commands for building the package locally. 'npm install' installs dependencies, 'npm run build' compiles the project, and 'npm run build:watch' watches for changes during development and recompiles automatically. ```bash npm install npm run build npm run build:watch ``` -------------------------------- ### Expand ESLint for Type-Checked Rules in TypeScript Source: https://github.com/specy/liquid-glass/blob/main/packages/liquid-glass-react-demo/README.md This configuration snippet shows how to extend the ESLint setup to include type-aware linting rules for TypeScript projects. It replaces the default recommended rules with stricter, type-checked alternatives and configures the parser options to point to the correct TypeScript configuration files. ```javascript export default tseslint.config({ extends: [ // Remove ...tseslint.configs.recommended and replace with this ...tseslint.configs.recommendedTypeChecked, // Alternatively, use this for stricter rules ...tseslint.configs.strictTypeChecked, // Optionally, add this for stylistic rules ...tseslint.configs.stylisticTypeChecked, ], languageOptions: { // other options... parserOptions: { project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, }, }) ``` -------------------------------- ### Integrate React-Specific ESLint Rules with TypeScript Source: https://github.com/specy/liquid-glass/blob/main/packages/liquid-glass-react-demo/README.md This JavaScript code demonstrates how to integrate `eslint-plugin-react-x` and `eslint-plugin-react-dom` into an ESLint configuration. It adds these plugins and enables their recommended TypeScript and DOM-specific rules for improved React code quality. ```javascript // eslint.config.js import reactX from 'eslint-plugin-react-x' import reactDom from 'eslint-plugin-react-dom' export default tseslint.config({ plugins: { // Add the react-x and react-dom plugins 'react-x': reactX, 'react-dom': reactDom, }, rules: { // other rules... // Enable its recommended typescript rules ...reactX.configs['recommended-typescript'].rules, ...reactDom.configs.recommended.rules, }, }) ``` -------------------------------- ### Advanced LiquidGlass Usage with Ref in React Source: https://github.com/specy/liquid-glass/blob/main/packages/liquid-glass-react/README.md Illustrates advanced usage of the LiquidGlass component in React, utilizing a ref to interact with the component's instance. This example shows how to update the screenshot and randomize the glass style dynamically. ```tsx import React, { useRef, useMemo, useCallback } from "react" import { LiquidGlass, type LiquidGlassRef } from "@specy/liquid-glass-react" function AdvancedExample() { const glassRef = useRef(null) // ⚠️ IMPORTANT: Memoize all objects and callbacks const glassStyle = useMemo( () => ({ depth: 0.8, segments: 64, radius: 0.3, transmission: 0.95, roughness: 0.05, }), [] ) onReady = useCallback((instance) => { console.log("LiquidGlass instance ready:", instance) }, []) handleUpdateScreenshot = useCallback(async () => { await glassRef.current?.updateScreenshot() }, []) handleUpdateStyle = useCallback(() => { glassRef.current?.updateGlassStyle({ depth: Math.random(), transmission: 0.8 + Math.random() * 0.2, }) }, []) return (

Interactive Glass Effect
) } ``` -------------------------------- ### Error Handling and Lifecycle Management for Liquid Glass Source: https://context7.com/specy/liquid-glass/llms.txt Illustrates best practices for error handling during LiquidGlass initialization and proper lifecycle management, including cleanup. It covers try-catch blocks for initialization, appending the element, updating screenshots, adding content, and ensuring the glass instance is destroyed on page unload or component unmount. ```typescript import { LiquidGlass } from '@specy/liquid-glass'; async function createGlassWithErrorHandling() { let glass: LiquidGlass | null = null; try { glass = new LiquidGlass( document.body, 'position: fixed; bottom: 20px; left: 20px;', { depth: 24, radius: 16 } ); document.body.appendChild(glass.element); // Wait for initial screenshot await glass.updateScreenshot(); // Add content safely const content = document.createElement('div'); content.textContent = 'Ready!'; glass.content.appendChild(content); return glass; } catch (error) { console.error('Failed to initialize glass:', error); glass?.destroy(); return null; } } // Cleanup on page unload window.addEventListener('beforeunload', () => { if (glass) { glass.destroy(); glass = null; } }); // React cleanup pattern useEffect(() => { const glass = new LiquidGlass(/* ... */); return () => glass.destroy(); }, []); ``` -------------------------------- ### Advanced LiquidGlass Usage with Ref and Callbacks Source: https://github.com/specy/liquid-glass/blob/main/README.md Illustrates advanced usage of the LiquidGlass component, including managing the component instance via `useRef` and utilizing callbacks for events like `onReady`. It shows how to update screenshot and glass styles dynamically using ref methods. All objects and callbacks are memoized for performance. ```tsx import React, { useRef, useMemo, useCallback } from 'react'; import { LiquidGlass, type LiquidGlassRef } from '@specy/liquid-glass-react'; function AdvancedExample() { const glassRef = useRef(null); // ⚠️ IMPORTANT: Memoize all objects and callbacks const glassStyle = useMemo(() => ({ depth: 0.8, segments: 64, radius: 0.3, transmission: 0.95, roughness: 0.05 }), []); const onReady = useCallback((instance) => { console.log('LiquidGlass instance ready:', instance); }, []); const handleUpdateScreenshot = useCallback(async () => { await glassRef.current?.updateScreenshot(); }, []); const handleUpdateStyle = useCallback(() => { glassRef.current?.updateGlassStyle({ depth: Math.random(), transmission: 0.8 + Math.random() * 0.2 }); }, []); return (

Interactive Glass Effect
); } ``` -------------------------------- ### Basic Usage of LiquidGlass Component Source: https://github.com/specy/liquid-glass/blob/main/README.md Demonstrates the basic integration of the LiquidGlass component in a React application. It highlights the importance of memoizing the `glassStyle` object to optimize performance by preventing unnecessary re-renders. ```tsx import React, { useMemo } from 'react'; import { LiquidGlass } from '@specy/liquid-glass-react'; function App() { // ⚠️ IMPORTANT: Memoize the glassStyle object to prevent unnecessary re-renders const glassStyle = useMemo(() => ({ depth: 0.5, segments: 32, radius: 0.2, roughness: 0.1, transmission: 1, reflectivity: 0.5, ior: 1.5, dispersion: 0.1, thickness: 0.5 }), []); return (

Hello World!

This content is rendered inside the liquid glass effect.

 ); } ``` -------------------------------- ### LiquidGlass Constructor and Options in TypeScript Source: https://github.com/specy/liquid-glass/blob/main/packages/liquid-glass/README.md Details the constructor signature and options for the LiquidGlass class. It highlights the parameters for the target element, screenshot options, custom CSS styles, and glass style properties like radius, roughness, transmission, IOR, and thickness. ```typescript new LiquidGlass( targetElement: HTMLElement, screenshotOptions?: Partial, customStyle?: string, glassStyle?: GlassStyle ) interface GlassStyle { depth?: number; // Geometry depth (default: 32) segments?: number; // Geometry segments (default: 32) radius?: number; // Border radius (default: 16) tint?: number | null; // Glass tint color (default: null) roughness?: number; // Surface roughness 0-1 (default: 0.3) transmission?: number; // Light transmission 0-1 (default: 1) ior?: number; // Index of refraction (default: 2) thickness?: number; // Glass thickness (default: 64) } ``` -------------------------------- ### LiquidGlass Class API Source: https://github.com/specy/liquid-glass/blob/main/packages/liquid-glass/README.md Documentation for the main LiquidGlass class used to create glass effects on web elements. ```APIDOC ## LiquidGlass ### Description The main class for creating glass effects. ### Constructor ```typescript new LiquidGlass( targetElement: HTMLElement, screenshotOptions?: Partial, customStyle?: string, glassStyle?: GlassStyle ) ``` **Parameters:** - `targetElement` (HTMLElement) - Required - The HTML element to capture for the background effect - `screenshotOptions` (Partial) - Optional - Options for html2canvas screenshot capture - `customStyle` (string) - Optional - Custom CSS styles for the glass container - `glassStyle` (GlassStyle) - Optional - Glass material properties ### Glass Style Options ```typescript interface GlassStyle { depth?: number; // Geometry depth (default: 32) segments?: number; // Geometry segments (default: 32) radius?: number; // Border radius (default: 16) tint?: number | null; // Glass tint color (default: null) roughness?: number; // Surface roughness 0-1 (default: 0.3) transmission?: number; // Light transmission 0-1 (default: 1) ior?: number; // Index of refraction (default: 2) thickness?: number; // Glass thickness (default: 64) } ``` ### Properties - `element` (HTMLElement) - The main glass container element - `content` (HTMLElement) - The content container element for adding child elements ### Methods - `destroy()`: Clean up and remove the glass effect ``` -------------------------------- ### Create Liquid Glass Effect with Vanilla JavaScript Source: https://context7.com/specy/liquid-glass/llms.txt Instantiates the LiquidGlass core class to create an Apple-style liquid glass effect. It takes a target element, CSS styles, and an options object for optical properties. The glass element is appended to the DOM, content can be added, styles updated dynamically, screenshots refreshed, and the instance can be destroyed. ```typescript import { LiquidGlass } from '@specy/liquid-glass'; // Create glass effect overlay on document body const glassEffect = new LiquidGlass( document.body, // Target element to capture 'position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); padding: 1rem 2rem;', { depth: 24, // Glass depth in pixels segments: 86, // Geometry smoothness (higher = smoother) radius: 16, // Corner radius in pixels tint: 0x4488ff, // Optional color tint (hex) roughness: 0.3, // Surface roughness (0-1) transmission: 1, // Light transmission (0-1, 1 = fully transparent) reflectivity: 0.9, // Surface reflectivity (0-1) ior: 2, // Index of refraction (glass = 1.5, diamond = 2.4) dispersion: 10, // Chromatic aberration strength thickness: 32 // Physical thickness for light absorption } ); // Mount to DOM document.body.appendChild(glassEffect.element); // Add content const content = document.createElement('div'); content.innerHTML = '

Glass UI

Floating above the page

'; glassEffect.content.appendChild(content); // Update glass properties dynamically glassEffect.updateGlassStyle({ roughness: 0.1, transmission: 0.95, ior: 1.8 }); // Force background refresh await glassEffect.updateScreenshot(); // Cleanup when done glassEffect.destroy(); ``` -------------------------------- ### Basic LiquidGlass Usage in React Source: https://github.com/specy/liquid-glass/blob/main/packages/liquid-glass-react/README.md Demonstrates the basic implementation of the LiquidGlass component in a React application. It emphasizes memoizing the glassStyle object to prevent unnecessary re-renders and shows how to pass child elements for the glass effect. ```tsx import React, { useMemo } from 'react'; import { LiquidGlass } from '@specy/liquid-glass-react'; function App() { // ⚠️ IMPORTANT: Memoize the glassStyle object to prevent unnecessary re-renders const glassStyle = useMemo(() => ({ depth: 0.5, segments: 32, radius: 0.2, roughness: 0.1, transmission: 1, reflectivity: 0.5, ior: 1.5, dispersion: 0.1, thickness: 0.5 }), []); return (

Hello World!

This content is rendered inside the liquid glass effect.

 ); } ``` -------------------------------- ### Dynamic Style Updates for Liquid Glass Source: https://context7.com/specy/liquid-glass/llms.txt Demonstrates how to dynamically update the style properties of a LiquidGlass instance at runtime without re-initializing it. This includes animating properties like roughness and transitioning between states like frosted and clear. It also shows how to retrieve the current glass style. ```typescript import { LiquidGlass } from '@specy/liquid-glass'; const glass = new LiquidGlass(document.body, '', { depth: 24, radius: 16, roughness: 0.3, transmission: 1, ior: 2 }); // Animate roughness let roughness = 0; setInterval(() => { roughness = Math.sin(Date.now() / 1000) * 0.5 + 0.5; glass.updateGlassStyle({ roughness }); }, 16); // Transition between frosted and clear async function transitionToClear() { glass.updateGlassStyle({ roughness: 0.05, transmission: 0.98, thickness: 16 }); } // Get current state const currentStyle = glass.getGlassStyle(); console.log('Current IOR:', currentStyle.ior); ``` -------------------------------- ### takeElementScreenshot Utility Source: https://github.com/specy/liquid-glass/blob/main/packages/liquid-glass/README.md Utility function for taking screenshots of DOM elements. ```APIDOC ## takeElementScreenshot ### Description Utility function for taking screenshots of DOM elements. ### Usage ```typescript await takeElementScreenshot(element, { allowTaint: true, useCORS: true, scale: 1 }) ``` **Parameters:** - `element` (HTMLElement) - The DOM element to capture. - `options` (object) - Optional configuration for the screenshot capture (e.g., `allowTaint`, `useCORS`, `scale`). **Returns:** - `Promise` - A promise that resolves with the canvas element containing the screenshot. ``` -------------------------------- ### LiquidGlassRef Interface for Ref Methods Source: https://github.com/specy/liquid-glass/blob/main/README.md Details the methods available through the LiquidGlass component's ref. These methods allow for programmatic control over the glass effect, such as updating screenshots, forcing updates, and modifying glass styles dynamically. ```tsx interface LiquidGlassRef { getInstance(): any | null; // Replace 'any' with actual LiquidGlass type if available updateScreenshot(): Promise; forceUpdate(): Promise; updateGlassStyle(style: Partial): void; getGlassStyle(): Required | null; getElement(): HTMLElement | null; getContent(): HTMLDivElement | null; } ``` -------------------------------- ### Performance Optimization for Liquid Glass with React Source: https://context7.com/specy/liquid-glass/llms.txt Provides patterns for optimizing Liquid Glass rendering performance within a React application. It demonstrates using `useMemo` for configuration, `useCallback` with debounce for updates, and recommends using an optimized `html2canvas` implementation. It also highlights avoiding inline style objects to prevent unnecessary re-renders. ```tsx import { useMemo, useCallback } from 'react'; import { LiquidGlass, PaintLayerCache } from '@specy/liquid-glass-react'; // Use open-source html2canvas for better performance PaintLayerCache.useHtml2CanvasPro(false); function OptimizedGlass() { // Memoize configuration to prevent re-initialization const glassStyle = useMemo(() => ({ depth: 0.3, segments: 32, // Lower segments for better performance radius: 0.15, roughness: 0.2, transmission: 1, ior: 1.5, dispersion: 5, // Lower dispersion reduces GPU load thickness: 16 // Lower thickness improves performance }), []); // Debounce manual updates const debouncedUpdate = useCallback( debounce(async (ref) => { await ref.current?.updateScreenshot(); }, 100), [] ); return (
Optimized glass panel
 ); } ``` -------------------------------- ### Basic Liquid Glass Effect in TypeScript Source: https://github.com/specy/liquid-glass/blob/main/packages/liquid-glass/README.md Demonstrates how to create and append a liquid glass effect to the document body using the LiquidGlass class. It takes a target element, screenshot options, custom CSS, and glass style options as parameters. Content can be added to the glass effect's content container. ```typescript import { LiquidGlass } from '@specy/liquid-glass'; // Create a glass effect on an element const glassEffect = new LiquidGlass( document.body, // Target element { // html2canvas options for screenshot allowTaint: true, useCORS: true, scale: 1, }, ` /* Custom CSS for the glass container */ position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); padding: 1rem 2rem; border-radius: 16px; `, { // Glass style options radius: 16, roughness: 0.2, transmission: 1, ior: 1.5, thickness: 32, } ); // Add the glass effect to the DOM document.body.appendChild(glassEffect.element); // Add content to the glass container const content = document.createElement('div'); content.innerHTML = '

Hello, Glass World!

'; glassEffect.content.appendChild(content); ``` -------------------------------- ### takeElementScreenshot Utility in TypeScript Source: https://github.com/specy/liquid-glass/blob/main/packages/liquid-glass/README.md Demonstrates the usage of the takeElementScreenshot utility function, which captures a screenshot of a given DOM element. It returns a canvas element and accepts screenshot options such as allowTaint and useCORS. ```typescript import { takeElementScreenshot } from '@specy/liquid-glass'; const canvas = await takeElementScreenshot(element, { allowTaint: true, useCORS: true, scale: 1 }); ``` -------------------------------- ### LiquidGlassRef Interface Definition Source: https://github.com/specy/liquid-glass/blob/main/packages/liquid-glass-react/README.md Defines the interface for the Liquid Glass component's ref, outlining available methods for interacting with the component. This includes methods for retrieving the instance, updating screenshots and styles, forcing updates, and accessing DOM elements. ```typescript interface LiquidGlassRef { getInstance(): LiquidGlass | null updateScreenshot(): Promise forceUpdate(): Promise updateGlassStyle(style: Partial): void getGlassStyle(): Required | null getElement(): HTMLElement | null getContent(): HTMLDivElement | null forcePositionUpdate(): void forceSizeUpdate(): void } ``` -------------------------------- ### Implement Liquid Glass Effect with React Component Source: https://context7.com/specy/liquid-glass/llms.txt Utilizes the LiquidGlass React wrapper component for declarative API and hooks integration. It accepts a ref for imperative control, a `glassStyle` object (memoized for performance), and callbacks like `onReady`. The component allows for dynamic style updates and background refreshes via the ref. ```tsx import React, { useRef, useMemo, useCallback } from 'react'; import { LiquidGlass, type LiquidGlassRef } from '@specy/liquid-glass-react'; function GlassPanel() { const glassRef = useRef(null); // IMPORTANT: Always memoize glassStyle to prevent re-initialization const glassStyle = useMemo(() => ({ depth: 0.5, segments: 32, radius: 0.2, roughness: 0.1, transmission: 1, reflectivity: 0.5, ior: 1.5, dispersion: 0.1, thickness: 0.5 }), []); const handleReady = useCallback((instance) => { console.log('Glass instance ready:', instance); }, []); const updateStyle = useCallback(() => { glassRef.current?.updateGlassStyle({ depth: Math.random(), transmission: 0.8 + Math.random() * 0.2 }); }, []); const refreshBackground = useCallback(async () => { await glassRef.current?.updateScreenshot(); }, []); return ( <>

Interactive Glass

 ); } export default GlassPanel; ``` -------------------------------- ### GlassStyle Interface Definition Source: https://github.com/specy/liquid-glass/blob/main/packages/liquid-glass-react/README.md Defines the `GlassStyle` interface, outlining the configurable properties for the liquid glass effect. These properties control aspects like depth, segments, radius, roughness, transmission, reflectivity, IOR, dispersion, and thickness. ```typescript interface GlassStyle { depth?: number // Depth of the glass effect (0-1) segments?: number // Number of geometry segments for smoothness radius?: number // Border radius (0-1) tint?: number | null // Color tint (hex number or null) roughness?: number // Surface roughness (0-1) transmission?: number // Light transmission (0-1) reflectivity?: number // Surface reflectivity (0-1) ior?: number // Index of refraction dispersion?: number // Chromatic dispersion effect thickness?: number // Glass thickness } ``` -------------------------------- ### React LiquidGlass Component with Ref Methods Source: https://context7.com/specy/liquid-glass/llms.txt Integrates Liquid Glass functionality into React applications using a ref. This allows imperative control over the component, enabling access to the core instance, DOM elements, style updates, and manual refresh operations. ```tsx import { useRef, useEffect } from 'react'; import { LiquidGlass, type LiquidGlassRef } from '@specy/liquid-glass-react'; function AdvancedGlass() { const glassRef = useRef(null); useEffect(() => { const ref = glassRef.current; if (!ref) return; // Get core instance const instance = ref.getInstance(); console.log('Core instance:', instance); // Get DOM elements const container = ref.getElement(); const content = ref.getContent(); // Get/set styles const currentStyle = ref.getGlassStyle(); console.log('Current style:', currentStyle); ref.updateGlassStyle({ roughness: 0.5 }); // Force updates ref.forcePositionUpdate(); // Sync position with background ref.forceSizeUpdate(); // Recalculate dimensions // Async operations (async () => { await ref.updateScreenshot(); // Refresh background texture await ref.forceUpdate(); // Full refresh })(); }, []); return Content; } ``` -------------------------------- ### LiquidGlass Component Props Source: https://github.com/specy/liquid-glass/blob/main/README.md Defines the available props for the LiquidGlass component, including their types, default values, and descriptions. This helps developers understand how to customize the component's behavior and appearance. ```tsx interface GlassStyle { depth?: number; // Depth of the glass effect (0-1) segments?: number; // Number of geometry segments for smoothness radius?: number; // Border radius (0-1) tint?: number | null; // Color tint (hex number or null) roughness?: number; // Surface roughness (0-1) transmission?: number; // Light transmission (0-1) reflectivity?: number; // Surface reflectivity (0-1) ior?: number; // Index of refraction dispersion?: number; // Chromatic dispersion effect thickness?: number; // Glass thickness } // Props interface would typically be defined elsewhere but shown here for context interface LiquidGlassProps { style?: string; wrapperStyle?: React.CSSProperties; glassStyle?: GlassStyle; children?: React.ReactNode; onReady?: (instance: any) => void; // Replace 'any' with actual LiquidGlass type if available targetElement?: HTMLElement; } ``` -------------------------------- ### Screenshot Management with PaintLayerCache Source: https://context7.com/specy/liquid-glass/llms.txt Manages DOM-to-canvas screenshot capture using html2canvas. It supports automatic mutation tracking, debouncing, and allows multiple consumers to share a cached screenshot. Options for html2canvas can be passed during registration. ```typescript import { PaintLayerCache } from '@specy/liquid-glass'; const cache = PaintLayerCache.getInstance(); // Switch between html2canvas implementations PaintLayerCache.useHtml2CanvasPro(true); // Use premium version PaintLayerCache.useHtml2CanvasPro(false); // Use open-source version // Register callback for automatic updates const targetElement = document.getElementById('content'); const callback = (canvas: HTMLCanvasElement) => { console.log('Screenshot updated:', canvas.width, canvas.height); // Use canvas for rendering }; await cache.register( targetElement, callback, { allowTaint: true, useCORS: true, scale: 1 } // html2canvas options ); // Multiple consumers share the same cached screenshot await cache.register(targetElement, anotherCallback); // Force manual update (bypasses debounce) await cache.forceUpdate(targetElement); // Cleanup when done cache.unregister(targetElement, callback); ``` -------------------------------- ### Standalone DOM Element Screenshot Utility Source: https://context7.com/specy/liquid-glass/llms.txt A utility function to capture DOM elements as canvas images without the liquid glass effect. It accepts various options for customizing the screenshot process, including CORS, scaling, and timeouts. ```typescript import { takeElementScreenshot } from '@specy/liquid-glass'; const element = document.querySelector('.screenshot-target'); try { const canvas = await takeElementScreenshot(element, { allowTaint: true, useCORS: true, scale: window.devicePixelRatio, // HiDPI support backgroundColor: '#ffffff', logging: false, imageTimeout: 15000 }); // Use canvas document.body.appendChild(canvas); // Or convert to image const dataURL = canvas.toDataURL('image/png'); const img = new Image(); img.src = dataURL; } catch (error) { console.error('Screenshot failed:', error); } ``` -------------------------------- ### React LiquidGlass with Custom Target Element Source: https://context7.com/specy/liquid-glass/llms.txt Configures the React Liquid Glass component to capture a specific DOM element instead of the entire document body. This allows for performance optimization and targeted glass effects, with options for styling the wrapper. ```tsx import { useRef, useEffect, useState } from 'react'; import { LiquidGlass } from '@specy/liquid-glass-react'; function ScopedGlass() { const [targetElement, setTargetElement] = useState(null); useEffect(() => { const element = document.getElementById('content-area'); setTargetElement(element); }, []); if (!targetElement) return null; return (
Glass captures only #content-area element
 ); } ``` -------------------------------- ### PillGeometry Usage in TypeScript Source: https://github.com/specy/liquid-glass/blob/main/packages/liquid-glass/README.md Shows how to create a custom PillGeometry object, which is a Three.js geometry for pill-shaped (rounded rectangle) objects. It takes parameters for width, height, depth, segments, and radius. ```typescript import { PillGeometry } from '@specy/liquid-glass'; const geometry = new PillGeometry(width, height, depth, segments, radius); ``` -------------------------------- ### PillGeometry Source: https://github.com/specy/liquid-glass/blob/main/packages/liquid-glass/README.md Custom Three.js geometry for creating pill-shaped (rounded rectangle) objects. ```APIDOC ## PillGeometry ### Description Custom Three.js geometry for creating pill-shaped (rounded rectangle) objects. ### Constructor ```typescript new PillGeometry(width, height, depth, segments, radius) ``` **Parameters:** - `width` (number) - The width of the pill shape. - `height` (number) - The height of the pill shape. - `depth` (number) - The depth of the pill shape. - `segments` (number) - The number of segments to use for the geometry. - `radius` (number) - The radius of the rounded corners. ``` -------------------------------- ### Create Rounded Rectangle 3D Shape with PillGeometry Source: https://context7.com/specy/liquid-glass/llms.txt A custom Three.js ExtrudeGeometry that creates pill-shaped (rounded rectangle) meshes with beveled edges. This is useful for creating glass panels with specific dimensions and corner radii. ```typescript import { PillGeometry } from '@specy/liquid-glass'; import { Mesh, MeshPhysicalMaterial, Scene } from 'three'; // Create rounded rectangle geometry const geometry = new PillGeometry( 400, // width in pixels 200, // height in pixels 24, // depth/thickness 86, // segments (smoothness of curves) 16 // corner radius ); // Use with Three.js materials const material = new MeshPhysicalMaterial({ roughness: 0.2, transmission: 1, thickness: 32, ior: 1.5 }); const mesh = new Mesh(geometry, material); scene.add(mesh); // Geometry is automatically centered at origin (0, 0, 0) // Cleanupgeometry.dispose(); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.