Loading component…
Components /Liquid Metal
Metallic fluid shader effect
Run the following command
npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/liquid-metal.json| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The button text/content. |
| icon | React.ReactNode | - | Optional icon displayed on the left side of the button. |
| size | 'sm' | 'md' | 'lg' | 'md' | Size variant of the button. |
| borderWidth | number | 4 | Width of the liquid metal border in pixels. |
| metalConfig | LiquidMetalProps | - | Configuration object for the liquid metal shader effect. |
| className | string | - | Additional CSS classes for the button container. |
| disabled | boolean | false | Whether the button is disabled. |
| Prop Name | Type | Default | Description |
|---|---|---|---|
| colorBack | string | '#888888' | Base background color of the liquid metal effect. |
| colorTint | string | '#ffffff' | Tint/highlight color for the chrome reflections. |
| speed | number | 0.4 | Animation speed of the fluid movement (0.1 - 2.0 recommended). |
| repetition | number | 4 | Pattern complexity (1 - 10). |
| distortion | number | 0.15 | Wave distortion amount (0 - 1). |
| scale | number | 1 | Scale of the effect texture. |