https://github.com/gin-melodic/luma-fluid-lib

A library for creating fluid animations like Luma website.
https://github.com/gin-melodic/luma-fluid-lib

Last synced: 2 months ago
JSON representation

A library for creating fluid animations like Luma website.

• Host: GitHub
• URL: https://github.com/gin-melodic/luma-fluid-lib
• Owner: gin-melodic
• License: mit
• Created: 2024-01-29T05:57:10.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-02-02T13:52:47.000Z (11 months ago)
• Last Synced: 2024-10-29T00:50:53.357Z (2 months ago)
• Language: TypeScript
• Homepage: https://luma-fluid-demo.vercel.app/
• Size: 1.35 MB
• Stars: 9
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# luma-fluid-lib

A library for creating fluid animations like [Luma](https://lumalabs.ai/) website.

  [![NPM Version][npm-version-image]][npm-url]

  [![NPM Install Size][npm-install-size-image]][npm-install-size-url]

![demonstration effect](https://s2.loli.net/2024/01/29/ABDft7cOkd5C48M.webp)

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

## Integrate

```shell

$ npm install luma-fluid-lib

```

## Usage

```tsx

// 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,

}

 console.error(error)}

/>

```

Or use local image path.

```tsx

 console.error(error)}

/>

```

[npm-install-size-image]: https://badgen.net/packagephobia/install/luma-fluid-lib

[npm-install-size-url]: https://packagephobia.com/result?p=luma-fluid-lib

[npm-url]: https://npmjs.org/package/luma-fluid-lib

[npm-version-image]: https://badgen.net/npm/v/luma-fluid-lib