React library for creating UI with shaking animation
Tags: opensource, uianimation, typescript, webdev
Published: 2024-06-01 04:16:07

	
I created OSS for the first time.　　
[liquidui-animation](https://github.com/enumura1/liquidui-animation) is a library aimed at making it easy to create a UI that shakes with Raect.

# liquidui-animation

<!-- # Short Description -->

This liquidui-animation Component makes it easy to create a shaking UI React application.  
With the liquidui-animation Component, you can implement UI elements with Liquid-like shaking animation in a short time.

- repository：https://github.com/enumura1/liquidui-animation

# Demo

<div style="text-align: center;">
  <img src="https://raw.githubusercontent.com/enumura1/LiquidUIMotionDocs/main/renderSample.gif" style="width: 80%;" alt="sample-image-gif">
</div>

<br>

# Advantages

- **Customizability**：The liquidui-animation Component allows customization of various parameters such as shape, size, and animation intensity.

# Installation

```

npm i @enumura/liquidui-animation

```

# Example

## 1. Example of rotation

This is a sample of a rotating liquid UI.  
Decreasing the value of the `rotateDuration` property speeds up the rotation and increasing the value slows it down.

<div style="text-align: center;">
  <img src="https://raw.githubusercontent.com/enumura1/LiquidUIMotionDocs/main/rotationUI.gif" style="width: 70%;" alt="sample-image-gif">
</div>

<br>

```tsx
import LiquidUI from "@enumura/liquidui-animation";

const App = () => {
  return (
    <LiquidUI
      figureShape={"circle"}
      size={"middle"}
      bgColor={"linear-gradient(90deg, #C3F1FF, #0072ff)"}
      animationIntensity={"strong"}
      liquidDuration={12}
      rotateDuration={10}
    ></LiquidUI>
  );
};
```

## 2. Example of animation speed adjustment

This is an example of adjusting the `liquidDuration` property to change how fast the UI moves.
Lowering the value makes the UI move faster, and raising the value makes the UI move slower.

<div style="text-align: center;">
  <img src="https://raw.githubusercontent.com/enumura1/LiquidUIMotionDocs/main/LiquidDuration_.gif" style="width: 70%;" alt="sample-image-gif">
</div>

```tsx
import LiquidUI from "@enumura/liquidui-animation";

const App = () => {
  return (
    <>
      <LiquidUI
        figureShape={"circle"}
        size={"middle"}
        bgColor={"blue"}
        animationIntensity={"strong"}
        liquidDuration={1}
        rotateDuration={30}
      ></LiquidUI>
    </>
  );
};
```

## 3. Example of displaying image

This is a sample of liquid UI including images.  
Specify the path of the image for the `bgImg` property.

<div style="text-align: center;">
  <img src="https://raw.githubusercontent.com/enumura1/LiquidUIMotionDocs/main/image.gif" style="width: 70%;" alt="sample-image-gif">
</div>

<br>

```tsx
import LiquidUI from "@enumura/liquidui-animation";

const App = () => {
  return (
    <LiquidUI
      figureShape={"circle"}
      size={"middle"}
      bgImg={"assets/sampleImg.webp"}
      animationIntensity={"strong"}
      liquidDuration={12}
      blurIntensity={0}
    ></LiquidUI>
  );
};
```

## 4. Example with blur

This is a sample of liquid UI with blurring.  
Increasing the value of the `blurIntensity` property increases the blur intensity.

<div style="text-align: center;">
  <img src="https://raw.githubusercontent.com/enumura1/LiquidUIMotionDocs/main/blurUI.gif" style="width: 70%;" alt="sample-image-gif">
</div>

<br>

```tsx
import LiquidUI from "@enumura/liquidui-animation";

const App = () => {
  return (
    <LiquidUI
      figureShape={"circle"}
      size={"middle"}
      bgColor={"#FFE2FF"}
      animationIntensity={"middle"}
      liquidDuration={10}
      blurIntensity={10}
    ></LiquidUI>
  );
};
```

## 5. Example of liquidui-animation component with custom size

This is an example of a case where you want to specify a custom UI size.  
Specify an arbitrary value for the `size` property in object format such as `{width: 'XXXpx', height: '○○○px'}`.

```tsx
import LiquidUI from "@enumura/liquidui-animation";

const App = () => {
  return (
    <LiquidUI
      figureShape={"circle"}
      size={{ width: "100px", height: "100px" }}
      bgImg={"assets/sampleImg.webp"}
      animationIntensity={"strong"}
      liquidDuration={12}
      blurIntensity={0}
    ></LiquidUI>
  );
};
```


Thank you for reading this article!
- repository：https://github.com/enumura1/liquidui-animation
- npm：https://www.npmjs.com/package/@enumura/liquidui-animation