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
});

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

Comments

[Alex Nuzum]

This is the most retarded thing I have ever seen but I love it.

[Ben Sinclair]

I think power mode came from Code in the Dark originally.

[selbekk]

Very nice! Would love to read about how you made it, too!

[Allan N Jeremy]

This is really cool! I'll be using it tor sure. Adding this to one of my vue projects today evening.

Also, big thanks for introducing me to vscode power mode. This is some legit cool stuff I didn't know existed. Now there's no excuse to be bored coding :)

Again. Good stuff and thanks!

[lindelof]

Thank you very much and hope you like