A great css input and textarea input effect
Tags: javascript, css, react, webdev
Published: 2019-12-27 05:31:37

Do you like `Visual Studio Code` as much as I do? It is really great with it. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cno9gsq6komhqjoxbxb0.jpeg)

One day, a good friend of mine recommended me a Visual Studio Code plugin called [`Power Mode`](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode). At first I didn't care, but later I accidentally installed it. Oh its effect is probably like this.

![img](https://github.com/hoovercj/vscode-power-mode/raw/master/images/demo-presets-particles.gif)

See it, suddenly I found it really fun. I think this must be the work of some boring genius. So I wonder if I can use CSS to simulate this effect.

#### So PowerModeInput was born.

---

## PowerModeInput
[https://github.com/lindelof/power-mode-input](https://github.com/lindelof/power-mode-input)

> PowerModeInput can make your text input box more compelling

## Online demo
* demo [https://codesandbox.io/s/power-mode-input-y39l6](https://codesandbox.io/s/power-mode-input-y39l6)

![](https://github.com/lindelof/power-mode-input/blob/master/image/01.gif?raw=true)

---

## Useage

### Install

```bash
npm install --save power-mode-input
```

### Usage

```jsx
import PowerModeInput from "power-mode-input";

const input = document.getElementById("obinput");
PowerModeInput.make(input);

// close PowerModeInput
PowerModeInput.close(input);

// destroy PowerModeInput
PowerModeInput.destroy();

// another usage
PowerModeInput.make(".phone", {
  height: 5,
  tha: [0, 360],
  g: 0.5,
  num: 5,
  radius: 6,
  circle: true,
  alpha: [0.75, 0.1],
  color: "random"
});
```

#### If you are in `react`, you can use it like this
```jsx
componentDidMount(){
  PowerModeInput.make(this.inputRef.current);
}
```

#### You can use it like this in `vue.js`
```vue
mounted() {
  PowerModeInput.make(this.$refs.inputRef);
}
```

#### Of course this can be done in `angular`
```javascript
const inputElement = this.elementRef.nativeElement.querySelector('input');
PowerModeInput.make(inputElement);
```

### Parameter Description
```javascript
PowerModeInput.make(input, {
  height: 5,
  tha: [0, 360],
  g: 0.5,
  num: 5,
  ... // Parameter
});
```

key | describe |type | example
----|-----|-----|------
`g` | Whether to add gravity | number | `1`
`num` | The number of particles emitted each time | number | `3`
`radius` | The radius of every particle | number | `10`
`alpha` | The alpha of every particle | number | `.1`
`tha` | The Particle emitter angle | array | `[0, 360]`
`v` | The Particle emitter Particle velocity | number | `0.5`
`life` | The life of every particle | number | `1.2`
`color` | Particle color  | array or string | `#ffcccc`
`random` | Random force | number | `1.2`
`y` | Particle emitter height  | number | `2`
`height` | Particle emitter height Ibid  | number | `2`

---

## Develop process

Of course, the development process is not easy. At first I thought it was very easy to get the input box cursor. Well, I found out that I was wrong. I checked a lot of articles to find a good way. In the end, I had a hard time finishing it.


If you don’t dislike it, I also want to recommend another good library. [https://github.com/lindelof/react-mouse-particles](https://github.com/lindelof/react-mouse-particles). Because most of the code for power-mode-input comes from this.

I bet anyone can use it because it is very simple. If you like this project welcome star it