liquid-glass-react

To start the development server for the liquid-glass-example project, use one of the following commands depending on your preferred package manager. Once running, you can view the application at http://localhost:3000.

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

To make the glass effect respond to mouse movement over a larger area (like a full-screen background or a large parent container), pass a ref of that container to the mouseContainer prop.

import { useRef } from 'react'
import LiquidGlass from 'liquid-glass-react'

function App() {
  const containerRef = useRef<HTMLDivElement>(null)

  return (
    <div ref={containerRef} className="w-full h-screen bg-image">
      <LiquidGlass
        mouseContainer={containerRef}
        elasticity={0.3}
        style={{ position: 'fixed', top: '50%', left: '50%' }}
      >
        <div className="p-6">
          <h2 className="text-white">Glass responds to mouse anywhere in the container</h2>
        </div>
      </LiquidGlass>
    </div>
  )
}

Install the package using npm to use Apple-style liquid glass effects in your React application.

npm install liquid-glass-react

Wrap any content with the LiquidGlass component to apply the glass effect to its children. By default, the effect responds to mouse movement over the component itself.

import LiquidGlass from 'liquid-glass-react'

function App() {
  return (
    <LiquidGlass>
      <div className="p-6">
        <h2 className="text-xl">Your content here</h2>
        <p>This will have the liquid glass effect</p>
      </div>
    </LiquidGlass>
  )
}

You can customize the visual properties of the glass effect, such as displacement, blur, saturation, and elasticity. This is useful for creating specific UI elements like buttons.

<LiquidGlass
  displacementScale={64}
  blurAmount={0.1}
  saturation={130}
  aberrationIntensity={2}
  elasticity={0.35}
  cornerRadius={100}
  padding="8px 16px"
  onClick={() => console.log('Button clicked!')}
>
  <span className="text-white font-medium">Click Me</span>
</LiquidGlass>

The ShaderDisplacementGenerator class is used to programmatically generate data URLs representing displacement maps. This is useful for creating custom SVG filters or canvas-based refraction effects.

Workflow:

1. Initialize: Pass a ShaderOptions object to the constructor.
2. Update: Call updateShader(mousePosition?) to recalculate the displacement map based on the current state. This returns a dataURL string.
3. Cleanup: Call destroy() to remove the internal canvas from the document.

Methods:

• updateShader(mousePosition?: Vec2): string: Generates and returns a new displacement map as a Data URL.
• getScale(): number: Returns the current canvasDPI.
• destroy(): void: Cleans up the internal canvas element.