quickLiquid

https://quickliquid.vercel.app/docs
Admin
quickLiquid is a glass rendering engine and React component library that provides physical...
Tokens:3,443
Snippets:15
Trust Score:7.8
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### LiquidGlassRef

Source: https://quickliquid.vercel.app/docs

The imperative ref API provides direct access to the underlying engine instance and animation triggers. Use `useRef<LiquidGlassRef>()` to obtain these methods.

```APIDOC
## LiquidGlassRef

### Description
Imperative ref API exposing animation triggers and engine access.

### Members

#### engine
- **Type**: `LiquidGlassEngine | null`
- **Description**: Direct handle to the underlying engine instance.

#### getMetrics()
- **Returns**: `PerformanceMetrics | null`
- **Description**: Frame times, map generation cost, active quality tier.

#### jiggle(intensity?)
- **Parameters**: 
  - `intensity` (number, optional)
- **Returns**: `void`
- **Description**: Playful squash-and-stretch wobble.

#### animateIn(delay?)
- **Parameters**: 
  - `delay` (number, optional)
- **Returns**: `void`
- **Description**: Replay the spring entrance.

#### animateOut()
- **Returns**: `Promise<void>`
- **Description**: Spring exit; resolves when done.

```

--------------------------------

### Water-droplet merging with LiquidGroup and LiquidGesture

Source: https://quickliquid.vercel.app/docs

Creates a LiquidGroup that merges nearby glass blobs into water droplets, with a LiquidGesture for drag physics. Requires a container element and .blob elements in the DOM. The mergeDistance and blendRadius options control the bridging threshold and fillet size.

```typescript
import { LiquidGroup, LiquidGesture } from 'quick-liquid';

const group = new LiquidGroup(container, {
  mergeDistance: 60, // px before blobs bridge
  blendRadius: 32,   // fillet size of the bridge
});

document.querySelectorAll('.blob').forEach(blob => {
  group.add(blob);
  new LiquidGesture(blob).onDrag(() => group.updatePositions());
});
```

--------------------------------

### LiquidGroup.add

Source: https://quickliquid.vercel.app/docs

The `add` method adds an element to the liquid group, allowing it to participate in metaball merging.

```APIDOC
## LiquidGroup.add

### Description
Adds a blob element to the group.

### Method
`add(element)`

### Parameters
- **element**: HTMLElement - The element to add.

### Usage Example
```js
group.add(blob);
```

```

--------------------------------

### LiquidGroup Constructor

Source: https://quickliquid.vercel.app/docs

The LiquidGroup class creates a group of metaballs that merge like water droplets. It can be instantiated with a container element and configuration options.

```APIDOC
## LiquidGroup Constructor

### Description
Creates a metaball group where nearby glass blobs merge like water droplets.

### Constructor
`new LiquidGroup(container, options)`

### Parameters
- **container**: HTMLElement - The container element.
- **options**: object
  - `mergeDistance`: number - Distance in px before blobs bridge.
  - `blendRadius`: number - Fillet size of the bridge.

### Usage Example
```js
import { LiquidGroup } from 'quick-liquid';

const group = new LiquidGroup(container, {
  mergeDistance: 60,
  blendRadius: 32,
});
```

```

--------------------------------

### <LiquidGlass> Props

Source: https://quickliquid.vercel.app/docs

The React wrapper component that adds lifecycle animation on top of the engine. It accepts a config object and several optional props for controlling appearance and behavior.

```APIDOC
## <LiquidGlass> Props

### Description
React wrapper component that adds lifecycle animation on top of the engine.

### Component
<LiquidGlass>

### Props

#### config
- **Type**: `Partial<LiquidGlassConfig>`
- **Required**: false
- **Description**: Engine configuration — every option in the table below.

#### as
- **Type**: `keyof JSX.IntrinsicElements`
- **Required**: false
- **Default**: 'div'
- **Description**: Host element tag.

#### active
- **Type**: `boolean`
- **Required**: false
- **Default**: true
- **Description**: Mount/unmount the engine while keeping the DOM.

#### liquidPress
- **Type**: `boolean | { scale?, squish? }`
- **Required**: false
- **Description**: Scale + bounce press physics on pointer down.

#### animateIn
- **Type**: `boolean | number`
- **Required**: false
- **Description**: Spring scale-in on first mount; a number is the delay in ms.

#### jiggle
- **Type**: `boolean | number`
- **Required**: false
- **Description**: Jiggle on mount; a number sets the intensity.

#### onPerformanceUpdate
- **Type**: `(metrics) => void`
- **Required**: false
- **Description**: Called every second with frame times, map-gen ms and quality tier.

```

--------------------------------

### LiquidGesture onDrag

Source: https://quickliquid.vercel.app/docs

LiquidGesture provides pointer physics for dragging elements. The `onDrag` method allows you to handle drag updates by calling a callback.

```APIDOC
## LiquidGesture.onDrag

### Description
Adds a drag handler to a LiquidGesture instance, enabling pointer physics.

### Method
`onDrag(callback)`

### Parameters
- **callback**: function - Called on drag updates.

### Usage Example
```js
import { LiquidGesture } from 'quick-liquid';

const gesture = new LiquidGesture(blob);
gesture.onDrag(() => group.updatePositions());
```

```

--------------------------------

### LiquidGroup.updatePositions

Source: https://quickliquid.vercel.app/docs

The `updatePositions` method updates the positions of all blobs in the group after drag operations.

```APIDOC
## LiquidGroup.updatePositions

### Description
Updates the positions of all blobs in the group.

### Method
`updatePositions()`

### Parameters
None

### Usage Example
```js
group.updatePositions();
```

```
Tokens:
Raw