DEV Community

Cover image for A great css input and textarea input effect

Posted on

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.

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.


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 can make your text input box more compelling

Online demo



npm install --save power-mode-input


import PowerModeInput from "power-mode-input";

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

// close PowerModeInput

// destroy PowerModeInput

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


You can use it like this in vue.js

mounted() {

Of course this can be done in angular

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

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

Top comments (5)

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!

lindelof profile image

Thank you very much and hope you like

selbekk profile image

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

moopet profile image
Ben Sinclair

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

nterpriseceo profile image
Alex Nuzum

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