loveui

Ether

An atmospheric background with fluid light ripples rendered in Three.js.

Customize
Adjust parameters and experiment with different palettes in real time.
20
100
0.50
0.50
2.20
3000ms
0.25
32
32
30

Installation

npx love-ui@latest add ether

Usage

import LiquidEther from "@/components/ether"
<LiquidEther
  colors={["#4338CA", "#7C3AED", "#EC4899"]}
  mouseForce={20}
  cursorSize={100}
/>

Props

colors

An array of hex color strings for the fluid gradient.

  • Type: string[]
  • Default: ["#4338CA", "#7C3AED", "#EC4899"]
<LiquidEther colors={["#1D4ED8", "#22D3EE", "#F59E0B"]} />

mouseForce

The strength of mouse interaction with the fluid.

  • Type: number
  • Default: 20
<LiquidEther mouseForce={30} />

cursorSize

The size of the cursor/mouse effect in pixels.

  • Type: number
  • Default: 100
<LiquidEther cursorSize={150} />

resolution

The rendering resolution quality (0.2-1). Higher values = better quality but lower performance.

  • Type: number
  • Default: 0.5
<LiquidEther resolution={0.8} />

autoDemo

Enable automatic animation without user interaction.

  • Type: boolean
  • Default: false
<LiquidEther autoDemo={true} />

autoSpeed

The speed of automatic animation (when autoDemo is enabled).

  • Type: number
  • Default: 0.5
<LiquidEther autoDemo={true} autoSpeed={1} />

autoIntensity

The intensity of automatic animation movements.

  • Type: number
  • Default: 2.2
<LiquidEther autoDemo={true} autoIntensity={3} />

autoResumeDelay

Delay in milliseconds before resuming auto animation after user interaction.

  • Type: number
  • Default: 3000
<LiquidEther autoDemo={true} autoResumeDelay={5000} />

takeoverDuration

Duration in seconds for transitioning from auto to user control.

  • Type: number
  • Default: 0.25
<LiquidEther autoDemo={true} takeoverDuration={0.5} />

isBounce

Enable bouncing behavior at edges.

  • Type: boolean
  • Default: false
<LiquidEther isBounce={true} />

isViscous

Enable viscous fluid physics.

  • Type: boolean
  • Default: false
<LiquidEther isViscous={true} />

iterationsPoisson

Number of pressure solver iterations for fluid physics accuracy.

  • Type: number
  • Default: 32
<LiquidEther iterationsPoisson={40} />

iterationsViscous

Number of viscosity solver iterations (when isViscous is enabled).

  • Type: number
  • Default: 32
<LiquidEther isViscous={true} iterationsViscous={40} />

viscous

Viscosity coefficient for fluid thickness (when isViscous is enabled).

  • Type: number
  • Default: 30
<LiquidEther isViscous={true} viscous={45} />

style

Additional CSS styles to apply to the canvas container.

  • Type: React.CSSProperties
<LiquidEther style={{ width: "100%", height: "100vh" }} />

className

Additional CSS classes to apply to the container.

  • Type: string
<LiquidEther className="rounded-lg" />