Interactive Fluid Background

An advanced WebGL background shader built with react-three-fiber that simulates swirling liquid metal or colorful smoke. It calculates velocity from mouse movements to create beautiful interactive trails.

Live Preview

Installation

Props

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { InteractiveFluid } from "@/components/creative/interactive-fluid";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { InteractiveFluid } from "@/components/creative/interactive-fluid";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <InteractiveFluid
        color1="example"
        color2="example"
      />
    </div>
  );
}