https://github.com/enumura1/liquidui-animation
liquidui-animation Component makes it easy to create a shaking UI in React application.
https://github.com/enumura1/liquidui-animation
animation npm-package react typescript ui
Last synced: about 1 year ago
JSON representation
liquidui-animation Component makes it easy to create a shaking UI in React application.
- Host: GitHub
- URL: https://github.com/enumura1/liquidui-animation
- Owner: enumura1
- License: mit
- Created: 2024-05-05T11:48:57.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-20T10:35:05.000Z (almost 2 years ago)
- Last Synced: 2025-04-21T18:42:33.768Z (about 1 year ago)
- Topics: animation, npm-package, react, typescript, ui
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@enumura/liquidui-animation
- Size: 15.6 MB
- Stars: 26
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# liquidui-animation
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.
[](https://github.com/enumura1/react-component-liquidUI/issues)
[](https://github.com/enumura1/react-component-liquidUI/network/members)
[](https://github.com/enumura1/react-component-liquidUI/stargazers)
[](https://github.com/enumura1/react-component-liquidUI/)
[](https://github.com/enumura1/react-component-liquidUI/)
[](https://github.com/enumura1/react-component-liquidUI/actions/workflows/main.yml)
[](https://open.vscode.dev/｛enumura1｝/{react-component-liquidUI})
# Demo
sample source
```tsx
import LiquidUI from "@enumura/liquidui-animation";
const App = () => {
return (
);
};
export default App;
```
# 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.
```tsx
import LiquidUI from "@enumura/liquidui-animation";
const App = () => {
return (
);
};
```
## 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.
```tsx
import LiquidUI from "@enumura/liquidui-animation";
const App = () => {
return (
<>
>
);
};
```
## 3. Example of displaying image
This is a sample of liquid UI including images.
Specify the path of the image for the `bgImg` property.
```tsx
import LiquidUI from "@enumura/liquidui-animation";
const App = () => {
return (
);
};
```
## 4. Example with blur
This is a sample of liquid UI with blurring.
Increasing the value of the `blurIntensity` property increases the blur intensity.
```tsx
import LiquidUI from "@enumura/liquidui-animation";
const App = () => {
return (
);
};
```
## 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 (
);
};
```
# Properties
| Property | Type | Description |
| ---------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| **figureShape** | string | Specifies the shape of the UI. Supported values are 'circle' and 'square'. |
| **size** | string, object | Specifies the size of the UI. Specify 'small', 'middle', or 'large' as a string, or specify an object in the form {width: 'XXXpx', height: '○○○px'}. |
| **bgColor** | string | Specifies the background color of the UI. Specify CSS color names, color codes, gradients, etc. |
| **bgImg** | string | Specifies the background image of the UI. should be a valid path to an image file located in the 'public/assets' directory. |
| **liquidDuration** | number | Specifies the background color of the UI; can be a CSS color code or a gradient. |
| **liquidDuration** | number | Specifies the time in milliseconds that a set of animations assigned to the UI will run. |
| **animationIntensity** | string | Specifies the animation intensity. Supported values are 'small', 'middle', and 'strong'. |
| **rotateDuration** | number | Specifies the time in milliseconds per rotation when the UI rotates. |
| **blurIntensity** | number | Specifies the intensity of the blur applied to the UI; a value greater than 0 will blur the UI. |
# Contributors
- [enumura1](https://github.com/enumura1)
# Tags
`react` `UI` `Animation`
# License
MIT license. See the [LICENSE file](/LICENSE) for details.