https://github.com/huozhi/vaso
Liquid Glass effect for React
https://github.com/huozhi/vaso
glass liquid-glass liquid-glass-effect react
Last synced: 12 months ago
JSON representation
Liquid Glass effect for React
- Host: GitHub
- URL: https://github.com/huozhi/vaso
- Owner: huozhi
- Created: 2025-06-28T10:36:26.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-19T23:23:08.000Z (12 months ago)
- Last Synced: 2025-07-19T23:53:25.267Z (12 months ago)
- Topics: glass, liquid-glass, liquid-glass-effect, react
- Language: TypeScript
- Homepage: https://vaso-react.vercel.app
- Size: 255 KB
- Stars: 26
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vaso
A beautiful liquid glass distortion effect component for React that creates stunning visual magnification and warping effects.
Vaso is the React version of [shuding](https://github.com/shuding)'s [Liquid Glass](https://github.com/shuding/liquid-glass) implementation.
## Installation
```bash
npm add vaso
```
## Quick Start
```tsx
import { Vaso } from 'vaso'
function App() {
return (
Some content here
This text will be distorted by the glass effect
)
}
```
## API Reference
### Props
| Prop | Type | Default | Range | Description |
|------|------|---------|-------|-------------|
| `children` | `React.ReactNode` | **required** | - | The content to render inside the glass (typically a transparent div for sizing) |
| `width` | `number` | `undefined` | - | Explicit width of the glass element (overrides child element size) |
| `height` | `number` | `undefined` | - | Explicit height of the glass element (overrides child element size) |
| `px` | `number` | `0` | `0-100` | Horizontal padding around the glass effect |
| `py` | `number` | `0` | `0-100` | Vertical padding around the glass effect |
| `radius` | `number` | `0` | `0-∞` | Border radius of the glass container |
| `depth` | `number` | `0.4` | `-2.0 to 2.0` | Distortion scale intensity (negative values create compression) |
| `draggable` | `boolean` | `false` | - | Whether the glass can be dragged around |
### Negative Values Support
Vaso supports negative values for several parameters to create inverted effects:
- **`depth`** (`-2.0 to 2.0`): Negative values create compression instead of magnification
## Examples
### Basic Glass Effect
```tsx
```
### Glass with Explicit Dimensions
```tsx
```
### Draggable Glass with Callbacks
```tsx
function DraggableGlass() {
const [position, setPosition] = useState({ x: 100, y: 100 })
return (
)
}
```
### High Distortion Effect
```tsx
```
## License
MIT