DOCSEARCHbyAlgolia
Submit Docs

Liquid Glass JS

repository·main·Indexed 20 days ago

https://github.com/dashersw/liquid-glass-js

A WebGL-powered library for creating Apple-inspired glass effects in web interfaces. It features real-time refraction, blur, and a nested glass system using the Container and Button classes to sample parent container output.

Tokens
2.2K
Snippets
7
Records
8
Agent score
19%

What's inside liquid-glass-js

  1. Quick Start with Liquid Glass JS

    main

    To use Liquid Glass JS, include the required CSS files, the html2canvas library (used for page sampling), and the library's core scripts (container.js and button.js).

    Basic Button Usage

    Create a glass button using the Button class and append its .element property to the DOM.

    Nested Glass Usage

    You can create a Container and add Button instances (or other containers) as children using .addChild(). This enables the nested glass system where child elements sample the parent container's output.

    <!DOCTYPE html>
<html
  <head>
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="glass.css" />
  </head>
  <body
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
    <script src="container.js"></script>
    <script src="button.js"></script>

    <script>
      // Create a glass button
      const button = new Button({
        text: 'Click Me!',
        size: 32,
        type: 'rounded',
        onClick: () => alert('Hello Glass!')
      })

      document.body.appendChild(button.element)
    </script>
  </body>
</html>

  2. Update glass parameters globally

    main

    You can implement custom controls by setting a global window.glassControls object and iterating through Container.instances to update the WebGL uniforms for every active instance.

    // 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()
    }
  })
}

  3. Use Container methods

    main

    The Container class provides methods to manage its children and internal state:

    • addChild(childElement): Adds a child element, enabling the nested glass sampling effect.
    • removeChild(childElement): Removes a child element.
    • updateSizeFromDOM(): Forces the container to update its dimensions based on the current DOM state.

  4. Configure the Container class

    main

    The Container class is the base component for creating glass surfaces. It can host child elements to create a nested glass effect.

    Constructor Options

    OptionTypeDefaultDescription
    borderRadiusnumber48Corner radius in pixels
    typestring'rounded'Shape type: 'rounded', 'circle', or 'pill'
    tintOpacitynumber0.2Tint overlay opacity (0-1)
    const container = new Container({
  borderRadius: 24,
  type: 'pill',
  tintOpacity: 0.3
})

  5. Use the Button class

    main

    The Button class extends Container and adds text content and click functionality.

    Constructor Options

    OptionTypeDefaultDescription
    textstring'Button'Button text content
    sizenumber48Font size in pixels
    typestring'rounded'Shape type: 'rounded', 'circle', or 'pill'
    onClickfunctionnullClick event handler
    warpbooleanfalseEnable center distortion effect
    tintOpacitynumber0.2Tint overlay opacity (0-1)
    const button = new Button({
  text: 'Save Changes',
  size: 28,
  type: 'pill',
  tintOpacity: 0.4,
  warp: true,
  onClick: text => {
    console.log(`${text} was clicked!`)
  }
})

  6. Reference: Glass Effect Parameters

    main

    These parameters control the fine-grained WebGL rendering of the glass effects. They can be used to adjust refraction, lighting, and blur properties.

    | Parameter          | Range    | Description                                       |
| ------------------ | -------- | ------------------------------------------------- |
| Edge Intensity      | 0-0.1    | Refraction strength at shape edges                |
| Rim Intensity      | 0-0.2    | Intensity of rim lighting effects                |
| Base Intensity     | 0-0.05   | Center distortion strength                        |
| Edge Distance      | 0.05-0.5 | Falloff curve for edge effects                    |
| Rim Distance       | 0.1-2.0  | Falloff curve for rim effects                     |
| Base Distance      | 0.05-0.3 | Falloff curve for base effects                    |
| Corner Boost       | 0-0.1    | Additional corner enhancement                    |
| Ripple Effect      | 0-0.5    | Surface texture simulation                        |
| Blur Radius        | 1-15     | Background blur amount                            |
| Tint Opacity       | 0-1.0    | Gradient overlay strength                         |

  7. Reference: Shape Types

    main

    The library supports three distinct shape types via the type option in Container or Button constructors.

    // Rounded Rectangle
const rounded = new Button({
  type: 'rounded',
  borderRadius: 16
})

// Perfect Circle
const circle = new Button({
  type: 'circle',
  size: 32
})

// Pill/Capsule
const pill = new Button({
  type: 'pill',
  text: 'Elongated Button'
})

  8. Reference: CSS Classes

    main

    The library provides semantic CSS classes for styling glass components.

    /* Glass containers */
.glass-container {
  /* Base container styles */
}
.glass-container-circle {
  /* Circle-specific styles */
}
.glass-container-pill {
  /* Pill-specific styles */
}

/* Glass buttons */
.glass-button {
  /* Base button styles */
}
.glass-button-circle {
  /* Circle button styles */
}
.glass-button-text {
  /* Button text overlay */
}