Gooey

Add liquid motion to menus, sliders and draggable items. Try morph, move, melt and bend interactions.

See it in action

Choose an example to try, then make it your own below.

All examples

Make it yours

Preparing preview…

0px

Desktop · 0pxClick, drag or use the keyboard.

Quick settings

MorphMoveBendMelt

Blur

Contrast

Fill

Waviness

React code

import { Liquid } from '@/components/livenui/gooey'

<Liquid
  blur={6}
  contrast={18}
  fill={"color-mix(in srgb, var(--surface, Canvas) 92%, var(--foreground, CanvasText))"}
>
  <Liquid.Item {...{"effect":"morph"}}>
    <button type="button">Your content</button>
  </Liquid.Item>
</Liquid>

See it in action

Morph shapes

Move shapes

Bend shapes

Make it yours

React code