@specy/liquid-glass/dist/index.d.ts

A Three.js powered library to make apple's liquid with glass effect

import { ExtrudeGeometry } from 'three';
import { Options } from 'html2canvas-pro';

interface GlassStyle {
    depth?: number;
    segments?: number;
    radius?: number;
    tint?: number | null;
    roughness?: number;
    transmission?: number;
    reflectivity?: number;
    ior?: number;
    dispersion?: number;
    thickness?: number;
}
declare class LiquidGlass {
    private readonly targetElement;
    private readonly floatingDiv;
    private readonly contentElement;
    private readonly resizeObserver;
    private customStyle;
    private glassStyle;
    private readonly paintCache;
    private firstScrollableElement;
    private paintCacheCallback;
    private threeCanvas;
    private renderer;
    private scene;
    private camera;
    private glassMesh;
    private backgroundMesh;
    private backgroundTexture;
    private animationId;
    private isInitialized;
    private dimensions;
    constructor(targetElement: HTMLElement, customStyle?: string, glassStyle?: GlassStyle);
    get element(): HTMLElement;
    get content(): HTMLDivElement;
    private createGlassStyle;
    private createContentElement;
    private createFloatingDiv;
    setStyle(style: string): void;
    private observerDebounceTimeout;
    private createResizeObserver;
    private handleResize;
    private getCurrentDimensions;
    private updateRendererSize;
    private updateCameraProjection;
    private updateGlassGeometry;
    private createPillGeometry;
    private initialize;
    private registerWithPaintCache;
    private startAnimation;
    private initializeThreeJS;
    private createThreeCanvas;
    private setupRenderer;
    private setupCamera;
    private setupScene;
    private createGlassMesh;
    private createGlassMaterial;
    private getTargetSize;
    private getScrollbarSizes;
    private updateBackgroundTexture;
    private disposeBackgroundTexture;
    private createBackgroundMesh;
    private updateExistingBackgroundMesh;
    private updateBackgroundPosition;
    updateScreenshot(): Promise<void>;
    forceUpdate(): Promise<void>;
    forcePositionUpdate(): Promise<void>;
    forceSizeUpdate(): Promise<void>;
    setSize(width: number, height: number): void;
    updateGlassStyle(newGlassStyle: Partial<GlassStyle>): void;
    getGlassStyle(): Required<GlassStyle>;
    private updateGlassMaterial;
    private updateGlassGeometryIfNeeded;
    destroy(): void;
    private stopAnimation;
    private cleanupThreeJS;
    private disposeRenderer;
    private disposeTextures;
    private disposeMeshes;
    private disposeMesh;
    private clearThreeJSReferences;
    private removeDOMElements;
    private unregisterFromPaintCache;
    private findFirstScrollableElement;
    private addEventListeners;
    private handleScroll;
    private handleWindowResize;
    private removeEventListeners;
}

declare class PillGeometry extends ExtrudeGeometry {
    /**
     * Creates an instance of PillGeometry.
     * @param {number} [width=1] - The width of the box.
     * @param {number} [height=1] - The height of the box.
     * @param {number} [depth=1] - The total depth (thickness) of the box.
     * @param {number} [segments=16] - The number of segments used to create the rounded edges.
     * @param {number} [radius=0.1] - The radius of the corners and edges.
     */
    constructor(width?: number, height?: number, depth?: number, segments?: number, radius?: number);
    /**
     * Helper method to add a smooth rounded corner to a shape
     * @param shape - The Three.js Shape to add the corner to
     * @param centerX - X coordinate of the corner's center
     * @param centerY - Y coordinate of the corner's center
     * @param radius - Radius of the corner
     * @param startAngle - Starting angle in radians
     * @param endAngle - Ending angle in radians
     * @param segments - Number of segments to subdivide the arc
     */
    private static addRoundedCorner;
}

declare class PaintLayerCache {
    private static instance;
    private static screenshotCache;
    private static html2canvas;
    private constructor();
    static getInstance(): PaintLayerCache;
    static useHtml2CanvasPro(val: boolean): void;
    register(targetElement: HTMLElement, callback: (canvas: HTMLCanvasElement) => void, screenshotOptions?: Partial<Options>, ignoreElementCallback?: (element: Node) => boolean): Promise<void>;
    unregister(targetElement: HTMLElement, callback: (canvas: HTMLCanvasElement) => void): void;
    forceUpdate(targetElement: HTMLElement, screenshotOptions?: Partial<Options>): Promise<void>;
    private setupMutationObserver;
    private shouldIgnoreMutation;
    private isIgnoredElementByCallback;
    private debouncedUpdate;
    private updateScreenshot;
    private performScreenshotUpdate;
    private takeElementScreenshot;
}
declare function takeElementScreenshot(element: HTMLElement, options?: Partial<Options>): Promise<HTMLCanvasElement>;

export { type GlassStyle, LiquidGlass, PaintLayerCache, PillGeometry, takeElementScreenshot };