Resources

Liquid Hover Interaction in Framer

View demo

Copy component

Remix project

Copy component

Remix project

Resources

Liquid Hover Interaction in Framer

View demo

Copy component

Remix project

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Liquid Hover Interaction in Framer

This liquid hover interaction was recreated in Framer, inspired by the effect on tofudesign.co. It responds with a soft, wobbly motion when hovered—adding a playful, fluid touch to your UI. Feel free to drop it into your project and use it to add a subtle surprise to your site.

image of Nandi Muzsik
image of David
image of Prianca S.

Created by

Nandi

,

,

and

Liquid hover effect preview on playful UI component gallery
Liquid hover effect preview on playful UI component gallery
Liquid hover effect preview on playful UI component gallery

About the resource

To use this component, just add your image to the single “Image” property. The liquid-style border interaction is applied directly to this image on hover, giving it a soft, wobbly motion that brings a playful and fluid touch to your UI.

About the resource

To use this component, just add your image to the single “Image” property. The liquid-style border interaction is applied directly to this image on hover, giving it a soft, wobbly motion that brings a playful and fluid touch to your UI.

About the resource

To use this component, just add your image to the single “Image” property. The liquid-style border interaction is applied directly to this image on hover, giving it a soft, wobbly motion that brings a playful and fluid touch to your UI.

Liquid image upload component with clear button in UI

The only property of the liquid hover interaction component.

Liquid image upload component with clear button in UI

The only property of the liquid hover interaction component.

Liquid image upload component with clear button in UI

The only property of the liquid hover interaction component.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Nandi portrait's background
Nandi's portrait

More resources

More resources

View all

  • Tech-themed pricing card UI with monthly plan selected

    Docking Pricing Plans Interaction in Framer

    Component

    Tech-themed pricing card UI with monthly plan selected

    Docking Pricing Plans Interaction in Framer

    Component

    Tech-themed pricing card UI with monthly plan selected

    Docking Pricing Plans Interaction in Framer

    Component

  • Framer crosshair component preview with interactive cursor tracking

    Crosshair Component for Framer

    Component

    Framer crosshair component preview with interactive cursor tracking

    Crosshair Component for Framer

    Component

    Framer crosshair component preview with interactive cursor tracking

    Crosshair Component for Framer

    Component