Liquid Frame

Liquid Frame adds a fluid, interactive water ripple effect to images using Three.js. It maintains aspect ratio, supports mouse interaction, and is styled with Tailwind CSS for a modern, magical UI touch.

Zenitsu from Demon Slayer

Installation

Follow the steps below to add the Liquid Frame Component to your project.

+

Run the following command in the terminal.  

npx shadcn add https://elixir-ui-xi.vercel.app/registry/liquid-frame.json

Usage

Follow the steps below to add the Liquid Frame Component to your project.

1

Import the component  

import LiquidFrame from "@/components/liquid-frame";
2

Add the component to your project  

<div className="w-full h-full">
    <LiquidFrame
        src="/elixir-ui.jpg"
        alt="elixir-ui"
        className="rounded-[5px] contrast-125 saturate-125 w-full h-full"
    />
</div>