A great css input and textarea input effect

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

One day, a good friend of mine recommended me a Visual Studio Code plugin called Power Mode. At first I didn't care, but later I accidentally installed it. Oh its effect is probably like this.

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

PowerModeInput can make your text input box more compelling

Online demo

• demo https://codesandbox.io/s/power-mode-input-y39l6

Useage

Install

npm install --save power-mode-input

Usage

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

componentDidMount(){
  PowerModeInput.make(this.inputRef.current);
}

You can use it like this in vue.js

mounted() {
  PowerModeInput.make(this.$refs.inputRef);
}

Of course this can be done in angular

const inputElement = this.elementRef.nativeElement.querySelector('input');
PowerModeInput.make(inputElement);

Parameter Description

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

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. 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