loading...
Cover image for A great css input and textarea input effect

A great css input and textarea input effect

lindelof profile image lindelof ・2 min read

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

Alt Text

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.

img

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


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

Discussion

pic
Editor guide
Collapse
allanjeremy profile image
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!

Collapse
lindelof profile image
lindelof Author

Thank you very much and hope you like

Collapse
selbekk profile image
selbekk

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

Collapse
moopet profile image
Ben Sinclair

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

Collapse
nterpriseceo profile image
Alex Nuzum

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