Skip to main content
An advanced WebGL-based component that applies a dynamic, liquid effect to logos or images using custom shaders.

​
Usage

<script setup lang="ts">
import { LiquidLogo } from '@/components/visualization'
</script>

<template>
  <LiquidLogo
    image-url="/logo.png"
    :pattern-scale="2"
    :refraction="0.015"
    :edge="0.4"
    :liquid="0.07"
    :speed="0.3"
  />
</template>

​
Props

Prop NameTypeDefaultDescription
classstring""Additional CSS classes for custom styling.
imageUrlstring""URL of the image to apply the liquid effect.
patternScalenumber2Scale of the distortion pattern.
refractionnumber0.015Amount of refraction applied to the image.
edgenumber0.4Sharpness of the edge effect.
patternBlurnumber0.005Blur effect applied to the pattern.
liquidnumber0.07Intensity of the liquid animation.
speednumber0.3Animation speed of the liquid effect.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us