luma-fluid-lib

A library for creating fluid animations like Luma website.

Demo site: https://luma-fluid-demo.vercel.app/

Integrate

$ npm install luma-fluid-lib

Usage

// A configuration dictionary for controlling shader parameters
const settings: IFluidSettings = {
  version: 1,
  paused: false,
  fluidPhysicsScale: 20,
  timestepMultiplier: 1,
  surfaceDecayFactor: 2,
  motionDecayFactor: 0,
  dragCoefficient: 0.8,
  dragSpeed: 1,
  periodicBoundary: true,
  backgroundMultiplier: 1,
  refraction: 0.21,
  chromaticAberration: 0.15,
  innerDarkening: 0.1,
  bevelCurveRadius: 5,
  gradientBackground: 0.5,
  gamma: 5.1,
  fluidIterations: 8,
  fluidScale: 1.5,
  simulationScale: 0.25,
  powerOf2Fluid: true,
}

<XFluid
    logoSrc='https://s2.loli.net/2024/01/29/mRrH5IQYucl4GCp.png'
    textureSrc='https://s2.loli.net/2024/01/29/rg3meSMxcUsRCao.jpg'
    width={1300} height={800}
    settings={settings}
    onError={(error: Error) => console.error(error)}
/>

Or use local image path.

<XFluid
    logoSrc={LogoImage}
    textureSrc={TextureImage}
    width={1300} height={800}
    onError={(error: Error) => console.error(error)}
/>